.hero {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 630px;
    background: url('../IMG/background_hero.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.ordi_content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 1180px;
    height: 464.06px;
    max-width: 1180px;
    gap: 25px;
}

.soleil-orange{
    width: 48px;
    height: 48px;
    margin-right: 28%;
    animation: infinite-rotate 8s linear infinite;
}

.sous-titre{
    color: #AD090E;
    font-weight: 700;
    font-size: 11.8px;
    font-family: "Outfit";
    gap: 10.40px;
    display: flex;
    align-items: center;
    letter-spacing: 2.61px;
    text-transform: uppercase;
    justify-content: center;
    width: 268.80px;
    height: 15px;
    white-space: nowrap;
    line-height: 100%;
}

.trait-rouge{
    display: inline-block;
    width: 25px;
    height: 2px;
    background-color: #AD090E;
}

.hero__content-h1{
    width: 910px;
    height: 164px;
    top: 104.49px;
    opacity: 1;
    font-family: 'Fraunces';
    font-weight: 600;
    font-size: 77.7px;
    line-height: 81.6px;
    letter-spacing: -2px;
    text-align: center;
    vertical-align: middle;
}

.hero__content-span{
    font-family: 'Fraunces';
    font-style: Italic;
    color: var(--color-green-22, #0F6322);
}

#products_GFA,#products_Computers,#products_Call-center,#products_GED {
    scroll-margin-top: 150px;
}
html {
    scroll-behavior: smooth;
}

.accueil_ordi {
    width: 620px;
    height: 102px;
    max-width: 620px;
    opacity: 1;
    font-family: 'Outfit';
    font-weight: 300;
    font-size: 20px;
    line-height: 34px;
    letter-spacing: 0%;
    text-align: center;
    color: #5C574C;
}

.equipements {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1180px;
    height: 35px;
    gap: 8.8px;
    padding-top: 25px;
    padding-bottom: 10px;
}

.equip {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 35px;
    padding-top: 8px;
    padding-right: 16px;
    padding-bottom: 8px;
    padding-left: 16px;
    gap: 7.19px;
    border-radius: 999px;
    background: #FAF6EE;
    border: 1px solid #1C1A151F;
    font-family: 'Outfit';
    font-weight: 600;
    font-size: 13.1px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    color: #5C574C;
    white-space: nowrap;
    transition:
        color 300ms ease-out,
        border-color 300ms ease-out;
}

.equip:hover {
    border-color: #0F6322;
    color: #0F6322;
}

.equip img {
    width: 13px;
    height: 13px;
}

.petite_porte {
    position: absolute;
    width: 560px;
    height: 672px;
    left: 90.5%;
    top: -10%;
    border-top-left-radius: 999px;
    border-top-right-radius: 999px;
    border-bottom-right-radius: 32px;
    border-bottom-left-radius: 32px;
    border: 1px solid #F0B95A33;
}

.grande_porte {
    position: absolute;
    width: 680px;
    height: 816px;
    left: 90.2%;
    top: -25%;
    border-top-left-radius: 999px;
    border-top-right-radius: 999px;
    border-bottom-right-radius: 32px;
    border-bottom-left-radius: 32px;
    border: 1px solid #F0B95A1A;
}

.banniere-triangle-verte {
    width: 100%;
    height: 14px;
    display: block;
}

.ice {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: 100%;
    height: 751.19px;
    top: 734.06px;
    padding-top: 104px;
    padding-right: 370px;
    padding-bottom: 104px;
    padding-left: 370px;
    background: #062E12;
}

.ice_content {
    position: relative;
    display: grid;
    place-items: center;
    grid-template-rows: repeat(1, 1fr);
    grid-template-columns: repeat(2, 1fr);
    width: 1180px;
    max-width: 1180px;
    gap: 64px;
}

.ice_texte {
    display: flex;
    flex-direction: column;
    place-self: center;
    width: 585.90px;
    gap: 16.80px;
    grid-row: 1 / span 1;
    grid-column: 1 / span 1;
}

.petit_titre {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 192px;
    height: 30.40px;
    padding-top: 7.2px;
    padding-right: 16px;
    padding-bottom: 7.2px;
    padding-left: 16px;
    gap: 8px;
    border-radius: 999px;
    background: #AD090E33;
    border: 1px solid #F0B95A4D;
    font-family: 'Outfit';
    font-weight: 700;
    font-size: 11.5px;
    line-height: 100%;
    letter-spacing: 1.61px;
    vertical-align: middle;
    text-transform: uppercase;
    color: #F0B95A;
    white-space: nowrap;
}

.petit_titre img {
    width: 13px;
    height: 13px;
}

.ice_h2 {
    width: 450px;
    padding-top: 5.59px;
    font-family: 'Fraunces';
    font-weight: 600;
    font-size: 53.3px;
    line-height: 57.12px;
    letter-spacing: -1.09px;
    vertical-align: middle;
    color: #FAF6EE;
}

.ice_span {
    font-style: Italic;
    color: #F0B95A;
}

.ice_p {
    width: 482.81px;
    max-width: 482.82px;
    font-family: 'Outfit';
    font-weight: 400;
    font-size: 16px;
    line-height: 28.8px;
    letter-spacing: 0%;
    vertical-align: middle;
    color: #FAF6EEC7;
}

.liste_check {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 585.90px;
    padding-top: 5.59px;
    gap: 11.20px;
}

.check_yellow {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 585.90px;
    padding-bottom: 1.31px;
    gap: 9.60px;
}

.check_yellow img {
    width: 17px;
    height: 17px;
}

.check_p {
    font-family: 'Outfit';
    font-weight: 400;
    font-size: 14.9px;
    line-height: 22.32px;
    letter-spacing: 0%;
    vertical-align: middle;
    color: #FAF6EEE5;
}

.ice_statistique {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 585.90px;
    height: 80.39px;
    gap: 38.41px;
}

.stat {
    display: flex;
    flex-direction: column;
    width: 124.14px;
    min-width: 124.14px;
    gap: 4.81px;
}

.stat_chiffre {
    width: 124.14px;
    height: 33.59px;
    font-family: 'Fraunces';
    font-weight: 600;
    font-size: 33.6px;
    line-height: 33.6px;
    letter-spacing: 0%;
    vertical-align: middle;
    color: #FAF6EE;
}

.unite {
    font-family: 'Fraunces';
    font-style: italic;
    font-weight: 600;
    font-size: 17.6px;
    line-height: 17.6px;
    letter-spacing: 0%;
    vertical-align: middle;
    color: #F0B95A;
    margin-bottom: 200px;
}

.stat_texte {
    width: 124.14px;
    max-width: 124.15px;
    font-family: 'Outfit';
    font-weight: 400;
    font-size: 11.8px;
    line-height: 100%;
    letter-spacing: 0%;
    vertical-align: middle;
    color: #FAF6EE8C;
}

.ice_cta {
    width: 176px;
    height: 50px;
    padding-top: 15px;
    padding-right: 26px;
    padding-bottom: 15px;
    padding-left: 28px;
    border-radius: 999px;
    cursor: pointer;
    background: #FAF6EE;
    font-family: 'Outfit';
    font-weight: 700;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #1C1A15;
    display: flex;
    align-items: center;
    text-wrap: nowrap;
    transition: all 0.2s ease-out;
}

.ice_cta img {
    width: 20px;
    height: 17px;
    margin-left: 7px;
    transition: all 0.2s ease-out;
}

.ice_cta:hover {
    background-color: #faf6eede; 
    box-shadow: 0px 6px 10px #f3ecdd50;   
}

.ice_cta:hover img {
    transform: translate(5px);
}

.ice_image {
    position: relative;
    display: flex;
    place-self: center;
    z-index: 10;
    width: 530.1px;
    height: 506px;
    grid-row: 1 / span 1;
    grid-column: 2 / span 1;
}

.porte-tiret {
    position: absolute;
    width: 440px;
    height: 506px;
    top: 2%;
    left: 10%;
    border-top-left-radius: 999px;
    border-top-right-radius: 999px;
    border-bottom-right-radius: 26px;
    border-bottom-left-radius: 26px;
    border: 2px dashed #F0B95A4D;
}

.image_ice {
    position: absolute;
    width: 426px;
    height: 492px;
    top: -11.5%;
    right: 30%;
}

.espace-blanc {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 178.75px;
    height: 61.59;
    gap: 10.39px;
    right: 72%;
    top: 8%;
    padding-top: 12.8px;
    padding-right: 16px;
    padding-bottom: 12.8px;
    padding-left: 16px;
    border-radius: 14px;
    background:#FAF6EEF5;
    box-shadow: 0px 16px 40px 0px #0000004D;
    backdrop-filter: blur(8px)
}

.image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #0F632224;
}

