/* faf-footer.css — habillage boho du pied de page (gabarit Elementor #63).

   POURQUOI UNE FEUILLE, ET NON LE GABARIT
   Le pied de page vit en base, et la préprod est la source de vérité du contenu.
   Réécrire `_elementor_data` pour du style écraserait, à chaque déploiement, ce
   que Marie y aurait ajusté. Même raison que le déplacement des réseaux sociaux
   sous « À propos », fait en JS (faf-tools.js) plutôt que dans le gabarit.

   POURQUOI `!important`
   Elementor génère ses règles avec quatre classes empilées
   (`.elementor-63 .elementor-element.elementor-element-xxx .elementor-…`) et le
   gabarit ajoute son propre `custom_css` par-dessus. Les égaler demanderait des
   sélecteurs illisibles ; la priorité est assumée une fois, ici, plutôt que
   disséminée.

   POURQUOI DES JETONS LOCAUX `--ff-*`
   nav.css redéclare --ink, --ink-soft, --cream et --teal-dark sur :root avec
   D'AUTRES valeurs que faf-tokens.css, et se charge après : un `var(--ink)` ici
   ne rendrait pas la couleur attendue. Les valeurs sont donc recopiées sous des
   noms qui n'appartiennent qu'au pied de page.

   CE QUI A CHANGÉ, ET POURQUOI
   Le pied venait du thème d'origine « Zoe Spirit » et n'avait pas suivi la V3 :
   fond gris-mauve froid (#EBE5E3) contre les crèmes chauds du site, DM Sans
   contre Cormorant/Raleway, filet teal de 3px qu'on ne trouvait nulle part
   ailleurs, et des liens tous en teal qui donnaient une page d'annuaire. D'où
   l'impression de changer de site en arrivant en bas.
   ───────────────────────────────────────────────────────────────────────────── */

footer.elementor-element-ffmain01,
.elementor-element-ffcopy01 {
  --ff-sand:       #F5EBDD;
  /* Le brun des titres du site est #95633A. Il est calibré pour le papier des
     pages (#FBF6EE) : 4,7:1. Sur le sable du pied, un peu plus foncé, il tombe
     à 4,3:1 — sous le seuil AA pour du texte courant. Deux points de moins le
     ramènent à 5:1, pour un écart invisible à l'œil. */
  --ff-clay-deep:  #8A5A31;
  --ff-sienna:     #C0855A;
  --ff-gold:       #C6A063;
  --ff-teal:       #58AC9F;
  --ff-teal-dark:  #3D8579;
  --ff-ink:        #3E362D;
  --ff-text:       #5E5347;
  --ff-line:       rgba(62, 54, 45, .12);
  --ff-display:    'Cormorant Garamond', Georgia, serif;
  --ff-sans:       'Raleway', system-ui, sans-serif;
}

/* ── Section principale ─────────────────────────────────────────────────────
   Le filet teal de 3px est remplacé par le filet doré dégradé des pages
   (`.orn` de faf-service.css) : même vocabulaire, et il ne coupe plus la page
   en deux. */
.elementor-63 footer.elementor-element-ffmain01 {
  background-color: var(--ff-sand) !important;
  border: 0 !important;
  padding: 52px 48px 38px !important;
  position: relative;
}
.elementor-63 footer.elementor-element-ffmain01::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(198, 160, 99, .7) 22%,
    rgba(198, 160, 99, .7) 78%, transparent);
}

/* Les colonnes s'alignent sur la grille des pages (--wrap : 1160px). Elles
   filaient jusqu'aux bords, ce qui décalait la dernière colonne du reste du
   contenu sur grand écran. */
.elementor-63 footer.elementor-element-ffmain01 > .elementor-container {
  max-width: 1160px;
  margin-inline: auto;
}

/* ── Titres de colonnes ─────────────────────────────────────────────────────
   Cormorant, comme tous les titres du site, et la goutte teal du système de
   puces (`.faf-page .ul li::before`) en guise de marqueur — à la place du trait
   vertical teal, qui n'existe nulle part ailleurs.
   20px : le pied annonce des colonnes, il n'ouvre pas un chapitre. Au-delà, il
   se met à concurrencer les titres de la page qu'on vient de lire. */
