/* =========================================================
   PAGE LE DISPOSITIF
========================================================= */

.page-le-dispositif{
    width: 100%;
    overflow-x: hidden;
  }
  /* =========================================================
   HERO DISPOSITIF
   - même logique que l’accueil
========================================================= */

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

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

/* Colonne visuel */
.dispositif-hero-visuel{
  width: 40%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

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

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

.dispositif-hero-titre{
  margin: 0 0 5% 0;
  font-family: var(--font-titre);
  font-weight: var(--font-weight-titre);
  letter-spacing: var(--tracking-titre);
  text-transform: uppercase;
  line-height: 1;
  font-size: clamp(2rem, 2.5vw, 3rem);
}

.dispositif-hero-texte{
  margin-top: 3vh;
  margin-bottom: 0;
  line-height: 1.5;
  max-width: 90%;
  font-family: var(--font-texte);
  font-weight: var(--font-weight-texte);
}

/* Bouton */
.dispositif-hero-bouton{
  margin-top: 5%;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  width: fit-content;
  text-decoration: none;
  color: var(--noir);
  cursor: pointer;
}

.dispositif-hero-bouton-texte{
  position: relative;
  font-family: var(--font-titre);
  font-weight: var(--font-weight-titre);
  letter-spacing: var(--tracking-titre);
  text-transform: uppercase;
}

.dispositif-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;
}

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

.dispositif-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);
}

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

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

/* Responsive */
@media (max-width: 900px){
  .dispositif-hero{
    padding-block: 6vh;
  }

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

  .dispositif-hero-texte-colonne{
    width: 100%;
    max-width: 100%;
    min-width: 0;
    order: 1;
  }

  .dispositif-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;
  }

  .dispositif-hero-texte{
    max-width: 100%;
  }

  .dispositif-hero-visuel{
    width: 100%;
    justify-content: flex-start;
    order: 2;
  }

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

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

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

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

  /* =========================================================
   SECTION INTRODUCTION
   - titre gauche
   - texte droite
========================================================= */

.dispositif-introduction{
    width: 100%;
    padding: 6vh 0 14vh 0;
  }
  
  .dispositif-introduction-contenu{
    width: 100%;
    padding: 0 15%;
  
    display: grid;
    grid-template-columns: 40% 60%;
    align-items: start;
  }
  
  .dispositif-introduction-colonne-titre{
    width: 100%;
  }
  
  .dispositif-introduction-titre{
    margin: 0;
    font-family: var(--font-titre);
    font-weight: var(--font-weight-titre);
    letter-spacing: var(--tracking-titre);
    text-transform: uppercase;
    line-height: 1.05;
  }
  
  .dispositif-introduction-colonne-texte{
    width: 100%;
    padding-top: 5vh;
  }
  
  .dispositif-introduction-texte{
    margin: 0 0 5vh 0;
    font-family: var(--font-texte);
    font-weight: var(--font-weight-texte);
    line-height: 1.45;
  }
  
  .dispositif-introduction-texte:last-child{
    margin-bottom: 0;
  }
  
  /* =========================================================
     RESPONSIVE SECTION INTRODUCTION
  ========================================================= */
  
  @media (max-width: 1024px){
    .dispositif-introduction-contenu{
      padding: 0 10%;
      grid-template-columns: 1fr;
      row-gap: 4vh;
    }
  
    .dispositif-introduction-colonne-texte{
      padding-top: 0;
      max-width: 92%;
    }
  }
  
  @media (max-width: 768px){
    .dispositif-introduction{
      padding: 4vh 0 10vh 0;
    }
  
    .dispositif-introduction-contenu{
      padding: 0 10%;
    }
  
    .dispositif-introduction-titre{
      font-size: clamp(1.8rem, 8vw, 2.6rem);
    }
  
    .dispositif-introduction-colonne-texte{
      max-width: 100%;
    }
  
    .dispositif-introduction-texte{
      margin-bottom: 4vh;
      font-size: 1rem;
      line-height: 1.5;
    }
  }






