/*
 * FICHIER   : assets/css/sections.css
 * RÔLE      : Styles de toutes les sections du corps de page.
 *             Chaque section est délimitée par un bloc commenté.
 *             C'est ici qu'on modifie l'apparence d'une section spécifique.
 *
 * STRUCTURE (dans l'ordre d'apparition sur la page)
 *   ══ TRUST BAR        → bande de réassurance sous le héro
 *   ══ ABOUT            → qui sommes-nous + vidéo + piliers
 *   ══ SERVICES         → grille de cartes services
 *   ══ PROCESS          → étapes numérotées
 *   ══ GALLERY STRIP    → bande de 3 photos
 *   ══ TESTIMONIAL      → citation bandeau
 *   ══ RÉALISATIONS     → galerie filtrée
 *   ══ PARTNERS         → logos + témoignages
 *   ══ ÉQUIPE           → cartes membres
 *   ══ CONTACT          → liens de contact
 *   ══ CTA FINAL        → bandeau vert avant footer
 *   ══ FOOTER           → pied de page
 *
 * OÙ MODIFIER QUOI
 *   Une section spécifique → trouver le bloc /* ══ NOM ══ *\/ et modifier
 *   Variables de couleur   → base.css :root
 *   Responsive             → responsive.css
 *   Modals/overlays        → modals.css
 *
 * DÉPENDANCES
 *   base.css → variables, .sec-h, .sec-p, .sec-eyebrow, boutons
 */


/* ══════════════════════════════════════════════════════════════
   TRUST BAR
   Bande de réassurance juste sous le héro.
   Modifier les items → BDD nf_settings.trust_bar_items (JSON)
   Modifier l'apparence → ici
══════════════════════════════════════════════════════════════ */
.trust-bar {
  background:      var(--dark-card);
  border-bottom:   1px solid var(--line);
  padding:         2rem 5vw;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             1.5rem;
}
.trust-item  { display: flex; align-items: center; gap: .9rem; }
.trust-ico   { font-size: 1.3rem; }
.trust-label { font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.trust-val   { font-family: 'Playfair Display', serif; font-size: 1.2rem; color: var(--cream); line-height: 1.2; }
.trust-div   { width: 1px; height: 36px; background: var(--line); }


/* ══════════════════════════════════════════════════════════════
   ABOUT — "Qui sommes-nous"
   Colonne gauche : façade vidéo YouTube portrait
   Colonne droite : texte + piliers
   Modifier la vidéo → config.php (YT_VIDEO_ID)
   Modifier le layout → templates/sections/about.php
   Pour dynamiser la vidéo → voir commentaires dans about.php
══════════════════════════════════════════════════════════════ */
.about {
  padding:     8rem 5vw;
  display:     grid;
  grid-template-columns: 1fr 1fr;
  gap:         7rem;
  align-items: center;
  background:  var(--surface);
}

/* Conteneur colonne gauche */
.about-media { position: relative; }

/* ── Façade vidéo ─────────────────────────────────────────────
   Format portrait (même ratio que l'ancienne image about-img-main)
   object-fit:cover recadre la thumbnail 16/9 en portrait sans déformer
   Modifier la hauteur → aspect-ratio ci-dessous
──────────────────────────────────────────────────────────── */
.about-video-facade {
  position: relative;
  width:    100%;
  overflow: hidden;
  cursor:   pointer;
  /* Même ratio que l'ancienne image portrait (4/5) */
  aspect-ratio: 4 / 5;
  background:   var(--dark-card2);
}

/* Thumbnail recadrée en portrait */
.about-video-thumb {
  position: absolute;
  inset:    0;
  width:    100%;
  height:   100%;
}
.about-thumb-img {
  width:      100%;
  height:     100%;
  object-fit: cover;        /* recadre le 16/9 en portrait sans déformer */
  object-position: center;  /* centrage de la zone recadrée */
  filter:     brightness(.55);
  transition: filter .45s ease, transform .45s ease;
}
.about-video-facade:hover .about-thumb-img {
  filter:    brightness(.72);
  transform: scale(1.03);
}

/* Overlay dégradé premium par-dessus la thumbnail */
.about-thumb-overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    135deg,
    rgba(6,13,10,.85) 0%,
    rgba(6,13,10,.2)  60%,
    transparent       100%
  );
  transition: opacity .3s;
}
.about-video-facade:hover .about-thumb-overlay { opacity: .7; }

