/* =====================================================================
   ACCUEIL — compléments propres à front-page.php
   Les composants de la maquette (hero, scinde, tuiles, cartes photo,
   bande d'appel, chiffres, métiers, encadré) sont dans site.css.
   Tout est préfixé par .home (classe posée par body_class() sur la page
   d'accueil) : la feuille peut être chargée partout sans rien toucher ailleurs.
   Chaque jeton a sa valeur de repli.
   ===================================================================== */

/* Photo du hero choisie dans ACF : une vraie <img> (srcset, chargement
   prioritaire), cadrée comme le fond .hero-photo de la maquette. */
.home .hero-cadre > img.hero-photo{
  position:absolute;inset:0;
  width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:50% 50%;
}

/* Pictogrammes du réseau : ct_picto_expert() rend un <svg> posé dans une
   pastille .ico, qui porte la taille et la couleur. */
.home .pictos .ico > svg,
.home .metiers-grille .ico > svg{display:block;width:100%;height:100%}

/* ---------------------------------------------------------------------
   Tuiles « Nos expertises » : texte et points saisis dans le répéteur
   « metiers ». Dès qu'une tuile en porte, toute la grille quitte le ratio
   fixe de site.css (qui, avec overflow:hidden, coupait le contenu) : chaque
   tuile passe en colonne et grandit avec son contenu, les tuiles d'une même
   rangée gardent la même hauteur (li en flex) et la photo occupe le bas,
   120 px au moins. Les tuiles sans texte de la même grille suivent la même
   mise en page (titre + photo). Sans texte nulle part, rien ne change.
   --------------------------------------------------------------------- */
.home .tuiles:has(.tuile-texte, .tuile-points) > li{display:flex;min-width:0}
.home .tuiles:has(.tuile-texte, .tuile-points) .tuile{
  display:flex;flex-direction:column;flex:1 1 auto;
  width:100%;aspect-ratio:auto;
}
.home .tuile-texte{
  position:relative;z-index:2;padding:8px 16px 0;
  font-size:13.5px;line-height:1.55;
}
.home .tuile-points{
  position:relative;z-index:2;display:grid;gap:4px;padding:8px 16px 0;
  font-size:13px;line-height:1.45;
}
.home .tuile-points li{position:relative;padding-left:14px}
.home .tuile-points li::before{content:"/";content:"/" / "";position:absolute;left:0;top:0;font-weight:900}
.home .tuiles:has(.tuile-texte, .tuile-points) .tuile-image{
  position:relative;flex:1 0 120px;height:auto;margin-top:16px;
}

/* ---------------------------------------------------------------------
   Piliers — seulement si la liste ACF est remplie. Le gabarit est pensé
   pour un panneau foncé : ici il est posé sur une section blanche.
   --------------------------------------------------------------------- */
.home .piliers{max-width:760px}
.home .piliers .argument + .argument{border-top-color:var(--filet-fort, rgba(11, 33, 56, .28))}
.home .piliers .titre-panneau{color:var(--nuit, #0B2138)}

/* ---------------------------------------------------------------------
   « Pourquoi nous faire confiance » — seulement si la liste ACF est remplie
   --------------------------------------------------------------------- */
.home .raisons{display:grid;gap:36px}
.home .raison{display:grid;gap:10px;align-content:start;min-width:0}
.home .raison-picto{display:block;line-height:0;color:var(--bande, #97773B)}
.home .raison-picto svg{width:60px;height:auto}
.home .raison-titre{
  font-size:18px;font-weight:var(--g-titre-sec, 600);line-height:1.35;
  color:var(--nuit, #0B2138);
}
.home .raison p{font-size:15px;line-height:1.75;color:var(--texte-2, #56616D)}

/* ---------------------------------------------------------------------
   « Notre territoire » — seulement si les départements ACF sont remplis
   (dans l'encadré gris de la maquette)
   --------------------------------------------------------------------- */
.home .departements{
  display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:0 24px;margin-top:28px;
}
.home .departements li{min-width:0}
.home .departements a{
  display:grid;gap:2px;height:100%;padding:14px 0;
  border-top:1px solid var(--filet-fort, rgba(11, 33, 56, .28));
  color:var(--nuit, #0B2138);text-decoration:none;
}
.home .departements b{font-size:15px;font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.home .departements span{font-size:13.5px;line-height:1.5;color:var(--texte-2, #56616D);overflow-wrap:anywhere}
.home .departements a:hover b{
  text-decoration:underline;text-decoration-thickness:2px;
  text-decoration-color:var(--oblique, #CFAD63);text-underline-offset:.3em;
}

/* ---------------------------------------------------------------------
   Requêtes média (après les règles qu'elles surchargent)
   --------------------------------------------------------------------- */
/* Tuiles avec texte : sur deux colonnes, il ne resterait que 126 px de
   large pour le texte à 360 px. Une colonne sous 560 px. */
@media (max-width: 559px){
  .home .tuiles:has(.tuile-texte, .tuile-points){grid-template-columns:minmax(0, 1fr)}
}

@media (min-width: 640px){
  .home .raisons{grid-template-columns:repeat(2, minmax(0, 1fr));gap:40px 32px}
}

@media (min-width: 768px){
  .home .departements{grid-template-columns:repeat(3, minmax(0, 1fr))}
  /* Même retrait que .tuile-titre (20 px dès 768 px dans site.css) */
  .home .tuile-texte,
  .home .tuile-points{padding-inline:20px}
}

@media (min-width: 1024px){
  .home .raisons{grid-template-columns:repeat(3, minmax(0, 1fr));gap:52px 48px}
}