/*!
 * Module: secteur
 * Styles front-office
 * - 6 blocs CMS côte à côte (responsive)
 * - Section alignée au conteneur du thème (pas de pleine largeur)
 * - Espacement interne sur les bords des blocs et gouttières entre colonnes
 */

/* Section dans le container du thème (alignée sous homeproducts) */
section.secteur {
  display: flow-root;       /* BFC: la section enveloppe exactement son contenu */
  padding: 0;

  /* Variables d'écartement ajustables (éditables à chaud dans l'inspecteur) */
  --secteur-col-gap: 63px;  /* espace horizontal entre cartes */
  --secteur-row-gap: 63px;  /* espace vertical entre rangées */

  /* Variables d'aspect des cartes (modifiables à chaud) */
  --secteur-card-radius: 12px;
  --secteur-card-shadow: 0 8px 24px rgba(0,0,0,0.12);
  --secteur-card-shadow-hover: 0 12px 32px rgba(0,0,0,0.16);
  --secteur-card-scale: 1.03;
  --secteur-card-transition: transform .3s ease, box-shadow .3s ease;
  /* Bordure des cartes */
  --secteur-card-border-width: 1px;
  --secteur-card-border-style: solid;
  --secteur-card-border-color: rgba(0,0,0,0.08);
  --secteur-card-border-color-hover: rgba(0,0,0,0.12);

  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;             /* occupe toute la largeur du viewport pour sortir du container */
  max-width: 100vw;
  box-sizing: border-box;
}

/* Titre général */
.secteur .secteur-heading {
  width: var(--secteur-inner-width, 83vw);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-bottom: var(--secteur-row-gap, 16px);
  font-weight: 700;
  line-height: 1.2;
  font-size: clamp(1.25rem, 1.2vw + 1rem, 2rem);
  color: var(--secteur-heading-color, inherit);
  border-bottom: 3px solid var(--secteur-heading-border-color, currentColor);
  padding-bottom: 8px;
  text-shadow: var(--secteur-heading-shadow, 0 2px 8px rgba(0,0,0,0.5)); /* ombre portée du titre */
  margin-top: 50px;
}

/* Grille à 6 colonnes + gouttières, avec padding sur bords viewport */
.secteur .secteur-inner {
  display: grid;
  align-items: start;        /* ne pas étirer les items à la hauteur de la plus grande carte */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: var(--secteur-col-gap); /* gouttières horizontales modifiables */
  row-gap: var(--secteur-row-gap);    /* gouttières verticales modifiables */
  width: var(--secteur-inner-width, 83vw);          /* largeur du contenu (modifiable) */
  max-width: 100vw;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;           /* padding déplacé sur section.secteur */
  padding-right: 0;
  box-sizing: border-box;
}

/* Colonne et bloc */
.secteur .secteur-col {
  display: block;            /* éviter d'imposer des hauteurs égales */
}

.secteur .secteur-block {
  width: 100%;
  padding: 16px;             /* espacement interne sur les bords du bloc */
  border: var(--secteur-card-border-width, 1px) var(--secteur-card-border-style, solid) var(--secteur-card-border-color, rgba(0,0,0,0.08));
  border-radius: var(--secteur-card-radius, 12px); /* bords arrondis ajustables */
  background: #fff;          /* fond blanc pour lisibilité (ajustable/optionnel) */
  box-shadow: var(--secteur-card-shadow, 0 8px 24px rgba(0,0,0,0.12)); /* ombre portée ajustable */
  transition: var(--secteur-card-transition, transform .3s ease, box-shadow .3s ease);
  transform: translateZ(0);
  will-change: transform;
  overflow: hidden;          /* pour arrondir aussi les images/contenus internes */
  box-sizing: border-box;
}

/* Effet zoom au survol/focus */
.secteur .secteur-block:hover,
.secteur .secteur-block:focus-within {
  transform: scale(var(--secteur-card-scale, 1.03));
  border-color: var(--secteur-card-border-color-hover, var(--secteur-card-border-color, rgba(0,0,0,0.12)));
  box-shadow: var(--secteur-card-shadow-hover, 0 12px 32px rgba(0,0,0,0.16));
}

/* État vide (si aucun contenu défini) */
.secteur .secteur-block.is-empty {
  background: transparent;
  border: 1px dashed rgba(0,0,0,0.15);
  box-shadow: none; /* pas d’ombre pour l’état vide */
}

/* Media (image) */
.secteur .secteur-media {
  margin-bottom: 8px;
}
.secteur .secteur-media img {
  display: block;
  width: 100%;
  height: auto;
}

/* Titre / description */
.secteur .secteur-title {
  margin: 0 0 8px 0;
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 600;
  text-transform: none;
}

.secteur .secteur-desc {
  line-height: 1.6;
  font-size: 0.9375rem;
}

.secteur .secteur-desc img {
  max-width: 100%;
  height: auto;
}

/* Responsive:
   - >=992px: 3 colonnes (2 rangées de 3)
   - 768-991px: 2 colonnes
   - 576-767px: 2 colonnes
   - <576px: 1 colonne
*/
@media (max-width: 1199.98px) {
  .secteur .secteur-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
  /* Sur petits écrans, éviter tout débordement et occuper toute la largeur du conteneur (évite le dépassement dû au padding du .container) */
  section.secteur { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; }
  .secteur .secteur-heading { width: 100%; }
  .secteur .secteur-inner { width: 100%; margin-left: 0; margin-right: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .secteur .secteur-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .secteur .secteur-inner { grid-template-columns: 1fr; }
}