/* Bouton play central
   Modifier la taille → width/height
   Modifier la couleur → background
   Modifier le glow   → box-shadow */
.about-play-wrap {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-direction:  column;
  gap:             1.2rem;
  pointer-events:  none;
}
.about-play-btn {
  width:         72px;
  height:        72px;
  border-radius: 50%;
  background:    rgba(57,181,74,.92);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     1.8rem;
  box-shadow:
    0 0 0 12px rgba(57,181,74,.18),
    0 0 0 24px rgba(57,181,74,.07);
  transition:    transform .3s ease, box-shadow .3s ease;
}
.about-video-facade:hover .about-play-btn {
  transform:  scale(1.1);
  box-shadow:
    0 0 0 16px rgba(57,181,74,.24),
    0 0 0 32px rgba(57,181,74,.1);
}
.about-play-label {
  font-size:      .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color:          rgba(255,255,255,.75);
  font-weight:    400;
}

/* Badge type vidéo (coin bas gauche) */
.about-video-badge {
  position:       absolute;
  bottom:         1.2rem;
  left:           1.2rem;
  background:     rgba(57,181,74,.2);
  border:         1px solid rgba(57,181,74,.4);
  color:          var(--g4);
  font-size:      .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding:        .3rem .9rem;
  font-weight:    500;
  pointer-events: none;
}

/* Player iframe (caché avant le clic, affiché par app.js) */
.about-player-wrap {
  position: absolute;
  inset:    0;
  width:    100%;
  height:   100%;
  display:  none; /* affiché par playAboutVideo() dans app.js */
  background: #000;
}
.about-player-wrap iframe {
  position: absolute;
  inset:    0;
  width:    100%;
  height:   100%;
  border:   none;
}

/* Image secondaire superposée (coin bas droit)
   Modifier la taille → width/aspect-ratio
   Modifier la position → bottom/right */
.about-img-sec {
  position:     absolute;
  bottom:       -3rem;
  right:        -3rem;
  width:        56%;
  aspect-ratio: 1;
  background:   center/cover no-repeat;
  border:       6px solid var(--surface);
  z-index:      2;
}

/* Badge années (coin haut gauche)
   Modifier le chiffre → BDD nf_settings.about_years */
.about-badge {
  position:        absolute;
  top:             -2rem;
  left:            -2rem;
  width:           108px;
  height:          108px;
  background:      var(--g1);
  border-radius:   50%;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  z-index:         3;
  box-shadow:      0 16px 48px rgba(0,0,0,.5);
}
.badge-n { font-family: 'Playfair Display', serif; font-size: 2.2rem; color: var(--g4); line-height: 1; }
.badge-l { font-size: .52rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.35); text-align: center; margin-top: .2rem; }

/* Piliers de valeurs (grille 2×2)
   Ajouter un pilier → BDD nf_pillars
   Modifier le nombre de colonnes → grid-template-columns */
.about-pillars {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1rem;
  margin-top:            2rem;
}
.pillar {
  padding:    1.4rem;
  border:     1px solid var(--line);
  background: var(--dark-card2);
  transition: border-color .3s, background .3s;
  cursor:     default;
}
.pillar:hover { border-color: var(--g4); background: rgba(57,181,74,.08); }
.pillar-ico   { font-size: 1.2rem; margin-bottom: .5rem; }
.pillar-t     { font-size: .85rem; font-weight: 600; color: var(--cream); margin-bottom: .3rem; }
.pillar-d     { font-size: .78rem; color: var(--muted); line-height: 1.6; }


/* ══════════════════════════════════════════════════════════════
   SERVICES — grille de cartes
   Ajouter/retirer un service → BDD nf_services
   Modifier le nombre de colonnes → .srv-grid grid-template-columns
══════════════════════════════════════════════════════════════ */
.services {
  padding:  8rem 5vw;
  background: var(--g1);
  position: relative;
  overflow: hidden;
}
.services::before {
  content:       '';
  position:      absolute;
  top:           -200px;
  right:         -200px;
  width:         600px;
  height:        600px;
  border-radius: 50%;
  background:    radial-gradient(circle, rgba(57,181,74,.08), transparent 70%);
  pointer-events: none;
}
.services-hd {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-end;
  margin-bottom:   4rem;
  flex-wrap:       wrap;
  gap:             2rem;
}

