/*
Theme Name: Alléluia Theme
Theme URI: https://ditesalleluia.com
Author: Alléluia
Author URI: https://ditesalleluia.com
Description: Block theme personnalisé pour l'agence Alléluia
Version: 1.2.2
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
License: Proprietary
Text Domain: alleluia-theme
*/

/* ================================================
   ALLÉLUIA THEME — CSS Global
   Les styles de section (hero, équipe, clients, etc.)
   sont gérés en inline dans les fichiers patterns/*.php
   ================================================ */

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Images dans les blocs */
.wp-block-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Liens dans les patterns */
.portfolio-voir-plus a {
  font-family: var(--wp--preset--font-family--barlow);
  font-size: 1.25rem;
  text-decoration: underline;
  color: var(--wp--preset--color--marin);
}

/* Photos equipe — supprimer le float alignleft (photo et texte dans la même colonne) */
.section-equipe .equipe-photo {
  float: none !important;
  clear: both !important;
  display: block !important;
  margin-bottom: 1rem !important;
}
.equipe-photo img {
  width: 100%;
  height: auto;
  display: block;
}

/* Logos clients */
.client-logo img {
  width: 100%;
  max-width: 110px;
  height: auto;
}

/* Blog — Carte */
.blog-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.blog-card .wp-block-post-featured-image img {
  transition: transform 0.3s ease;
}

.blog-card:hover .wp-block-post-featured-image img {
  transform: scale(1.02);
}

/* Blog — Article single */
.post-meta {
  border-bottom: 1px solid var(--wp--preset--color--bleu-pale);
  padding-bottom: 1.5rem;
  margin-bottom: 2.5rem;
}

/* Accents de couleur secondaires */
.accent-sarcelle { color: var(--wp--preset--color--sarcelle); }
.accent-rose     { color: var(--wp--preset--color--rose); }
.bg-bleu-pale    { background-color: var(--wp--preset--color--bleu-pale); }
.bg-rose-pale    { background-color: var(--wp--preset--color--rose-pale); }


/* Section equipe : Une grande idee + collaborateurs sur 66% */
.section-equipe > .wp-block-group:last-child > h2,
.section-equipe > .wp-block-group:last-child > h5 {
  max-width: 66%;
}


/* Header sticky */
header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Compenser l'admin bar WP quand connecté */
.admin-bar header.wp-block-template-part {
  top: 32px;
}

/* Nav links couleur bleu-pale */
.site-header .wp-block-navigation a {
  color: var(--wp--preset--color--bleu-pale) !important;
  text-decoration: none;
}

.site-header .wp-block-navigation a:hover {
  color: #4ea19e !important;
  opacity: 1;
}

/* Nav : forcer Merriweather et ajuster le letter-spacing */
.site-header .wp-block-navigation,
.site-header .wp-block-navigation a,
.site-header .wp-block-navigation .wp-block-navigation-item {
  font-family: var(--wp--preset--font-family--merriweather) !important;
  letter-spacing: 1px !important;
  font-weight: 400 !important;
}

/* Nav : espacement entre les liens (padding comme sur l'original) */
.site-header .wp-block-navigation .wp-block-navigation-item a {
  padding-left: 0.65rem;
  padding-right: 0.65rem;
}

/* LinkedIn icon : taille plus grande pour matcher l'original */
.site-header .wp-block-social-links {
  --wp--custom--social-links--size: 36px;
}

.site-header .wp-block-social-link {
  width: 36px;
  height: 36px;
}

.site-header .wp-block-social-link a {
  padding: 6px !important;
}

.site-header .wp-block-social-link svg {
  width: 24px;
  height: 24px;
}

/* =============================================
   Section articles — design en cartes
   ============================================= */

/* Cartes : ombre et border-radius */
.section-articles .article-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 35, 70, 0.08);
  transition: background 0.3s ease;
  height: 100%;
}

.section-articles .article-card:hover {
  background: var(--wp--preset--color--bleu-pale);
}

/* Image en haut de la carte */
.section-articles .article-card .wp-block-post-featured-image {
  margin: 0;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
}

.section-articles .article-card .wp-block-post-featured-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  transition: transform 0.3s ease;
}


/* Contenu de la carte */
.section-articles .article-card-content {
  flex-grow: 1;
}

/* Titre */
.section-articles .wp-block-post-title a {
  color: var(--wp--preset--color--marin) !important;
  text-decoration: none;
}

.section-articles .wp-block-post-title {
  font-family: var(--wp--preset--font-family--merriweather) !important;
}

/* Extrait limité à 4 lignes */
.section-articles .article-excerpt,
.section-articles .wp-block-post-excerpt__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--wp--preset--color--marin);
  opacity: 0.75;
}

/* Masquer le "Lire la suite" généré par WP */
.section-articles .wp-block-post-excerpt__more-link {
  display: inline;
  margin-top: 0;
  color: var(--wp--preset--color--marin) !important;
  text-decoration: underline !important;
  font-size: 0.9rem;
  font-weight: 500;
}

/* Métadonnées en bas de la carte */
.section-articles .article-meta {
  margin-top: auto !important;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0, 35, 70, 0.1);
}

.section-articles .article-meta a {
  color: var(--wp--preset--color--sarcelle) !important;
  text-decoration: none;
}