.image img {
    width: 17px;
    height: 17px;
}

.texte {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 103px;
    gap: 5px;
    padding-bottom: 1px;
    font-family: 'Outfit';
    font-weight: 400;
    font-size: 10.9px;
    line-height: 100%;
    letter-spacing: 0%;
    vertical-align: middle;
    color:#5C574C;
}

.gras {
    font-family: 'Outfit';
    font-weight: 700;
    font-size: 13.1px;
    line-height: 100%;
    letter-spacing: 0%;
    vertical-align: middle;
    color:#1C1A15;
}

.cercle_bleu {
    position: absolute;
    bottom: 7%;
    right: 2%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 96px;
    height: 96px;
    border-radius: 48px;
    background: #8ED0E9;
    box-shadow: 0px 16px 40px 0px #8ED0E980;
}

.cercle_bleu img {
    width: 70px;
    height: 70px;
}

.banniere-triangle-jaune {
    width: 100%;
    height: 14px;
    display: block;
}

.materiel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 2355px;
    padding-top: 136px;
    padding-right: 35.2px;
    padding-bottom: 113px;
    padding-left: 35.2px;
    gap: 56px;
    background: #FAF6EE;
}

.materiel_entete {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 780px;
    height: 149.11px;
    max-width: 780px;
    gap: 12.10px;
    margin-bottom: 26px;
}