/* Grille services — 3 colonnes desktop
   Modifier → grid-template-columns */
.srv-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   2px;
  background:            rgba(57,181,74,.04);
}

/* Carte service */
.srv-card {
  background:     var(--dark-card);
  padding:        0 0 2rem 0;
  position:       relative;
  overflow:       hidden;
  cursor:         default;
  transition:     transform .35s ease, box-shadow .35s ease;
  display:        flex;
  flex-direction: column;
}
.srv-card:hover {
  transform:  translateY(-6px);
  box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(57,181,74,.25);
  z-index:    2;
}

/* Image de la carte */
.srv-img-wrap   { width: 100%; height: 190px; overflow: hidden; position: relative; flex-shrink: 0; }
.srv-img-wrap img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  filter:     brightness(.55) saturate(.9);
  transition: transform .65s cubic-bezier(.25,.46,.45,.94), filter .5s ease;
}
.srv-card:hover .srv-img-wrap img { transform: scale(1.08); filter: brightness(.78) saturate(1.1); }
.srv-img-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, var(--dark-card) 100%); }
.srv-img-num     { position: absolute; top: .9rem; right: 1rem; font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 400; color: rgba(255,255,255,.18); z-index: 1; line-height: 1; pointer-events: none; transition: color .4s; }
.srv-card:hover .srv-img-num { color: rgba(57,181,74,.35); }
.srv-img-badge   { position: absolute; bottom: .9rem; left: 1rem; background: rgba(57,181,74,.9); color: white; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; padding: .35rem .9rem; font-weight: 600; opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; pointer-events: none; }
.srv-card:hover .srv-img-badge { opacity: 1; transform: translateY(0); }

/* Corps de la carte */
.srv-card-body { padding: 1.4rem 2rem 0; flex: 1; }
.srv-ico       { width: 44px; height: 44px; background: rgba(57,181,74,.15); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; margin-bottom: 1rem; border-radius: 2px; }
.srv-t         { font-family: 'Playfair Display', serif; font-size: 1.15rem; color: var(--cream); margin-bottom: .6rem; font-weight: 400; }
.srv-d         { font-size: .82rem; color: var(--muted); line-height: 1.7; font-weight: 300; }

/* Boutons de la carte */
.srv-a-wrap { padding: .6rem 2rem 0; display: flex; gap: 1.5rem; margin-top: auto; }
.srv-a      { background: none; border: none; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--g4); cursor: pointer; padding: .4rem 0; font-family: 'Jost', sans-serif; font-weight: 500; transition: color .2s; }
.srv-a:hover { color: var(--g5); }


/* ══════════════════════════════════════════════════════════════
   PROCESS — étapes numérotées
   Ajouter/retirer une étape → BDD nf_process_steps
   Modifier le nombre de colonnes → .steps grid-template-columns
══════════════════════════════════════════════════════════════ */
.process       { padding: 8rem 5vw; background: var(--surface); }
.process-inner { max-width: 1200px; margin: 0 auto; }
.process-hd    { margin-bottom: 4rem; }

/* Grille étapes — 4 colonnes desktop */
.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 2rem; }

.step   { text-align: center; }
.step-c { font-family: 'Playfair Display', serif; font-size: 4rem; color: rgba(57,181,74,.12); font-weight: 400; line-height: 1; margin-bottom: 1.2rem; }
.step-t { font-size: .9rem; font-weight: 600; color: var(--cream); margin-bottom: .6rem; letter-spacing: .04em; }
.step-d { font-size: .82rem; color: var(--muted); line-height: 1.75; font-weight: 300; }


/* ══════════════════════════════════════════════════════════════
   GALLERY STRIP — bande de 3 photos
   Modifier les images → BDD nf_gallery section='strip'
   Modifier la hauteur → .gal-item { height }
══════════════════════════════════════════════════════════════ */
.gallery   { background: var(--g1); }
.gal-strip { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; }
.gal-item  { position: relative; height: 280px; overflow: hidden; }
.gal-item img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.6); transition: transform .7s ease, filter .5s; }
.gal-item:hover img { transform: scale(1.06); filter: brightness(.85); }
.gal-lbl { position: absolute; bottom: 1.4rem; left: 1.6rem; font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.7); }