/* Responsive : 1 colonne sur mobile, 2 sur tablette */
/* ===== RESPONSIVE MOBILE (max-width: 768px) ===== */
@media (max-width: 768px) {

  :root {
    --wp--preset--spacing--site-margin: clamp(1rem, 4.5vw, 67.5px);
    --site-margin: clamp(1rem, 4.5vw, 67.5px);
  }

  /* Navigation — réduire la taille */
  .wp-block-navigation .wp-block-navigation-item a {
    font-size: 0.8rem !important;
    padding: 0.3rem 0.5rem !important;
  }

  /* Sous-titre hero */
  .wp-block-group.alignfull > p {
    font-size: 1rem !important;
  }

  /* Sections — réduire les paddings */
  .section-portfolio,
  .section-equipe,
  .section-articles,
  .section-clients,
  .section-contact {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    padding-left: var(--wp--preset--spacing--site-margin) !important;
    padding-right: var(--wp--preset--spacing--site-margin) !important;
  }

  /* Portfolio — mobile : CSS Grid (contourne le flex layout WordPress) */
  .section-portfolio {
    padding-left: var(--wp--preset--spacing--site-margin) !important;
    padding-right: var(--wp--preset--spacing--site-margin) !important;
  }
  .section-portfolio > .wp-block-heading,
  .section-portfolio .portfolio-voir-plus {
    margin-bottom: 1rem !important;
  }
  .section-portfolio .wp-block-columns {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    gap: 0 !important;
    margin-bottom: 2.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .section-portfolio .wp-block-columns > .wp-block-column {
    flex-basis: unset !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    grid-column: 1 !important;
  }
  /* Image : toujours en ligne 1, plein bord */
  .section-portfolio .wp-block-column:has(.wp-block-image) {
    grid-row: 1 !important;
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Texte : toujours en ligne 2, indenté */
  .section-portfolio .wp-block-column:not(:has(.wp-block-image)) {
    grid-row: 2 !important;
    padding: 1rem 0 0 0 !important;
  }
  /* Image plein bord */
  .section-portfolio .wp-block-image,
  .section-portfolio .wp-block-image img {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0 !important;
  }
  /* Portfolio mobile — supprimer le gap WordPress entre h2 et les colonnes */
  .section-portfolio.is-layout-flow > .wp-block-columns {
    margin-block-start: 0 !important;
    margin-top: 1rem !important;
  }
  /* Portfolio mobile — réduire l'espace vertical */
  .section-portfolio {
    padding-top: 2rem !important;
  }
  .section-portfolio > .wp-block-heading {
    margin-bottom: 0.5rem !important;
  }
  /* Annuler le blockGap WP entre tous les enfants directs */
  .section-portfolio.is-layout-flow > * + * {
    margin-block-start: 0 !important;
  }

  /* Portfolio — titres et descriptions */
  .section-portfolio h2 {
    font-size: 2rem !important;
  }
  .section-portfolio h3 {
    font-size: 1.1rem !important;
    margin-top: 0.75rem !important;
  }

  /* Équipe — colonnes empilées */
  .section-equipe .wp-block-columns {
    flex-direction: column !important;
    flex-wrap: wrap !important;
  }
  .section-equipe .wp-block-columns > .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }

  /* Équipe — titres */
  .section-equipe h2 {
    font-size: 2rem !important;
  }
  .section-equipe h3 {
    margin-top: 0.75rem !important;
  }
  .section-equipe h5 {
    font-size: 1.2rem !important;
  }

  /* Réduire l'écart entre le bloc Sylvain et la ligne « Une grande idée n'a pas
     besoin d'une grande agence. » : on supprime le spacer qui les sépare et on
     laisse une marge modérée au-dessus de la tagline. */
  .section-equipe > .wp-block-spacer:has(+ .wp-block-group) {
    height: 0 !important;
    margin: 0 !important;
  }
  .section-equipe > .wp-block-group {
    margin-top: 32px !important;
  }

  /* Articles — grille en 1 colonne sur mobile */
  .section-articles .wp-block-post-template,
  .section-blog-featured .wp-block-post-template {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  .section-articles h2 {
    font-size: 2rem !important;
  }

  /* Section clients */
  .section-clients h2 {
    font-size: 2rem !important;
  }

  /* Section grande citation */
  h1.wp-block-heading,
  h2.wp-block-heading {
    font-size: clamp(1.5rem, 6vw, 2.5rem) !important;
  }

  /* Contact */
  .section-contact h2 {
    font-size: 2rem !important;
  }
}

/* ===== RESPONSIVE TABLETTE (769px - 1024px) ===== */
@media (min-width: 769px) and (max-width: 1024px) {

  /* Hero — taille intermédiaire (mêmes règles que mobile) */
  .section-hero .hero-tagline {
    font-size: 60px !important;
    line-height: 1.1 !important;
  }
  .section-hero .hero-subtitle {
    font-size: 1.7rem !important;
  }

  /* Sections — paddings ajustés */
  .section-portfolio,
  .section-equipe,
  .section-articles,
  .section-clients,
  .section-contact {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }

  /* Articles — grille 2 colonnes sur tablette */
  .section-articles .wp-block-post-template,
  .section-blog-featured .wp-block-post-template {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Grande citation */
  h1.wp-block-heading,
  h2.wp-block-heading {
    font-size: clamp(2rem, 5vw, 3rem) !important;
  }
}

/* Section articles — animation plus rapide, angles droits */
.section-articles .article-card {
  border-radius: 0 !important;
  transition: background 0.15s ease !important;
}
.section-articles .article-card .wp-block-post-featured-image {
  border-radius: 0 !important;
}

/* Section articles — retirer le hover sur les titres */
.section-articles .wp-block-post-title a:hover {
  color: var(--wp--preset--color--marin) !important;
}

/* Carte article entièrement cliquable */
.section-articles .article-card {
  position: relative;
  cursor: pointer;
}
.section-articles .wp-block-post-title a {
  position: static !important;
}
.section-articles .wp-block-post-title a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.section-articles .article-card .wp-block-post-excerpt__more-link,
.section-articles .article-card .article-meta a {
  position: relative;
  z-index: 2;
}
/* Portfolio et équipe — titres alignés en haut de l'image */
.section-portfolio .portfolio-item h3,
.section-portfolio .portfolio-item .wp-block-heading,
.section-equipe .wp-block-column h3,
.section-equipe .wp-block-column .wp-block-heading:first-child {
  margin-top: 0 !important;
}

/* ===== PAGES RÉALISATIONS ET PROJETS ===== */

/* Page Réalisations - grille portfolio */
.section-realisations {
  min-height: 100vh;
}
.section-realisations h1,
.section-realisations h2 {
  font-family: var(--wp--preset--font-family--merriweather), Merriweather, serif !important;
  font-size: clamp(2.5rem, 5vw, 4.5rem) !important;
  font-weight: 400 !important;
  margin-bottom: 3rem !important;
}
.section-realisations .wp-block-columns {
  margin-bottom: 2rem !important;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.section-realisations .wp-block-columns:hover {
  transform: translateX(8px);
}
.section-realisations .wp-block-image img {
  border-radius: 4px;
  transition: transform 0.4s ease, filter 0.4s ease;
}
.section-realisations .wp-block-image:hover img {
  transform: scale(1.02);
  filter: brightness(1.1);
}
.section-realisations h3 {
  font-family: var(--wp--preset--font-family--merriweather), Merriweather, serif !important;
  font-size: clamp(1.2rem, 2vw, 1.8rem) !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  margin-top: 0 !important;
}
.section-realisations h3 a {
  color: #ffffff !important;
  text-decoration: none !important;
  transition: color 0.3s ease;
}
.section-realisations h3 a:hover {
  color: #d6eef0 !important;
}

/* Pages projets individuels */
.page-template-default .wp-site-blocks {
  /* Ne pas forcer le bg ici, géré par les blocks */
}
body.page .entry-content .project-hero {
  background-color: #002346 !important;
  padding: 80px 60px 60px !important;
}
body.page .entry-content .project-hero h1 {
  font-family: var(--wp--preset--font-family--merriweather), Merriweather, serif !important;
  font-size: clamp(2.5rem, 6vw, 4.5rem) !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  line-height: 1.15 !important;
  max-width: 900px;
}
body.page .entry-content .project-content {
  background-color: #ffffff !important;
  padding: 60px !important;
  max-width: 1200px;
  margin: 0 auto;
}
body.page .entry-content .project-content h2 {
  font-family: var(--wp--preset--font-family--merriweather), Merriweather, serif !important;
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
  font-weight: 400 !important;
  color: #002346 !important;
  margin-top: 2.5rem !important;
  margin-bottom: 1rem !important;
}
body.page .entry-content .project-content h2:first-child {
  margin-top: 0 !important;
}
body.page .entry-content .project-content p {
  font-family: var(--wp--preset--font-family--barlow), Barlow, sans-serif !important;
  font-size: 1.15rem !important;
  line-height: 1.7 !important;
  color: #002346 !important;
  max-width: 750px;
}
body.page .entry-content .project-content .wp-block-gallery {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}
body.page .entry-content .project-content .wp-block-gallery img {
  border-radius: 4px;
  transition: transform 0.3s ease;
}
body.page .entry-content .project-content .wp-block-gallery img:hover {
  transform: scale(1.03);
}
body.page .entry-content .project-content .wp-block-video video {
  border-radius: 4px;
  width: 100%;
  max-width: 900px;
}
body.page .entry-content .project-content .wp-block-audio {
  max-width: 600px;
  margin: 1.5rem 0;
}
body.page .entry-content .project-cta {
  background-color: #002346 !important;
  padding: 80px 60px !important;
  text-align: center;
}
body.page .entry-content .project-cta h3 {
  font-family: var(--wp--preset--font-family--merriweather), Merriweather, serif !important;
  font-size: clamp(1.5rem, 3vw, 2.25rem) !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  max-width: 800px;
  margin: 0 auto 2rem !important;
  line-height: 1.4 !important;
}
body.page .entry-content .project-cta a {
  display: inline-block;
  padding: 14px 40px;
  border: 2px solid #ffffff;
  color: #ffffff !important;
  text-decoration: none !important;
  font-family: var(--wp--preset--font-family--barlow), Barlow, sans-serif;
  font-size: 0.85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: all 0.3s ease;
}
body.page .entry-content .project-cta a:hover {
  background-color: #ffffff;
  color: #002346 !important;
}

/* Back link style */
.project-back-link a {
  color: #002346 !important;
  font-size: 0.85rem !important;
  text-decoration: none !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: var(--wp--preset--font-family--barlow), Barlow, sans-serif;
  transition: opacity 0.4s cubic-bezier(0.25, 0.1, 0.25, 1), height 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.project-back-link a:hover {
  opacity: 0.7;
}
.project-back-link a::before {
  content: "\2190";
  font-size: 1.2rem;
}

/* ===== RESPONSIVE PORTFOLIO ===== */
@media (max-width: 768px) {
  .section-realisations {
    padding: 40px 20px !important;
  }
  .section-realisations .wp-block-columns {
    flex-direction: column !important;
  }
  .section-realisations .wp-block-column {
    flex-basis: 100% !important;
  }
  .section-realisations h3 {
    margin-top: 0.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  body.page .entry-content .project-hero {
    padding: 40px 20px 30px !important;
  }
  body.page .entry-content .project-content {
    padding: 30px 20px !important;
  }
  body.page .entry-content .project-cta {
    padding: 40px 20px !important;
  }
}

/* ===== SMOOTH SCROLLING ===== */
html {
  scroll-behavior: smooth;
}

/* ===== LOGOS GRID FIX ===== */
.clients-logos-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: 2.5rem !important;
  align-items: center !important;
}
.client-logo {
  width: 110px !important;
  height: auto !important;
  flex-shrink: 0 !important;
}
.client-logo img {
  width: 110px !important;
  height: auto !important;
  object-fit: contain !important;
  opacity: 0.7 !important;
  transition: opacity 0.3s ease !important;
}
.client-logo:hover img {
  opacity: 1 !important;
}


/* ===== HEADER AUTO-HIDE ON SCROLL ===== */
.wp-block-template-part:has(.site-header) {
  transition: transform 0.35s ease;
  will-change: transform;
}
.wp-block-template-part:has(.site-header).header-hidden {
  transform: translateY(-100%);
}

/*
 * Fix ligne blanche — contre-transform ::after (actif uniquement pendant le retour)
 *
 * Problème : pendant l'animation de retour du header, le layout gap (y=0 → hauteur
 * header) révèle .wp-site-blocks { background: blanc } → ligne blanche visible.
 *
 * Solution : un ::after couvre ce gap avec du marin via un contre-transform exact.
 *   - Par défaut          : visibility: hidden  → aucun effet visuel au scroll bas.
 *   - .header-hidden      : transform: translateY(100%) prépositionné (toujours caché).
 *   - .header-returning   : visibility: visible + transition identique au parent.
 *
 * Au déclenchement du retour, JS ajoute .header-returning et retire .header-hidden
 * dans le même tick → la transition CSS démarre de translateY(100%) vers translateY(0),
 * synchronisée avec le parent (0.35s ease). L'::after reste ancré à y=0→hauteur
 * tout au long de l'animation, sans jamais être visible au scroll vers le bas.
 *
 * Preuve : parent translateY(X) + ::after translateY(-X dans coord. parent) = 0 doc.
 */
.wp-block-template-part:has(.site-header)::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--wp--preset--color--marin);
  transform: translateY(0);
  transition: transform 0.35s ease;
  pointer-events: none;
  visibility: hidden;
  z-index: -1;
}

/* Prépare le counter-transform quand le header est caché (reste invisible) */
.wp-block-template-part:has(.site-header).header-hidden::after {
  transform: translateY(100%);
}

/* Activé uniquement pendant l'animation de retour (class gérée par JS) */
.wp-block-template-part:has(.site-header).header-returning::after {
  visibility: visible;
}


/* ===== FIX: Supprimer l'espace entre le header et le hero ===== */
header.wp-block-template-part + .entry-content,
header.wp-block-template-part + main,
header.wp-block-template-part + .wp-block-post-content {
  margin-top: 0 !important;
}

/* ===== Zoom hover — images portfolio (home + réalisations) ===== */
.section-portfolio figure.wp-block-image,
.page-id-126 figure.wp-block-image {
  overflow: hidden;
}

.section-portfolio figure.wp-block-image img,
.page-id-126 figure.wp-block-image img {
  transition: transform 0.3s ease-in-out;
}

.section-portfolio figure.wp-block-image a:hover img,
.page-id-126 figure.wp-block-image a:hover img {
  transform: scale(1.10);
}

/* ===== FOOTER ===== */
.site-footer .wp-block-group.alignwide {
  display: flex !important;
  justify-content: flex-end !important;
}
.site-footer .footer-sigle img {
  width: 50px !important;
  height: 50px !important;
}

/* Menu du footer en mobile : les colonnes de liens s'empilent. Le bloc colonnes a
   un gap:0, donc l'écart entre deux colonnes empilées (ex. Services→Formations,
   Contact→English) était de 0 alors que l'écart entre liens d'une même colonne est
   de 5px → espacement inégal. On aligne l'écart entre colonnes empilées sur 5px. */
@media (max-width: 781px) {
  .site-footer .wp-block-column .wp-block-columns {
    row-gap: 5px !important;
  }
}

/* Contact (page 1060, FR + EN via Polylang) en mobile : dans le bloc Sylvain, mettre
   le TEXTE au-dessus de la PHOTO (comme le bloc David). On réordonne les colonnes
   empilées et on masque la colonne vide servant à l'alignement desktop. */
@media (max-width: 768px) {
  .page-id-1060 .equipe-sylvain {
    display: flex !important;
    flex-direction: column !important;
  }
  .page-id-1060 .equipe-sylvain .wp-block-column:has(h2) {
    order: 1 !important;
  }
  .page-id-1060 .equipe-sylvain .wp-block-column:has(.equipe-photo) {
    order: 2 !important;
  }
  .page-id-1060 .equipe-sylvain .wp-block-column:not(:has(.equipe-photo)):not(:has(h2)) {
    display: none !important;
  }
}


/* Contact (FR 1060 / EN 125) en mobile : le bloc David a son titre et ses
   paragraphes alignés à droite (has-text-align-right, pour le layout
   desktop où le texte est à droite de la photo). On aligne à gauche en
   mobile, comme le bloc Sylvain.
   Le numéro de téléphone est injecté en JS par Email Encoder (shortcode
   [eeb_protect_content]) sous forme d'un <a href="tel:…"> avec un style
   inline « display:block; text-align:right » — il n'a donc PAS la classe
   has-text-align-right. On le cible via a[href^="tel:"] (l'href est en clair
   dans le DOM après injection JS) avec !important pour battre le style inline. */
@media (max-width: 768px) {
  .page-id-1060 .equipe-david .has-text-align-right,
  .page-id-125 .equipe-david .has-text-align-right,
  .page-id-1060 .equipe-david a[href^="tel:"],
  .page-id-125 .equipe-david a[href^="tel:"] {
    text-align: left !important;
  }
}

/* ===== Single article page ===== */

/* Make post-content paragraphs match title width */
.single-post .wp-block-post-content > * {
  max-width: 100% !important;
}

/* Article en mobile : le titre et le texte collaient aux bords de l'écran.
   On applique la gouttière standard du site (même marge gauche que le « N » de
   « Nos articles ») au groupe qui contient titre + contenu + méta.                */
@media (max-width: 768px) {
  .single-post main.wp-block-group.alignfull > .wp-block-group.alignwide {
    padding-left: var(--wp--preset--spacing--site-margin) !important;
    padding-right: var(--wp--preset--spacing--site-margin) !important;
    box-sizing: border-box !important;
  }
}

/* Article footer meta line */
.article-footer-meta {
  padding-top: 1.5rem !important;
  margin-top: 2rem !important;
  border-top: 1px solid rgba(0, 35, 70, 0.1) !important;
}
.article-footer-meta * {
  font-size: 0.85rem !important;
}

/* ===== "Lire aussi" related posts – same style as homepage cards ===== */

/* Card base */
.single .wp-block-query .article-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 35, 70, 0.08);
  transition: background 0.3s;
  height: 100%;
}
.single .wp-block-query .article-card:hover {
  background: var(--wp--preset--color--bleu-pale);
}

/* Card content */
.single .wp-block-query .article-card-content {
  flex-grow: 1;
}

/* Excerpt */
.single .wp-block-query .article-card .wp-block-post-excerpt__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--wp--preset--color--marin);
  opacity: 0.75;
}

