/* ============================================================
   PAUSITY — PIED DE PAGE
   ============================================================ */

/* ===================== */
/*      VARIABLES        */
/* ===================== */

/* Les variables de marque viennent de menu.css (chargé avant).
   Les valeurs de repli gardent le footer correct si menu.css
   n'est pas chargé sur une page donnée. */
:root {
  --footer-bg: #ffffff;
  --footer-bottom-bg: #ffffff;        /* le crème déjà utilisé dans accueil.css */

  /* Sur fond clair, le vrai vert de marque est parfaitement lisible
     (contraste 5,4:1) — plus besoin d'une teinte éclaircie. */
  --footer-accent: var(--pausity-green, #007c34);
  --footer-accent-deep: var(--pausity-green-deep, #04512a);

  --footer-heading: var(--pausity-ink, #14181a);
  --footer-text: rgba(20, 24, 26, 0.78);
  --footer-text-soft: rgba(20, 24, 26, 0.50);
  --footer-hairline: rgba(20, 24, 26, 0.14);
  --footer-hairline-soft: rgba(20, 24, 26, 0.08);
}

/* --- VARIANTE FOND SOMBRE ---------------------------------
   Pour repasser au footer vert profond, décommenter ce bloc :
   il suffit de redéfinir les variables, aucune autre règle
   du fichier n'a besoin de changer.

:root {
  --footer-bg: #04512a;
  --footer-bottom-bg: #04512a;
  --footer-accent: #7ecfa0;
  --footer-accent-deep: #7ecfa0;
  --footer-heading: #ffffff;
  --footer-text: rgba(255, 255, 255, 0.82);
  --footer-text-soft: rgba(255, 255, 255, 0.55);
  --footer-hairline: rgba(255, 255, 255, 0.14);
  --footer-hairline-soft: rgba(255, 255, 255, 0.08);
}
.footer-logo img { border-radius: 10px; }
.footer-social .social img { filter: none; }

----------------------------------------------------------- */


/* ===================== */
/*    FOOTER GLOBAL      */
/* ===================== */

.site-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  font-family: var(--font-ui, "Inter", "Helvetica Neue", Arial, sans-serif);

  /* Sépare le footer du contenu de la page */
  border-top: 1px solid var(--footer-hairline-soft);
  margin-top: 0 !important;
}

.site-footer *,
.site-footer *::before,
.site-footer *::after {
  box-sizing: border-box;
}


/* ===================== */
/*    BLOC PRINCIPAL     */
/* ===================== */

.footer-main {
  padding: 72px 24px 48px;
}

.footer-grid {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;

  /* La colonne de marque ne descend jamais sous 280px : c'est la
     largeur qu'il faut au slogan pour tenir sur une seule ligne.
     En `1.1fr` simple, elle tombait à 252px vers 1200px de large et
     le slogan se coupait en deux lignes inégales. */
  grid-template-columns: minmax(280px, 1.15fr) 1fr 1fr 1.2fr 1.15fr;
  gap: 40px;
  align-items: start;
}


/* ===================== */
/*        MARQUE         */
/* ===================== */

/* Les trois éléments centrés sur un axe commun. Le filet fait 262px
   dans une colonne de 280 : le bloc ne se décale donc que de 9px vers
   la droite — c'est le logo (180px) qui vient se poser sur l'axe du
   slogan. C'est aussi la disposition déjà utilisée en tablette et en
   mobile : le footer se comporte pareil à toutes les largeurs.
   Pour revenir à gauche : `flex-start` + `text-align: left`. */
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}

.footer-logo {
  display: inline-block;
  text-decoration: none;
}

/* Le PNG a un fond blanc opaque : sur un footer blanc il se fond
   naturellement, plus besoin d'arrondir les angles pour masquer
   le rectangle (ce que faisait l'ancien `border-radius: 12px`). */
/* 130px laissait le logo deux fois plus étroit que le slogan (262px) :
   le bloc paraissait lesté vers le bas, le logo perdu sous un texte
   deux fois plus large. À 180px les deux éléments se répondent.

   `width` et non `max-width` : le HTML porte width="130" sur l'image,
   qui vaut `width: 130px`. Un `max-width` plus grand ne l'élargirait
   pas — il ne ferait que plafonner plus haut. */
.footer-logo img {
  display: block;
  width: 180px;
  max-width: 100%;
  height: auto;
}

/* Le slogan était bridé à 190px, ce qui le coupait en deux lignes
   inégales (174px puis 83px) débordant de 44px à droite du logo, large
   de 130px. Trois largeurs différentes empilées : le bloc paraissait
   bancal. À 280px il tient sur une seule ligne sous le logo. */
.footer-desc {
  margin: 22px 0 0;
  font-family: var(--font-display, "Playfair Display", Georgia, serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--footer-heading);
  max-width: 280px;

  /* Si la colonne se resserre et impose deux lignes, elles seront
     d'égale longueur au lieu d'un long mot suivi d'un orphelin. */
  text-wrap: balance;
}

/* Filet décoratif au-dessus du slogan */
/* Filet caie sur la largeur exacte du slogan. Un trait court (36px,
   puis 64px) posé sous un logo de 180 et au-dessus d un texte de 262
   faisait une troisieme largeur sans rapport : il se lisait comme un
   tiret égaré à gauche. À 100% il aligne ses deux extrémités sur le
   texte qu il introduit, et le bloc n a plus que deux largeurs.
   Pour le supprimer : remplacer tout ce bloc par
   .footer-desc::before { content: none; } */
.footer-desc::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: var(--footer-accent);
  opacity: 0.75;
  margin: 0 0 16px;
}


