* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 :root {
     --primary-green-color: #2d8a52;
     --primary-yellow-color: #DD8F1E;
     --secondary-yellow-color: #F0B95A;
     --black-color: #1e1b18;
     --primary-white-color: #efede5;
     --primary-text-color: #222;
     --secondary-text-color: #9ca3af;
     --primary-text-size: 1rem;
     --bg-dark: #1C1A15;
     --bg-dark-2: #211c14;
     --gold-soft: #DD8F1E;
     --gold: #F0B95A;
     --green: #1f4a2c;
     --green-light: #0F6322;
     --cream: #FAF6EE;
     --muted: #FAF6EE99;
     --cream-card: #e9e2d0;
     --ink: #241f14;
     --green-deep: #16391f;
     --green-pill: #FAF6EE1F;
     --red: #b23b2e;
     --muted-dark: #6b6455;
     --line: #FAF6EE38;
 }


 .conteneur-dent-de-scie {
     width: 100%;
     height: 13px;
     position: relative;
 }

 .conteneur-dent-de-scie img {
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
     object-fit: cover;
     object-position: left center;
 }

 @media (max-width: 1024px) {
     .conteneur-dent-de-scie {
         height: 10px;
     }
 }

 body {
     background: #efede5;
 }

 #retour-accueil {
     border-bottom: 2.5px solid var(--gold);
 }

 #retour-accueil::after {
     background-color: transparent;
 }

 .overlay {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.4);
     z-index: 90;
     cursor: pointer;
 }

 .overlay.active {
     display: block;
 }

 .header {
     z-index: 200;
     width: 100%;
     height: 90px;
     background: #FAF6EEB3;
     backdrop-filter: blur(10px);
     display: flex;
     align-items: center;
     justify-content: space-evenly;
     position: sticky;
     top: 0;
 }

 .inner-header {
     width: min(1255px, calc(100% - 40px));
     margin: 0 auto;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 .logo {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 97px;
 }

 .logo img {
     width: 100%;
     height: 100%;
     transform: translateY(-1px);
 }

 .navbar {
     font-family: 'Outfit';
     display: flex;
     align-items: center;
     justify-content: space-between;
     transform: translateX(-12px);
     letter-spacing: 0.1px;
 }

 .navbar ul {
     display: flex;
     list-style: none;
     gap: 20px;
 }

 .navbar a {
     text-decoration: none;
     color: #1e1b18;
     display: flex;
     align-items: center;
     gap: 5px;
     transition: .3s;
     text-wrap: nowrap;
     font-size: 13.45px;
     font-weight: 600;
     font-family: 'Outfit';
 }

 .navbar a span {
     scale: 1.035;
 }

 .navbar a img {
     width: 12px;
     height: 12px;
 }

 .navbar li {
     position: relative;
 }

 .navbar li>a {
     padding: 5px 10px;
     border-radius: 30px;
 }

 .navbar a:hover,
 .header .actif {
     color: #2c7a52;
     background: #2c7a522d;
 }

 .navbar>ul>li:hover>a {
     color: #2c7a52;
     background: #0F63221A;
 }

 .header-right {
     display: flex;
     align-items: center;
     gap: 7px;
     transform: translate(20px);
 }

 .language img {
     width: 20px;
 }

 .navbar .contact-btn {
     text-decoration: none;
     background: #1e1b18;
     color: #ffffff;
     padding: 10px 20px;
     border-radius: 30px;
     font-size: 14px;
     font-weight: bold;
     transition: .3s;
 }

 .navbar .contact-btn:hover {
     background: #2c7a52;
     color: #ffffff;
 }

 .items-nav {
     position: absolute;
     background-color: #ffffff;
     border-radius: 12px;
     box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
     padding: 7px;
     top: 42px;
     display: none;
     z-index: 5;
     transition: .5s ease-in-out;
 }

 .items-nav a {
     padding: 5px 20px;
     border-radius: 10px;
     transition: .3s;
     margin-block: 3px;
 }

 .navbar li:hover .items-nav {
     display: block;
 }

 .navbar li:hover>a img {
     transform: rotate(180deg);
 }

 .items-nav::before,
 .wrapper::before {
     content: "";
     position: absolute;
     top: -30px;
     left: 0;
     width: 100%;
     height: 50px;
 }

 li:hover .wrapper {
     display: grid;
 }

 .wrapper {
     z-index: 2;
     border-radius: 20px;
     padding: 20px;
     display: none;
     grid-template-columns: 1fr 1.15fr;
     gap: 10px;
     position: absolute;
     background-color: #ffffff;
     box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
     top: 42px;
     left: 0;
     transition: .5s ease-in-out;
 }

 .navbar ul li:last-child .wrapper .left .item:first-of-type {
     border-top: none;
 }

 .navbar ul li:last-child .wrapper .left {
     border-right: none;
     padding-block: 0;
 }

 .navbar ul li:last-child .wrapper {
     width: 340px;
     display: none;
 }

 .navbar ul li:last-child:hover .wrapper {
     display: block;
     padding: 10px;
 }

 .wrapper .left {
     padding: 6px;
     border-right: 2px solid #1C1A151F;
 }

 .wrapper .left h2 {
     font-weight: 600;
     font-size: 15px;
     color: #5C574C;
     margin-bottom: 5px;
     font-family: "Fraunces";
 }

 .wrapper .left .item {
     display: flex;
     gap: 5px;
     align-items: flex-start;
     padding: 10px;
     margin-block: 5px;
     border-radius: 12px;
     cursor: pointer;
     min-width: 300px;
 }

 .wrapper .left h2 {
     border-bottom: 2px solid #1C1A151F;
     padding-bottom: 12px;
 }

 .wrapper .left .icon {
     width: 45px;
     height: 45px;
 }

 .wrapper .left .icon img {
     width: 100%;
     height: 100%;
     object-fit: contain;
 }

 .wrapper .left .item:hover {
     background: #1c1a150a;
 }

 .wrapper .left .item-title {
     font-size: 14px;
     font-weight: 600;
     color: #1c2b20;
     margin-bottom: 3px;
 }

 .wrapper .left .item-desc {
     font-size: 12.5px;
     color: #948d7c;
     line-height: 1.4;
 }

 .wrapper .right {
     background: #0c2a1c;
     border-radius: 18px;
     padding: 15px;
     position: relative;
     overflow: hidden;
     min-height: 200px;
     width: 330px;
     display: flex;
     flex-direction: column;
 }

 .wrapper .right .eyebrow {
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 0.08em;
     color: #e0a85a;
     text-transform: uppercase;
     margin-bottom: 14px;
 }

 .wrapper .right .headline {
     font-family: "Fraunces";
     font-weight: 600;
     font-size: 21px;
     line-height: 1.4;
     color: #f7f4ec;
 }

 .wrapper .right .discover {
     margin-top: auto;
     padding: 7px 20px;
     border-radius: 12px;
     display: inline-flex;
     align-items: center;
     gap: 6px;
     color: var(--primary-yellow-color);
     font-size: 13.5px;
     font-weight: 500;
     text-decoration: none;
     width: fit-content;
     position: relative;
     z-index: 2;
 }

 .cercle-jaune {
     width: 90px;
     position: absolute;
     right: 0;
     bottom: 0;
 }

 .language-btn img {
     width: 15px;
     height: 15px;
 }

 .langues {
     display: none;
     position: absolute;
     top: 120%;
     left: 0;
     background: #fff;
     border: 1px solid #e0e0e0;
     border-radius: 8px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     width: 180px;
     z-index: 100;
     overflow: hidden;
     padding: 10px;
 }

 .langues.open {
     display: block;
 }

 .lang-option {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 10px 14px;
     cursor: pointer;
     border-radius: 12px;
 }

 .lang-option:hover {
     background: #f5f5f5;
 }

 .lang-option img {
     width: 20px;
     height: 20px;
 }

 .check-icon {
     margin-left: auto;
     width: 16px;
     height: 16px;
 }

 .language-selector {
     position: relative;
 }

 .language-selector button {
     border: 2px solid #1C1A151F;
     border-radius: 30px;
     padding: 8px;
     background: none;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 4px;
     font-size: 12px;
     font-weight: bolder;
 }

 .language-selector button:hover {
     background: #2c7a5228;
     color: #2c7a52;
     border-color: #2c7a52;
 }

 .lang-actuel {
     color: #2c7a52;
 }

 .outfit {
     font-family: 'Outfit';
 }

 .fraunces {
     font-family: 'Fraunces';
 }

 .primary-text {
     color: #5C574C;
 }

 .wrapper .right .recap-list {
     list-style: none;
     margin: 0;
     padding: 0;
     display: flex;
     flex-direction: column;
     gap: 10px;
     text-transform: capitalize;
     text-align: left;
 }

 .wrapper .right .recap-list li {
     position: relative;
     padding-left: 16px;
     font-family: "Fraunces";
     font-weight: 500;
     font-size: 15px;
     line-height: 1.9;
     color: #f7f4ec;
     text-align: left;
 }

 .wrapper .right .recap-list li::before {
     content: "";
     position: absolute;
     left: 0;
     top: 10px;
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: #e0a85a;
 }

 .discover img {
     width: 20px;
 }

 .wrapper .right .headline {
     display: none;
 }

 .wrapper .right.hover-mode .recap-list {
     display: none;
 }

 .wrapper .right.hover-mode .headline {
     display: block;
 }

 .wrapper .right .recap-list,
 .wrapper .right .headline {
     transition: opacity 0.2s ease;
 }

 .footer {
     color: #FFFFFF;
     font-family: "outfit";
     background-color: #062E12;
     padding-top: 10px;
 }

 .footer__foot {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 20px;
 }

 .footer__foot a {
     text-decoration: none;
     cursor: pointer;
     border-radius: 30px;
     padding: 10px 20px;
     font-size: 14px;
     font-weight: 500;
     transition: background-color 0.2s ease-in-out;
 }

 .footer__foot .demande {
     background-color: var(--primary-yellow-color);
     font-weight: 600;
     color: #fff;
 }

 .footer__foot .demande:hover {
     background-color: #ffb753;
 }

 .footer__foot .ecrire {
     border: 2px solid #FAF6EE8C;
     color: #ffffff;
 }

 .footer__foot .ecrire:hover {
     color: var(--primary-yellow-color);
     border-color: var(--primary-yellow-color);
 }

 .container {
     width: 95%;
     max-width: 1400px;
     margin: auto;
 }

 .footer-grid {
     display: grid;
     grid-template-columns: 1fr 2fr 1fr;
     gap: 60px;
     padding: 30px 0;
 }

 .logo-box {
     width: 100px;
     height: 100px;
     background: #fff;
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
     margin-bottom: 13px;
 }

 .logo-box img {
     width: 90px;
     height: auto;
 }

 .logo-line {
     width: 100px;
     height: 4px;
     background: var(--primary-yellow-color);
     border-radius: 10px;
     margin: 5px 0 10px;
 }

 .footer-about p {
     color: #FAF6EE8C;
     font-size: 14px;
     line-height: 1.8;
     margin-bottom: 10px;
 }

 .social-links a {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 42px;
     height: 42px;
     border: 1px solid var(--primary-yellow-color);
     border-radius: 50%;
     color: var(--primary-yellow-color);
     transition: .3s;
     margin: 5px;
 }

 .social-links a:hover {
     background: var(--primary-yellow-color);
     color: #FAF6EE8C;
 }

 a {
     text-decoration: none;
 }

 .footer-services {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 15px;
 }

 .contact-info {
     margin-block: 0;
     transform: translate(-97px, -16%);
 }

 .service-column h3,
 .about-links h3,
 .contact-info h3 {
     font-family: "Fraunces";
     font-weight: 400;
     color: var(--secondary-yellow-color);
     font-style: italic;
     font-size: 20px;
     margin-bottom: 10px;
     border-left: 4px solid var(--primary-yellow-color);
     padding-left: 15px;
     font-weight: 300;
 }

 .service-column ul,
 .about-links ul,
 .contact-info ul {
     list-style: none;
 }

 .service-column li {
     margin-bottom: 15px;
 }

 .service-column a {
     color: #FAF6EE8C;
     text-decoration: none;
     font-size: 15px;
     display: flex;
     align-items: center;
     transition: .3s;
 }

 .service-column a::before,
 .produits a::before {
     content: "";
     width: 8px;
     height: 4px;
     background: #FAF6EE8C;
     margin-right: 12px;
     transition: .3s;
 }

 .service-column a:hover {
     color: var(--primary-yellow-color);
 }

 .service-column a:hover::before {
     background: var(--primary-yellow-color);
 }

 .software-networks {
     width: 100%;
     display: flex;
     flex-direction: row-reverse;
     justify-content: space-between;
     align-items: center;
     margin-top: -40px;
 }

 .produits h3 {
     font-style: italic;
     color: var(--secondary-yellow-color);
     font-size: 20px;
     text-align: center;
     font-weight: 300;
     font-family: "Fraunces";
 }

 .produits ul {
     display: flex;
     justify-content: space-between;
     gap: 20px;
 }

 .produits h3::after {
     content: "";
     display: block;
     width: 80px;
     height: 4px;
     background: var(--primary-yellow-color);
     margin: 12px auto;
     border-radius: 5px;
 }

 .software-networks ul {
     list-style: none;
 }

 .software-networks a {
     text-decoration: none;
     color: var(--primary-yellow-color);
     transition: .3s;
     font-size: 20px;
 }

 .software-networks a:hover {
     color: var(--primary-yellow-color);
 }

 .produits li:hover a::before {
     background: var(--primary-yellow-color);
 }

 .about-links li,
 .contact-info li {
     margin-bottom: 10px;
 }

 .about-links a,
 .contact-info a,
 .contact-info div {
     display: flex;
     align-items: center;
     justify-content: flex-start;
     gap: 12px;
     color: #FAF6EE8C;
     text-decoration: none;
     transition: .3s;
 }

 .about-links a:hover,
 .contact-info a:hover {
     color: var(--primary-yellow-color);
 }

 .about-links a:hover svg,
 .contact-info a:hover svg {
     color: #FAF6EE8C;
 }

 .about-links svg,
 .contact-info svg {
     color: var(--primary-yellow-color);
     flex-shrink: 0;
 }

 .produits ul {
     display: flex;
     justify-content: space-between;
 }

 .produits ul li a {
     color: #FAF6EE8C;
     text-decoration: none;
     font-size: 15px;
     display: flex;
     align-items: center;
     transition: .3s;
 }

 .footer-bottom {
     background-color: #04200C;
     color: #FAF6EE47;
 }

 .footer-bottom-content {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 20px 0;
 }

 .footer-links a {
     color: #FAF6EE47;
     text-decoration: none;
     font-size: 13px;
     transition: .3s;
 }

 .footer-links {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 20px;
 }

 .footer-links a:hover {
     color: var(--primary-yellow-color);
 }

 /* ============================================================
    FOOTER — PETIT ÉCRAN PC (993px → 1280px)
    ============================================================ */
 @media (min-width: 993px) and (max-width: 1280px) {

     .footer-grid {
         grid-template-columns: 1fr 2fr 1fr;
         gap: 30px;
         padding: 30px 0 20px;
     }

     .footer-about p {
         font-size: 13.5px;
         line-height: 1.7;
     }

     .footer-services {
         gap: 20px;
     }

     .service-column h3,
     .about-links h3,
     .contact-info h3,
     .produits h3 {
         font-size: 18px;
     }

     .service-column a,
     .produits ul li a {
         font-size: 14px;
     }

     .service-column li {
         margin-bottom: 12px;
     }

     .about-links a,
     .contact-info a {
         font-size: 14px;
     }

     /* On supprime les décalages qui provoquent des chevauchements */
     .footer .software-networks {
         margin-top: 0;
         align-items: flex-start;
         gap: 20px;
     }

     .footer .contact-info {
         transform: none;
     }

     .footer .produits ul {
         gap: 14px;
     }

     .footer .social-links {
         gap: 12px;
     }

     .footer .contacter-organisation {
         margin-inline: 20px;
         gap: 20px;
     }

     .footer .contacter-organisation-text p:first-child {
         font-size: 22px !important;
     }

     .footer .footer__foot a {
         font-size: 13px;
         padding: 10px 16px;
         white-space: nowrap;
     }
 }

 /* ============================================================
    FOOTER — PC : « Contact » aligné sous « À Propos De Nous »
    ============================================================ */
 @media (min-width: 993px) {

     .footer .software-networks {
         display: grid;
         grid-template-columns: 1fr 2fr 1fr;
         gap: 0 60px;
         align-items: start;
         margin-top: 0;
     }

     .footer .social-links {
         grid-column: 1;
         grid-row: 1;
         justify-self: start;
     }

     .footer .produits {
         grid-column: 2;
         grid-row: 1;
         justify-self: center;
     }

     .footer .contact-info {
         grid-column: 3;
         grid-row: 1;
         transform: none;
         margin-top: -50px;
     }
 }

 @media (min-width: 993px) and (max-width: 1280px) {
     .footer .software-networks {
         gap: 0 30px;
     }
    .solutions-logicielles .right {
         display: none;
     }

     .solutions-logicielles .left {
        border-right: none;
     }
 }

 @media(max-width:992px) {

     .footer-grid {
         grid-template-columns: 1fr;
     }

     .footer-services {
         grid-template-columns: 1fr;
     }

     .software-column {
         grid-column: auto;
     }

     .software-networks {
         flex-direction: column;
         gap: 30px;
         width: 100%;
         transform: translateY(0px);
     }

     .contact-info {
         transform: translateY(0px);
     }

     .contacter-organisation {
         flex-direction: column;
         gap: 15px;
     }

     .software-networks {
         margin-block: 0 20px;
     }
 }

 /* ============================================================
    FOOTER — TABLETTE (769px → 992px)
    ============================================================ */
 @media (min-width: 769px) and (max-width: 992px) {

     .footer .footer-grid {
         grid-template-columns: 1fr 1fr;
         gap: 28px 40px;
         padding: 30px 0 10px;
     }

     /* Logo + description sur une ligne */
     .footer .footer-about {
         grid-column: 1 / -1;
         display: flex;
         align-items: center;
         gap: 24px;
     }

     .footer .footer-about .logo-box {
         flex-shrink: 0;
         margin-bottom: 0;
     }

     .footer .footer-about p {
         margin-bottom: 0;
         max-width: 620px;
     }

     /* Services : 2 colonnes côte à côte */
     .footer .footer-services {
         grid-column: 1 / -1;
         grid-template-columns: 1fr 1fr;
         gap: 30px;
     }

     /* À propos : liens en ligne */
     .footer .footer-contact {
         grid-column: 1 / -1;
     }

     .footer .about-links ul {
         display: flex;
         flex-wrap: wrap;
         gap: 10px 32px;
     }

     .footer .about-links li {
         margin-bottom: 0;
     }

     /* Contact / Solutions logicielles / Réseaux sociaux sur une ligne */
     .footer .software-networks {
         flex-direction: row;
         flex-wrap: wrap;
         justify-content: space-between;
         align-items: flex-start;
         gap: 30px;
         margin-top: 10px;
         margin-bottom: 20px;
         transform: none;
     }

     .footer .contact-info {
         order: 1;
         transform: none;
     }

     .footer .produits {
         order: 2;
     }

     .footer .produits ul {
         flex-direction: column;
         align-items: flex-start;
         gap: 8px;
     }

     .footer .social-links {
         order: 3;
         justify-content: center;
         gap: 12px;
     }

     /* Bandeau d'appel à l'action */
     .footer .contacter-organisation {
         margin-inline: 0;
         flex-direction: column;
         align-items: center;
         text-align: center;
         gap: 16px;
         padding-block: 16px;
     }

     .footer .contacter-organisation-text p:first-child {
         font-size: 22px !important;
     }

     .footer .footer__foot {
         justify-content: center;
         flex-wrap: wrap;
     }

     .footer-bottom-content {
         gap: 10px;
     }
 }

 @media(max-width:768px) {

     .footer-bottom-content {
         flex-direction: column;
         text-align: center;
     }

     .software-column ul {
         flex-direction: column;
         gap: 15px;
     }

 }

 .contacter-organisation {
     font-weight: 500;
     margin-inline: 50px;
     display: flex;
     justify-content: space-between;
     padding-block: 10px;
     font-family: "Fraunces";
 }

 .trait-footer {
     width: 100%;
     height: 4px;
     display: block;
     margin-top: 10px;
 }

 .contacter-organisation-text {
     letter-spacing: 1px;
 }

 .sous-texte {
     color: #FAF6EE8C;
     font-size: 15px;
     font-family: "Outfit";
     margin-top: 7px;
 }

 .social-links {
     display: flex;
     justify-content: space-between;
     gap: 20px;
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .social-links li a {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 50px;
     height: 50px;
     border-radius: 50%;
     border: 2px solid var(--primary-yellow-color);
     color: var(--primary-yellow-color);
     transition: all 0.25s ease;
 }

 .social-links li a svg {
     width: 20px;
     height: 20px;
     stroke: currentColor;
 }

 .social-links li a:hover {
     background-color: var(--primary-yellow-color);
     color: #FAF6EE;
     transform: translateY(-3px);
     box-shadow: 0 4px 12px rgba(250, 204, 21, 0.4);
 }

 .social-links.large li a {
     width: 72px;
     height: 72px;
 }

 .social-links.large li a svg {
     width: 32px;
     height: 32px;
 }

 .contacter-organisation .sous-texte {
     color: #FAF6EE47;
 }

 .footer-icon {
     width: 20px;
     height: 20px;
     flex-shrink: 0;
     color: #facc15;
     transition: color 0.2s ease;
 }

 .btn {
     display: inline-flex;
     align-items: center;
     gap: 9.58px;
     font-size: 1rem;
     font-weight: 600;
     font-family: 'Outfit';
     padding: 7px 16px;
     border-radius: 995px;
     border: none;
     cursor: pointer;
     letter-spacing: 0.1px;
     transition: background-color 0.2s ease-in-out, gap 0.2s ease-in-out, transform 0.2s ease;
     text-decoration: none;
 }

 .btn:hover img {
     transition: 0.2s ease;
     transform: translate(5px);
     width: 20px;
     height: 20px;
 }

 .btn-noir {
     background-color: #1C1A15;
     color: #fff;
 }

 .btn-noir:hover {
     background-color: var(--primary-green-color);
     box-shadow: #0f6323bb 0px 2px 15px;
 }

 .btn-jaune {
     color: var(--black-color);
     background-color: var(--primary-yellow-color);
 }

 .btn-jaune:hover {
     background-color: var(--secondary-yellow-color);
 }

 .hidden {
     display: none !important;
 }

 .alerte-formulaire {
     padding: 14px 18px;
     border-radius: 8px;
     margin-bottom: 20px;
     font-size: 0.95rem;
 }

 .alerte-succes {
     background-color: #e6f4ea;
     color: #1e7a34;
     border: 1px solid #a8d9b5;
 }

 .alerte-erreur {
     background-color: #fdecea;
     color: #b3261e;
     border: 1px solid #f5c2be;
 }

 @keyframes infinite-rotate {
     from {
         transform: rotate(20deg);
     }

     to {
         transform: rotate(380deg);
     }
 }

 .header {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 100;
 }

 .burger-btn {
     display: none;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     gap: 5px;
     width: 44px;
     height: 44px;
     background: transparent;
     border: 1.5px solid rgba(28, 26, 21, 0.2);
     border-radius: 12px;
     cursor: pointer;
     padding: 0;
     flex-shrink: 0;
 }

 .burger-btn span {
     display: block;
     width: 20px;
     height: 2px;
     background: #1c1a15;
     border-radius: 2px;
     transition:
         transform 0.3s ease,
         opacity 0.3s ease;
 }

 .burger-btn[aria-expanded="true"] span:nth-child(1) {
     transform: translateY(7px) rotate(45deg);
 }

 .burger-btn[aria-expanded="true"] span:nth-child(2) {
     opacity: 0;
 }

 .burger-btn[aria-expanded="true"] span:nth-child(3) {
     transform: translateY(-7px) rotate(-45deg);
 }

 @media (max-width: 1024px) {
     .header {
         height: 72px;
     }

     .inner-header {
         width: calc(100% - 24px);
     }

     .logo {
         width: 84px;
     }

     .navbar ul {
         gap: 6px;
     }

     .navbar a {
         font-size: 14px;
     }

     .navbar li>a {
         padding: 6px 8px;
     }

     .navbar .contact-btn {
         padding: 8px 14px;
         font-size: 12px;
     }

     .header-right {
         transform: none;
         gap: 6px;
     }

     .language-selector button {
         padding: 6px;
     }
 }

 @media (max-width: 768px) {
     .burger-btn {
         display: inline-flex !important;
     }

     .inner-header {
         width: calc(100% - 32px);
     }

     .navbar {
         position: fixed;
         top: 72px;
         right: 0;
         left: 0;
         width: 100%;
         max-height: calc(100vh - 72px);
         overflow-y: auto;
         flex-direction: column;
         align-items: stretch;
         justify-content: flex-start;
         gap: 8px;
         background: #faf6ee;
         border-bottom: 1px solid rgba(28, 26, 21, 0.12);
         box-shadow: 0 20px 40px rgba(0, 0, 0, 0.14);
         padding: 16px;
         transform: translateX(105%);
         transition: transform 0.32s ease;
         z-index: 300;
     }

     .navbar.nav-open {
         transform: translateX(0);
     }

     .navbar>ul {
         flex-direction: column;
         align-items: stretch;
         gap: 4px;
         width: 100%;
     }

     .navbar li>a {
         width: 100%;
         justify-content: space-between;
         padding: 12px 14px;
         font-size: 13.45px;
     }

     .navbar .contact-btn {
         padding: 10px 20px;
         font-size: 14px;
     }

     .navbar .items-nav,
     .navbar .wrapper,
     .navbar ul li:last-child .wrapper {
         position: static;
         display: none;
         width: 100%;
         box-shadow: none;
         background: #fff;
         border: 1px solid rgba(28, 26, 21, 0.1);
         border-radius: 12px;
         margin-top: 6px;
         padding: 8px;
     }

     .navbar li.open>.items-nav,
     .navbar li.open>.wrapper {
         display: block;
     }

     .navbar li:hover>.items-nav,
     .navbar li:hover>.wrapper {
         display: none;
     }

     .navbar li.open:hover>.items-nav,
     .navbar li.open:hover>.wrapper {
         display: block;
     }

     .navbar li.open>a img {
         transform: rotate(180deg);
     }

     .wrapper {
         grid-template-columns: 1fr;
     }

     .navbar .wrapper .right {
         display: none;
     }

     .navbar .wrapper .left {
         border-right: none;
         padding: 0;
     }

     .navbar .wrapper .left h2 {
         display: none;
     }

     .wrapper .left .item {
         min-width: 0;
     }

     /* Burger : tuiles d'icônes uniformes (même si le fichier icône est une pastille) */
     .navbar .wrapper .left .icon {
         flex-shrink: 0;
         display: flex;
         align-items: center;
         justify-content: center;
         background: #0f632214;
         border-radius: 12px;
     }

     .navbar .wrapper .left .icon img {
         width: 24px;
         height: 24px;
         object-fit: contain;
     }

     /* Burger : les textes des sous-onglets retournent à la ligne (pas de nowrap) */
     .navbar .wrapper .left .item,
     .navbar .wrapper .left .item>div {
         min-width: 0;
         max-width: 100%;
     }

     .navbar .wrapper .left .item .item-title,
     .navbar .wrapper .left .item .item-desc {
         white-space: normal;
         text-wrap: wrap;
         overflow-wrap: break-word;
     }

     .header-right {
         width: 100%;
         justify-content: space-between;
         margin-top: 8px;
         padding-top: 12px;
         border-top: 1px solid rgba(28, 26, 21, 0.1);
         flex-wrap: wrap;
     }

     .navbar .language-selector {
         position: static;
         flex: 1 1 auto;
         min-width: 0;
     }

     .navbar .langues {
         position: static;
         width: 100%;
         margin-top: 8px;
     }

     .footer-grid {
         gap: 32px;
     }

     .contacter-organisation {
         margin-inline: 0;
         flex-direction: column;
         gap: 16px;
         text-align: center;
     }

     .footer__foot {
         flex-direction: column;
         align-items: center;
         width: 100%;
     }

     .footer__foot a {
         width: auto;
         max-width: 100%;
         text-align: center;
         justify-content: center;
         padding: 10px 22px;
         font-size: 13px;
     }

     .software-networks {
         align-items: stretch;
         text-align: center;
     }

     .produits ul {
         flex-direction: column;
         gap: 10px;
         align-items: center;
     }

     .footer>.container {
         display: grid;
         grid-template-columns: 1fr 1fr;
         column-gap: 20px;
     }

     .footer .footer-grid,
     .footer .footer-contact,
     .footer .software-networks {
         display: contents;
     }

     .footer .footer-about {
         grid-column: 1 / -1;
         order: 1;
         display: flex;
         flex-direction: column;
         align-items: center;
         text-align: center;
         margin-top: 7px;
     }

     .footer .social-links {
         grid-column: 1 / -1;
         order: 2;
         display: flex;
         flex-direction: row;
         justify-content: center;
         align-items: center;
         width: 100%;
         margin: 6px 0 10px;
     }

     .footer .footer-services {
         grid-column: 1 / -1;
         order: 3;
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: -5px;
     }

     .footer .footer-services .service-column {
         min-width: 0;
     }

     .footer .footer-services .service-column h3 {
         font-size: 16px;
         min-height: 2.6em;
         line-height: 1.3;
         padding-left: 10px;
     }

     .footer .footer-services .service-column h3,
     .footer .about-links h3,
     .footer .contact-info h3 {
         border-left: none;
         position: relative;
         padding-left: 12px;
     }

     .footer .footer-services .service-column h3::before,
     .footer .about-links h3::before,
     .footer .contact-info h3::before {
         content: "";
         position: absolute;
         left: 0;
         top: 2px;
         width: 4px;
         height: 18px;
         background: var(--primary-yellow-color);
         border-radius: 2px;
     }

     .footer .about-links h3,
     .footer .contact-info h3 {
         font-size: 16px;
         min-height: 2.6em;
         line-height: 1.3;
     }

     .footer .footer-services .service-column h3,
     .footer .about-links h3,
     .footer .contact-info h3 {
         margin-bottom: 1px;
     }

     .footer .about-links a,
     .footer .contact-info a,
     .footer .contact-info div {
         font-size: 12.5px;
         line-height: 1.5;
     }

     .footer .about-links li,
     .footer .contact-info li {
         margin-bottom: 8px;
     }

     .footer .contact-info a span {
         overflow-wrap: break-word;
         min-width: 0;
     }

     .footer .footer-services .service-column a {
         font-size: 12.5px;
         line-height: 1.5;
     }

     .footer .produits {
         grid-column: 1 / -1;
         order: 4;
         width: 100%;
         margin-block: 32px;
     }

     .footer .produits h3 {
         font-size: 16px;
     }

     .footer .produits ul li a {
         font-size: 12.5px;
     }

     .footer .produits ul {
         flex-direction: row;
         justify-content: center;
         flex-wrap: wrap;
         gap: 8px 18px;
     }

     .footer .footer-services,
  .footer .produits {
    display: none;
  }

  .footer .about-links {
         grid-column: 1;
         order: 5;
         width: 100%;
         min-width: 0;
     }

     .footer .contact-info {
         grid-column: 2;
         order: 6;
         width: 100%;
         min-width: 0;
         transform: none;
         margin-block: 0;
         text-align: left;
     }

     .footer .trait-footer {
         grid-column: 1 / -1;
         order: 7;
     }

     .footer .contacter-organisation {
         grid-column: 1 / -1;
         order: 8;
     }
 }

 /* ============================================================
    FOOTER — AJUSTEMENTS MOBILE (≤ 768px)
    ============================================================ */
 @media (max-width: 768px) {

     .footer>.container {
         padding-inline: 18px;
         column-gap: 24px;
     }

     .footer .footer-about p {
         font-size: 13.5px;
         line-height: 1.7;
         margin-bottom: 14px;
     }

     .footer .social-links {
         gap: 16px;
         margin: 4px 0 26px;
     }

     .footer .social-links li a {
         width: 44px;
         height: 44px;
     }

     .footer .about-links h3,
     .footer .contact-info h3 {
         min-height: 0;
         margin-bottom: 16px;
     }

     .footer .about-links li,
     .footer .contact-info li {
         margin-bottom: 14px;
     }

     .footer .trait-footer {
         margin-top: 16px;
     }

     /* Bandeau d'appel à l'action : pleine largeur, centré */
     .footer .contacter-organisation {
         margin-inline: 0;
         padding-block: 22px 14px;
         gap: 16px;
         align-items: center;
     }

     .footer .contacter-organisation-text p:first-child {
         font-size: 22px !important;
         line-height: 1.3;
     }

     .footer .contacter-organisation .sous-texte {
         font-size: 14px;
         margin-top: 8px;
     }

     .footer .footer__foot {
         gap: 12px !important;
         width: 100%;
     }

     .footer .footer__foot a {
         width: 100%;
         max-width: 280px;
         padding: 11px 22px;
         font-size: 14px;
     }

     .footer-bottom-content {
         gap: 10px;
         padding: 18px 0;
     }
 }

 @media (max-width: 480px) {
     .header {
         height: 64px;
     }

     .navbar {
         top: 64px;
         max-height: calc(100vh - 64px);
     }

     .logo {
         width: 80px;
     }
 }