.materiel_h2 {
    width: 780px;
    height: 55.90px;
    padding-top: 3.9px;
    font-family: 'Fraunces';
    font-weight: 600;
    font-size: 47.3px;
    line-height: 51.84px;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    color: #1C1A15;
}

.materiel_span {
    font-style: Italic;
    color: #0F6322;
}

.materiel_p {
    width: 780px;
    height: 54px;
    font-family: 'Outfit';
    font-weight: 400;
    font-size: 15.7px;
    line-height: 26.66px;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    color: #5C574C;
}

.materiel_content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 1140px;
    height: 1950.36px;
    max-width: 1140px;
    gap: 25px;
    opacity: 1;
}

.Materiel {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1140px;
    height: 433.59px;
    gap: 56px;
}

.Materiel:nth-child(even) {
  flex-direction: row-reverse;
}

.Mat_image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 542px;
    height: 433.59px;
}

.demi_cercle {
    position: absolute;
    width: 120px;
    height: 60px;
    top: 80%;
    left: 40%;
    border-top-left-radius: 120px;
    border-top-right-radius: 120px;
    border: 1px dashed #DD8F1E66;
}

.Mat_desc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 542px;
    height: 296.99px;
    gap: 11.20px;
    margin-bottom: 60px;
}

.desc_image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: #0F632214;
}

.desc_image img {
    width: 24px;
    height: 24px;
}

.desc_h3 {
    width: 542px;
    height: 37.4px;
    padding-top: 6.4px;
    font-family: 'Fraunces';
    font-weight: 600;
    font-size: 27px;
    line-height: 30.46px;
    letter-spacing: 0%;
    vertical-align: middle;
    color: #1C1A15;
}

.desc_p {
    width: 542px;
    height: 83px;
    font-family: 'Outfit';
    font-weight: 400;
    font-size: 15.4px;
    line-height: 27.65px;
    letter-spacing: 0%;
    vertical-align: middle;
    color: #5C574C;
}

.Mat_types {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 542px;
    height: 39.79px;
    gap: 8px;
    padding-top: 7.99px;
}