/* ===================== */
/*  TITRES DE COLONNES   */
/* ===================== */

.footer-title {
  margin: 0 0 20px;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--footer-accent);
}

/* Le titre devient un bouton sur mobile (rubriques repliables, montees
   par app.js). Sur grand ecran il ne doit rien changer : le bouton
   herite de tout et ne se voit pas. Le chevron reste masque tant que la
   requete media mobile ne l'affiche pas. */
.footer-title-bouton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  cursor: default;
}

.footer-title-bouton svg {
  display: none;
}

.footer-title-bouton:focus-visible {
  outline: 1px solid var(--footer-accent);
  outline-offset: 4px;
}


/* ===================== */
/*        LIENS          */
/* ===================== */

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 13px;
  font-size: 15px;
  line-height: 1.4;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  color: var(--footer-text);
  text-decoration: none;

  /* `transform` plutôt que `padding-left` : le décalage au survol
     ne provoque aucun recalcul de mise en page. */
  transition: color 0.22s ease, transform 0.22s ease;
}

.footer-links a:hover {
  color: var(--footer-accent-deep);
  transform: translateX(4px);
}

.footer-links a:focus-visible {
  outline: 1px solid var(--footer-accent);
  outline-offset: 4px;
  border-radius: 2px;
}


/* ===================== */
/*   SOCIAL / CONTACT    */
/* ===================== */

.footer-side {
  display: grid;
  gap: 26px;
  justify-items: start;
}

.footer-social {
  display: flex;
  gap: 12px;
  align-items: center;
}

.footer-social .social {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--footer-text);
  transition: color 0.22s ease;
}

/* DÉPANNAGE TEMPORAIRE : insta_logo.png est un glyphe BLANC sur fond
   transparent — invisible sur un footer clair. `invert(1)` le rend
   noir. À remplacer par un SVG en ligne (voir la réponse), après quoi
   cette règle et le fichier PNG peuvent disparaître. */
.footer-social .social img {
  width: 34px;
  height: 34px;
  filter: invert(1);
  opacity: 0.8;
  transition: opacity 0.22s ease;
}

.footer-social .social:hover {
  color: var(--footer-accent-deep);
}

.footer-social .social:hover img {
  opacity: 1;
}

.footer-social .social:focus-visible {
  outline: 1px solid var(--footer-accent);
  outline-offset: 5px;
  border-radius: 4px;
}

/* Version SVG en ligne : se colore toute seule via `currentColor` */
.footer-social .social svg {
  width: 30px;
  height: 30px;
  flex: none;
  color: var(--footer-heading);
  transition: color 0.22s ease;
}

.footer-social .social:hover svg {
  color: var(--footer-accent);
}

.social-handle {
  font-size: 15px;
  letter-spacing: 0.015em;
  line-height: 1.45;
}


/* --- Adresse --- */

.footer-contact {
  font-style: normal;
  font-size: 15px;
  line-height: 1.95;
  color: var(--footer-text);
}

/* Nom de marque en capitales très espacées.
   La marge négative compense l'espacement du dernier caractère. */
.footer-contact strong {
  display: inline-block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.3em;
  margin-right: -0.3em;
  color: var(--footer-heading);
}

.footer-contact a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--footer-hairline);
  transition: color 0.22s ease, border-color 0.22s ease;
}

.footer-contact a:hover {
  color: var(--footer-accent-deep);
  border-bottom-color: var(--footer-accent);
}

