/* =========================================================
   THEME INFO (obligatoire pour WP)
   - WordPress lit ce bloc pour afficher le thème dans l’admin
========================================================= */
/*
Theme Name: Artist+
Theme URI: https://artistplus.fr
Author: Stan Création
Author URI: https://stancreation.fr
Description: Thème sur mesure pour Artist+
Version: 1.0
*/
/* =========================================================
   IMPORTS GOOGLE FONTS
========================================================= */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");

/* =========================================================
   FONT FACE — RIGID SQUARE
========================================================= */

@font-face{
  font-family: "Rigid Square";
  src: url("assets/fonts/RigidSquare-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Rigid Square";
  src: url("assets/fonts/RigidSquare-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Rigid Square";
  src: url("assets/fonts/RigidSquare-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
   1) VARIABLES GLOBALES
========================================================= */

:root{
  --noir: #000;
  --blanc: #fff;
  --gris: hsl(0, 0%, 90%);


  --hauteur-header: 10vh;
  --icone-taille: 1.5rem;
  --burger-largeur: 2.2rem;
  --burger-epaisseur: 0.18rem;

  --font-titre:
    "Rigid Square",
    "IBM Plex Sans",
    sans-serif;

  --font-weight-titre: 700;
  --tracking-titre: -0.05em;

  --font-texte:
    "IBM Plex Sans",
    "Roboto",
    system-ui,
    -apple-system,
    sans-serif;

  --font-weight-texte: 400;
  --tracking-texte: 0;
}

/* =========================================================
   2) RESET
========================================================= */

*{
  box-sizing: border-box;
}

html,
body{
  width: 100%;
  overflow-x: hidden;
}

img,
svg{
  display: block;
  max-width: 100%;
  height: auto;
}

/* =========================================================
   3) BODY
========================================================= */

body{
  margin: 0;
  font-family: var(--font-texte);
  font-weight: var(--font-weight-texte);
  letter-spacing: var(--tracking-texte);
  color: var(--noir);
  background: var(--blanc);
}

/* =========================================================
   4) TEXTE GLOBAL
========================================================= */

p,
a,
span,
li,
label,
input,
textarea,
button,
small,
strong,
em,
div{
  font-family: var(--font-texte);
  font-weight: var(--font-weight-texte);
  letter-spacing: var(--tracking-texte);
  font-size: 1.2rem;
}

/* =========================================================
   5) TITRES
========================================================= */

h1,
h2,
h3,
h4,
.accueil-hero-titre,
.accueil-dispositif-titre,
.accueil-impact-titre,
.footer-newsletter-titre{
  font-family: var(--font-titre);
  font-weight: var(--font-weight-titre);
  letter-spacing: var(--tracking-titre);
}

h1{
  font-size: clamp(1.8rem, 2.5vw, 3rem);
}

h2{
  font-size: clamp(1.5rem, 2.2vw, 2.8rem);
}

h3{
  font-size: clamp(0.8rem, 1.2vw, 1.8rem);
}
/* =========================================================
   BOUTONS GLOBAUX
   - même typo que le hero
   - Rigid Square Bold
   - tracking négatif
========================================================= */

button,
input[type="submit"],
input[type="button"],
.accueil-hero-bouton,
.footer-newsletter-bouton,
[class*="bouton"]{

  font-family: var(--font-titre);      /* Rigid Square puis fallback IBM */
  font-weight: var(--font-weight-titre); /* Bold */

  text-transform: uppercase;           /* cohérence DA */
  letter-spacing: var(--tracking-titre); /* spacing négatif */
}


/* =========================================================
   3) HEADER (barre du haut)
   - Contient burger (gauche) / logo (centre) / réseaux (droite)
========================================================= */

/* Conteneur header global */
.header-site{
  width:100%;                 /* prend toute la largeur */
  padding: 3% 10%;             /* padding global (haut/bas + côtés) */
}

/* Conteneur interne du header (aligne les éléments sur une ligne) */
.header-contenu{
  width:100%;                         /* plein large */
  display:flex;                       /* layout flex pour aligner horizontalement */
  align-items:center;                 /* centre verticalement */
  justify-content:space-between;      /* espace entre burger / logo / réseaux */
  gap: 4%;                            /* espace minimum entre les blocs */
}


/* =========================================================
   4) BURGER (bouton menu)
========================================================= */

/* Bouton burger (zone cliquable) */
.header-bouton-burger{
  width: var(--burger-largeur); /* largeur du bouton */

  display:flex;                 /* flex pour empiler les lignes */
  flex-direction:column;        /* empile verticalement */
  justify-content:center;       /* centre verticalement dans le bouton */
  gap: 0.45rem;                 /* espace entre les 3 lignes */

  background:transparent;       /* pas de fond */
  border:0;                     /* pas de bordure */
  padding:0;                    /* pas de padding par défaut */
  cursor:pointer;               /* curseur main */
}

/* Les 3 lignes du burger */
.burger-ligne{
  width:100%;                         /* chaque ligne = pleine largeur du bouton */
  height: var(--burger-epaisseur);    /* épaisseur de ligne */
  background: var(--noir);            /* couleur noire */
  display:block;                      /* s’assure que c’est un bloc */
}


/* =========================================================
   5) LOGO (SVG inline)
========================================================= */

/* Lien qui contient le logo (centré) */
.header-logo{
  display:flex;                 /* pour centrer proprement */
  align-items:center;           /* centre verticalement */
  justify-content:center;       /* centre horizontalement */

  width: 20%;                   /* largeur en % */
  max-width: 14rem;             /* limite max (évite logo trop grand) */
  min-width: 8rem;              /* limite min (évite logo trop petit) */

  text-decoration:none;         /* pas de soulignement */
  color:inherit;                /* hérite la couleur (utile pour currentColor) */
}

/* Le SVG du logo */
.header-logo svg{
  width: 40%;   /* taille DU svg à l’intérieur du lien */
  height:auto;  /* conserve les proportions */
  display:block;/* évite les espaces inline */
}


/* =========================================================
   6) RÉSEAUX SOCIAUX (icônes Font Awesome)
========================================================= */

/* Conteneur des icônes (droite) */
.header-reseaux-contenu{
  display:flex;                  /* aligne les icônes sur une ligne */
  align-items:center;            /* centre verticalement */
  justify-content:flex-end;      /* pousse vers la droite */
  gap: 30%;                      /* gros espace entre icônes (en %) */
}

/* Lien d’un réseau (icône) */
.header-reseau{
  display:inline-flex;           /* permet de centrer l’icône dans son "cadre" */
  align-items:center;            /* centre verticalement */
  justify-content:center;        /* centre horizontalement */

  text-decoration:none;          /* pas de soulignement */
  color: var(--noir);            /* couleur par défaut */
  font-size: var(--icone-taille);/* taille de l’icône */
  line-height: 1;                /* évite décalages verticaux */

  /* Transitions : au hover, ça bouge et change de couleur */
  transition:
    color 0.35s ease,
    transform 0.35s ease,
    opacity 0.35s ease;

  /* Animation d’entrée (au chargement) */
  animation: reseau-entree 0.6s ease-out both;
}

/* Décalages d’animation (effet cascade) */
.header-reseau:nth-child(1){ animation-delay: 0s; }
.header-reseau:nth-child(2){ animation-delay: 0.06s; }
.header-reseau:nth-child(3){ animation-delay: 0.12s; }
.header-reseau:nth-child(4){ animation-delay: 0.18s; }

/* Keyframes animation d’entrée */
@keyframes reseau-entree{
  from{
    opacity: 0;                          /* invisible au départ */
    transform: translateY(20%) scale(0.9);/* descend + un peu plus petit */
  }
  to{
    opacity: 1;                          /* visible */
    transform: translateY(0) scale(1);   /* revient à sa position */
  }
}

/* Hover : couleur + mouvement */
.header-reseau:hover{
  color: var(--accent, #270b83);         /* couleur hover (accent si défini) */
  transform: translateY(-12%) rotate(-6deg);/* monte et tourne légèrement */
  opacity: 0.85;                         /* un peu plus léger */
}

/* Focus clavier (accessibilité) */
.header-reseau:focus-visible{
  outline: 0.15rem solid currentColor;   /* contour visible avec la couleur */
  outline-offset: 0.25rem;               /* écart du contour */
}



/* =========================================================
   MENU OVERLAY
   - version full screen éditoriale
   - fond noir transparent
   - menu gauche / infos droite
========================================================= */

.menu-overlay{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.90);
  backdrop-filter: blur(0.12rem);
  display: none;
  z-index: 9999;
}

.menu-overlay.is-ouvert{
  display: flex;
}

.menu-overlay-contenu{
  position: relative;
  width: 100%;
  min-height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;

  padding-inline: 10%;
}

/* =========================================================
   CROIX
========================================================= */

.menu-overlay-fermer{
  position: absolute;
  top: 4vh;
  right: 4%;
  width: 4.2rem;
  height: 4.2rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 2;
}

.croix-ligne{
  position: absolute;
  left: 10%;
  top: 50%;
  width: 80%;
  height: 0.22rem;
  background: var(--blanc);
  display: block;
}

.croix-ligne:nth-child(1){
  transform: translateY(-50%) rotate(45deg);
}

.croix-ligne:nth-child(2){
  transform: translateY(-50%) rotate(-45deg);
}

/* =========================================================
   GRILLE OVERLAY
========================================================= */

.menu-overlay-grille{
  width: min(120rem, 100%);
  margin: auto;

  display: grid;
  grid-template-columns: 40% 40%;
  column-gap: 20%;

  align-items: center;
}

/* =========================================================
   COLONNE GAUCHE
========================================================= */

.menu-overlay-colonne-gauche{
  width: 100%;
}

.menu-overlay-navigation{
  width: 100%;
}

.menu-overlay-liste{
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-overlay-liste li{
  margin: 0;
  padding: 0;
}

.menu-overlay-liste a{
  display: inline-block;
  color: var(--blanc);
  text-decoration: none;

  font-family: var(--font-titre);
  font-weight: var(--font-weight-titre);
  letter-spacing: var(--tracking-titre);
  text-transform: uppercase;

  font-size: clamp(2.2rem, 4.2vw, 4.6rem);
  line-height: 1.02;
  margin-bottom: 1.2vh;

  transition: opacity 0.3s ease;
}

.menu-overlay-liste a:hover{
  opacity: 0.7;
}

/* =========================================================
   COLONNE DROITE
========================================================= */

.menu-overlay-colonne-droite{
  width: 100%;
  max-width: 32rem;
  padding-top: 2vh;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.menu-overlay-logo{
  display: block;
  width: 10rem;
  color: var(--blanc);
  text-decoration: none;
  margin-bottom: 4vh;
}

.menu-overlay-logo svg{
  display: block;
  width: 100%;
  height: auto;
}

.menu-overlay-logo .logo-lettre,
.menu-overlay-logo path,
.menu-overlay-logo polygon,
.menu-overlay-logo rect{
  fill: var(--blanc);
}

.menu-overlay-description{
  margin: 0 0 5vh 0;
  color: var(--blanc);
  font-family: var(--font-texte);
  font-weight: var(--font-weight-texte);
  line-height: 1.35;
  text-transform: uppercase;
}

/* =========================================================
   RÉSEAUX OVERLAY
========================================================= */

.menu-overlay-reseaux{
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.menu-overlay-reseau{
  color: var(--blanc);
  text-decoration: none;
  font-size: 2.3rem;
  line-height: 1;
  transition: opacity 0.3s ease, color 0.3s ease;
}

.menu-overlay-reseau:hover{
  opacity: 0.7;
}

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

@media (max-width: 1024px){

  .menu-overlay-contenu{
    padding: 6vh 7% 7vh 7%;
  }

  .menu-overlay-grille{
    grid-template-columns: 48% 52%;
  }

  .menu-overlay-liste a{
    font-size: clamp(2.2rem, 4.6vw, 4.4rem);
  }

  .menu-overlay-logo{
    width: 8.5rem;
  }
}

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

@media (max-width: 768px){

  .menu-overlay-contenu{
    justify-content: flex-start;
    padding: 12vh 8% 8vh 8%;
  }

  .menu-overlay-fermer{
    top: 3vh;
    right: 5%;
    width: 3.4rem;
    height: 3.4rem;
  }

  .menu-overlay-grille{
    grid-template-columns: 1fr;
    row-gap: 6vh;
  }

  .menu-overlay-colonne-droite{
    max-width: 100%;
    padding-top: 0;
  }

  .menu-overlay-liste a{
    font-size: clamp(2.2rem, 10vw, 4rem);
    margin-bottom: 1vh;
  }

  .menu-overlay-logo{
    width: 7rem;
    margin-bottom: 3vh;
  }

  .menu-overlay-description{
    margin-bottom: 4vh;
    font-size: 1.15rem;
  }

  .menu-overlay-reseau{
    font-size: 2rem;
  }
}

/* =========================================================
   8) RESPONSIVE (adaptations)
========================================================= */

@media (max-width: 900px){

  :root{
    --hauteur-header: 9vh;
  }

  .header-site{
    padding: 4% 6%;
  }

  .header-contenu{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
  }

  .header-logo{
    order: 1;
    width: auto;
    max-width: none;
    min-width: 0;

    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .header-logo svg{
    width: 4.8rem;
    height: auto;
  }

  .header-bouton-burger{
    order: 2;
    width: 2rem;
    flex-shrink: 0;
  }

  .header-reseaux-contenu{
    display: none;
  }
}

@media (max-width: 480px){

  .header-site{
    padding: 8% 10%;
  }

  .header-logo svg{
    width: 4.2rem;
  }

  .header-bouton-burger{
    width: 1.8rem;
  }
}

/* =========================================================
   9) ANIMATIONS BURGER + CROIX
   - Hover + état ouvert
========================================================= */

/* Burger: base */
.header-bouton-burger{
  transition: transform 0.6s ease;
  transform-origin: center;
}

/* Hover burger (menu fermé) */
.header-bouton-burger:hover{
  transform: rotate(90deg);
}

/* État ouvert (JS ajoute .is-actif) */
.header-bouton-burger.is-actif{
  transform: rotate(90deg);
}


/* Croix: base */
.menu-overlay-fermer{
  transition: transform 0.45s ease;
  transform-origin: center;
}

/* Hover croix */
.menu-overlay-fermer:hover{
  transform: rotate(90deg);
}


/* =========================================================
   10) ANIMATION LOGO (entrée)
   - Déclenchée par la classe html.logo-entree (ajoutée en JS)
========================================================= */

/* SVG global (si besoin) */
.logo-artistplus {
  width: 100%;
  display: block;
}

/* Chaque lettre du logo (paths) */
.logo-lettre {
  opacity: 0;                 /* invisible au départ */
  transform-origin: center;   /* rotation centrée */
  animation: logo-entree 0.9s ease-out forwards; /* animation d’entrée */
}

/* Délais + positions initiales différentes (effet assemblage) */
.lettre-1 { animation-delay: 0s;  transform: translateX(-40%) rotate(-120deg); }
.lettre-2 { animation-delay: 0.1s; transform: translateY(-40%) rotate(160deg); }
.lettre-3 { animation-delay: 0.2s; transform: translateX(40%) rotate(90deg); }
.lettre-4 { animation-delay: 0.3s; transform: translateY(40%) rotate(-90deg); }
.lettre-5 { animation-delay: 0.4s; transform: translateX(-30%) rotate(180deg); }
.lettre-plus { animation-delay: 0.5s; transform: scale(0.4) rotate(-180deg); }

/* Animation : arrive en place + devient visible */
@keyframes logo-entree {
  to {
    opacity: 1;
    transform: translate(0,0) rotate(0deg) scale(1);
  }
}

/* =========================================================
   HERO ACCUEIL
========================================================= */

.accueil-hero{
  width: 100%;
  padding-block: 8vh;
}

.accueil-hero-contenu{
  width: 100%;
  padding: 0 15% 0 15%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8%;
}

/* Colonne texte */
.accueil-hero-texte{
  width: 52%;
}

/* Titre */
.accueil-hero-titre{
  margin: 0 0 5% 0;
  text-transform: uppercase;
  line-height: 1;
  font-size: clamp(2rem, 2.5vw, 3rem);
}

/* Sous-texte */
.accueil-hero-soustitre{
  margin-top: 3vh;
  margin-bottom: 0;
  line-height: 1.5;
  max-width: 90%;
}

/* CTA */
.accueil-hero-cta{
  margin-top: 5%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* =========================================================
   BOUTONS HERO
========================================================= */

.accueil-hero-bouton{
  margin-top: 1.4vh;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  width: fit-content;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: var(--noir);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.accueil-hero-bouton-texte{
  position: relative;
}

.accueil-hero-bouton-texte::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.18em;
  width: 100%;
  height: 0.09em;
  background: var(--noir);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.accueil-hero-bouton-fleche{
  position: relative;
  width: 1.2rem;
  height: 0.12rem;
  background: var(--noir);
  transform-origin: center;
  transition: transform 0.35s ease;
}

.accueil-hero-bouton-fleche::after{
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 0.12rem solid var(--noir);
  border-top: 0.12rem solid var(--noir);
  transform: translateY(-50%) rotate(45deg);
}

.accueil-hero-bouton:hover .accueil-hero-bouton-texte::after{
  transform: scaleX(1);
}

.accueil-hero-bouton:hover .accueil-hero-bouton-fleche{
  transform: rotate(45deg);
}

/* =========================================================
   COLONNE VISUEL
========================================================= */

.hero-accueil-visuel{
  width: 40%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.hero-accueil-image{
  width: 90%;
  max-width: 34rem;
  height: auto;
  display: block;
  object-fit: contain;
}

/* =========================================================
   RESPONSIVE HERO
========================================================= */

@media (max-width: 900px){
  .accueil-hero{
    padding-block: 6vh;
  }

  .accueil-hero-contenu{
    width: 100%;
    padding: 0 8%;
    flex-direction: column;
    align-items: flex-start;
    gap: 6vh;
  }

  .accueil-hero-texte{
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .accueil-hero-titre{
    width: 100%;
    max-width: 100%;
    font-size: clamp(1.75rem, 7.2vw, 2.7rem);
    line-height: 0.96;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
    white-space: normal;
  }

  .accueil-hero-soustitre{
    max-width: 100%;
  }

  .accueil-hero-cta{
    width: 100%;
  }

  .hero-accueil-visuel{
    width: 100%;
    justify-content: flex-start;
  }

  .hero-accueil-image{
    width: 70%;
    max-width: 22rem;
  }
}

@media (max-width: 480px){
  .accueil-hero-contenu{
    padding: 0 10%;
  }

  .accueil-hero-titre{
    font-size: clamp(1.55rem, 7vw, 2.2rem);
  }

  .hero-accueil-image{
    width: 82%;
  }
}


/* =========================================================
   SECTION IMAGES POST HERO
========================================================= */

.accueil-image-posthero{
  width: 100%;
  padding: 10vh 10% 0 5%;
}

.accueil-image-posthero-contenu{
  position: relative;
  width: 100%;
  height: clamp(26rem, 48vw, 42rem);
  padding-inline: 10%;
}

/* =========================================================
   BLOC GÉNÉRIQUE
========================================================= */

.accueil-image-posthero-img{
  position: absolute;
  margin: 0;
  overflow: hidden;
}

.accueil-image-posthero-img img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================
   IMAGE 1 — GRANDE IMAGE PRINCIPALE
========================================================= */

.accueil-image-posthero-img-1{
  top: 0;
  left: 29%;
  width: 54%;
  aspect-ratio: 21 / 9;
  animation: accueil-image-posthero-flottement-1 7s ease-in-out infinite;
}

/* =========================================================
   IMAGE 2 — LAMELLE VERTICALE GAUCHE
========================================================= */

.accueil-image-posthero-img-2{
  top: 18%;
  left: 15%;
  width: 10%;
  height: 68%;
  animation: accueil-image-posthero-flottement-2 8s ease-in-out infinite;
}

/* =========================================================
   IMAGE 3 — BANDEAU HORIZONTAL BAS
========================================================= */

.accueil-image-posthero-img-3{
  top: 60%;
  left: 40%;
  width: 50%;
  height: 20%;
  animation: accueil-image-posthero-flottement-3 6.5s ease-in-out infinite;
}

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

@media (max-width: 1024px){

  .accueil-image-posthero{
    padding-block: 7vh 10vh;
  }

  .accueil-image-posthero-contenu{
    height: clamp(22rem, 54vw, 34rem);
    padding-inline: 8%;
  }

  .accueil-image-posthero-img-1{
    top: 20%;
    width: 60%;
    aspect-ratio: 21 / 10;
  }

  .accueil-image-posthero-img-2{
    top: 15%;
    left: 10%;
    width: 15%;
    height: 60%;
  }

  .accueil-image-posthero-img-3{
    top: 50%;
    width: 60%;
    height: 15%;
  }
}

/* =========================================================
   RESPONSIVE PETITE TABLETTE
========================================================= */

@media (max-width: 820px){

  .accueil-image-posthero-contenu{
    height: clamp(20rem, 58vw, 30rem);
    padding-inline: 7%;
  }
}

/* =========================================================
   RESPONSIVE MOBILE
   - compo conservée mais plus stable
========================================================= */

@media (max-width: 640px){

  .accueil-image-posthero-contenu{
    position: relative;
    height: clamp(18rem, 95vw, 26rem);
    padding-inline: 8%;
  }

}

/* =========================================================
   RESPONSIVE PETIT MOBILE
========================================================= */

@media (max-width: 480px){

  .accueil-image-posthero-contenu{
    height: clamp(16rem, 110vw, 23rem);
    padding-inline: 7%;
  }
}















/* =========================================================
   SECTION DISPOSITIF
========================================================= */

.accueil-dispositif{
  width: 100%;
  padding: 5vh 15% 12vh 10%;
}

.accueil-dispositif-contenu{
  width: 100%;
}

/* =========================================================
   TITRE SECTION
   → utilise le design system typo global
========================================================= */

.accueil-dispositif-titre{
  margin: 0 0 7vh 10%;
  font-family: var(--font-titre);
  font-weight: var(--font-weight-titre);
  letter-spacing: var(--tracking-titre);
  text-transform: uppercase;
  line-height: 1;
}


/* =========================================================
   INTRODUCTION
========================================================= */

.accueil-dispositif-introduction{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 5%;
  row-gap: 2vh;
}

.accueil-dispositif-introduction-texte{
  margin: 0;
  font-family: var(--font-texte);
  font-weight: var(--font-weight-texte);
  line-height: 1.45;
}

.accueil-dispositif-introduction-texte-1{
  grid-column: 2;
  justify-self: start;
  margin: -20% 0 0 5%;
}

.accueil-dispositif-introduction-texte-2{
  grid-column: 1;
  justify-self: start;
  margin: 0 0 0 10%;
}


/* =========================================================
   GRILLE
========================================================= */

.accueil-dispositif-grille{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10%;
  row-gap: 5vh;
  padding: 0 10% 0 20%;
}


/* Bloc */

.accueil-dispositif-bloc{
  width: 100%;
  max-width: 90%;
}

/* placement */

.accueil-dispositif-bloc:nth-child(odd){
  justify-self: start;
}

.accueil-dispositif-bloc:nth-child(even){
  justify-self: start;
}

/* décalages */

.accueil-dispositif-bloc:nth-child(1){ margin-top: 10vh; }
.accueil-dispositif-bloc:nth-child(2){ margin-top: -1vh; }
.accueil-dispositif-bloc:nth-child(3){ margin-top: 10vh; }
.accueil-dispositif-bloc:nth-child(4){ margin-top: -2vh; }


/* =========================================================
   PICTOGRAMME
========================================================= */

.accueil-dispositif-bloc-pictogramme{
  width: 15%;
  min-width: 3rem;
  margin-bottom: 3vh;
}

.accueil-dispositif-bloc-pictogramme img{
  display: block;
  width: 100%;
  height: auto;
}


/* =========================================================
   TITRE BLOC
   → Rigid Square Bold
========================================================= */

.accueil-dispositif-bloc-titre{
  margin: 0 0 2vh 0;
  font-family: var(--font-titre);
  font-weight: var(--font-weight-titre);
  letter-spacing: var(--tracking-titre);
  text-transform: uppercase;
  line-height: 1;
}


/* =========================================================
   TEXTE BLOC
   → IBM Plex
========================================================= */

.accueil-dispositif-bloc-texte{
  margin: 0;
  font-family: var(--font-texte);
  font-weight: var(--font-weight-texte);
  line-height: 1.45;
  max-width: 100%;
}

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

/* =========================================================
   SECTION DISPOSITIF — RESPONSIVE TABLETTE
========================================================= */

@media (max-width: 1024px){

  .accueil-dispositif{
    padding: 0 10% 0 10%;
  }

  .accueil-dispositif-titre{
    margin: 0 0 5vh 0;
    font-size: clamp(1.7rem, 4vw, 2.5rem);
    line-height: 1.02;
  }

  .accueil-dispositif-introduction{
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 3vh;
    margin: 0 0 6vh 0;
  }

  .accueil-dispositif-introduction-texte{
    max-width: 100%;
    font-size: clamp(1rem, 1.6vw, 1.1rem);
    line-height: 1.5;
  }

  .accueil-dispositif-introduction-texte-1,
  .accueil-dispositif-introduction-texte-2{
    grid-column: auto;
    justify-self: start;
  }

  .accueil-dispositif-grille{
    grid-template-columns: 1fr 1fr;
    column-gap: 8%;
    row-gap: 6vh;
    padding: 0;
  }

  .accueil-dispositif-bloc{
    max-width: 100%;
  }

  .accueil-dispositif-bloc:nth-child(1),
  .accueil-dispositif-bloc:nth-child(2),
  .accueil-dispositif-bloc:nth-child(3),
  .accueil-dispositif-bloc:nth-child(4){
    margin-top: 0;
  }

  .accueil-dispositif-bloc-pictogramme{
    width: 18%;
    min-width: 2.8rem;
    margin-bottom: 2vh;
  }

  .accueil-dispositif-bloc-titre{
    font-size: clamp(1rem, 1.8vw, 1.3rem);
    line-height: 1.12;
  }

  .accueil-dispositif-bloc-texte{
    font-size: clamp(0.95rem, 1.4vw, 1.05rem);
    line-height: 1.5;
  }
}


/* =========================================================
   SECTION DISPOSITIF — RESPONSIVE MOBILE
========================================================= */



@media (max-width:640px){

  .accueil-dispositif{
    margin-top: clamp(-6rem, -20vh, -3rem);
  }



  .accueil-dispositif-contenu{
    width: 100%;
  }

  .accueil-dispositif-titre{
    margin: 0 0 4vh 0;
    font-size: clamp(1.45rem, 8vw, 2rem);
    line-height: 1.02;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
  }

  .accueil-dispositif-introduction{
    grid-template-columns: 1fr;
    row-gap: 2.4vh;
    margin: 0 0 5vh 0;
  }

  .accueil-dispositif-introduction-texte{
    margin: 0;
    max-width: 100%;
    font-size: 1rem;
    line-height: 1.55;
    word-break: normal;
    overflow-wrap: break-word;
  }

  .accueil-dispositif-introduction-texte-1,
  .accueil-dispositif-introduction-texte-2{
    grid-column: auto;
    justify-self: start;
  }

  .accueil-dispositif-grille{
    grid-template-columns: 1fr;
    row-gap: 4.5vh;
    column-gap: 0;
    padding: 0;
  }

  .accueil-dispositif-bloc{
    width: 100%;
    max-width: 100%;
  }

  .accueil-dispositif-bloc-pictogramme{
    width: 16%;
    min-width: 2.5rem;
    margin-bottom: 1.8vh;
  }

  .accueil-dispositif-bloc-titre{
    margin: 0 0 1.5vh 0;
    font-size: 1.05rem;
    line-height: 1.12;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
  }

  .accueil-dispositif-bloc-texte{
    font-size: 1rem;
    line-height: 1.55;
    word-break: normal;
    overflow-wrap: break-word;
  }
}


/* =========================================================
   SECTION DISPOSITIF — PETIT MOBILE
========================================================= */

@media (max-width: 480px){


  .accueil-dispositif-titre{
    font-size: clamp(1.3rem, 7.2vw, 1.8rem);
  }

  .accueil-dispositif-introduction-texte,
  .accueil-dispositif-bloc-texte{
    font-size: 0.96rem;
  }
}


/* =========================================================
   SECTION IMAGE BANDEAU ACCUEIL
   - image large
   - alignée avec le padding global de la page
   - ratio large type bannière
========================================================= */

.accueil-image-bandeau{
  width:100%;
  padding:0 10% 10vh 10%;
}

.accueil-image-bandeau-contenu{
  width:100%;
  aspect-ratio:21 / 6;
  overflow:hidden;
}

.accueil-image-bandeau-contenu img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

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

@media (max-width:900px){

  .accueil-image-bandeau{
    padding:10vh 10% 8vh 10%;
  }

  .accueil-image-bandeau-contenu{
    aspect-ratio:18 / 7;
  }

}

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

@media (max-width:640px){

  .accueil-image-bandeau{
    padding:8vh 8% 7vh 8%;
  }

  .accueil-image-bandeau-contenu{
    aspect-ratio:16 / 6;
  }

}









/* =========================================================
   SECTION ACCOMPAGNEMENT
========================================================= */

.accueil-accompagnement{
  width: 100%;
  padding: 0 15% 0 25%;
}

.accueil-accompagnement-contenu{
  width: 100%;
}

/* =========================================================
   TITRE
========================================================= */

.accueil-accompagnement-titre{
  margin: 0 0 6vh 8%;
  font-family: var(--font-titre);
  font-weight: var(--font-weight-titre);
  letter-spacing: var(--tracking-titre);
  text-transform: uppercase;
  line-height: 1.05;
}

/* =========================================================
   BLOC TEXTE SOUS LE TITRE
========================================================= */

.accueil-accompagnement-bloc-texte{
  width: 100%;
  display: flex;
  align-items: stretch;
  gap: 3%;
  padding-left: 15%;
}

/* Trait vertical */

.accueil-accompagnement-texte-ligne{
  width: 0.15rem;
  background: rgba(0,0,0,0.50);
  margin-top: 0.5vh;
}

/* Contenu texte */

.accueil-accompagnement-texte-contenu{
  width: 100%;
  max-width: 70%;
}

.accueil-accompagnement-texte{
  margin: 0 0 3.5vh 0;
  font-family: var(--font-texte);
  font-weight: var(--font-weight-texte);
  line-height: 1.45;
}


/* =========================================================
   PICTOGRAMMES
========================================================= */

.accueil-accompagnement-pictogrammes{
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2% 0;
}

.accueil-accompagnement-pictogramme{
  width: 1.5rem;
  height: auto;
  display: block;
}

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

@media (max-width: 1024px){

  .accueil-accompagnement{
    padding: 0 10% 5% 10%;
  }

  .accueil-accompagnement-titre{
    margin: 0 0 5vh 4%;
  }

  .accueil-accompagnement-bloc-texte{
    padding-left: 10%;
  }

  .accueil-accompagnement-texte-contenu{
    max-width: 78%;
  }
}

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

@media (max-width: 640px){

  .accueil-accompagnement-titre{
    margin: 0 0 4vh 0;
    font-size: clamp(1.8rem, 7vw, 2.5rem);
  }

  .accueil-accompagnement-bloc-texte{
    padding-left: 0;
    gap: 4%;
  }

  .accueil-accompagnement-texte-ligne{
    height: auto;
    min-height: 16vh;
  }

  .accueil-accompagnement-texte-contenu{
    max-width: 100%;
  }

  .accueil-accompagnement-texte{
    font-size: 1rem;
    line-height: 1.5;
  }

  .accueil-accompagnement-pictogrammes{
    flex-wrap: wrap;
  }

  .accueil-accompagnement-pictogramme{
    width: 1.8rem;
  }
}





/* =========================================================
   SECTION IMAGES IMPACT
   - composition stabilisée
   - mêmes intentions visuelles
========================================================= */

.accueil-image-impact{
  width: 100%;
  padding: 5vh 15% 0 15%;
}

.accueil-image-impact-contenu{
  position: relative;
  width: 100%;
  height: clamp(24rem, 42vw, 38rem);
}

/* =========================================================
   BLOC IMAGE
========================================================= */

.accueil-image-impact-img{
  position: absolute;
  margin: 0;
  overflow: hidden;
}

.accueil-image-impact-img img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================
   IMAGE 1 — LAMELLE VERTICALE GAUCHE
========================================================= */

.accueil-image-impact-img-1{
  top: 4%;
  left: 4%;
  width: 17%;
  height: 60%;
  animation: accueil-image-impact-flottement-1 7s ease-in-out infinite;
}

/* =========================================================
   IMAGE 2 — GRANDE LAMELLE HORIZONTALE HAUTE
========================================================= */

.accueil-image-impact-img-2{
  top: 16%;
  left: 34%;
  width: 60%;
  height: 28%;
  animation: accueil-image-impact-flottement-2 8s ease-in-out infinite;
}

/* =========================================================
   IMAGE 3 — BLOC HORIZONTAL PLUS PETIT EN BAS
========================================================= */

.accueil-image-impact-img-3{
  top: 56%;
  left: 30%;
  width: 34%;
  height: 24%;
  animation: accueil-image-impact-flottement-3 6.5s ease-in-out infinite;
}

/* =========================================================
   SIGNAUX À DROITE
========================================================= */

.accueil-image-impact-signaux{
  position: absolute;
  top: 58%;
  right: 8%;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.8vh;
}

.accueil-image-impact-signal{
  display: block;
  border: 0.12rem solid rgba(0,0,0,0.22);
}

.accueil-image-impact-signal-1{
  width: 2.4rem;
  height: 2.4rem;
}

.accueil-image-impact-signal-2{
  width: 2.1rem;
  height: 2.1rem;
}

.accueil-image-impact-signal-3{
  width: 1.2rem;
  height: 1.2rem;
}

.accueil-image-impact-signal-4{
  width: 1.1rem;
  height: 1.1rem;
  position: relative;
}

.accueil-image-impact-signal-4::after{
  content: "";
  position: absolute;
  inset: 20%;
  border: 0.1rem solid rgba(0,0,0,0.22);
}

.accueil-image-impact-signal-5{
  width: 1.5rem;
  height: 3rem;
}

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

@media (max-width: 1024px){

  .accueil-image-impact-contenu{
    height: clamp(20rem, 50vw, 30rem);
  }

  .accueil-image-impact-img-1{
    width: 18%;
    height: 58%;
  }

  .accueil-image-impact-img-2{
    top: 16%;
    left: 30%;
    width: 62%;
    height: 26%;
  }

  .accueil-image-impact-img-3{
    top: 40%;
    left: 30%;
    width: 40%;
    height: 40%;
  }

  .accueil-image-impact-signaux{
    right: 4%;
  }
}

/* =========================================================
   RESPONSIVE MOBILE
   - composition éditoriale
   - pas une pile basique
========================================================= */

@media (max-width: 640px){

  .accueil-image-impact-contenu{
    position: relative;
    height: clamp(18rem, 92vw, 26rem);
  }

  .accueil-image-impact-img{
    position: absolute;
    animation: none;
  }

  .accueil-image-impact-img-1{
    top: 0;
    left: 0;
    width: 18%;
    height: 52%;
  }

  .accueil-image-impact-img-2{
    top: 10%;
    left: 22%;
    width: 78%;
    height: 26%;
  }

  .accueil-image-impact-signaux{
    position: absolute;
    top: 56%;
    right: 2%;
    margin-left: 0;
    gap: 1vh;
  }

  .accueil-image-impact-signal-1{
    width: 1.9rem;
    height: 1.9rem;
  }

  .accueil-image-impact-signal-2{
    width: 1.65rem;
    height: 1.65rem;
  }

  .accueil-image-impact-signal-3{
    width: 0.95rem;
    height: 0.95rem;
  }

  .accueil-image-impact-signal-4{
    width: 0.9rem;
    height: 0.9rem;
  }

  .accueil-image-impact-signal-5{
    width: 1.2rem;
    height: 2.3rem;
  }
}

/* =========================================================
   RESPONSIVE PETIT MOBILE
========================================================= */

@media (max-width: 480px){

  .accueil-image-impact-contenu{
    height: clamp(16rem, 106vw, 23rem);
  }

  .accueil-image-impact-img-1{
    width: 20%;
    height: 54%;
  }

  .accueil-image-impact-img-2{
    left: 24%;
    width: 76%;
    height: 24%;
  }

  .accueil-image-impact-signaux{
    right: 1%;
  }
}



/* =========================================================
   SECTION IMPACT
   - 4 colonnes sur une ligne
   - chiffre en haut
   - texte en dessous
========================================================= */

.accueil-impact{
  width: 100%;
  padding: 0 15% 5vh 20%;
}

.accueil-impact-contenu{
  width: 100%;
}

/* =========================================================
   TITRE
========================================================= */

.accueil-impact-titre{
  margin: 0 0 5vh 0;
  font-family: var(--font-titre);
  font-weight: var(--font-weight-titre);
  letter-spacing: var(--tracking-titre);
  text-transform: uppercase;
  line-height: 1.05;
}

/* =========================================================
   LISTE IMPACT
========================================================= */

.accueil-impact-grille{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 5%;
  row-gap: 0;
  align-items: start;
  padding: 2% 5% 0 10%;
}

/* Bloc */

.accueil-impact-bloc{
  width: 100%;
}

/* =========================================================
   CHIFFRES
========================================================= */

.accueil-impact-chiffre{
  margin: 0 0 1.5vh 0;

  font-family: var(--font-titre);
  font-weight: var(--font-weight-titre);
  letter-spacing: var(--tracking-titre);

  font-size: clamp(4rem, 5vw, 6rem);
  line-height: 0.9;
}

/* =========================================================
   TEXTE
========================================================= */

.accueil-impact-texte{
  margin: 0;
  font-family: var(--font-texte);
  font-weight: var(--font-weight-texte);
  line-height: 1.3;
  text-transform: uppercase;
}

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

@media (max-width: 1024px){

  .accueil-impact{
    padding: 0 10% 8vh 10%;
  }

  .accueil-impact-titre{
    margin: 0 0 5vh 0;
  }

  .accueil-impact-grille{
    grid-template-columns: repeat(2, 1fr);
    column-gap: 10%;
    row-gap: 5vh;
  }

  .accueil-impact-chiffre{
    font-size: clamp(3.8rem, 6vw, 5rem);
  }

  .accueil-impact-texte{
    font-size: clamp(0.95rem, 1.15vw, 1.1rem);
  }
}

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

@media (max-width: 640px){

  .accueil-impact-titre{
    margin: 0 0 4vh 0;
    font-size: clamp(1.7rem, 7vw, 2.4rem);
  }

  .accueil-impact-grille{
    grid-template-columns: 1fr;
    row-gap: 4vh;
  }

  .accueil-impact-chiffre{
    font-size: clamp(3.4rem, 14vw, 4.8rem);
  }

  .accueil-impact-texte{
    font-size: 1rem;
    line-height: 1.35;
  }

  .accueil-impact-cta{
    margin: 5% 10% 5% 10% ;
  }
  
}


.accueil-impact-cta{
  margin: 0 10% 5% 10% ;
}



/* =========================================================
   FOOTER SITE
========================================================= */

.footer-site{
  width: 100%;
  background: #efefef;
}


/* =========================================================
   NEWSLETTER
========================================================= */

.footer-newsletter{
  width: 100%;
  padding: 8vh 15% 7vh 15%;

  background: linear-gradient(
    to bottom,
    #e6e6e6,
    #dcdcdc
  );
}

.footer-newsletter-contenu{
  width: 100%;
}

.footer-newsletter-titre{
  margin: 0 0 4vh 0;
  font-family: var(--font-titre);
  font-weight: var(--font-weight-titre);
  letter-spacing: var(--tracking-titre);
  text-transform: uppercase;
  line-height: 1.05;
}

.footer-newsletter-texte{
  margin: 0 0 4vh 0;
  max-width: 60%;
  font-family: var(--font-texte);
  font-weight: var(--font-weight-texte);
  line-height: 1.6;
  font-size: 1.2rem;
}

.footer-newsletter-formulaire{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.footer-newsletter-champ{
  width: 38%;
  height: 3.2rem;
  border: 0.08rem solid rgba(0,0,0,0.22);
  background: transparent;
  padding-inline: 1rem;

  font-family: var(--font-texte);
  font-weight: var(--font-weight-texte);
  font-size: 1rem;
  color: var(--noir);

  outline: none;
}

.footer-newsletter-champ:focus{
  border-color: rgba(0,0,0,0.55);
}

.footer-newsletter-bouton{
  margin-top: 1.4vh;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  width: fit-content;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: var(--noir);

  font-family: var(--font-titre);
  font-weight: var(--font-weight-titre);
  letter-spacing: var(--tracking-titre);
  text-transform: uppercase;
}

.footer-newsletter-bouton-texte{
  position: relative;
}

.footer-newsletter-bouton-texte::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.18em;
  width: 100%;
  height: 0.09em;
  background: var(--noir);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.footer-newsletter-bouton-fleche{
  position: relative;
  width: 1.2rem;
  height: 0.12rem;
  background: var(--noir);
  transform-origin: center;
  transition: transform 0.35s ease;
}

.footer-newsletter-bouton-fleche::after{
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 0.12rem solid var(--noir);
  border-top: 0.12rem solid var(--noir);
  transform: translateY(-50%) rotate(45deg);
}

.footer-newsletter-bouton:hover .footer-newsletter-bouton-texte::after{
  transform: scaleX(1);
}

.footer-newsletter-bouton:hover .footer-newsletter-bouton-fleche{
  transform: rotate(45deg);
}


/* =========================================================
   FOOTER PRINCIPAL
========================================================= */

.footer-principal{
  width: 100%;
  padding: 9vh 15% 8vh 15%;
}

.footer-principal-contenu{
  width: 100%;
  display: grid;
  grid-template-columns: 20% 58% 22%;
  column-gap: 3%;
  align-items: start;
}


/* =========================================================
   COLONNE LOGO
========================================================= */

.footer-principal-colonne-logo{
  display: flex;
  align-items: flex-start;
}

.footer-principal-logo{
  display: block;
  width: 72%;
  color: var(--noir);
  text-decoration: none;
}

.footer-principal-logo svg{
  display: block;
  width: 100%;
  height: auto;
}


/* =========================================================
   COLONNE INFOS
========================================================= */

.footer-principal-colonne-infos{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-principal-description{
  margin: 0 0 4vh 0;
  max-width: 72%;

  font-family: var(--font-texte);
  font-weight: var(--font-weight-texte);

  font-size: clamp(0.95rem, 1vw, 1.05rem);
  line-height: 1.2;
  text-transform: uppercase;
}


/* =========================================================
   NAVIGATION FOOTER
========================================================= */

.footer-principal-navigation{
  width: 100%;
  margin-bottom: 4vh;
}

/* wp_nav_menu génère le ul */
.footer-principal-navigation ul,
.footer-principal-menu{
  margin: 0;
  padding: 0;
  list-style: none;

  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2.6rem;
}

.footer-principal-navigation li,
.footer-principal-menu li{
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline-flex;
}

.footer-principal-navigation a,
.footer-principal-menu a{
  display: inline-block;
  text-decoration: none;
  color: var(--noir);

  font-family: var(--font-titre);
  font-weight: var(--font-weight-titre);
  letter-spacing: var(--tracking-titre);
  text-transform: uppercase;

  font-size: clamp(1.15rem, 1.5vw, 1.8rem);
  line-height: 1;
  white-space: nowrap;

  transition: color 0.3s ease, opacity 0.3s ease;
}

.footer-principal-navigation a:hover,
.footer-principal-menu a:hover{
  color: rgba(0,0,0,0.55);
}


/* =========================================================
   MENTIONS
========================================================= */

.footer-principal-mentions{
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;

  font-family: var(--font-texte);
  font-weight: var(--font-weight-texte);

  text-transform: uppercase;
}

.footer-principal-mentions a{
  color: var(--noir);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-principal-mentions a:hover{
  color: rgba(0,0,0,0.55);
}

.footer-principal-mentions a,
.footer-principal-mentions span {
  font-size: 0.75rem;
}


/* =========================================================
   COLONNE RÉSEAUX
========================================================= */

.footer-principal-colonne-reseaux{
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

.footer-principal-reseaux{
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.footer-principal-reseau{
  width: 3rem;
  height: 3rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--noir);
  text-decoration: none;

  font-size: 1.6rem;
  line-height: 1;

  transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}

.footer-principal-reseau:hover{
  color: rgba(0,0,0,0.55);
}


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

.screen-reader-text{
  position: absolute;
  width: 0.06rem;
  height: 0.06rem;
  padding: 0;
  margin: -0.06rem;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}


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

@media (max-width: 1024px){

  .footer-newsletter{
    padding: 7vh 10% 6vh 10%;
  }

  .footer-newsletter-texte{
    max-width: 78%;
  }

  .footer-newsletter-champ{
    width: 52%;
  }

  .footer-principal{
    padding: 8vh 10% 7vh 10%;
  }

  .footer-principal-contenu{
    grid-template-columns: 22% 54% 24%;
  }

  .footer-principal-logo{
    width: 82%;
  }

  .footer-principal-navigation ul,
  .footer-principal-menu{
    gap: 1.8rem;
  }

  .footer-principal-navigation a,
  .footer-principal-menu a{
    font-size: clamp(1rem, 1.35vw, 1.4rem);
  }
}


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

@media (max-width: 768px){

  .footer-newsletter{
    padding: 6vh 8% 6vh 8%;
  }

  .footer-newsletter-titre{
    margin-bottom: 3vh;
  }

  .footer-newsletter-texte{
    max-width: 100%;
    margin-bottom: 3vh;
  }

  .footer-newsletter-formulaire{
    align-items: flex-start;
  }

  .footer-newsletter-champ{
    width: 100%;
  }

  .footer-principal{
    padding: 7vh 8% 7vh 8%;
  }

  .footer-principal-contenu{
    grid-template-columns: 1fr;
    row-gap: 4vh;
  }

  .footer-principal-logo{
    width: 34%;
  }

  .footer-principal-description{
    max-width: 100%;
    margin-bottom: 3vh;
  }

  .footer-principal-navigation{
    margin-bottom: 3vh;
  }

  .footer-principal-navigation ul,
  .footer-principal-menu{
    flex-wrap: wrap;
    gap: 1.2rem 1.6rem;
  }

  .footer-principal-colonne-reseaux{
    justify-content: flex-start;
  }
}

@media (max-width: 640px){

  .footer-principal-logo{
    width: 42%;
  }

  .footer-principal-navigation a,
  .footer-principal-menu a{
    font-size: 1.2rem;
  }

  .footer-principal-mentions{
    font-size: 0.8rem;
  }

  .footer-principal-reseau{
    width: 2.8rem;
    height: 2.8rem;
    font-size: 1.45rem;
  }
}


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

@media (max-width: 1024px){

  .footer-newsletter{
    padding: 7vh 10% 6vh 10%;
  }

  .footer-newsletter-texte{
    max-width: 72%;
  }

  .footer-newsletter-champ{
    width: 60%;
  }

  .footer-principal{
    padding: 8vh 10% 7vh 10%;
  }

  .footer-principal-contenu{
    grid-template-columns: 26% 46% 28%;
  }

  .footer-principal-logo{
    width: 72%;
  }

  .footer-principal-menu{
    gap: 1.4rem;
  }
}


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

@media (max-width: 768px){

  .footer-newsletter{
    padding: 6vh 8% 6vh 8%;
  }

  .footer-newsletter-titre{
    margin-bottom: 3vh;
  }

  .footer-newsletter-texte{
    max-width: 100%;
    margin-bottom: 3vh;
  }

  .footer-newsletter-formulaire{
    align-items: flex-start;
  }

  .footer-newsletter-champ{
    width: 100%;
  }

  .footer-principal{
    padding: 7vh 8% 7vh 8%;
  }

  .footer-principal-contenu{
    grid-template-columns: 1fr;
    row-gap: 5vh;
  }

  .footer-principal-logo{
    width: 34%;
  }

  .footer-principal-menu{
    gap: 1.2rem 1.6rem;
  }

  .footer-principal-colonne-reseaux{
    justify-content: flex-start;
  }

  .footer-principal-reseau{
    font-size: 1.8rem;
  }
}

@media (max-width: 640px){

  .footer-principal-logo{
    width: 42%;
  }

  .footer-principal-menu{
    gap: 1rem 1.2rem;
  }

  .footer-principal-menu a{
    font-size: 1.35rem;
  }

  .footer-principal-mentions{
    font-size: 0.8rem;
  }
}