/* Meta line */
.single .wp-block-query .article-meta {
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0, 35, 70, 0.1);
  margin-top: auto !important;
}

/* Title links */
.single .wp-block-query .article-card .wp-block-post-title a {
  text-decoration: none !important;
}
.single .wp-block-query .article-card .wp-block-post-title a:hover {
  color: var(--wp--preset--color--sarcelle) !important;
}

/* Post template grid gap */
.single .wp-block-post-template {
  gap: 1.5rem !important;
}

/* Carte cliquable entierement (stretched link) */
.single .wp-block-query .article-card {
  position: relative;
  cursor: pointer;
}
.single .wp-block-query .article-card .wp-block-post-title a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

/* ===== Page /articles/ (blog archive) ===== */

/* Card styles */
.blog .article-card,
.home .article-card,
.archive .article-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 35, 70, 0.08);
  transition: background 0.3s;
  height: 100%;
  position: relative;
  cursor: pointer;
}
.blog .article-card:hover,
.home .article-card:hover,
.archive .article-card:hover {
  background: var(--wp--preset--color--bleu-pale);
}

/* Stretched link */
.blog .article-card .wp-block-post-title a::after,
.home .article-card .wp-block-post-title a::after,
.archive .article-card .wp-block-post-title a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

/* Card content */
.blog .article-card-content,
.home .article-card-content,
.archive .article-card-content {
  flex-grow: 1;
}