/* ══════════════════════════════════════════════════════════════
   TESTIMONIAL — citation bandeau
   Modifier le contenu → BDD nf_settings.testimonial_quote/author
   Pour un carousel → voir templates/sections/testimonial.php
══════════════════════════════════════════════════════════════ */
.testimonial { padding: 5rem 5vw; background: var(--surface); text-align: center; }
.test-stars  { font-size: 1.1rem; color: var(--gold); letter-spacing: .3em; margin-bottom: 1.5rem; }
.test-q      { font-family: 'Playfair Display', serif; font-size: clamp(1.1rem,2.5vw,1.7rem); color: var(--cream); max-width: 780px; margin: 0 auto 1.2rem; line-height: 1.55; font-style: italic; }
.test-auth   { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }


/* ══════════════════════════════════════════════════════════════
   RÉALISATIONS — galerie filtrée + lightbox
   Ajouter une réalisation → BDD nf_gallery section='realisations'
   Ajouter un filtre → templates/sections/realisations.php
   Modifier le comportement → assets/js/realisations.js
══════════════════════════════════════════════════════════════ */
.realisations       { padding: 8rem 5vw; background: var(--g1); }
.realisations-inner { max-width: 1200px; margin: 0 auto; }
.realisations-hd    { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 3rem; flex-wrap: wrap; gap: 2rem; }

/* Boutons de filtre */
.real-filter { display: flex; gap: .5rem; flex-wrap: wrap; }
.real-btn    { background: rgba(57,181,74,.05); border: 1px solid rgba(57,181,74,.12); color: var(--muted); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; padding: .5rem 1.2rem; cursor: pointer; font-family: 'Jost', sans-serif; transition: all .2s; }
.real-btn.active,
.real-btn:hover { background: rgba(57,181,74,.12); border-color: var(--g4); color: var(--g4); }

/* Grille réalisations — 4 colonnes
   Première image en double largeur (.real-item:first-child) */
.real-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }
.real-item { position: relative; aspect-ratio: 1; overflow: hidden; cursor: pointer; }
.real-item:first-child { grid-column: span 2; aspect-ratio: 16/9; }

.real-img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.65); transition: transform .55s ease, filter .4s; }
.real-item:hover .real-img { transform: scale(1.06); filter: brightness(.9); }

.real-overlay  { position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,13,10,.85) 0%, transparent 55%); opacity: 0; transition: opacity .3s; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.2rem; }
.real-item:hover .real-overlay { opacity: 1; }
.real-cat      { font-size: .6rem; letter-spacing: .15em; text-transform: uppercase; color: var(--g4); margin-bottom: .3rem; }
.real-title    { font-size: .85rem; color: white; font-weight: 500; }
.real-expand   { position: absolute; top: .8rem; right: .8rem; width: 32px; height: 32px; background: rgba(57,181,74,.85); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s; font-size: .85rem; }
.real-item:hover .real-expand { opacity: 1; }
.real-more     { text-align: center; margin-top: 3rem; }


/* ══════════════════════════════════════════════════════════════
   PARTNERS — logos + témoignages
   Ajouter un logo → BDD nf_partners
   Ajouter un témoignage → BDD nf_testimonials
   Modifier la vitesse du carrousel → @keyframes scrollLogos
══════════════════════════════════════════════════════════════ */
.partners       { padding: 7rem 5vw; background: var(--surface); }
.partners-inner { max-width: 1200px; margin: 0 auto; }
.partners-hd    { text-align: center; margin-bottom: 3.5rem; }

/* Carrousel logos infini */
.logos-track-wrap { overflow: hidden; position: relative; margin-bottom: 4rem; }
.logos-track-wrap::before,
.logos-track-wrap::after { content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none; }
.logos-track-wrap::before { left: 0; background: linear-gradient(to right, var(--surface), transparent); }
.logos-track-wrap::after  { right: 0; background: linear-gradient(to left, var(--surface), transparent); }

