/**
 * Page Entreprises (template-entreprises.php) — feuille de style dédiée.
 *
 * Volontairement en CSS simple et NON incluse dans le bundle webpack : le thème
 * se déploie par copie de fichiers (cPanel) et le build n'est pas rejoué à
 * chaque mise en ligne — même parti pris que le CSS inline de inc/seo.php.
 * Elle n'est chargée que sur cette page (voir filia_main_files() dans functions.php).
 *
 * Les tokens ci-dessous reprennent à l'identique css/base/_variables.scss.
 * Toute modification du design system doit être répercutée ici.
 */

.mf-ent {
  --mf-accent: #a4863d;        /* $accentColor      — fonds, bordures, boutons */
  --mf-accent-text: #c2a24c;   /* $accentTextColor  — texte doré accessible (AA) */
  --mf-page-bg: #333333;       /* $bgColor          — fond des sections claires */
  --mf-card-bg: #1d1d1b;       /* $sectionBgColor   — fond de TOUTES les cartes */
  --mf-deep-bg: #060605;       /* $formCardBgColor  — fond des sections .bg-dark */
  --mf-text: #e5e6fa;          /* $textColor */
  --mf-text-muted: #c1c2d2;    /* $textColorMuted */
  --mf-gap: 0.7rem;            /* $gap */
}

/* Les titres de section couraient sur toute la largeur de l'écran : on les
   contraint pour qu'ils cassent sur 2 lignes et gardent une colonne lisible. */
.mf-ent h2 {
  max-width: 26ch;
}

/* FAQ : titre aligné à gauche et calé sur la colonne des accordéons.
   820px = max-width de .mf-faq__list (CSS inline de inc/seo.php). */
.mf-ent .mf-faq h2 {
  max-width: 820px;
  margin-inline: auto;
  text-align: left;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */

/* Le titre héro par défaut ($heroTitleSize, jusqu'à 5rem) tenait sur 4 lignes
   et débordait des 90dvh : taille réduite + hauteur devenue extensible. */
.mf-ent .home-hero h1 {
  font-size: clamp(1.9rem, 3.4vw, 3.25rem);
  max-width: 24ch;
}

.mf-ent-hero .full-height {
  height: auto;
  min-height: 90dvh;
}

.mf-ent-hero .cta {
  padding-block: 6rem 4rem;
}

/* Voile un cran plus dense que le .a-propos-section::after partagé, pour que le
   titre passe devant l'image. Surcharge scopée : la règle d'origine sert aussi
   aux pages service et à l'accueil, on n'y touche pas. */
.mf-ent .mf-ent-hero::after {
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.88) 0%,
    rgba(0, 0, 0, 0.78) 28%,
    rgba(0, 0, 0, 0.56) 52%,
    rgba(0, 0, 0, 0.28) 68%,
    rgba(0, 0, 0, 0) 82%
  );
}

.mf-ent-eyebrow {
  font-size: clamp(0.8rem, 1.2vw, 0.95rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.mf-ent-badges {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--mf-gap) * 0.75);
  padding: 0;
}

.mf-ent-badges li {
  padding: calc(var(--mf-gap) * 0.6) var(--mf-gap);
  background: rgba(6, 6, 5, 0.6);
  font-size: clamp(0.8rem, 1.2vw, 0.95rem);
  color: var(--mf-accent-text);
  white-space: nowrap;
}

/* ── Intro ────────────────────────────────────────────────────────────────── */

.mf-ent-intro {
  align-items: center;
}

.mf-ent-intro__media {
  height: 100%;
  min-height: 340px;
  max-height: 620px;
}

.mf-ent-intro__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mf-ent-checklist {
  display: flex;
  flex-direction: column;
  gap: calc(var(--mf-gap) * 0.9);
  padding: 0;
}

/* Case + coche, alignées sur la première ligne de texte (flex, pas de
   positionnement absolu : les intitulés qui passent sur 2 lignes restent bons). */
.mf-ent-checklist li {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--mf-gap) * 1.1);
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: 1.35;
}