/* =========================================================
   SECTION — CE QUE ARTIST+ PERMET
========================================================= */

.dispositif-permet{
    width: 100%;
    background: #000;
    padding: 10vh 10% 10vh 20%;
    position: relative;
  }
  
  /* =========================================================
     TITRE
     - décalé vers la droite comme sur la maquette
  ========================================================= */
  
  .dispositif-permet-titre{
    margin: 0 0 0 45%;
    font-family: var(--font-titre);
    font-weight: var(--font-weight-titre);
    letter-spacing: var(--tracking-titre);
    text-transform: uppercase;
    line-height: 1.02;
    color: var(--blanc);
  }
  
  /* =========================================================
     GRILLE GLOBALE
     - 1 colonne pictos
     - 2 colonnes de contenus
  ========================================================= */
  
  .dispositif-permet-grille{
    width: 100%;
    display: grid;
    grid-template-columns: 15% 30% 30%;
    align-items: start;
    margin: 0 0 0 10%;
  }
  
  /* =========================================================
     COLONNE PICTOS
  ========================================================= */
  
  .dispositif-permet-pictos{
    display: flex;
    flex-direction: column;
    gap: 5vh;
    padding-top: 2vh;
  }
  
  .dispositif-permet-pictos img{
    width: 2.5rem;
    height: auto;
    display: block;
  }
  
  /* =========================================================
     COLONNES DE CONTENU
  ========================================================= */
  
  .dispositif-colonne{
    display: flex;
    flex-direction: column;
    gap: 7vh;
  }
  
  .dispositif-colonne-droite{
    margin-top: 10vh;
  }
  
  /* =========================================================
     ITEM
  ========================================================= */
  
  .dispositif-item{
    width: 60%;
  }
  
  /* =========================================================
     CHIFFRES
     - même logique que accueil-impact
  ========================================================= */
  
  .dispositif-numero{
    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;
    color: var(--blanc);
  }
  
  /* =========================================================
     TEXTE
     - même logique que accueil-impact
  ========================================================= */
  
  .dispositif-texte{
    margin: 0;
    max-width: 25rem;
    font-family: var(--font-texte);
    font-weight: var(--font-weight-texte);
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--blanc);
  }
  
  /* =========================================================
     RESPONSIVE TABLETTE
  ========================================================= */
  
  @media (max-width: 1024px){
  
    .dispositif-permet{
      padding: 10vh 10% 12vh 10%;
    }
  
    .dispositif-permet-titre{
      margin: 0 0 7vh 0;
      font-size: clamp(2rem, 4.2vw, 3rem);
    }
  
    .dispositif-permet-grille{
      grid-template-columns: 1fr 1fr;
      column-gap: 10%;
    }
  
    .dispositif-permet-pictos{
      display: none;
    }
  
    .dispositif-colonne{
      gap: 6vh;
    }
  
    .dispositif-colonne-droite{
      margin-top: 0;
    }
  
    .dispositif-numero{
      font-size: clamp(3.8rem, 6vw, 5rem);
    }
  
    .dispositif-texte{
      font-size: clamp(0.95rem, 1.15vw, 1.1rem);
      max-width: 100%;
    }
  }
  
  /* =========================================================
     RESPONSIVE MOBILE
  ========================================================= */
  
  @media (max-width: 640px){

    .dispositif-permet{
      padding: 8vh 10% 10vh 10%;
    }
  
    .dispositif-permet-titre{
      margin: 0 0 5vh 0;
      font-size: clamp(1.7rem, 7vw, 2.4rem);
      line-height: 1.05;
    }
  
    /* on passe en pile unique */
    .dispositif-permet-grille{
      display: flex;
      flex-direction: column;
      gap: 4vh;
      margin: 0;
    }
  
    .dispositif-permet-pictos{
      display: none;
    }
  
    /* on "casse" les colonnes pour récupérer les items individuellement */
    .dispositif-colonne{
      display: contents;
    }
  
    .dispositif-colonne-droite{
      margin-top: 0;
    }
  
    /* ordre mobile */
    .dispositif-item-1{ order: 1; }
    .dispositif-item-2{ order: 2; }
    .dispositif-item-3{ order: 3; }
    .dispositif-item-4{ order: 4; }
    .dispositif-item-5{ order: 5; }
  
    .dispositif-item{
      width: 70%;
      margin: 0 15%;
    }
  
    .dispositif-numero{
      font-size: clamp(3.4rem, 14vw, 4.8rem);
    }
  
    .dispositif-texte{
      font-size: 1rem;
      line-height: 1.35;
      max-width: 100%;
    }
  }




  /* =========================================================
   SECTION — LES 4 VOLETS DE L’ACCOMPAGNEMENT
========================================================= */