/* Excerpt */
.blog .article-card .wp-block-post-excerpt__excerpt,
.home .article-card .wp-block-post-excerpt__excerpt,
.archive .article-card .wp-block-post-excerpt__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--wp--preset--color--marin);
  opacity: 0.75;
}

/* Meta line */
.blog .article-meta,
.home .article-meta,
.archive .article-meta {
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0, 35, 70, 0.1);
  margin-top: auto !important;
}

/* Title links */
.blog .article-card .wp-block-post-title a,
.home .article-card .wp-block-post-title a,
.archive .article-card .wp-block-post-title a {
  text-decoration: none !important;
}
.blog .article-card .wp-block-post-title a:hover,
.home .article-card .wp-block-post-title a:hover,
.archive .article-card .wp-block-post-title a:hover {
  color: var(--wp--preset--color--sarcelle) !important;
}


/* ================================================
   PORTFOLIO SINGLE — page projet individuel
   ================================================ */

/* Masquer le titre dupliqué */
.single-portfolio .wp-block-post-title {
  display: none !important;
}

/* Hero cover pleine largeur */
.single-portfolio .wp-block-cover.alignfull {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
}

/* Cover hauteur et positionnement */
.single-portfolio .wp-block-cover {
  min-height: 90vh !important;
}

.single-portfolio .wp-block-cover__inner-container {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  min-height: 90vh;
  padding: 3rem !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

.single-portfolio .wp-block-cover__inner-container h1 {
  text-align: left !important;
  font-size: 70px !important;
  font-weight: 400 !important;
}

/* Titres de section */
.single-portfolio .entry-content h3,
.single-portfolio .entry-content h4 {
  font-family: var(--wp--preset--font-family--merriweather) !important;
  font-size: 32px !important;
  font-weight: 400 !important;
  color: #002346 !important;
}

/* Paragraphes */
.single-portfolio .entry-content p {
  font-size: 20px !important;
  line-height: 1.6 !important;
  color: #002346 !important;
}

/* Images et colonnes */
.single-portfolio .wp-block-image.alignwide,
.single-portfolio .wp-block-columns.alignwide {
  width: 100%;
  max-width: 1200px;
}

/* ================================================
   FOOTER - DITES ALLELUIA
   Correction alignement dans container 1200px
   ================================================ */
footer.wp-block-template-part > .wp-block-group.is-content-justification-left > .wp-block-heading,
footer.wp-block-template-part > .wp-block-group.is-content-justification-left > .wp-block-buttons,
div.wp-block-template-part > .wp-block-group.is-content-justification-left > .wp-block-heading,
div.wp-block-template-part > .wp-block-group.is-content-justification-left > .wp-block-buttons {
  margin-left: var(--wp--preset--spacing--site-margin) !important;
  margin-right: auto !important;
}

footer.wp-block-template-part > .wp-block-group.is-content-justification-left > .wp-block-heading,
div.wp-block-template-part > .wp-block-group.is-content-justification-left > .wp-block-heading {
  max-width: 600px;
}

/* Bouton CTA « Dites Alléluia » / « Say Alléluia » (bloc 1171/1641, lien mailto
   info@ditesalleluia.com) : la typo blanche passe au vert (aqua) au survol, fond
   marin inchangé. Le mailto est encodé en entités par Email Encoder, mais le
   navigateur décode l'attribut href → le sélecteur [href*] matche bien le bouton. */
a.wp-block-button__link[href*="info@ditesalleluia.com"] {
  transition: color 0.25s ease;
}
a.wp-block-button__link[href*="info@ditesalleluia.com"]:hover {
  color: var(--wp--preset--color--aqua) !important;
}



/* ================================================
   PAGE ACCUEIL - Alignement sections portfolio/contact
   Correction pour aligner avec le header (135px)
   ================================================ */
@media (min-width: 769px) {
  .section-portfolio,
  .section-contact {
    padding-left: 135px !important;
    padding-right: 135px !important;
  }
}

.section-portfolio > .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.section-contact > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  margin-left: 0 !important;
}