.mf-ent-checklist li::before {
  content: "";
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.16em; /* centre la case sur la hauteur de la 1re ligne */
  border: 2px solid var(--mf-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.3 4.9 8.8 9.6 3.4' fill='none' stroke='%23c2a24c' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 80%;
}

/* ── Cartes ───────────────────────────────────────────────────────────────── */

/* Aucune bordure : les cartes sont délimitées par leur fond, qui s'inverse
   selon la section pour rester lisible dans les deux sens.
   – sections claires (#333, $bgColor)      → carte #1d1d1b (gris foncé)
   – sections .bg-dark (#060605)            → carte #333333 (gris) */
.mf-ent-card,
.mf-ent-sector,
.mf-ent-reason,
.mf-ent-support {
  background: var(--mf-card-bg);
  border: 0;
}

.bg-dark .mf-ent-card,
.bg-dark .mf-ent-sector,
.bg-dark .mf-ent-reason {
  background: var(--mf-page-bg);
}

/* Grille commune : 4 colonnes, 2 sur tablette, 1 sur mobile. */
.mf-ent-cards,
.mf-ent-sectors,
.mf-ent-reasons,
.mf-ent-supports {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--mf-gap);
}

@media screen and (max-width: 1024px) {
  .mf-ent-cards,
  .mf-ent-sectors,
  .mf-ent-reasons,
  .mf-ent-supports {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 600px) {
  .mf-ent-cards,
  .mf-ent-sectors,
  .mf-ent-reasons,
  .mf-ent-supports {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Cartes « Nos solutions » : icône à gauche du titre ───────────────────── */

.mf-ent-card {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  column-gap: calc(var(--mf-gap) * 1.2);
  padding: calc(var(--mf-gap) * 2);
}

.mf-ent-card > img {
  grid-column: 1;
  grid-row: 1;
  width: 2.25rem;
  max-width: none;
  margin: 0;
  align-self: center;
}

.mf-ent-card > h3 {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  line-height: 1.15;
}

.mf-ent-card > p {
  grid-column: 2;
  grid-row: 2;
}

.mf-ent-card > a,
.mf-ent-card > button {
  grid-column: 2;
  grid-row: 3;
  justify-self: start;
}

.bg-dark .mf-ent-card h3 {
  color: var(--mf-accent-text);
}

/* Bouton présenté comme un lien : le modal « échantillon » n'est pas une URL. */
.mf-ent-linklike {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: var(--mf-accent);
  text-decoration: underline;
  transition: color 0.15s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.bg-dark .mf-ent-linklike {
  color: var(--mf-accent-text);
}

.mf-ent-linklike:hover {
  color: var(--mf-text);
}

/* ── Supports personnalisables (4 × 2 = 8 vignettes) ──────────────────────── */

/* L'image affleure les bords de la tuile : seul le libellé est en retrait. */
.mf-ent-support .image-box {
  height: 260px;
  overflow: hidden;
  background: var(--mf-deep-bg);
}

.mf-ent-support .image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}

.mf-ent-support:hover .image-box img {
  transform: scale(1.04);
}

.mf-ent-support h6 {
  padding: calc(var(--mf-gap) * 1.1) var(--mf-gap);
  font-size: clamp(0.9rem, 1.1vw, 1.05rem);
  color: var(--mf-text-muted);
}

/* ── Réalisations ─────────────────────────────────────────────────────────── */

.mf-ent-projects {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mf-gap);
}

.mf-ent-project {
  background: var(--mf-card-bg);
}

/* Comme pour les supports : l'image affleure, seul le bloc texte est en retrait. */
.mf-ent-project a {
  display: block;
  text-decoration: none;
}

.mf-ent-project__body {
  padding: calc(var(--mf-gap) * 1.1) var(--mf-gap) calc(var(--mf-gap) * 1.4);
}

.mf-ent-project .image-box {
  height: 320px;
  overflow: hidden;
  background: var(--mf-deep-bg);
}

.mf-ent-project .image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}

.mf-ent-project a:hover .image-box img {
  transform: scale(1.04);
}

.mf-ent-project h3 {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.15;
  color: var(--mf-text-muted);
}

.mf-ent-project__link {
  display: inline-block;
  margin-top: calc(var(--mf-gap) * 0.5);
  color: var(--mf-accent-text);
  text-decoration: underline;
}

@media screen and (max-width: 1024px) {
  .mf-ent-projects {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 600px) {
  .mf-ent-projects {
    grid-template-columns: minmax(0, 1fr);
  }

  .mf-ent-project .image-box {
    height: 260px;
  }
}

/* ── Secteurs ─────────────────────────────────────────────────────────────── */

.mf-ent-sector {
  padding: calc(var(--mf-gap) * 2);
}

.bg-dark .mf-ent-sector h3 {
  color: var(--mf-accent-text);
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  line-height: 1.15;
}

/* ── Méthode ──────────────────────────────────────────────────────────────── */

.mf-ent-method {
  align-items: center;
}

.mf-ent-method__media {
  height: 100%;
  min-height: 360px;
  max-height: 640px;
}

.mf-ent-method__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mf-ent-steps {
  display: flex;
  flex-direction: column;
  gap: calc(var(--mf-gap) * 2);
  padding: 0;
}

.mf-ent-steps li {
  display: flex;
  gap: calc(var(--mf-gap) * 1.5);
  align-items: flex-start;
}

.mf-ent-steps__num {
  flex: 0 0 auto;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1;
  color: var(--mf-accent-text);
  min-width: 2.4ch;
}

.mf-ent-steps h3 {
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
}

/* ── Pourquoi Maison Filia ────────────────────────────────────────────────── */

.mf-ent-reason {
  padding: calc(var(--mf-gap) * 2);
}

.bg-dark .mf-ent-reason h3 {
  color: var(--mf-accent-text);
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  line-height: 1.15;
}

/* ── Formulaire de devis professionnel ────────────────────────────────────── */

/* .autres-details est aligné en bas par les utilitaires globaux : sur cette
   page la carte doit occuper toute sa hauteur comme les autres. */
.mf-ent-form .autres-details {
  align-self: stretch;
  justify-content: flex-start;
}

/* Le <select> natif n'est pas couvert par le baseline (input/textarea only). */
.mf-ent-form select {
  font-family: inherit;
  font-weight: 100;
  font-size: clamp(1rem, 2vw, 1.125rem);
  padding: var(--mf-gap);
  width: 100%;
  min-height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  outline: none;
  background-color: var(--mf-card-bg);
  color: var(--mf-text);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  transition: border-color 200ms ease-in-out;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--mf-accent) 50%),
                    linear-gradient(135deg, var(--mf-accent) 50%, transparent 50%);
  background-position: right 1.1rem center, right 0.75rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.25rem;
}