.logos-track { display: flex; gap: 3.5rem; align-items: center; animation: scrollLogos 28s linear infinite; }
.logos-track:hover { animation-play-state: paused; }
@keyframes scrollLogos {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.partner-logo       { flex-shrink: 0; opacity: .55; transition: opacity .3s; cursor: default; }
.partner-logo:hover { opacity: 1; }

/* Grille témoignages — 3 colonnes */
.partner-testimonials { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; margin-top: 1rem; }
.pt-card { background: var(--dark-card); border: 1px solid var(--line); padding: 2rem; transition: border-color .3s; }
.pt-card:hover { border-color: rgba(57,181,74,.3); }
.pt-quote  { font-size: .88rem; color: var(--muted); line-height: 1.85; font-style: italic; margin-bottom: 1.5rem; font-weight: 300; }
.pt-author { display: flex; align-items: center; gap: .9rem; }
.pt-avatar { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; color: white; flex-shrink: 0; }
.pt-name   { font-size: .88rem; font-weight: 600; color: var(--cream); }
.pt-role   { font-size: .72rem; color: var(--muted); margin-top: .1rem; }
.pt-stars  { font-size: .75rem; color: var(--gold); margin-top: .2rem; }


/* ══════════════════════════════════════════════════════════════
   ÉQUIPE — cartes membres
   Ajouter/modifier un membre → BDD nf_team
   Modifier le nombre de colonnes → .equipe-grid grid-template-columns
══════════════════════════════════════════════════════════════ */
.equipe       { padding: 8rem 5vw; background: var(--g1); }
.equipe-inner { max-width: 1200px; margin: 0 auto; }
.equipe-hd    { margin-bottom: 3.5rem; }

/* Grille membres — 4 colonnes desktop */
.equipe-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 2rem; }

.equipe-card { background: var(--dark-card); overflow: hidden; transition: transform .35s, box-shadow .35s; }
.equipe-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,.35); }
.equipe-photo { width: 100%; aspect-ratio: 3/4; object-fit: cover; filter: brightness(.75) grayscale(.2); transition: filter .4s; }
.equipe-card:hover .equipe-photo { filter: brightness(.9) grayscale(0); }
.equipe-info  { padding: 1.4rem; }
.equipe-name  { font-family: 'Playfair Display', serif; font-size: 1.05rem; color: var(--cream); margin-bottom: .2rem; }
.equipe-role  { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--g4); margin-bottom: .8rem; }
.equipe-email { display: flex; align-items: center; gap: .4rem; font-size: .75rem; color: var(--muted); text-decoration: none; transition: color .2s; }
.equipe-email:hover { color: var(--g4); }
.equipe-email-ico { font-size: .9rem; }


/* ══════════════════════════════════════════════════════════════
   CONTACT — liens de contact directs
   Modifier les données → BDD nf_settings (phone_1, phone_2, email, address)
   Ajouter un lien → templates/sections/contact.php + BDD nf_settings
══════════════════════════════════════════════════════════════ */
.info-sec { padding: 8rem 5vw; background: var(--surface); display: flex; justify-content: center; }

.contact-links { display: flex; flex-direction: column; gap: 1rem; margin-top: 2rem; }

.c-link { display: flex; align-items: center; gap: 1.4rem; padding: 1.4rem; background: var(--dark-card); border: 1px solid var(--line); text-decoration: none; transition: border-color .3s, background .3s; }
.c-link:hover { border-color: rgba(57,181,74,.3); background: rgba(57,181,74,.05); }
.c-link-ico { font-size: 1.3rem; flex-shrink: 0; }
.c-link-lbl { font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.c-link-val { font-size: .95rem; color: var(--cream); }
.c-link-val.big { font-family: 'Playfair Display', serif; font-size: 1.15rem; }


/* ══════════════════════════════════════════════════════════════
   CTA FINAL — bandeau vert avant footer
   Modifier le contenu → BDD nf_settings (cta_title, phone_1, phone_2)
   Modifier la couleur de fond → background (utilise var(--g4) = couleur marque)
══════════════════════════════════════════════════════════════ */
.cta-final {
  padding:     6rem 5vw;
  background:  var(--g4);
  display:     flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap:   wrap;
  gap:         3rem;
  position:    relative;
  overflow:    hidden;
}
.cta-final::before {
  content:       '';
  position:      absolute;
  right:         -80px;
  top:           -80px;
  width:         360px;
  height:        360px;
  border-radius: 50%;
  background:    rgba(255,255,255,.08);
  pointer-events: none;
}
.cta-final h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.8rem,3vw,2.8rem); font-weight: 400; color: white; max-width: 480px; line-height: 1.2; }
.cta-final h2 em { font-style: italic; }