/* ================================================
   BLOG CARD 2 — Format liste horizontale
   Date | Titre | Categorie avec hover bleu pale
   ================================================ */

/* Carte principale */

/* Section "Nos derniers articles" sur la page article individuel — aligne avec la colonne de contenu */
.blog-card2-section {
  max-width: 1242px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  padding-left: var(--wp--preset--spacing--site-margin) !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}
.blog-card2 {
  border-top: 1px solid var(--wp--preset--color--bleu-pale) !important;
  border-bottom: none !important;
  padding: 0 1.25rem 0 0 !important;
  transition: background-color 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  cursor: pointer;
}

/* Derniere carte : trait en bas */
.wp-block-post:last-child .blog-card2 {
  border-bottom: 1px solid var(--wp--preset--color--bleu-pale) !important;
}

.blog-card2:hover {
  background-color: var(--wp--preset--color--bleu-pale) !important;
}

/* Rangee principale — hauteur fixe, jamais variable */
.blog-card2-row {
  height: 92px;
  display: flex !important;
  align-items: center !important;
  gap: 2rem !important;
  width: 100%;
  box-sizing: border-box;
}

/* Date a gauche — centree verticalement */
.blog-card2 .wp-block-post-date {
  flex: 0 0 160px;
  font-size: 0.8rem;
  color: var(--wp--preset--color--marin);
  white-space: nowrap;
  align-self: center;
}

/* Bloc colonnes — occupe tout l'espace, clip le debordement */
.blog-card2 .wp-block-columns {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  gap: 0 !important;
  align-self: stretch !important;
  height: 92px !important;
  overflow: hidden !important;
}

/* Neutralise the scroll-reveal (.sr) animation on the columns container
   — it conflicts with our own title animation and hides titles below the fold */
.blog-card2 .wp-block-columns.sr,
.blog-card2 .wp-block-columns.sr.sr-show {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Colonne titre+extrait — centree par transform au repos */
.blog-card2 .wp-block-column {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  transform: translateY(31px);
  transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: transform;
}

/* Au hover : le contenu (titre + extrait) monte et se centre */
.blog-card2:hover .wp-block-column {
  transform: translateY(8px);
}

/* Titre — une ligne, tronque avec ellipsis, aligne a gauche */
.blog-card2 .wp-block-post-title {
  font-family: var(--wp--preset--font-family--merriweather) !important;
  font-size: 1.5rem !important;
  font-weight: 700;
  line-height: 1.3;
  text-align: left !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 !important;
  padding: 0 !important;
}

.blog-card2 .wp-block-post-title a {
  color: var(--wp--preset--color--marin);
  text-decoration: none;
}

.blog-card2 .wp-block-post-title a:hover {
  color: var(--wp--preset--color--sarcelle);
}

/* Categorie a droite — centree verticalement */
.blog-card2 .wp-block-post-terms {
  flex: 0 0 120px;
  font-size: 0.85rem;
  text-align: right;
  white-space: nowrap;
  color: var(--wp--preset--color--marin);
  align-self: center;
}

.blog-card2 .wp-block-post-terms a {
  color: var(--wp--preset--color--marin);
  text-decoration: none;
}

/* Extrait — invisible au repos, glisse sous le titre au hover */
.blog-card2 .blog-card2-excerpt,
.blog-card2 .wp-block-post-excerpt {
  display: block !important;
  overflow: hidden !important;
  max-height: 0;
  opacity: 0;
  margin: 0 !important;
  padding: 0 !important;
  transition: max-height 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
              opacity 0.3s ease 0.15s,
              margin-top 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
  font-family: var(--wp--preset--font-family--barlow), sans-serif !important;
  font-size: 0.875rem !important;
  color: var(--wp--preset--color--marin) !important;
  line-height: 1.4;
}
/* Limiter a 2 lignes */
.blog-card2 .wp-block-post-excerpt__excerpt {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Masquer le lire la suite */
.blog-card2 .wp-block-post-excerpt__more-link {
  display: none !important;
}

/* Supprimer le gap entre les articles */
.articles-list li + li,
.blog-card2-section .wp-block-post-template > li + li {
  margin-top: 0 !important;
}

/* ================================================
   PAGE ARTICLES — Filtres et liste
   ================================================ */

/* Barre de filtres */
.articles-filter-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

/* Recherche */
.articles-search-wrap {
  position: relative;
  flex: 1 1 280px;
  min-width: 200px;
}

.articles-search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--wp--preset--color--marin);
  opacity: 0.5;
  pointer-events: none;
  display: flex;
}