.elementor-63 .faf-footer-col-title {
  margin-bottom: 16px !important;
}
.elementor-63 .faf-footer-col-title .elementor-heading-title {
  position: relative;
  font-family: var(--ff-display) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ff-clay-deep) !important;
  padding-left: 22px !important;
  border-left: 0 !important;
}
/* La goutte se centre sur la ligne, elle ne se place pas à une distance fixe du
   haut. `top: .36em` avait été réglé à l'œil sur une police précise : le titre
   est en Cormorant, un serif dont la hauteur d'x est basse dans son cadratin,
   si bien que la goutte flottait nettement au-dessus du milieu du mot — visible
   sur les trois colonnes. `top: 50%` avec un décalage de sa propre moitié ne
   dépend d'aucune métrique de fonte et tient à toutes les tailles. */
.elementor-63 .faf-footer-col-title .elementor-heading-title::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 10px; height: 10px;
  border-radius: 50% 50% 50% 0;
  transform: translateY(-50%) rotate(45deg);
  background: rgba(88, 172, 159, .12);
  border: 1.5px solid var(--ff-teal);
}

/* ── Liens de navigation ────────────────────────────────────────────────────
   Encre chaude au repos, teal au survol : le teal partout donnait un mur de
   liens et sortait de la logique du site, où il signale l'action.
   Deux balisages coexistent : les icon-list d'Elementor (colonnes « À propos »
   et « Blog & thèmes ») et la liste du shortcode [faf_related_services]
   (colonne « Accompagnements »). Ils doivent rendre à l'identique.

   L'AIR EST ENTRE LES ENTRÉES, PAS DANS LES LIGNES. Un interligne de 2 écartait
   autant les deux lignes d'un même libellé que deux libellés voisins :
   « Accompagnement individuel » se lisait comme deux liens. L'interligne
   redescend à 1,45 et l'espace passe en marge entre les <li> — même respiration
   d'ensemble, mais un libellé long reste un bloc. */
.elementor-63 footer .elementor-icon-list-item a,
.elementor-63 footer .faf-svc-links a {
  display: inline-block;
  font-family: var(--ff-sans) !important;
  /* 13px : un pied de page se parcourt du regard, il ne se lit pas. À 14 il
     pesait autant que le corps des pages, qu'il est censé suivre. */
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  color: var(--ff-text) !important;
  opacity: 1 !important;
  text-decoration: none;
  transition: color .2s ease, transform .2s ease;
}
/* Elementor répartit l'écart de son réglage « espacement » entre un
   padding-bottom et un margin-top : les deux sont repris ici, sinon la valeur
   du gabarit s'ajoute à celle-ci. */
.elementor-63 footer .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child) {
  padding-bottom: 9px !important;
  margin-bottom: 0 !important;
}
.elementor-63 footer .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child) {
  margin-top: 0 !important;
}
.elementor-63 footer .elementor-icon-list-text {
  color: inherit !important;
}
.elementor-63 footer .elementor-icon-list-item a:hover,
.elementor-63 footer .faf-svc-links a:hover {
  color: var(--ff-teal-dark) !important;
  transform: translateX(3px);
}
.elementor-63 footer .elementor-icon-list-items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.elementor-63 footer .faf-svc-links {
  gap: 9px;
}

/* ── Colonne d'identité ─────────────────────────────────────────────────── */
.elementor-63 footer .elementor-widget-image img {
  margin-bottom: 4px;
}

/* La signature reprend l'italique Cormorant des chapôs de pages (« Explorer les
   liens invisibles… »). Le `!important` vise le style en ligne du widget. */
.elementor-63 footer .elementor-widget-text-editor p {
  font-family: var(--ff-display) !important;
  font-style: italic !important;
  font-size: 17px !important;
  line-height: 1.5 !important;
  color: var(--ff-sienna) !important;
}

/* Même arbitrage que les listes : l'adresse passe sur deux lignes, l'écart entre
   coordonnées doit rester plus grand que l'écart entre ces deux lignes. */
.elementor-63 footer .faf-contact {
  gap: 10px;
  margin-top: 18px;
}
.elementor-63 footer .faf-contact-line {
  font-family: var(--ff-sans);
  font-size: 13px;
  line-height: 1.4;
  color: var(--ff-text);
  opacity: 1;
}
.elementor-63 footer .faf-contact-line:hover {
  color: var(--ff-teal-dark);
}

/* ── Réseaux sociaux ────────────────────────────────────────────────────────
   Déplacés sous « À propos » par faf-tools.js. Deux lignes de blanc et un filet
   marquent la coupure : sans elle, les icônes se lisent comme une entrée de
   plus dans la liste. L'anneau leur donne le même statut que les boutons
   fantômes des pages, au lieu de pastilles grises posées là. */