.cta-right  { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-end; }
.cta-phones { display: flex; flex-direction: column; gap: .4rem; text-align: right; }
.cta-phone-lbl { font-size: .65rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.7); }
.cta-phone-a   { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: white; text-decoration: none; display: flex; align-items: center; gap: .5rem; justify-content: flex-end; transition: color .2s; }
.cta-phone-a:hover { color: rgba(255,255,255,.75); }


/* ══════════════════════════════════════════════════════════════
   FOOTER — pied de page
   Modifier les colonnes → templates/sections/footer.php
   Modifier les liens → BDD nf_footer_links
   Modifier la description → BDD nf_settings.footer_description
══════════════════════════════════════════════════════════════ */
footer {
  background:   var(--g1);
  padding:      4.5rem 5vw 2rem;
  border-top:   1px solid var(--line);
}
.footer-grid {
  display:               grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap:                   4rem;
  padding-bottom:        3rem;
  border-bottom:         1px solid rgba(255,255,255,.05);
}
.foot-p { font-size: .82rem; color: rgba(255,255,255,.25); line-height: 1.75; max-width: 220px; font-weight: 300; }

.foot-col h4  { font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; color: var(--g4); margin-bottom: 1.2rem; font-weight: 500; }
.foot-col a,
.foot-col span { display: block; font-size: .82rem; color: rgba(255,255,255,.28); text-decoration: none; margin-bottom: .6rem; transition: color .2s; line-height: 1.5; }
.foot-col a:hover { color: var(--g4); }

.foot-bottom { padding-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.foot-copy,
.foot-made   { font-size: .72rem; color: rgba(255,255,255,.15); }


/* ══════════════════════════════════════════════════════════════
   CTA FLOTTANT MOBILE
   Visible uniquement sur mobile (voir responsive.css)
   Modifier les boutons → templates/partials/float_cta.php
   Modifier le comportement → assets/js/float_cta.js
══════════════════════════════════════════════════════════════ */
#floatCta { position: fixed; bottom: 1.4rem; right: 1.2rem; z-index: 8800; display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }

.fcta-menu { display: flex; flex-direction: column; gap: .5rem; align-items: flex-end; pointer-events: none; opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .18s ease, transform .18s ease; }
.fcta-menu.open { pointer-events: all; opacity: 1; transform: translateY(0) scale(1); }

.fcta-btn { display: inline-flex; align-items: center; gap: .55rem; padding: .6rem 1.1rem .6rem .8rem; border-radius: 50px; border: none; cursor: pointer; font-family: 'Jost', sans-serif; font-size: .78rem; font-weight: 600; letter-spacing: .03em; text-decoration: none; white-space: nowrap; box-shadow: 0 4px 16px rgba(0,0,0,.22); transition: transform .15s, box-shadow .15s; }
.fcta-btn:hover { transform: translateX(-3px); box-shadow: 0 6px 22px rgba(0,0,0,.3); }

.fcta-call    { background: #fff; color: #0d1f14; }
.fcta-wa-call { background: #25D366; color: #fff; }
.fcta-wa-msg  { background: #128C7E; color: #fff; }
.fcta-ico     { font-size: 1rem; }

.fcta-toggle {
  width:         54px;
  height:        54px;
  border-radius: 50%;
  background:    var(--g4);
  border:        none;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     1.3rem;
  box-shadow:    0 4px 20px rgba(57,181,74,.45);
  transition:    background .2s, transform .2s;
  position:      relative;
}
.fcta-toggle:hover { background: var(--g5); transform: scale(1.06); }
.fcta-toggle::before {
  content:       '';
  position:      absolute;
  inset:         -5px;
  border-radius: 50%;
  border:        2px solid rgba(57,181,74,.3);
  animation:     fctaPulse 2s ease-in-out infinite;
}
@keyframes fctaPulse {
  0%, 100% { transform: scale(1); opacity: .8; }
  50%       { transform: scale(1.18); opacity: .2; }
}