.articles-search {
  width: 100%;
  padding: 0.6rem 0.75rem 0.6rem 2.5rem;
  border: 1px solid var(--wp--preset--color--bleu-pale);
  border-radius: 6px;
  font-family: var(--wp--preset--font-family--barlow), sans-serif;
  font-size: 0.9rem;
  color: var(--wp--preset--color--marin);
  background: #fff;
  transition: border-color 0.2s;
  outline: none;
}

.articles-search:focus {
  border-color: var(--wp--preset--color--sarcelle);
}

.articles-search::placeholder {
  color: #999;
}

/* Dropdowns */
.articles-select {
  padding: 0.6rem 2rem 0.6rem 0.75rem;
  border: 1px solid var(--wp--preset--color--bleu-pale);
  border-radius: 6px;
  font-family: var(--wp--preset--font-family--barlow), sans-serif;
  font-size: 0.9rem;
  color: var(--wp--preset--color--marin);
  background: #fff;
  cursor: pointer;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23002346' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  transition: border-color 0.2s;
}

.articles-select:focus {
  border-color: var(--wp--preset--color--sarcelle);
}

/* Bouton tri */
.articles-sort-btn {
  padding: 0.6rem 1rem;
  border: 1px solid var(--wp--preset--color--bleu-pale);
  border-radius: 6px;
  font-family: var(--wp--preset--font-family--barlow), sans-serif;
  font-size: 0.9rem;
  color: var(--wp--preset--color--marin);
  background: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s, background-color 0.2s;
}

.articles-sort-btn:hover {
  background-color: var(--wp--preset--color--bleu-pale);
}

/* Compteur */
.articles-count {
  font-family: var(--wp--preset--font-family--barlow), sans-serif;
  font-size: 0.85rem;
  color: var(--wp--preset--color--marin);
  opacity: 0.6;
  margin-bottom: 0.5rem;
}

/* Liste d articles */
.articles-list {
  width: 100%;
}

.articles-list .blog-card2:first-child {
  border-top: 1px solid var(--wp--preset--color--bleu-pale) !important;
}

.articles-empty {
  text-align: center;
  color: var(--wp--preset--color--marin);
  opacity: 0.5;
  font-family: var(--wp--preset--font-family--barlow), sans-serif;
  padding: 3rem 0;
  font-size: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
  .articles-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .articles-search-wrap {
    flex: 1 1 auto;
  }
  /* Articles en mobile : carte simplifiée — on n'affiche QUE le titre (cliquable
     vers l'article), hauteur uniforme pour toutes les cartes. Date, catégorie et
     extrait masqués. */
  .blog-card2 .wp-block-post-date,
  .blog-card2 .wp-block-post-terms,
  .blog-card2 .blog-card2-excerpt {
    display: none !important;
  }
  .blog-card2-row {
    flex-direction: row !important;
    align-items: center !important;
    height: 84px !important;
    padding: 0 1.25rem 0 0 !important;
    gap: 0 !important;
  }
  .blog-card2 .wp-block-columns {
    width: 100% !important;
    margin: 0 !important;
  }
  .blog-card2 .wp-block-post-title {
    margin: 0 !important;
    font-size: 1.0625rem !important;   /* ~17px : permet 2 lignes complètes même pour les titres longs */
    line-height: 1.3 !important;
    white-space: normal !important;    /* autorise le passage à la ligne (sinon coupé sur 1 ligne) */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;  /* 2 lignes max → hauteur de carte constante */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .blog-card2 .wp-block-post-title a {
    display: block !important;
    white-space: normal !important;
  }
}
/* Lien "Plus d'articles" */
/* Page articles — alignement avec le logo */
body.blog .articles-page {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: var(--wp--preset--spacing--site-margin) !important;
  padding-right: var(--wp--preset--spacing--site-margin) !important;
  box-sizing: border-box !important;
}
/* Neutraliser le centrage automatique du is-layout-constrained */
body.blog .articles-page.is-layout-constrained > *,
body.blog .articles-page.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.blog .articles-query-block {
  max-width: 100% !important;
}

/* Héro portfolio : neutraliser le padding/margin automatique de l'inner-container
   (le cover a déjà le padding site-margin appliqué directement) */
.wp-block-cover.is-position-middle-left .wp-block-cover__inner-container {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Portfolio — contrainte 1242px ancrée à gauche (alignée avec le logo)
   Le layout constrained centre avec margin:auto, mais le contenu doit
   rester aligné avec le logo via site-margin. On annule le centrage. */
.single-portfolio .wp-block-post-content > :not(.alignfull) {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* ============================================================
   Patrons Portfolio Alléluia — largeurs canoniques
   .portfolio-blocs-66  = 66.67% × 1242px = 828px de contenu
   .portfolio-blocs-100 = 100%  × 1242px = 1242px de contenu
   Tout aligné à gauche avec le logo (padding-left: site-margin)
   ============================================================ */
.single-portfolio .wp-block-post-content > .portfolio-blocs-66 {
  max-width: calc(828px + var(--wp--preset--spacing--site-margin)) !important;
  margin-left: 0 !important;
  padding-right: 0 !important;
}
.single-portfolio .wp-block-post-content > .portfolio-blocs-100 {
  max-width: calc(1242px + var(--wp--preset--spacing--site-margin)) !important;
  margin-left: 0 !important;
  padding-right: 0 !important;
}

/* Réalisations — Supprimer tous les espaces entre blocs dans le Contenu */
.single-portfolio .wp-block-post-content > * + * {
  margin-block-start: 0;
}

/* Mobile — fiches portfolio : (1) titre de héro réduit (~20 %, 70px→56px) ;
   (2) gouttière droite symétrique sur les blocs d'images (le style inline du
   bloc met padding-left:site-margin / padding-right:0 → collées au bord droit
   en mobile). 2026-06-10 */
@media (max-width: 768px) {
  .single-portfolio .wp-block-cover__inner-container h1 {
    font-size: 56px !important;
  }
  .single-portfolio .wp-block-post-content > .portfolio-blocs-100,
  .single-portfolio .wp-block-post-content > .portfolio-blocs-66 {
    padding-right: var(--wp--preset--spacing--site-margin) !important;
  }
}


/* Animation au scroll — fade-in + montée (CSS scroll-driven, Chrome 115+) */
@keyframes alleluia-fade-up {
  from { opacity: 0; transform: translateY(30px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0); }
}

.wp-block-columns,
.wp-block-image,
.wp-block-video,
.wp-block-cover,
.wp-block-heading,
.wp-block-paragraph {
  animation: alleluia-fade-up 1.5s ease-out both;
  animation-timeline: view();
  animation-range: entry 0% entry 75%;
}

/* Accessibilité — Désactiver les animations si l'utilisateur le préfère */
@media (prefers-reduced-motion: reduce) {
  .wp-block-columns,
  .wp-block-image,
  .wp-block-video,
  .wp-block-cover,
  .wp-block-heading,
  .wp-block-paragraph {
    animation: none;
  }
}

/* ================================================
   Navigation mobile — menu hamburger
   ================================================ */

/* Masquer nav desktop sur mobile */
@media (max-width: 768px) {
  .site-header .wp-block-navigation,
  .site-header .wp-block-social-links {
    display: none !important;
  }

  /* Hamburger — fixe, toujours visible sur n'importe quel fond */
  .alleluia-hamburger {
    position: fixed;
    top: 1.25rem;
    right: var(--wp--preset--spacing--site-margin);
    z-index: 10001;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none !important;
    border: none !important;
    cursor: pointer;
    padding: 6px;
    box-shadow: none !important;
  }
  .alleluia-hamburger span {
    display: block;
    width: 26px;
    height: 2px;
    background-color: #ffffff;
    border-radius: 2px;
    /* Ombre portée pour rester visible sur fond clair */
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.45));
  }
  /* Masquer le hamburger quand le menu est ouvert (la × prend le relais) */
  .alleluia-hamburger.is-active {
    display: none !important;
  }

  /* Conteneur fixe — pas de clip-path (bug iOS Safari sur position:fixed) */
  .alleluia-mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 10000;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s 0.5s;
  }
  .alleluia-mobile-menu.is-open {
    visibility: visible;
    pointer-events: auto;
    transition: visibility 0s 0s;
  }

  /* Inner absolu : reçoit le clip-path — fix iOS Safari */
  .alleluia-mobile-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--wp--preset--color--bleu-pale, #d6eef0);
    /* Même padding que le header */
    padding: 1.25rem var(--wp--preset--spacing--site-margin) 3rem;
    /* Cercle qui part juste hors écran en haut à droite */
    clip-path: circle(0% at 110% -10%);
    transition: clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .alleluia-mobile-menu.is-open .alleluia-mobile-inner {
    clip-path: circle(200% at 110% -10%);
  }

  /* Logo dans l'overlay — même taille que dans le header */
  .alleluia-mobile-logo {
    flex-shrink: 0;
  }
  .alleluia-mobile-logo img {
    width: 160px;
    height: auto;
    display: block;
  }

  /* Bouton fermer × — aligné exactement sur le hamburger */
  .alleluia-mobile-close {
    position: absolute;
    top: 1.25rem;
    right: var(--wp--preset--spacing--site-margin);
    background: none;
    border: none;
    cursor: pointer;
    color: #002346;
    font-size: 2rem;
    line-height: 1;
    padding: 6px;
  }

  /* Navigation */
  .alleluia-mobile-nav {
    margin-top: 2.5rem;
  }
  .alleluia-mobile-nav a {
    display: block;
    font-family: var(--wp--preset--font-family--barlow);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #002346;
    text-decoration: none;
    text-transform: uppercase;
    padding: 1.1rem 0;
    border-bottom: 1px solid rgba(0, 35, 70, 0.15);
  }
  .alleluia-mobile-nav a:first-child {
    border-top: 1px solid rgba(0, 35, 70, 0.15);
  }
  .alleluia-mobile-nav a:hover {
    opacity: 0.6;
  }

  /* Sélecteur de langue en bas */
  .alleluia-mobile-lang {
    margin-top: auto;
    padding-top: 2rem;
  }
  .alleluia-mobile-lang a {
    font-family: var(--wp--preset--font-family--barlow);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #002346;
    text-decoration: none;
    opacity: 0.7;
  }
  .alleluia-mobile-lang a:hover {
    opacity: 1;
  }
}