.elementor-63 .faf-footer-social {
  margin-top: 26px !important;
  padding-top: 18px;
  border-top: 1px solid var(--ff-line);
  width: 100% !important;
}
.elementor-63 .faf-footer-social .elementor-social-icon {
  margin-left: 0 !important;
}
.elementor-63 footer .elementor-social-icon {
  --icon-padding: .4em;
  background-color: transparent !important;
  border: 1px solid var(--ff-line);
  transition: border-color .2s ease, background-color .2s ease;
}
.elementor-63 footer .elementor-social-icon:hover {
  border-color: var(--ff-teal);
}

/* ── Barre de mentions ──────────────────────────────────────────────────────
   #3c3534 était un gris froid ; l'encre du site est brune. Le corps passe de
   8 à 10px : à 8px, en majuscules espacées, les mentions légales ne se lisaient
   plus. Crème à 62 % sur l'encre = 5,4:1, au-dessus du seuil AA. */
.elementor-63 .elementor-element-ffcopy01 {
  background-color: var(--ff-ink) !important;
  padding: 16px 48px !important;
}
.elementor-63 .elementor-element-ffcopy01 .elementor-icon-list-item,
.elementor-63 .elementor-element-ffcopy01 .elementor-icon-list-item a {
  font-family: var(--ff-sans) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  line-height: 1.6 !important;
}
.elementor-63 .elementor-element-ffcopy01 .elementor-icon-list-text {
  color: rgba(251, 246, 238, .62) !important;
  transition: color .2s ease;
}
.elementor-63 .elementor-element-ffcopy01 a:hover .elementor-icon-list-text {
  color: var(--ff-gold) !important;
}

/* ── Mobile ─────────────────────────────────────────────────────────────────
   Grille 2×2 : logo/coordonnées | À propos, puis Blog | Services. */
@media (max-width: 767px) {

  .elementor-63 footer.elementor-element-ffmain01 {
    padding: 40px 20px 30px !important;
  }
  .elementor-63 footer.elementor-element-ffmain01 > .elementor-container {
    max-width: none;
  }

  footer .elementor-column.elementor-element-ffcol1,
  footer .elementor-column.elementor-element-ffcol2,
  footer .elementor-column.elementor-element-ffcol3,
  footer .elementor-column.elementor-element-ffcol4 {
    width: 50% !important;
  }

  /* Le filet ne sépare que la SECONDE rangée : posé aussi sur la colonne 2, il
     traçait un trait au milieu de la première, entre le logo et « À propos ». */
  .elementor-63 .elementor-element-ffcol3,
  .elementor-63 .elementor-element-ffcol4 {
    border-top: 1px solid var(--ff-line);
    padding-top: 18px !important;
    margin-top: 12px;
  }

  .elementor-63 .faf-footer-col-title {
    margin-bottom: 10px !important;
  }
  .elementor-63 .faf-footer-col-title .elementor-heading-title {
    font-size: 18px !important;
    padding-left: 19px !important;
  }
  .elementor-63 .faf-footer-col-title .elementor-heading-title::before {
    width: 9px; height: 9px;
  }

  .elementor-63 footer .elementor-icon-list-item a,
  .elementor-63 footer .faf-svc-links a,
  .elementor-63 footer .faf-contact-line {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }
  /* Demi-largeur : presque tous les libellés passent sur deux lignes. L'écart
     entre entrées doit rester nettement plus grand que l'interligne. */
  .elementor-63 footer .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child) {
    padding-bottom: 10px !important;
  }
  .elementor-63 footer .faf-svc-links {
    gap: 10px;
  }
  /* 15px : à 16, « Accompagnement relationnel » ne tient plus sur la demi-largeur
     et se coupe après le premier mot. */
  .elementor-63 footer .elementor-widget-text-editor p {
    font-size: 15px !important;
  }
  .elementor-63 footer .elementor-widget:not(:last-child) {
    margin-block-end: 6px !important;
  }

  .elementor-63 .elementor-element-ffcopy01 {
    padding: 12px 20px !important;
  }
  .elementor-63 .elementor-element-ffcopy01 .elementor-icon-list-item,
  .elementor-63 .elementor-element-ffcopy01 .elementor-icon-list-item a {
    font-size: 9px !important;
    letter-spacing: .12em !important;
    line-height: 1.5 !important;
  }
}