.mf-ent-form select:focus {
  border-color: var(--mf-accent);
  box-shadow: 0 0 5px rgba(164, 134, 61, 0.5);
}

.mf-ent-form input[type="file"] {
  cursor: pointer;
}

/* Le rappel de formats occupe toute la largeur de la ligne label/champ. */
.mf-ent-hint {
  grid-column: 1 / -1;
  font-size: 0.85rem;
  color: var(--mf-text-muted);
  opacity: 0.8;
}

.mf-ent-form .grid-col.button {
  background: none;
  padding: 0;
  justify-content: flex-end;
}

/* ── Dernière section ─────────────────────────────────────────────────────── */

/* Le bloc CTA collait au pied de page : une marge laisse respirer le fond de
   page (#333) entre le bloc sombre et le footer, qui s'en détache nettement. */
.mf-ent-final {
  padding-bottom: clamp(4rem, 6vw, 6rem);
  margin-bottom: clamp(5rem, 8vw, 9rem);
}

/* Titre centré : .medium-width impose un `width` (60% du bloc) qui le cassait
   en 5 lignes. On repasse en largeur automatique, plafonnée. */
.mf-ent-final h2 {
  width: auto;
  max-width: 34ch;
}

/* ── Adaptations mobile ───────────────────────────────────────────────────── */

@media screen and (max-width: 768px) {
  .mf-ent-badges li {
    white-space: normal;
  }

  .mf-ent-support .image-box {
    height: 220px;
  }

  .mf-ent-steps li {
    gap: var(--mf-gap);
  }

  .mf-ent-card {
    padding: calc(var(--mf-gap) * 1.5);
  }

  .mf-ent-sector,
  .mf-ent-reason {
    padding: calc(var(--mf-gap) * 1.5);
  }
}