/* Masquer le hamburger et le menu mobile sur desktop */
@media (min-width: 769px) {
  .alleluia-hamburger,
  .alleluia-mobile-menu {
    display: none !important;
  }
}




/* === Override section-équipe : fixes mobile ===
   En dernier pour gagner sur les règles générales. */
@media (max-width: 768px) {

  /* 1. Alignement gauche identique aux autres sections */
  .section-equipe {
    padding-left: var(--wp--preset--spacing--site-margin) !important;
    padding-right: var(--wp--preset--spacing--site-margin) !important;
  }

  /* 2. Passer en CSS Grid 1 colonne (plus fiable que flex-direction: column) */
  .section-equipe .wp-block-columns {
    display: grid !important;
    grid-template-columns: 1fr !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
  }

  /* 3. Masquer la colonne vide (1re colonne = espace desktop uniquement) */
  .section-equipe .wp-block-column:not(:has(*)) {
    display: none !important;
  }

  /* 4. Photo toujours avant le texte (règle identique pour David et Sylvain) */
  .section-equipe .wp-block-column:has(img) {
    order: -1 !important;
  }

  /* 5. Photo 50 % de largeur, sans float, texte pleine largeur en dessous */
  .section-equipe .equipe-photo {
    float: none !important;
    clear: both !important;
    display: block !important;
    margin: 0 0 1.5rem 0 !important;
    width: auto !important;
  }
  .section-equipe .equipe-photo img {
    width: 50% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
  }

  /* 6. Colonne pleine largeur (photo + texte dans la même colonne) */
  .section-equipe .wp-block-column:has(img) {
    width: 100% !important;
    max-width: 100% !important;
    order: unset !important;
  }

  /* 7. Texte aligné à gauche */
  .section-equipe .wp-block-column * {
    text-align: left !important;
  }
}

/* === Section réalisations (home) — texte toujours aligné à gauche sur mobile */
@media (max-width: 768px) {
  .section-portfolio .wp-block-column:not(:has(.wp-block-image)) {
    text-align: left !important;
  }
  .section-portfolio .wp-block-column:not(:has(.wp-block-image)) * {
    text-align: left !important;
  }
}

/* === Section marques — 4 logos par ligne sur mobile */
@media (max-width: 768px) {
  .clients-logos-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.25rem 1rem !important;
    align-items: center !important;
  }
  .client-logo {
    width: auto !important;
  }
  .client-logo img {
    width: 100% !important;
    max-width: none !important;
  }
}

/* === Typographie héros — mobile
   Variable sous-titre : 1.7rem | Tagline : 60px fixe */
@media (max-width: 768px) {
  .section-hero {
    --wp--preset--font-size--large: 1.7rem;
  }
  .section-hero .hero-tagline {
    font-size: 60px !important;
    line-height: 1.1 !important;
  }
}


/* Page portfolio (ID 126) — annule la contrainte du template page.html
   Le padding de var(--wp--preset--spacing--site-margin) sur le <main> interne
   assure l'alignement visuel avec le logo (x=135 gauche / x=1377 droite). */