.types {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 31.80px;
    gap: 6.39px;
    padding-top: 6.4px;
    padding-right: 14.4px;
    padding-bottom: 6.4px;
    padding-left: 14.4px;
    border-radius: 999px;
    background: #F3ECDD;
    border: 1px solid #1C1A151F;
    font-family: 'Outfit';
    font-weight: 400;
    font-size: 13.1px;
    line-height: 100%;
    letter-spacing: 0%;
    vertical-align: middle;
    color: #1C1A15;
    white-space: nowrap;
}

.types img {
    width: 13px;
    height: 13px;
}

.Cta-verte {
    display: flex;
    justify-content: center;
    align-items: center;
    border: #062E12;
    width: 182px;
    height: 42px;
    padding: 16px 33.6px 16px 33.6px;
    gap: 9.58px;
    background: #0F6322;
    line-height: 100%;
    color: #FAF6EE;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Outfit';
    border-radius: 999px;
    cursor: pointer;
    letter-spacing: 0%;
    transition: background-color 0.2s ease-in-out, gap 0.2s ease-in-out;
    white-space: nowrap;
}

.Cta-verte img {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease-in-out;
}

.Cta-verte:hover {
    background-color: #0F6322;
    box-shadow:
        0 0 15px 3px #0F632240,
        0 0 30px 8px #0F632220;
}

.Cta-verte:hover img {
    transform: translate(5px);
}

.besoin {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 347.85px;
    top: 3862.56px;
    padding-top: 79px;
    padding-right: 620px;
    padding-bottom: 80px;
    padding-left: 620px;
    background: #DD8F1E;
}

.besoin_content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 680px;
    height: 188.85px;
    max-width: 680px;
    gap: 11.90px;
}

.besoin_h2 {
    width: 680px;
    height: 46.75px;
    padding-bottom: 0.75px;
    font-family: 'Fraunces';
    font-weight: 600;
    font-size: 41.4px;
    line-height: 45.76px;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    color: #1C1A15;
}

.span_h2 {
    font-style: Italic;
}

.besoin_p {
    width: 680px;
    height: 69.9px;
    padding-bottom: 16.9px;
    font-family: 'Outfit';
    font-weight: 400;
    font-size: 15.4px;
    line-height: 26.11px;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    color: #1C1A15D9;
}

.bouton_rouge {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 218.79px;
    height: 48.4px;
    padding-top: 15.2px;
    padding-right: 33.6px;
    padding-bottom: 15.2px;
    padding-left: 33.6px;
    gap: 9.60px;
    border-radius: 999px;
    background: #062E12;
    transition: background-color 0.2s ease-in-out, gap 0.2s ease-in-out;
    cursor: pointer;
    font-family: 'Outfit';
    font-weight: 700;
    font-size: 14.4px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    color: #FAF6EE;
}

.bouton_rouge img {
    width: 15px;
    height: 15px;
    transition: transform 0.2s ease-in-out;
}

.bouton_rouge:hover img {
    transform: translate(5px);
}

.bouton_rouge:hover {
    background-color: #0F6322;
    box-shadow:
        0 0 15px 3px #0F632240,
        0 0 30px 8px #0F632220;
}

.Section_a_cercle {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: 100%;
    height: 500.65px;
    padding-top: 111.15px;
    padding-right: 620px;
    padding-bottom: 112px;
    padding-left: 620px;
    background: #F3ECDD;
}

.Section_contain {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 680px;
    height: 277.20px;
    max-width: 680px;
    gap: 18px;
}

.Section_h2 {
    width: 428px;
    height: 113px;
    font-family: 'Fraunces';
    font-weight: 600;
    font-size: 51.2px;
    line-height: 56.32px;
    letter-spacing: -1.02px;
    text-align: center;
    vertical-align: middle;
    color: #1C1A15;
}

.Section_span {
    font-style: Italic;
    color: #0F6322;
}

.Section_p {
    width: 680px;
    height: 60px;
    padding-bottom: 0.59px;
    font-family: 'Outfit';
    font-weight: 400;
    font-size: 16px;
    line-height: 29.6px;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    color: #5C574C;
}