.footer-contact a:focus-visible {
  outline: 1px solid var(--footer-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Retour tactile au doigt */
.footer-contact a:active {
  opacity: 0.65;
}


/* ===================== */
/*     BAS DE FOOTER     */
/* ===================== */

/* Bandeau crème : ancre discrètement le bas de page sans
   couper la continuité avec la barre de menu blanche. */
.footer-bottom {
  background: var(--footer-bottom-bg);
  border-top: 1px solid var(--footer-hairline-soft);
  padding: 22px 24px;
}

.footer-bottom-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.footer-bottom-inner p {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--footer-text-soft);
}


/* ================================== */
/*      RESPONSIVE — TABLETTE         */
/* ================================== */

/* 2 colonnes : la marque en tête, le bloc social/contact en pied */
/* 1119px et non 980 : avec cinq colonnes, la colonne de marque garde
   un plancher de 280px (largeur du slogan) et tout le reste se resserre.
   Sous 1120px, "Tonte de pelouse" se coupait en deux. Il n existe alors
   plus la place pour cinq colonnes : on passe a trois. */
@media (max-width: 1119px) {
  .footer-main {
    padding: 56px 20px 40px;
  }

  /* Trois colonnes de navigation : sur deux colonnes, la troisieme
     restait seule sur sa ligne avec un vide a cote. */
  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 32px;
  }

  .footer-brand {
    grid-column: 1 / -1;
    align-items: center;
    text-align: center;
  }

  /* 220px coupait de nouveau le slogan en deux lignes inégales.
     Ici le bloc marque est centré et occupe toute la largeur : 280px
     lui laissent la place de tenir sur une ligne. */
  .footer-desc {
    max-width: 280px;
  }

  .footer-desc::before {
    margin: 0 auto 16px;
  }

  .footer-side {
    grid-column: 1 / -1;
    justify-items: center;
    text-align: center;
    padding-top: 24px;
    border-top: 1px solid var(--footer-hairline-soft);
  }

  .footer-social {
    justify-content: center;
  }
}


/* ================================== */
/*      RESPONSIVE — MOBILE           */
/* ================================== */

@media (max-width: 768px) {
  .footer-main {
    padding: 44px 18px 32px;
  }

  /* Aucun écart entre les colonnes : repliées, elles forment une liste
     continue de rubriques séparées par un filet, comme des lignes de
     menu. Les blocs marque et contact reprennent leur respiration par
     une marge propre. */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .footer-logo img {
    width: 140px;
  }

  .footer-brand {
    margin-bottom: 28px;
  }

  /* --- Rubriques repliables ------------------------------------- */

  .footer-col {
    border-top: 1px solid var(--footer-hairline);
  }

  .footer-title {
    margin: 0;
    text-align: left;

    /* Plus gros qu'en pied de page classique : ici le titre n'est plus
       une étiquette de colonne, c'est la ligne sur laquelle on appuie. */
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    color: var(--footer-heading);
  }

  .footer-title-bouton {
    padding: 17px 2px;
    cursor: pointer;
  }

  .footer-title-bouton svg {
    display: block;
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--footer-accent);
    transition: transform 0.25s ease;
  }

  .footer-col.est-ouvert .footer-title-bouton svg {
    transform: rotate(180deg);
  }

  /* `grid-template-rows: 0fr → 1fr` déplie à la hauteur exacte du
     contenu, sans avoir à la connaître à l'avance — ce qu'un
     `max-height` chiffré ne sait pas faire proprement. */
  .footer-panneau {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.28s ease;
  }

  .footer-col.est-ouvert .footer-panneau {
    grid-template-rows: 1fr;
  }

  /* `visibility` et pas seulement `overflow` : replié, le contenu doit
     sortir de l'ordre de tabulation et de la lecture d'écran. Le délai
     laisse l'animation se terminer avant de le masquer. */
  .footer-panneau > div {
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0s linear 0.28s;
  }

  .footer-col.est-ouvert .footer-panneau > div {
    visibility: visible;
    transition-delay: 0s;
  }

  .footer-links {
    justify-items: start;
    text-align: left;
    gap: 2px;
    padding: 0 2px 14px;
  }

  .footer-links a {
    /* Zones tactiles confortables : 45px de haut */
    padding: 11px 0;
  }

  /* Pas de décalage au doigt : le survol n'existe pas sur mobile */
  .footer-links a:hover {
    transform: none;
  }

  .footer-side {
    justify-items: center;
    text-align: center;
    margin-top: 28px;
    padding-top: 26px;
    border-top: 1px solid var(--footer-hairline);
  }

  .footer-contact {
    text-align: center;
    line-height: 2.1;
  }

  .footer-bottom-inner p {
    font-size: 12px;
    line-height: 1.6;
  }
}


/* ================================== */
/*     ACCESSIBILITÉ / MOUVEMENT      */
/* ================================== */

@media (prefers-reduced-motion: reduce) {
  .footer-links a,
  .footer-social .social,
  .footer-social .social img,
  .footer-social .social svg,
  .footer-contact a,
  .footer-panneau,
  .footer-title-bouton svg {
    transition: none;
  }

  /* Le contenu doit rester masque quand il est replie : sans delai
     d'animation, la transition sur `visibility` n'a plus lieu d'etre,
     mais le masquage lui-meme reste indispensable. */
  .footer-panneau > div {
    transition: none;
  }

  .footer-links a:hover {
    transform: none;
  }
}