.dispositif-volets{
    width: 100%;
    padding: 10vh 0 5vh 0;
  }
  
  .dispositif-volets-contenu{
    width: 100%;
    padding: 0 15%;
  }
  
  /* =========================================================
     TITRE
  ========================================================= */
  
  .dispositif-volets-titre{
    margin: 0 40% 5vh 10%;
    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
  ========================================================= */
  
  .dispositif-volets-bloc-texte{
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 10%;
    padding-left: 30%;
  }
  
  /* =========================================================
     TRAITS VERTICAUX
  ========================================================= */
  
  .dispositif-volets-traits{
    width: 7%;
    min-width: 4.5rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 0.4vh;
  }
  
  .dispositif-volets-traits-image{
    width: 100%;
    max-width: 5rem;
    height: auto;
    display: block;
  }
  
  /* =========================================================
     CONTENU TEXTE
  ========================================================= */
  
  .dispositif-volets-texte-contenu{
    width: 100%;
    max-width: 60%;
  }
  
  .dispositif-volets-texte{
    margin: 0 0 5vh 0;
    font-family: var(--font-texte);
    font-weight: var(--font-weight-texte);
    line-height: 1.45;
  }
  
  .dispositif-volets-texte:last-child{
    margin-bottom: 0;
  }
  
  /* =========================================================
     RESPONSIVE TABLETTE
  ========================================================= */
  
  @media (max-width: 1024px){
  
    .dispositif-volets{
      padding: 8vh 0 10vh 0;
    }
  
    .dispositif-volets-contenu{
      padding: 0 10%;
    }
  
    .dispositif-volets-titre{
      margin: 0 0 6vh 0;
    }
  
    .dispositif-volets-bloc-texte{
      padding-left: 8%;
      gap: 4.5%;
    }
  
    .dispositif-volets-traits{
      width: 8%;
      min-width: 4rem;
    }
  
    .dispositif-volets-texte-contenu{
      max-width: 82%;
    }
  }
  
  /* =========================================================
     RESPONSIVE MOBILE
  ========================================================= */
  
  @media (max-width: 640px){
  
    .dispositif-volets{
      padding: 6vh 0 3vh 0;
    }

    .dispositif-volets-titre{
      margin: 0 0 4vh 0;
      font-size: clamp(1.8rem, 7vw, 2.5rem);
      line-height: 1.08;
    }
  
    .dispositif-volets-bloc-texte{
      padding-left: 0;
      gap: 10%;
    }
  
    .dispositif-volets-traits{
      width: 12%;
      min-width: 2.8rem;
    }
  
    .dispositif-volets-texte-contenu{
      max-width: 100%;
    }
  
    .dispositif-volets-texte{
      margin-bottom: 4vh;
      font-size: 1rem;
      line-height: 1.5;
    }
  }
  
  
  /* =========================================================
     SECTION — ACCORDÉON DES 4 VOLETS
  ========================================================= */
  
  .dispositif-accordeon{
    width: 100%;
    padding: 6vh 0 12vh 0;
  }
  
  .dispositif-accordeon-contenu{
    width: 100%;
    padding: 0 15%;
  }
  
  /* =========================================================
     ITEM
  ========================================================= */
  
  .dispositif-accordeon-item{
    width: 100%;
    border: none;
  }
  
  .dispositif-accordeon-item:last-child{
    margin-bottom: 0;
  }
  
  /* =========================================================
     BOUTON / LIGNE BLANCHE
  ========================================================= */
  
  .dispositif-accordeon-bouton{
    width: 100%;
    display: grid;
    grid-template-columns: 5rem 1fr;
    align-items: stretch;
    border: none;
    padding: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
  }
  
  /* Bloc noir à gauche */
  
  .dispositif-accordeon-icone{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    min-height: 5.4rem;
  }
  
  /* Les deux lignes du + */
  
  .dispositif-accordeon-ligne{
    position: absolute;
    background: var(--noir);
    transition: transform 0.35s ease, opacity 0.35s ease;
    border: #000 solid 0.2rem;
  }
  
  .dispositif-accordeon-ligne-horizontale{
    width: 1.8rem;
    height: 0.22rem;
  }
  
  .dispositif-accordeon-ligne-verticale{
    width: 0.22rem;
    height: 1.8rem;
  }
  
  /* Titre */
  
  .dispositif-accordeon-titre{
    display: flex;
    align-items: center;
    padding: 0 2rem;
    text-transform: uppercase;
    font-family: var(--font-titre); /* applique Rigid Square puis IBM Plex Sans en fallback */
    font-weight: var(--font-weight-titre); /* applique Bold */
    letter-spacing: var(--tracking-titre); /* applique le spacing négatif demandé */
    font-size: clamp(1rem, 1.5vw, 2rem);  
    line-height: 1.2;
    color: var(--noir);
  }
  
  /* =========================================================
     PANNEAU NOIR
     - desktop : recalé sur 5rem
  ========================================================= */
  
  .dispositif-accordeon-panneau{
    width: calc(100% - 5rem);
    margin-left: 5rem;
  
    background: #e1e1e1;
    color: #000000;
  
    max-height: 0;
    overflow: hidden;
  
    transition: max-height 0.45s ease;
  }
  
  .dispositif-accordeon-panneau-interieur{
    padding: 2.2rem 2rem 2.4rem 2rem;
  
    font-family: var(--font-texte);
    font-weight: var(--font-weight-texte);
    font-size: clamp(0.8rem, 1vw, 1.2rem);
    line-height: 1.45;
  }
  
  /* =========================================================
     ÉTAT OUVERT
  ========================================================= */
  
  .dispositif-accordeon-item.is-open .dispositif-accordeon-panneau{
    max-height: 20rem;
  }
  
  .dispositif-accordeon-item.is-open .dispositif-accordeon-ligne-verticale{
    transform: rotate(90deg) scaleY(0);
    opacity: 0;
  }
  
  .dispositif-accordeon-item.is-open .dispositif-accordeon-ligne-horizontale{
    transform: rotate(180deg);
  }
  
  /* Hover subtil */
  
  .dispositif-accordeon-bouton:hover .dispositif-accordeon-titre{
    opacity: 0.8;
  }
  
  /* =========================================================
     RESPONSIVE TABLETTE
     - en responsive : recalé sur 4rem
  ========================================================= */
  
  @media (max-width: 1024px){
  
    .dispositif-accordeon{
      padding: 5vh 0 10vh 0;
    }
  
    .dispositif-accordeon-contenu{
      padding: 0 10%;
    }
  
    .dispositif-accordeon-bouton{
      grid-template-columns: 4rem 1fr;
    }
  
    .dispositif-accordeon-icone{
      min-height: 4.6rem;
    }
  
    .dispositif-accordeon-titre{
      padding: 0 1.5rem;
      font-size: clamp(1.15rem, 1.8vw, 1.45rem);
    }
  
    .dispositif-accordeon-panneau{
      width: calc(100% - 4rem);
      margin-left: 4rem;
    }
  
    .dispositif-accordeon-panneau-interieur{
      padding: 1.8rem 1.5rem 1.9rem 1.5rem;
      font-size: 1rem;
      line-height: 1.45;
    }
  }
  
  /* =========================================================
     RESPONSIVE MOBILE
     - en responsive : recalé sur 4rem
  ========================================================= */
  
  @media (max-width: 640px){
  
    .dispositif-accordeon{
      padding: 4vh 0 8vh 0;
    }
  
    .dispositif-accordeon-item{
      margin-bottom: 2.4vh;
    }
  
    .dispositif-accordeon-bouton{
      grid-template-columns: 4rem 1fr;
    }
  
    .dispositif-accordeon-icone{
      min-height: 4rem;
    }
  
    .dispositif-accordeon-ligne-horizontale{
      width: 1.3rem;
      height: 0.18rem;
    }
  
    .dispositif-accordeon-ligne-verticale{
      width: 0.18rem;
      height: 1.3rem;
    }
  
    .dispositif-accordeon-titre{
      padding: 0 1rem;
      font-size: clamp(1rem, 4.4vw, 1.25rem);
      line-height: 1.2;
    }
  
    .dispositif-accordeon-panneau{
      width: calc(100% - 4rem);
      margin-left: 4rem;
    }
  
    .dispositif-accordeon-panneau-interieur{
      padding: 1.3rem 1rem 1.5rem 1rem;
      font-size: 1rem;
      line-height: 1.5;
    }
  
    .dispositif-accordeon-item.is-open .dispositif-accordeon-panneau{
      max-height: 28rem;
    }
  }


  /* =========================================================
   SECTION IMAGE BANDEAU — PAGE DISPOSITIF
   - même logique que l’accueil
   - classes spécifiques
========================================================= */

.dispositif-image-bandeau{
    width:100%;
    padding:0 10% 10vh 10%;
  }
  
  .dispositif-image-bandeau-contenu{
    width:100%;
    aspect-ratio:21 / 6;
    overflow:hidden;
  }
  
  .dispositif-image-bandeau-contenu img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  
  /* =========================================================
     RESPONSIVE TABLETTE
  ========================================================= */
  
  @media (max-width:1024px){
  
    .dispositif-image-bandeau{
      padding:0 8% 8vh 8%;
    }
  
    .dispositif-image-bandeau-contenu{
      aspect-ratio:18 / 7;
    }
  
  }
  
  /* =========================================================
     RESPONSIVE MOBILE
  ========================================================= */
  
  @media (max-width:640px){
  
    .dispositif-image-bandeau{
      padding:0 6% 6vh 6%;
    }
  
    .dispositif-image-bandeau-contenu{
      aspect-ratio:12 / 7;
    }
  
  }



  /* =========================================================
   SECTION — UN PAYSAGE EN MOUVEMENT
========================================================= */

.dispositif-contexte{
    width: 100%;
    padding: 0 0 10vh 0;
  }
  
  .dispositif-contexte-contenu{
    width: 100%;
    padding: 0 15%;
  
    display: grid;
    grid-template-columns: 40% 40%;
    column-gap: 20%;
    align-items: start;
  }
  
  /* =========================================================
     COLONNE GAUCHE
  ========================================================= */
  
  .dispositif-contexte-gauche{
    width: 100%;
  }
  
  .dispositif-contexte-titre{
    margin: 0 0 8vh 0;
    font-family: var(--font-titre);
    font-weight: var(--font-weight-titre);
    letter-spacing: var(--tracking-titre);
    text-transform: uppercase;
    line-height: 1.05;
  }
  
  .dispositif-contexte-textes{
    width: 100%;
    max-width: 90%;
    margin-left: 20%;
  }
  
  .dispositif-contexte-paragraphe{
    margin: 0 0 5vh 0;
    font-family: var(--font-texte);
    font-weight: var(--font-weight-texte);
    line-height: 1.42;
  }
  
  .dispositif-contexte-paragraphe:last-child{
    margin-bottom: 0;
  }
  
  /* =========================================================
     COLONNE DROITE
  ========================================================= */
  
  .dispositif-contexte-droite{
    width: 100%;
    padding-top: 8vh;
  }
  
  /* =========================================================
     LISTE DES 4 ITEMS
  ========================================================= */
  
  .dispositif-contexte-liste{
    width: 100%;
    margin-bottom: 10vh;
  }
  
  .dispositif-contexte-item{
    display: grid;
    grid-template-columns: 3.4rem 1fr;
    column-gap: 1.4rem;
    align-items: start;
    margin-bottom: 5vh;
  }
  
  .dispositif-contexte-item:last-child{
    margin-bottom: 0;
  }
  
  .dispositif-contexte-item-picto{
    width: 3.2rem;
    height: auto;
    display: block;
    margin-top: 0.2rem;
  }
  
  .dispositif-contexte-item-texte{
    margin: 0;
    font-family: var(--font-titre); /* applique Rigid Square puis IBM Plex Sans en fallback */
    font-weight: var(--font-weight-titre); /* applique Bold */
    letter-spacing: var(--tracking-titre); /* applique le spacing négatif demandé */
    font-size: clamp(1rem, 1.5vw, 2rem);
    text-transform: uppercase;
    line-height: 1.12;
  }
  
  /* =========================================================
     BLOC FORT FINAL
  ========================================================= */
  
  .dispositif-contexte-bloc-fort{
    width: 100%;
    margin: 0 0 0 -15%;
  }
  
  .dispositif-contexte-bloc-fort-texte{
    margin: 0;
    font-family: var(--font-titre); /* applique Rigid Square puis IBM Plex Sans en fallback */
    font-weight: var(--font-weight-titre); /* applique Bold */
    letter-spacing: var(--tracking-titre); /* applique le spacing négatif demandé */
    font-size: clamp(1.2rem, 1.8vw, 2.4rem);  
    text-transform: uppercase;
    line-height: 1.08;
  }
  
  /* =========================================================
     RESPONSIVE TABLETTE
  ========================================================= */
  
  @media (max-width: 1024px){

    .dispositif-contexte-contenu{
      padding: 0 10%;
      grid-template-columns: 1fr;
      row-gap: 7vh;
    }
  
    .dispositif-contexte-titre{
      margin: 0 0 5vh 0;
    }
  
    .dispositif-contexte-textes{
      max-width: 82%;
      margin-left: 0;
    }
  
    .dispositif-contexte-droite{
      padding-top: 0;
    }
  
    .dispositif-contexte-liste{
      margin-bottom: 7vh;
    }
  
    .dispositif-contexte-item{
      margin-bottom: 4vh;
    }
  
    .dispositif-contexte-item-texte{
      font-size: clamp(1.05rem, 1.6vw, 1.4rem);
    }
  
    .dispositif-contexte-bloc-fort-texte{
      font-size: clamp(1.8rem, 3vw, 2.5rem);
    }

    .dispositif-contexte-bloc-fort{
      margin: 0;
    }
  }
  
  /* =========================================================
     RESPONSIVE MOBILE
  ========================================================= */
  
  @media (max-width: 640px){
  
    .dispositif-contexte-titre{
      margin: 0 0 4vh 0;
      font-size: clamp(1.8rem, 7vw, 2.5rem);
      line-height: 1.08;
    }
  
    .dispositif-contexte-textes{
      max-width: 100%;
    }
  
    .dispositif-contexte-paragraphe{
      margin-bottom: 4vh;
      font-size: 1rem;
      line-height: 1.5;
    }
  
    .dispositif-contexte-liste{
      margin-bottom: 6vh;
    }
  
    .dispositif-contexte-item{
      grid-template-columns: 2.8rem 1fr;
      column-gap: 1rem;
      margin-bottom: 3.2vh;
    }
  
    .dispositif-contexte-item-picto{
      width: 2.6rem;
    }
  
    .dispositif-contexte-item-texte{
      font-size: clamp(1rem, 4.6vw, 1.25rem);
      line-height: 1.15;
    }
  
    .dispositif-contexte-bloc-fort-texte{
      font-size: clamp(1.6rem, 7vw, 2.3rem);
      line-height: 1.1;
    }
  }