/*
  novatra-footer.css
  Objectif
  1. Scope strict sur le footer via .nv-footer et .nv-footer-scope
  2. Mise en page stable: colonne gauche (branding) + colonne droite (liens)
  3. Grille 3 colonnes à droite (À propos, Confidentialité, Réseaux sociaux)
  4. Empêcher la casse de mots imposée par le bloc Navigation
*/

/* Cadre général */
.nv-footer{
  background: #fff;
}

.nv-footer-scope{
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  padding: 56px 24px;
}

/* Nettoyage typographique minimal */
.nv-footer-scope .wp-block-heading,
.nv-footer-scope p{
  margin-top: 0;
}

.nv-footer-scope p{
  margin-bottom: 10px;
}

.nv-footer-scope a{
  text-decoration: none;
}

.nv-footer-scope a:hover{
  text-decoration: underline;
}

/* Empêche la casse de mots dans les libellés du bloc Navigation */
.nv-footer-scope .wp-block-navigation-item__label{
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

/* Layout principal: 2 colonnes (gauche, droite)
   On force grid car Gutenberg peut injecter display:flex via is-layout-flex */
.nv-footer-scope > .wp-block-columns:first-of-type,
.nv-footer-scope > .wp-block-group > .wp-block-columns:first-of-type{
  display: grid !important;
  grid-template-columns: minmax(320px, 1.15fr) 2.85fr;
  column-gap: 64px;
  row-gap: 28px;
  align-items: start;
  width: 100%;
}

/* Colonne gauche: aligner le titre avec le texte dessous */
.nv-footer-scope > .wp-block-columns:first-of-type > .wp-block-column:first-child,
.nv-footer-scope > .wp-block-group > .wp-block-columns:first-of-type > .wp-block-column:first-child{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.nv-footer-scope .wp-block-column:first-child > .wp-block-heading{
  margin: 0 0 14px 0;
}

.nv-footer-scope .wp-block-column:first-child > p{
  margin: 0;
}

/* Colonne droite: grille 3 colonnes sur le conteneur “space between” */
.nv-footer-scope .wp-block-column:last-child .wp-block-group.is-content-justification-space-between{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 22px 48px;
  align-content: start;
}

/* Relever les titres de sections à droite (À propos, Confidentialité, Réseaux sociaux) */
.nv-footer-scope .wp-block-column:last-child .wp-block-heading{
  margin: 0 0 14px 0;
  transform: translateY(-10px);
  display: inline-block;
}

/* Mobile */
@media (max-width: 860px){
  .nv-footer-scope{
    padding: 40px 18px;
  }

  .nv-footer-scope > .wp-block-columns:first-of-type,
  .nv-footer-scope > .wp-block-group > .wp-block-columns:first-of-type{
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 22px;
  }

  .nv-footer-scope .wp-block-column:last-child .wp-block-group.is-content-justification-space-between{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .nv-footer-scope .wp-block-column:last-child .wp-block-heading{
    transform: none;
  }

  .nv-footer-scope p{
    margin-bottom: 8px;
  }
}

/* Neutraliser le padding Gutenberg si présent dans le footer */
.nv-footer-scope > .wp-block-group.has-global-padding{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Layout principal à 2 colonnes, inchangé mais renforcé */
.nv-footer-scope > .wp-block-columns:first-of-type,
.nv-footer-scope > .wp-block-group > .wp-block-columns:first-of-type{
  display: grid !important;
  grid-template-columns: minmax(320px, 1.15fr) 2.85fr;
  column-gap: 64px;
  row-gap: 28px;
  align-items: start;
  width: 100%;
}

/* Colonne gauche, alignement titre et texte */
.nv-footer-scope .wp-block-column:first-child > .wp-block-heading{
  margin: 0 0 14px 0;
  line-height: 1.2;
}

.nv-footer-scope .wp-block-column:first-child > p{
  margin: 0;
}

/* Zone droite, grille 3 colonnes, stable */
.nv-footer-scope .wp-block-column:last-child .wp-block-group.is-content-justification-space-between{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  column-gap: 56px;
  row-gap: 24px;
  align-items: start;
}

/* Chaque section de droite doit être une colonne verticale, sans wrap */
.nv-footer-scope .wp-block-column:last-child .wp-block-group.is-content-justification-space-between > .wp-block-group{
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  row-gap: 12px;
}

/* Titre de section, relevé proprement par marge, pas par transform */
.nv-footer-scope .wp-block-column:last-child .wp-block-group.is-content-justification-space-between > .wp-block-group > .wp-block-heading{
  margin: -10px 0 12px 0;
  line-height: 1.2;
}

/* Navigation, empêcher toute casse et tout passage en ligne */
.nv-footer-scope .wp-block-column:last-child .wp-block-navigation__container{
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  row-gap: 10px;
}

.nv-footer-scope .wp-block-navigation-item__label{
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

/* Mobile */
@media (max-width: 860px){
  .nv-footer-scope > .wp-block-columns:first-of-type,
  .nv-footer-scope > .wp-block-group > .wp-block-columns:first-of-type{
    grid-template-columns: 1fr;
  }

  .nv-footer-scope .wp-block-column:last-child .wp-block-group.is-content-justification-space-between{
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .nv-footer-scope .wp-block-column:last-child .wp-block-group.is-content-justification-space-between > .wp-block-group > .wp-block-heading{
    margin-top: 0;
  }
}

/* TRACE ROUGE (temporaire)
   Activez en retirant les commentaires, puis supprimez après validation */
/*
footer.nv-footer{ outline: 8px solid red !important; outline-offset: -6px !important; }
footer.nv-footer .nv-footer-scope{ box-shadow: 0 0 0 4px red inset !important; }
footer.nv-footer .wp-block-columns{ box-shadow: 0 0 0 2px rgba(255,0,0,.35) inset !important; }
footer.nv-footer .wp-block-column{ box-shadow: 0 0 0 2px rgba(255,0,0,.18) inset !important; }
*/

/* 1) Cadre général du footer */
footer.nv-footer .nv-footer-scope{
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 56px 24px !important;
}

/* Neutralise le padding Gutenberg éventuel dans le footer */
footer.nv-footer .nv-footer-scope > .wp-block-group.has-global-padding{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 2) Le premier Columns du footer doit être un vrai 2-colonnes (gauche + droite) */
footer.nv-footer .nv-footer-scope > .wp-block-group > .wp-block-columns:first-of-type{
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 64px !important;
  align-items: flex-start !important;
  width: 100% !important;
}

/* 3) Supprimer les colonnes “vides” du milieu (cause principale du grand vide) */
@supports selector(:has(*)){
  footer.nv-footer .nv-footer-scope > .wp-block-group > .wp-block-columns:first-of-type > .wp-block-column:not(:has(h2, p, nav, .wp-block-navigation, a)){
    display: none !important;
  }

  /* Largeurs stables : gauche fixe, droite flexible */
  footer.nv-footer .nv-footer-scope > .wp-block-group > .wp-block-columns:first-of-type > .wp-block-column:has(h2, p){
    flex: 0 0 420px !important;
    min-width: 360px !important;
  }

  footer.nv-footer .nv-footer-scope > .wp-block-group > .wp-block-columns:first-of-type > .wp-block-column:has(nav, .wp-block-navigation){
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
}

/* 4) Bloc gauche : aligner le titre avec le texte dessous */
footer.nv-footer .nv-footer-scope .wp-block-column:first-child > h2{
  margin: 0 0 14px 0 !important;
  padding-left: 0 !important;
}

footer.nv-footer .nv-footer-scope .wp-block-column:first-child > p{
  margin: 0 !important;
  padding-left: 0 !important;
}

/* 5) Zone droite : empêcher le wrap Gutenberg qui “éparpille” À propos */
footer.nv-footer .nv-footer-scope .is-layout-flex{
  flex-wrap: nowrap !important;
}

/* Conteneur qui tient les 3 sections (À propos, Confidentialité, Réseaux sociaux) en grille */
footer.nv-footer .nv-footer-scope .wp-block-column:last-child
.wp-block-group.is-content-justification-space-between{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(200px, 1fr)) !important;
  column-gap: 56px !important;
  row-gap: 24px !important;
  align-items: start !important;
}

/* Chaque section doit être une pile verticale : titre au-dessus, liens dessous */
footer.nv-footer .nv-footer-scope .wp-block-column:last-child
.wp-block-group.is-content-justification-space-between > .wp-block-group{
  display: flex !important;
  flex-direction: column !important;


/* Trace visuelle temporaire, à supprimer après validation */
footer.nv-footer{ outline: 6px solid red !important; outline-offset: -6px !important; }

/* Cadre utile */
footer.nv-footer .nv-footer-scope{
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 56px 24px !important;
}

/* Réduction des “trous” Gutenberg */
footer.nv-footer .nv-footer-scope .wp-block-spacer{
  display: none !important;
  height: 0 !important;
}

/* Grille principale du footer
   1 colonne gauche large
   3 colonnes de sections à droite */
footer.nv-footer .nv-footer-scope > .wp-block-columns:first-of-type,
footer.nv-footer .nv-footer-scope > .wp-block-group > .wp-block-columns:first-of-type{
  display: grid !important;
  grid-template-columns: minmax(520px, 1.8fr) repeat(3, minmax(220px, 1fr)) !important;
  column-gap: 56px !important;
  row-gap: 12px !important;
  align-items: start !important;
  width: 100% !important;
}

/* Placement par ordre des colonnes dans votre HTML actuel
   1 titre gauche
   2 texte gauche
   3 vide
   4 À propos
   5 vide
   6 Confidentialité
   7 vide
   8 Réseaux sociaux */
footer.nv-footer .nv-footer-scope .wp-block-columns > .wp-block-column:nth-child(1){
  grid-column: 1 !important;
  grid-row: 1 !important;
}

footer.nv-footer .nv-footer-scope .wp-block-columns > .wp-block-column:nth-child(2){
  grid-column: 1 !important;
  grid-row: 2 !important;
}

footer.nv-footer .nv-footer-scope .wp-block-columns > .wp-block-column:nth-child(4){
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
}

footer.nv-footer .nv-footer-scope .wp-block-columns > .wp-block-column:nth-child(6){
  grid-column: 3 !important;
  grid-row: 1 / span 2 !important;
}

footer.nv-footer .nv-footer-scope .wp-block-columns > .wp-block-column:nth-child(8){
  grid-column: 4 !important;
  grid-row: 1 / span 2 !important;
}

/* Masque les colonnes séparatrices vides */
footer.nv-footer .nv-footer-scope .wp-block-columns > .wp-block-column:nth-child(3),
footer.nv-footer .nv-footer-scope .wp-block-columns > .wp-block-column:nth-child(5),
footer.nv-footer .nv-footer-scope .wp-block-columns > .wp-block-column:nth-child(7),
footer.nv-footer .nv-footer-scope .wp-block-columns > .wp-block-column:nth-child(9){
  display: none !important;
}

/* Bloc gauche, alignement et anti casse */
footer.nv-footer .nv-footer-scope .wp-block-columns > .wp-block-column:nth-child(1) .wp-block-heading{
  margin: 0 0 14px 0 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

footer.nv-footer .nv-footer-scope .wp-block-columns > .wp-block-column:nth-child(2) p{
  margin: 0 !important;
}

/* Sections à droite, titres relevés et contenu empilé */
footer.nv-footer .nv-footer-scope .wp-block-columns > .wp-block-column:nth-child(4) .wp-block-heading,
footer.nv-footer .nv-footer-scope .wp-block-columns > .wp-block-column:nth-child(6) .wp-block-heading,
footer.nv-footer .nv-footer-scope .wp-block-columns > .wp-block-column:nth-child(8) .wp-block-heading{
  margin: -8px 0 12px 0 !important;
  line-height: 1.2 !important;
}

/* Navigation, forcer une liste verticale sous chaque titre */
footer.nv-footer .nv-footer-scope .wp-block-navigation__container{
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  row-gap: 10px !important;
}

footer.nv-footer .nv-footer-scope .wp-block-navigation-item__label{
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

/* Mobile */
/* Petit écran : éviter tout rognage du footer par un parent */
@media (max-width: 980px){
  footer.nv-footer,
  footer.nv-footer .nv-footer-scope{
    overflow: visible !important;
  }

  /* Neutralise les parents Gutenberg fréquents qui peuvent couper */
  footer.nv-footer .wp-block-group,
  footer.nv-footer .wp-block-columns,
  footer.nv-footer .wp-block-column{
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
  }
}