.bouton {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 740px;
    height: 74.40px;
    padding-top: 23.4px;
    gap: 16px;
    opacity: 1;
}

.Cta-noir {
    display: flex;
    justify-content: center;
    align-items: center;
    border: #1C1A15;
    white-space: nowrap;
    width: 191.589px;
    height: 51px;
    padding-top: 16px;
    padding-right: 32px;
    padding-bottom: 16px;
    padding-left: 32px;
    gap: 9.59px;
    opacity: 1;
    border-radius: 999px;
    background: #1C1A15;
    font-family: 'Outfit';
    font-weight: 600;
    font-size: 14.7px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    color: var(--color-grey-96, #FAF6EE);
    transition: background-color 0.2s ease-in-out, gap 0.2s ease-in-out;
    cursor: pointer;
}

.Cta-noir img {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease-in-out;
}

.Cta-noir:hover img {
    transform: translate(5px);
}

.Cta-souligne {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: none;
    height: 51px;
    padding-top: 8px;
    padding-right: 3.2px;
    padding-bottom: 8px;
    padding-left: 3.2px;
    opacity: 1;
    border-bottom: 2px solid #DD8F1E;
    background-color: transparent;
    font-family: 'Outfit';
    font-weight: 600;
    font-size: 14.7px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    color: var(--color-orange-10, #1C1A15);
}

.Cta-noir:hover {
    background-color: #0F6322;
    box-shadow:
        0 0 15px 3px #0F632240,
        0 0 30px 8px #0F632220;
}

.Cta-souligne:hover {
    color: #0F6322;
    background-color: transparent;
    box-shadow: none;
}

.Section_cercle {
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    width: 50%;
    height: 185%;
    border-radius: 50%;
    border: 1px dotted #AD090E40;
    pointer-events: none;
}

.Section_grand-cercle {
    width: 65%;
    height: 240%;
    border-radius: 50%;
    border: 2px dotted #0F63222E;
    transform: translate(50%, -55%);
}

/* ============================================================
   SOLUTIONS MATÉRIELLES — RESPONSIVE (fin de fichier)
   Uniquement des @media (max-width:...) → desktop > 1280px intact.
   (Header burger déjà global dans main.css)
   ============================================================ */

/* ---------- Palier large (≤1280px) : fluide ---------- */
@media (max-width: 1280px) {
  html, body {
    overflow-x: hidden;
    overflow-x: clip;
  }

  img {
    max-width: 100%;
  }

  .banniere-triangle-verte,
  .banniere-triangle-jaune {
    width: 100%;
    display: block;
  }

  /* --- Hero --- */
  .hero {
    height: auto;
    min-height: 0;
    padding: 80px 24px 64px;
  }

  .ordi_content {
    width: 100%;
    max-width: 1180px;
    height: auto;
  }

  .soleil-orange {
    margin-right: 0;
  }

  .hero__content-h1 {
    width: 100%;
    max-width: 910px;
    height: auto;
    font-size: clamp(42px, 6vw, 77.7px);
    line-height: 1.06;
  }

  .accueil_ordi {
    width: 100%;
    max-width: 620px;
    height: auto;
  }

  .equipements {
    width: 100%;
    max-width: 1180px;
    height: auto;
    flex-wrap: wrap;
    padding-bottom: 0;
  }

  /* --- Ice Coolant --- */
  .ice {
    height: auto;
    padding: 90px clamp(24px, 6vw, 120px);
  }

  .ice_content {
    width: 100%;
    max-width: 1180px;
    gap: clamp(24px, 4vw, 64px);
  }

  .ice_texte,
  .ice_p,
  .liste_check,
  .check_yellow {
    width: 100%;
    max-width: 586px;
  }

  .ice_h2 {
    width: 100%;
    max-width: 450px;
    font-size: clamp(34px, 4.4vw, 53.3px);
    line-height: 1.08;
  }

  .ice_statistique {
    width: 100%;
    flex-wrap: wrap;
    height: auto;
    gap: 24px;
  }

  .ice_image {
    width: 100%;
    max-width: 530px;
    height: auto;
    min-height: 420px;
  }

  .image_ice {
    width: min(426px, 88%);
  }

  .image_ice img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* --- Catalogue --- */
  .materiel {
    height: auto;
    padding: 90px 24px;
  }

  .materiel_entete,
  .materiel_h2,
  .materiel_p {
    width: 100%;
    max-width: 780px;
    height: auto;
  }

  .materiel_h2 {
    font-size: clamp(32px, 4vw, 47.3px);
    line-height: 1.12;
  }

  .materiel_content {
    width: 100%;
    max-width: 1140px;
    height: auto;
  }

  .Materiel {
    width: 100%;
    max-width: 1140px;
    height: auto;
  }

  .Mat_image,
  .Mat_desc,
  .desc_h3,
  .desc_p {
    width: 100%;
  }

  .Mat_image {
    max-width: 542px;
    height: auto;
  }

  .Mat_image > img {
    width: 100%;
    height: auto;
    display: block;
  }

  .Mat_desc {
    max-width: 542px;
    height: auto;
  }

  .Mat_types {
    width: 100%;
    height: auto;
    flex-wrap: wrap;
  }

  /* --- Besoin + CTA --- */
  .besoin {
    height: auto;
    padding: 70px clamp(24px, 8vw, 120px);
  }

  .besoin_content,
  .besoin_h2,
  .besoin_p {
    width: 100%;
    max-width: 680px;
    height: auto;
  }

  .besoin_h2 {
    font-size: clamp(30px, 4vw, 41.4px);
    line-height: 1.12;
  }

  .Section_a_cercle {
    height: auto;
    padding: 90px clamp(24px, 8vw, 120px);
  }

  .Section_contain,
  .Section_h2,
  .Section_p,
  .bouton {
    width: 100%;
    max-width: 740px;
    height: auto;
  }

  .Section_h2 {
    font-size: clamp(34px, 4.5vw, 51.2px);
    line-height: 1.12;
  }
}

/* ---------- Tablette (≤1024px) : empilements ---------- */
@media (max-width: 1024px) {
  .hero__content-h1 {
    font-size: clamp(36px, 5.5vw, 58px);
  }

  /* Ice : texte puis image */
  .ice_content {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    place-items: center;
    text-align: center;
  }

  .ice_texte {
    align-items: center;
    text-align: center;
  }

  .ice_p {
    text-align: center;
  }

  .liste_check {
    align-items: flex-start;
    max-width: 460px;
    margin-inline: auto;
  }

  .ice_statistique {
    justify-content: center;
  }

  .ice_image {
    grid-row: auto;
    grid-column: auto;
    max-width: 480px;
    margin-inline: auto;
  }

  /* Catalogue : lignes empilées, contenu centré, loin des bords */
  .Materiel,
  .Materiel:nth-child(even) {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding-inline: 24px;
  }

  .Mat_desc {
    align-items: center;
    text-align: center;
  }

  .Mat_image {
    margin-inline: auto;
  }

  .Mat_types {
    justify-content: center;
  }

  .Materiel .Cta-verte {
    align-self: center;
  }
}

/* ---------- Mobile (≤768px) : 1 colonne ---------- */
@media (max-width: 768px) {
  .hero {
    padding: 80px 20px 52px;
  }

  .sous-titre {
    width: 100%;
    white-space: normal;
    text-align: center;
  }

  .hero__content-h1 {
    font-size: clamp(32px, 9vw, 44px);
  }

  .accueil_ordi {
    font-size: 16px;
    line-height: 1.6;
  }

  .equipements {
    gap: 8px;
  }

  .equip {
    font-size: 12px;
  }

  .petite_porte,
  .grande_porte {
    display: none;
  }

  /* Ice */
  .ice {
    padding: 60px 20px;
  }

  .ice_h2 {
    font-size: clamp(30px, 8vw, 40px);
    text-align: center;
  }

  .ice_h2 br {
    display: none;
  }

  .ice_p {
    font-size: 14.5px;
    text-align: center;
  }

  .petit_titre {
    margin-inline: auto;
  }

  .check_p {
    font-size: 13.5px;
    text-align: left;
  }

  .ice_statistique {
    gap: 16px;
  }

  .stat,
  .stat_chiffre,
  .stat_texte {
    width: auto;
    min-width: 0;
  }

  .unite {
    margin-bottom: 0;
  }

  .ice_cta {
    margin-inline: auto;
    width: auto;
    font-size: 14px;
  }

  .ice_image {
    max-width: 440px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .image_ice {
    position: static;
    width: min(360px, 100%);
    margin: 0 auto;
  }

  .espace-blanc {
    position: static;
    margin-top: 12px;
  }

  .cercle_bleu {
    position: static;
    margin-top: 12px;
    width: 72px;
    height: 72px;
  }

  .cercle_bleu img {
    width: 48px;
    height: 48px;
  }

  .porte-tiret,
  .demi_cercle {
    display: none;
  }

  /* Catalogue : titre → image → description (comme accueil) */
  .materiel {
    padding: 60px 20px;
    gap: 40px;
  }

  .materiel_h2 {
    font-size: clamp(30px, 8vw, 40px);
  }

  /* Catalogue mobile : icône + titre côte à côte, devis centré */
  .Materiel,
  .Materiel:nth-child(even) {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon title"
      "image image"
      "desc desc"
      "types types"
      "cta cta";
    gap: 10px 12px;
    align-items: center;
    justify-items: stretch;
    margin: 0 auto;
      box-shadow: 0px 6px 10px #00000047;
      border-radius: 12px;
      padding-block: 15px
  }

  .Mat_desc {
    display: contents;
  }

  .Materiel .desc_image {
    grid-area: icon;
    margin: 0;
  }

  .Materiel .desc_h3 {
    grid-area: title;
    align-self: center;
    text-align: left;
    height: auto;
    font-size: 24px;
  }

  .Materiel .Mat_image {
    grid-area: image;
    margin-block: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .Materiel .Mat_image > img {
    margin-inline: auto;
  }

  .Materiel .desc_p {
    grid-area: desc;
    height: auto;
  }

  .Materiel .Mat_types {
    grid-area: types;
  }

  .Materiel .Cta-verte {
    grid-area: cta;
    justify-self: center;
    align-self: center;
    margin-top: 6px;
    width: auto;
    height: auto;
    padding: 12px 24px;
    font-size: 13px;
  }

  /* Besoin + CTA */
  .besoin {
    padding: 60px 20px;
  }

  .besoin_h2 {
    font-size: clamp(30px, 8vw, 38px);
  }

  .bouton_rouge {
    width: auto;
    height: auto;
    padding: 12px 24px;
    font-size: 13px;
  }
.Section_cercle {
    display: none;
}
  .Section_a_cercle {
    padding: 64px 20px;
  }

  .Section_h2 {
    width: 100%;
    font-size: clamp(30px, 8vw, 40px);
  }

  .Section_a_cercle .bouton {
    flex-direction: column;
    gap: 6px;
    padding-top: 12px;
  }

  .Cta-noir {
    width: auto;
    height: auto;
    padding: 12px 24px;
    font-size: 13px;
  }

  .Cta-souligne {
    height: auto;
    font-size: 13px;
    border-bottom: none;
    position: relative;
    padding-bottom: 12px;
  }

  .Cta-souligne::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: #DD8F1E;
  }
}

/* ---------- Petits téléphones (≤480px) ---------- */
@media (max-width: 480px) {
  .hero__content-h1 {
    font-size: clamp(30px, 10vw, 36px);
  }

  .materiel_h2,
  .besoin_h2,
  .Section_h2,
  .ice_h2 {
    font-size: 28px;
  }

  .stat_chiffre {
    font-size: 28px;
  }
}

@media (max-width: 1280px) {
  .ice {
    height: auto;
    padding: 90px clamp(24px, 6vw, 120px);
  }

  .ice_content {
    width: 100%;
    max-width: 1180px;
    gap: clamp(24px, 4vw, 64px);
  }

  .ice_texte,
  .ice_p,
  .liste_check,
  .check_yellow {
    width: 100%;
    max-width: 586px;
  }

  .ice_h2 {
    width: 100%;
    max-width: 450px;
    font-size: clamp(34px, 4.4vw, 53.3px);
    line-height: 1.08;
  }

  .ice_statistique {
    width: 100%;
    flex-wrap: wrap;
    height: auto;
    gap: 24px;
  }

  .ice_image {
    width: 100%;
    max-width: 530px;
    height: auto;
    min-height: 420px;
  }

  .image_ice {
    width: min(426px, 88%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -44%);
    width: 100%;
    height: 100%;
  }

  .porte-tiret {
    width: 80%;
    height: 29rem;
    top: 6%;
}
  .image_ice img {
    width: 100%;
    height: auto;
    display: block;
  }
}

@media (max-width: 1024px) {
  .ice_content {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    place-items: center;
    text-align: center;
    gap: 28px;
  }

  .ice_texte {
    display: contents;
  }

  .petit_titre {
    order: 1;
    justify-self: center;
    align-self: center;
    margin-inline: auto;
    grid-column: auto;
    grid-row: auto;
  }

  .ice_h2 {
    order: 2;
    justify-self: center;
    align-self: center;
    width: 100%;
    max-width: 100%;
    text-align: center;
    grid-column: auto;
    grid-row: auto;
  }

  .ice_image {
    order: 3;
    grid-column: auto;
    grid-row: auto;
    position: relative;
    width: 100%;
    max-width: 480px;
    height: 460px;
    min-height: 0;
    margin-inline: auto;
    justify-self: center;
    align-self: center;
    display: block;
  }

  .ice_p {
    order: 4;
    width: 100%;
    max-width: 100%;
    text-align: center;
    grid-column: auto;
    grid-row: auto;
  }

  .liste_check {
    order: 5;
    width: 100%;
    max-width: 100%;
    align-items: flex-start;
    grid-column: auto;
    grid-row: auto;
  }

  .ice_statistique {
    order: 6;
    justify-content: center;
    grid-column: auto;
    grid-row: auto;
  }

  .ice_cta {
    order: 7;
    margin-inline: auto;
    grid-column: auto;
    grid-row: auto;
  }

  .porte-tiret {
    display: block;
    position: absolute;
    top: 6%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 88%;
    z-index: 0;
    border: 2px dashed #F0B95A4D;
    border-radius: 999px 999px 26px 26px;
    pointer-events: none;
  }

  .image_ice {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -44%);
    width: 87%;
    height: 100%;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .image_ice img {
    width: 108%;
    height: 109%;
    object-fit: contain;
    display: block;
  }

  .espace-blanc {
    position: absolute;
    top: 6%;
    right: 0;
    left: auto;
    z-index: 3;
  }

  .cercle_bleu {
    position: absolute;
    left: 0;
    bottom: 6%;
    right: auto;
    top: auto;
    z-index: 2;
  }

  .petite_porte,
  .grande_porte {
    display: none;
  }
}

@media (max-width: 768px) {
  .ice {
    padding: 60px 20px;
  }

  .ice_h2 {
    font-size: clamp(30px, 8vw, 40px);
  }

  .ice_h2 br {
    display: none;
  }

  .ice_p {
    font-size: 14.5px;
  }

  .check_p {
    font-size: 13.5px;
    text-align: left;
  }

  .ice_statistique {
    gap: 16px;
  }

  .stat,
  .stat_chiffre,
  .stat_texte {
    width: auto;
    min-width: 0;
  }

  .unite {
    margin-bottom: 0;
  }

  .ice_cta {
    width: auto;
    font-size: 14px;
  }

  .ice_image {
    max-width: 420px;
    height: 400px;
  }

  .cercle_bleu {
    width: 72px;
    height: 72px;
  }

  .cercle_bleu img {
    width: 48px;
    height: 48px;
  }
}

@media (max-width: 480px) {
  .ice_h2 {
    font-size: 28px;
  }

  .ice_image {
    height: 340px;
  }

  .cercle_bleu {
    width: 65px;
    height: 67px;
    left: 40px;
  }

  .cercle_bleu img {
    width: 80px;
    height: 80px;
  }
}