.page-id-126 .entry-content.wp-block-post-content {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Réalisations (page 126) : espacement UNIFORME entre projets.
   Le montage d'origine (bloc spacer 20px + marges 24px des colonnes) donnait des
   écarts inégaux (90–107px) à cause d'un margin-collapse variable. On masque les
   spacers et on impose une marge unique au-dessus de chaque projet → écart
   identique partout, desktop comme mobile. Le 1er enfant (titre « Nos réalisations »)
   garde 0 au-dessus. Valeur ajustable.                                            */
.page-id-126 .wp-block-post-content > main > .wp-block-spacer {
  display: none !important;
}
.page-id-126 .wp-block-post-content > main > .wp-block-columns {
  margin-top: 64px !important;
  margin-bottom: 0 !important;
}
.page-id-126 .wp-block-post-content > main > .wp-block-columns:first-child {
  margin-top: 0 !important;
}

/* Our work (page 884, /en/portfolio/) : même homogénéisation que Réalisations.
   Ici les projets sont enfants DIRECTS du post-content (pas de <main> intermédiaire).
   On masque les spacers et on impose une marge unique au-dessus de chaque projet
   → écart identique (64px) entre tous les projets. 1er enfant (titre « Our work »)
   garde 0 au-dessus.                                                              */
.page-id-884 .wp-block-post-content > .wp-block-spacer {
  display: none !important;
}
.page-id-884 .wp-block-post-content > .wp-block-columns {
  margin-top: 64px !important;
  margin-bottom: 0 !important;
}
.page-id-884 .wp-block-post-content > .wp-block-columns:first-child {
  margin-top: 0 !important;
}

/* Réalisations (126) / Our work (884) — mobile uniquement :
   le bloc Saint-Jean-sur-Richelieu a ses colonnes dans l'ordre
   titre → image → colonne vide (inverse des autres projets,
   où c'est image → titre). On réordonne visuellement en ≤768px
   pour que l'image apparaisse au-dessus du titre comme partout
   ailleurs, sans toucher à la mise en page desktop (20/60/20). */
@media (max-width: 768px) {
  .page-id-126 .wp-block-columns:has(a[href*="saint-jean"]) > .wp-block-column:has(.wp-block-image),
  .page-id-884 .wp-block-columns:has(a[href*="saint-jean"]) > .wp-block-column:has(.wp-block-image) {
    order: 1;
  }
  .page-id-126 .wp-block-columns:has(a[href*="saint-jean"]) > .wp-block-column:has(h3),
  .page-id-884 .wp-block-columns:has(a[href*="saint-jean"]) > .wp-block-column:has(h3) {
    order: 2;
  }
  .page-id-126 .wp-block-columns:has(a[href*="saint-jean"]) > .wp-block-column:not(:has(.wp-block-image)):not(:has(h3)),
  .page-id-884 .wp-block-columns:has(a[href*="saint-jean"]) > .wp-block-column:not(:has(.wp-block-image)):not(:has(h3)) {
    display: none;
  }
}

/* =============================================
   Excerpt au survol des rangées d'articles
   ============================================= */
.blog-card2:hover
/* Bouton "Plus d'articles" — stylé comme un lien */

/* ── articles : survol rangée (excerpt) ── */
.blog-card2 .blog-card2-excerpt {
  display: block !important;
  overflow: hidden !important;
  max-height: 0 !important;
  padding: 0 !important;
  transition: max-height 0.3s ease, padding 0.3s ease;
}
.blog-card2:hover .blog-card2-excerpt {
  max-height: 5em !important;
  padding-bottom: 0.5rem !important;
  opacity: 1 !important;
}
.blog-card2 .blog-card2-excerpt p,
.blog-card2 .blog-card2-excerpt .wp-block-post-excerpt__excerpt {
  margin: 0;
  font-size: 0.85rem;
  color: var(--wp--preset--color--marin);
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* ── bouton plus d'articles ── */
#load-more-articles {
  -webkit-appearance: none;
  appearance: none;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none;
  padding: 0;
  font-family: inherit;
  font-size: 1.25rem;
  color: var(--wp--preset--color--marin) !important;
  text-decoration: underline;
  cursor: pointer;
  display: inline-block;
}
#load-more-articles:hover { opacity: 0.75; }

/* Pages — bloc alignfull : fond pleine largeur, contenu respecte les marges */
/* Restreint au template page (main.template-page) pour ne pas affecter single-portfolio */
main.template-page > .wp-block-post-content > .alignfull {
    margin-left: calc(-1 * var(--wp--preset--spacing--site-margin));
    margin-right: calc(-1 * var(--wp--preset--spacing--site-margin));
    width: calc(100% + 2 * var(--wp--preset--spacing--site-margin));
    max-width: none;
}

/* Pages — classe full-bleed : fond pleine largeur, contenu respecte les marges */
main.wp-block-group.alignfull > .wp-block-post-content > .full-bleed {
    margin-left: calc(-1 * var(--wp--preset--spacing--site-margin));
    margin-right: calc(-1 * var(--wp--preset--spacing--site-margin));
    width: calc(100% + 2 * var(--wp--preset--spacing--site-margin));
    max-width: none;
    padding-left: var(--wp--preset--spacing--site-margin);
    padding-right: var(--wp--preset--spacing--site-margin);
    box-sizing: border-box;
}

/* Supprime l'espace blanc entre un bloc full-bleed et le bloc suivant */
main.wp-block-group.alignfull > .wp-block-post-content > .full-bleed + * {
    margin-top: 0;
}

/* Email Encoder Bundle — masquer l'icône cadenas */
i.eeb-encoded { display: none; }

/* =========================================
   Service cards — grille de services
   ========================================= */
.service-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 35, 70, 0.08);
  transition: background 0.3s ease;
  height: 100%;
}

.service-card:hover {
  background: var(--wp--preset--color--bleu-pale);
}

/* =========================================
   Titre page articles — alignement visuel
   avec les titres des autres pages internes
   (Services, Contact : h2 global line-height 1.15)
   ========================================= */
.wp-block-query-title {
  line-height: 1.15 !important;
}

.service-card h3 {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

/* Hauteur égale entre les cartes d'une même rangée */
.wp-block-columns:has(.service-card) {
  align-items: stretch;
}

.wp-block-columns:has(.service-card) > .wp-block-column {
  display: flex;
  flex-direction: column;
}

.wp-block-columns:has(.service-card) > .wp-block-column > .service-card {
  flex: 1;
}


/* Fond marin sur html/body pour éviter le flash blanc au overscroll vers le haut */
html,
body {
  background-color: var(--wp--preset--color--marin);
}
.wp-site-blocks {
  background-color: var(--wp--preset--color--blanc);
}