/* ===== Polices (Switzer) ===== */
@font-face {
    font-family: "Switzer Light";
    src: url("./Polices/WEB/Light/Switzer-Light.woff2") format("woff2"),
         url("./Polices/WEB/Light/Switzer-Light.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Switzer Regular";
    src: url("./Polices/WEB/Regular/Switzer-Regular.woff2") format("woff2"),
         url("./Polices/WEB/Regular/Switzer-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Switzer Bold";
    src: url("./Polices/WEB/Bold/Switzer-Bold.woff2") format("woff2"),
         url("./Polices/WEB/Bold/Switzer-Bold.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Switzer Black";
    src: url("./Polices/WEB/Black/Switzer-Black.woff2") format("woff2"),
         url("./Polices/WEB/Black/Switzer-Black.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ===== Reset léger ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* border: solid 1px; */
    font-size: 13px;
}

body {
    font-family: "Switzer Light", "Segoe UI", Arial, Helvetica, sans-serif;
    color: #2b2b2b;
    background: #ffffff;
    position: relative;
    /* Sticky footer : le pied de page touche toujours le bas du parent,
       même quand le contenu est court. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* padding : 0% 0 0 0; */
}

a {
    text-decoration: none;
    color: inherit;
}

li {
    list-style: none;
}

/* ===== En-tête général ===== */
.entete_general {
    padding: 1% 0 0.5% 0;
    position: fixed;
    z-index: 110;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background-color: white;
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
}

/* Translucide dès qu'on défile ; redevient opaque de retour en haut */
.entete_general.entete-defilee {
    background-color: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* Bordure = conteneur centré, logo+nav à gauche, clients+recherche à droite */
.entete_bordure {
    /* border-bottom: 1px solid #e6e6e6; */
    max-width: 70%;               /* élargi pour accueillir 8 menus */
    width: 97%;
    margin: 0 auto;
    padding: 0px 0px 10px 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    /* background-color: chartreuse; */
}

/* ===== Partie gauche : logo + menu ===== */
.entete_gauche {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 65px;
    /* background-color: blue; */
}

.entete_bordure img {
    height: 33px;
    width: auto;
    display: block;
}

.entete_bordure ul {
    display: flex;
    align-items: center;
    gap: 0px;
    border: solid transparent 1px;   /* pour que le survol ne décale pas la mise en page */
}

.entete_bordure ul a {
    padding: 2px;
    font-size: 12.5px;
    color: #3a3a3a;
    white-space: nowrap;
    cursor: pointer;
    /* Bordure transparente réservée dès le repos : le survol ne change que
       la couleur, donc aucun décalage de la mise en page. */
    border: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.entete_bordure ul a:hover {
    border-color: #8dc63f;
}

/* Survol d'un lien de menu : fond vert très clair + texte noir */
.entete_bordure ul a:hover li {
    background-color: #f8fff2;
    color: #000000;
}

/* Lien de navigation de la page active (routeur SPA) : pastille verte */
.entete_bordure ul a.nav-actif li {
    background-color: #8dc63f;
    color: #ffffff;
}

/* ===== Partie droite : clients + recherche ===== */
.entete_droit {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    /* background-color: #1c9b8e; */
}

.entete_droit span a {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    color: #3a3a3a;
    white-space: nowrap;
    border: 1px solid #d9dadb;
    border-radius: 7px;
    padding: 6px 12px 6px 31px;
    background-image: url("./Images_accueil/Icones/user.svg");
    background-repeat: no-repeat;
    background-position: 11px center;
    background-size: 14px 14px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.entete_droit span a:hover {
    color: #1c9b8e;
    border-color: #1c9b8e;
}

/* ===== Sélecteur de langue ===== */
.langue_select {
    /* Largeur fixe : sinon le <select> se redimensionne selon la langue
       choisie (« Français » large, « 中文 » étroit...) et décale l'en-tête. */
    width: 88px;
    border: 1px solid #d9dadb;
    border-radius: 7px;
    padding: 5px 8px;
    font-size: 12.5px;
    color: #3a3a3a;
    background-color: #ffffff;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.langue_select:hover {
    border-color: #1c9b8e;
    color: #1c9b8e;
}
.langue_select:focus {
    outline: none;
    border-color: #1c9b8e;
}

/* ===== Bouton "clients" désactivé (gestion utilisateur à venir) ===== */
.clients_wrap {
    position: relative;
    display: inline-flex;
}

.entete_droit span a.clients_btn.desactive {
    color: #b4b7ba;
    border-color: #e7e8ea;
    cursor: not-allowed;
    filter: grayscale(1) opacity(0.75);   /* grise aussi l'icône user */
}
/* Neutralise le survol teal quand désactivé */
.entete_droit span a.clients_btn.desactive:hover {
    color: #b4b7ba;
    border-color: #e7e8ea;
}

/* Bulle d'information "patience" affichée au clic */
.clients_bulle {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    width: 240px;
    padding: 12px 14px;
    background: #2b2b2b;
    color: #ffffff;
    font-size: 12.5px;
    line-height: 1.5;
    text-align: left;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 400;
}
/* Petite flèche pointant vers le bouton */
.clients_bulle::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-bottom-color: #2b2b2b;
}
.clients_bulle.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* ===== Champ de recherche ===== */
.entete_bordure input[type="search"] {
    border: 1px solid #d9dadb;
    border-radius: 7px;
    /* Place à droite pour le bouton-icône (l'icône n'est plus en fond) */
    padding: 6px 36px 6px 11px;
    width: 150px;
    min-width: 0;
    font-size: 13px;
    color: #2b2b2b;
    background-color: #ffffff;
}

/* Bouton d'action de recherche (icône à droite, valide la recherche) */
.recherche_btn {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background-color: transparent;
    background-image: url("./Images_accueil/Icones/search.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px 15px;
    cursor: pointer;
    z-index: 320;                 /* au-dessus du voile quand le champ a le focus */
    transition: background-color 0.2s ease;
}
.recherche_btn:hover {
    background-color: #eef0f1;
}
.recherche_btn:active {
    background-color: #e2e5e6;
}

.entete_bordure input[type="search"]::placeholder {
    color: #9aa0a6;
}

.entete_bordure input[type="search"]:focus {
    outline: none;
    border-color: #1c9b8e;
}

/* ===== Voile sombre au focus de la recherche ===== */
/* Masque plein écran ; la zone de recherche reste en surbrillance au-dessus. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    z-index: 200;
}
body:has(.recherche_box:focus-within)::before {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Recherche active : le header passe AU-DESSUS du voile, mais devient
   transparent (le voile sombre apparaît à travers). La zone de recherche
   (opaque) reste ainsi en surbrillance ; le reste du header est masqué. */
body:has(.recherche_box:focus-within) .entete_general {
    z-index: 210;                    /* > voile (200) */
    background-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
body:has(.recherche_box:focus-within) .entete_gauche,
body:has(.recherche_box:focus-within) .clients_wrap,
body:has(.recherche_box:focus-within) .langue_select,
body:has(.recherche_box:focus-within) .hr_entete,
body:has(.recherche_box:focus-within) .messagerie {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* ===== Ajustements RTL (arabe) ===== */
[dir="rtl"] .recherche_btn {
    right: auto;
    left: 5px;
}
[dir="rtl"] .entete_bordure input[type="search"] {
    padding: 10px 14px 10px 46px;
}

/* ===== Panneau de résultats de recherche ===== */
.recherche_box {
    position: relative;
    display: inline-block;
}
/* Passe au-dessus du voile sombre quand le champ a le focus */
.recherche_box:focus-within {
    z-index: 300;
}
.recherche_resultats {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background-color: #ffffff;
    border: 1px solid #e3e4e6;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    max-height: 360px;
    overflow-y: auto;
    display: none;
    z-index: 310;
}
.recherche_resultats.is-open {
    display: block;
}
.recherche_resultat {
    display: block;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f1;
    text-decoration: none;
    cursor: pointer;
}
.recherche_resultat:last-child {
    border-bottom: none;
}
.recherche_resultat:hover {
    background-color: #f4faf9;
}
.recherche_resultat h5 {
    margin: 0 0 4px;
    font-size: 15px;
    color: #1c9b8e;
}
.recherche_resultat p {
    margin: 0;
    font-size: 13px;
    color: #6b7178;
    line-height: 1.4;
}
.recherche_vide {
    padding: 16px;
    font-size: 14px;
    color: #9aa0a6;
    text-align: center;
}

/* ===== Honeypot anti-spam (jamais visible) ===== */
.hp_champ {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}









/* hr entete */

.hr_entete {
    border: solid 1px #f5f5f5;
    width: 70% ;
}

/* Megamenu */
.megamenu{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    position: fixed;
    z-index: 150;
    top:6.5%;
    width: 100%;
    height: 350px;
    background-color: #ffffff;
    box-shadow: 0 14px 22px -6px rgba(0, 0, 0, 0.20);   /* ombre portée légère sous le panneau */
    border-top: 1px solid #8dc63f;   /* liseré vert-fluo (vert de marque) */
    /* Masqué par défaut : révélé au survol du menu "Qui nous sommes" */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* Enroulé par le bas : le megamenu se déroule du haut vers le bas
       au survol (révélation fluide, sans distorsion du contenu). */
    clip-path: inset(0 0 100% 0);
    transform-origin: top;
    transition: clip-path 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.3s ease,
                visibility 0.4s ease;
}

/* Affichage piloté par JS (classe .is-open) : permet une latence de
   fermeture pour laisser le temps d'atteindre le bouton du megamenu */
.megamenu.is-open{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    /* Inset négatif au bottom : la zone de découpe déborde de 34px sous la
       boîte pour laisser apparaître l'ombre portée (sinon clip-path la rogne). */
    clip-path: inset(0 0 -34px 0);
}

/* Pastille de navigation : padding commun à tous les liens pour que
   la pastille active ne décale pas la mise en page (sans border-radius) */
.entete_bordure ul li{
    padding: 5px 8px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.megamenu_textes{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* background-color: #82dd82; */
    width: 350px;
}
.megamenu_textes p{
    /* Hauteur réservée = la description la plus longue (toutes langues
       confondues, ~5 lignes à 350px). Une description courte occupe le même
       espace qu'une longue : plus aucun saut vertical quand le teaser change
       (survol de sous-menu, changement de menu).
       NB : pas de flex ici — le <p> peut contenir des <strong> inline
       (ex. « Nos produits ») ; un contexte flex les empilerait chacun sur
       sa propre ligne. On reste donc en flux inline normal. */
    height: 92px;
    margin-bottom: 15px;
}
.bouton_megamenu{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f6f6f6;
    padding: 3%;
    border-radius: 6px;
}
/* Rangée : consultation à gauche, téléchargement à droite.
   Les deux boutons occupent la même largeur (flex: 1) et la même hauteur.
   Texte sur une seule ligne : pas de compression du libellé le plus long. */
.megamenu_actions{
    display: flex;
    align-items: stretch;
    gap: 10px;
    width: 100%;
}
.megamenu_actions > .bouton_megamenu{
    flex: 1 1 0;
    padding: 10px 12px;
}
.megamenu_actions > .bouton_megamenu a{
    font-size: 13px;
    white-space: nowrap;
}
/* Bouton de téléchargement : fond blanc, contour rouge, icône PDF devant */
.bouton_telecharger{
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: #ffffff;
    color: #2b2b2b;
    border: 1px solid #d3241f;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13px;
    white-space: nowrap;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.bouton_telecharger::before{
    content: "";
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background-image: url("./Images_accueil/Icones/Telecharger-pdf.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.bouton_telecharger:hover{
    background-color: #fff5f4;
    border-color: #b71c17;
}
.megamenu_images{
    display: flex;
    align-items: center;
    /* background-color: #f5ce1f; */
}
.megamenu_images img{
    height: 200px;
}
/* Zones vides (menus internes sans image) : retirées du flux pour
   éviter un grand écart là où l'image serait normalement. */
.megamenu_textes:empty,
.megamenu_images:empty,
.megamenu_sous_menus:empty{
    display: none;
}

/* Sous-menus : colonne de liens à droite de l'image du megamenu.
   Contenu temporaire de démo pour l'instant. */
.megamenu_sous_menus{
    display: flex;
    gap: 30px;                       /* groupes en colonnes côte à côte */
    align-items: flex-start;
    align-self: center;
    max-height: 300px;
    padding-left: 30px;
    border-left: 1px solid #ececec;
}
/* Un groupe de sous-menu = titre + liste (une colonne) */
.sous_menus_groupe{
    display: flex;
    flex-direction: column;
    min-width: 150px;
}
.sous_menus_titre{
    margin: 0 0 12px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a8f7a;                  /* titres de groupe en teal de marque */
    text-transform: none;
    letter-spacing: 0.02em;
}
.sous_menus_liste{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.sous_menus_liste a{
    display: block;
    text-decoration: none;
    color: #444;
    font-size: 0.85rem;
    line-height: 1.3;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;                 /* pas de href : navigation gérée en JS */
    white-space: nowrap;             /* libellés sur une seule ligne, jamais coupés */
    transition: color 0.2s ease, background-color 0.2s ease;
}
.sous_menus_liste a:hover{
    color: #1c9b8e;
    background-color: #f2f7f6;
}

.main_view{
    /* Dégagement fixe sous l'en-tête fixe (~74px). Valeur alignée sur le
       'top' du panneau .ancres (90px) pour éviter tout saut au défilement. */
    padding: 90px 0 0 0;
    /* Grandit pour occuper l'espace disponible et pousser le footer en bas */
    flex: 1 0 auto;
}


/* Slider -----------------------------------------------------------------  */
.slider_main{
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 410px;
    /* background-color: #1c9b8e; */
}

.img_slide{
    position: absolute;
    right: 25%;
    bottom: 0;
    height: 400px;
    z-index: 100;
    opacity: 0;
    animation: fondu_slides 30s infinite;
}

/* Chaque image suit le même rythme que son texte */
.slider_main img.img_slide:nth-of-type(1) { animation-delay: 0s; }
.slider_main img.img_slide:nth-of-type(2) { animation-delay: 10s; }
.slider_main img.img_slide:nth-of-type(3) { animation-delay: 20s; }
.container_texts{
    flex: 1;
}

.textes_slide{
    position: relative;
    overflow: hidden;
    height: 330px;
    display: flex;
    align-items: center;
    padding: 1% 1% 1.7% 20%;
    width: 100%;
    background-color: #f1f2f2;
}

/* Le carrousel reste au-dessus des bulles */
.textes_slide .slides {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
}

/* Carrousel : chaque contenu superposé, en fondu */
.textes_slide .slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    opacity: 0;
    animation: fondu_slides 30s infinite;
}

/* Décalage de chaque slide (3 x 6s) */
.textes_slide .slide:nth-child(1) { animation-delay: 0s; }
.textes_slide .slide:nth-child(2) { animation-delay: 10s; }
.textes_slide .slide:nth-child(3) { animation-delay: 20s; }

/* Le titre ne remplit plus toute la hauteur dans le carrousel */
.textes_slide .slide h1 {
    height: auto;
}

@keyframes fondu_slides {
    0%   { opacity: 0; }
    4%   { opacity: 1; }
    33%  { opacity: 1; }
    37%  { opacity: 0; }
    100% { opacity: 0; }
}

/* Bulles animées décoratives */
.bulles {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.bulles span {
    position: absolute;
    bottom: -60px;
    display: block;
    border-radius: 50%;
    background-color: rgba(28, 155, 142, 0.08);
    animation: monte linear infinite;
}

.bulles span:nth-child(1) { left: 12%; width: 36px; height: 36px; animation-duration: 11s; animation-delay: 0s; }
.bulles span:nth-child(2) { left: 28%; width: 18px; height: 18px; animation-duration: 8s;  animation-delay: 2s; background-color: rgba(141, 198, 63, 0.08); }
.bulles span:nth-child(3) { left: 42%; width: 50px; height: 50px; animation-duration: 14s; animation-delay: 1s; }
.bulles span:nth-child(4) { left: 58%; width: 24px; height: 24px; animation-duration: 9s;  animation-delay: 4s; background-color: rgba(141, 198, 63, 0.08); }
.bulles span:nth-child(5) { left: 72%; width: 42px; height: 42px; animation-duration: 12s; animation-delay: 3s; }
.bulles span:nth-child(6) { left: 84%; width: 16px; height: 16px; animation-duration: 7s;  animation-delay: 1.5s; }
.bulles span:nth-child(7) { left: 92%; width: 30px; height: 30px; animation-duration: 13s; animation-delay: 5s; background-color: rgba(141, 198, 63, 0.08); }

@keyframes monte {
    0%   { transform: translateY(0) scale(0.6); opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translateY(-420px) scale(1.1); opacity: 0; }
}
hgroup h1{
    height: 100%;
    width: 100%;
    font-size: 1.9em;
    font-family: "Switzer Black";
    color: #047173;
    /* background-color: yellow; */
    margin-bottom: 1%;
}
hgroup dt{
    width: 35%;
    /* background-color: blueviolet; */
    margin-bottom: 2%;
}
.bouton_slide{
    padding: 0.8%;
    color: white;
    background-color: #8dc63f;
    border-radius: 5px;
}
















/* Domaines d'activité ----------------------------------------------*/
.domaines_activite {
    background-image : url("./Images_accueil/motif_background.svg");
    background-repeat: repeat;
    background-size: 10px 10px;
    display: flex;
    /* width:100%; */
    justify-content: center;
    gap: 140px;
    padding: 2%;
    /* background-color: #30c2c2; */
}


/* Div Fintech, training, integration IT */
.domaines_activite :nth-child(1){
    justify-self: center;
    margin-bottom: 2%;
}

/* Divisions icônes domaines activités */
.image_activite{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    background-color: #f1f2f2;
    padding: 40px;
    border-radius: 50px;
    height: 70px;
    width: 70px;
    border: 1px solid transparent;
    transition: transform 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}
.image_activite:hover{
    transform: scale(1.05);
    border-color: #92c938;
    background-color: white;
}

/* Image d'activité */
.domaines_activite .image_activite img {
    height: 40px;
    width: auto;
}

/* Substitution d'icône au survol : verte au hover */
.image_activite .icone_hover {
    display: none;
}
.image_activite:hover .icone_normal {
    display: none;
}
.image_activite:hover .icone_hover {
    display: block;
}

/* Titre des domaines d'activité */
.domaines_activite h4{
    font-family: "Switzer Bold";
    font-size: 1.1em;
    text-transform: none;
    color: #58595b;
    padding :10px;
}

/* Centrer chaque ensemble : titre + description */
.domaines_activite .textes_activite {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Description sur 2 lignes, non centrée */
.domaines_activite .textes_activite dt {
    width: 36ch;
    text-align: center;
    font-size: 0.9em;
}


hr{
    /* color: #b12424;
    height: 1px;
    background-color: #047173;
    border: none; */
    border: solid 1px #f7f7f7;
    width: 100% ;
    justify-self: center;
}


















/* ===== Pied de page : barre horizontale ===== */
.pied_de_page {
    margin-top: 40px;
    background-color: transparent;
    border-top: 1px solid #e6e6e6;
    color: #58595b;
    flex-shrink: 0;   /* reste à sa taille, collé en bas */
}

/* Barre : liens et réseaux rassemblés, centrés côte à côte */
.pied_barre {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    flex-wrap: wrap;
}

/* Rangée de liens */
.pied_liens {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 22px;
}

.pied_liens a,
.pied_copy {
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: none;
    white-space: nowrap;
    color: #58595b;
}

.pied_liens a {
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.pied_liens a:hover {
    color: #1c9b8e;
}

.pied_copy {
    color: #8a8a8a;
}

/* Webmail : encadré (façon maquette) */
.pied_webmail {
    border: 1px solid #c2c2c2;
    border-radius: 4px;
    padding: 5px 12px;
}
.pied_webmail:hover {
    border-color: #1c9b8e;
}

/* Réseaux sociaux */
.pied_social {
    display: flex;
    align-items: center;
    gap: 14px;
}
.pied_reseau {
    display: inline-flex;
    color: #58595b;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
}
.pied_reseau:hover {
    color: #1c9b8e;
    transform: translateY(-1px);
}
.pied_reseau svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    display: block;
}

/* Petits écrans : liens centrés, réseaux dessous */
@media (max-width: 720px) {
    .pied_barre {
        justify-content: center;
        text-align: center;
    }
    .pied_liens {
        justify-content: center;
    }
}



/* Messagerie flotante */
.messagerie{
    position: fixed;
    right: 1%;
    bottom: 2%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background-color: rgb(255, 255, 255);
    padding: 1%;
    border: solid 1px #c2c2c2;
    border-radius: 50%;
    cursor: pointer;
    z-index: 210;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.messagerie:hover{
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* ===== Formulaire flottant de la messagerie ===== */
.messagerie_form{
    position: fixed;
    right: 1%;
    bottom: calc(2% + 96px);         /* juste au-dessus du bouton (80px + marge) */
    width: 320px;
    max-width: calc(100vw - 32px);
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
    padding: 18px;
    z-index: 209;
    /* Masqué par défaut : activé au clic sur le bouton */
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}
.messagerie_form.is-open{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.messagerie_form_entete{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.messagerie_form_entete h4{
    font-family: "Switzer Bold";
    font-size: 1.05em;
    color: #047173;
}
.messagerie_form_entete p{
    font-size: 0.85em;
    color: #8a8a8a;
    margin-top: 3px;
}
.messagerie_fermer{
    border: none;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    color: #8a8a8a;
    cursor: pointer;
    padding: 0 2px;
    transition: color 0.2s ease;
}
.messagerie_fermer:hover{ color: #2b2b2b; }

.messagerie_champs{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.messagerie_champs input,
.messagerie_champs textarea{
    width: 100%;
    border: 1px solid #d9dadb;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    color: #2b2b2b;
    resize: vertical;
}
.messagerie_champs textarea{ min-height: 90px; }
.messagerie_champs input::placeholder,
.messagerie_champs textarea::placeholder{ color: #9aa0a6; }
.messagerie_champs input:focus,
.messagerie_champs textarea:focus{
    outline: none;
    border-color: #1c9b8e;
}
.messagerie_envoyer{
    border: none;
    background-color: #8dc63f;
    color: #ffffff;
    font-size: 15px;
    padding: 11px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.messagerie_envoyer:hover{ background-color: #7ab52f; }

/* Message de confirmation après envoi */
.messagerie_merci{
    display: none;
    color: #047173;
    font-size: 0.95em;
    padding: 10px 0;
}
.messagerie_form.is-sent .messagerie_champs{ display: none; }
.messagerie_form.is-sent .messagerie_merci{ display: block; }



/* ===== Révélation au défilement =====
   Les blocs de contenu apparaissent en fondu + léger glissement vers le
   haut (avec un discret zoom) quand ils entrent dans la vue. La classe
   .reveal est posée par script.js (IntersectionObserver) ; l'état révélé
   est activé via .est-visible. Ainsi, sans JS, aucun bloc n'est masqué.
   Le décalage en cascade (stagger) est fourni en ligne via --reveal-delai. */
.reveal {
    opacity: 0;
    transform: translateY(30px) scale(0.985);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--reveal-delai, 0s);
}
.reveal.est-visible {
    opacity: 1;
    transform: none;
}

/* Accessibilité : aucune animation si l'utilisateur la refuse */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal.est-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* ===== Parallaxe sur les grandes images =====
   Effet de profondeur : au défilement, l'image glisse verticalement un
   peu plus lentement que le reste. L'hôte (conteneur direct de l'image)
   rogne le débordement ; l'image est légèrement agrandie pour ménager une
   marge de glissement sans jamais laisser apparaître de vide. Les classes
   sont posées, et le décalage vertical piloté, par script.js.
   Ces classes ne visent que des conteneurs n'enveloppant QUE leur image. */
.parallax-hote {
    overflow: hidden;
}

/* @property : rend --px-hover animable -> le zoom au survol est fluide.
   Sur un navigateur sans support, la variable fonctionne quand même
   (le zoom est appliqué, mais instantané au lieu d'animé). */
@property --px-hover {
    syntax: "<number>";
    inherits: false;
    initial-value: 1;
}

/* Transform piloté par variables :
     --px-shift : glissement vertical du parallaxe (script.js, à chaque image)
     --px-hover : facteur de zoom (1 au repos, > 1 au survol)
   Cover : agrandissement de base 1.14 (marge de glissement) x le zoom.
   Doux  : pas d'agrandissement de base ; seul le survol zoome.
   On ne transitionne QUE --px-hover et filter (pas transform lui-même),
   pour ne pas ralentir le parallaxe qui, lui, change à chaque image. */
.parallax-media {
    transform: translate3d(0, var(--px-shift, 0), 0) scale(calc(1.14 * var(--px-hover, 1)));
    transform-origin: center center;
    transition: --px-hover .45s cubic-bezier(.2, .7, .2, 1), filter .4s ease;
    will-change: transform;
}
.parallax-media-doux {
    transform: translate3d(0, var(--px-shift, 0), 0) scale(var(--px-hover, 1));
    transform-origin: center center;
    transition: --px-hover .45s cubic-bezier(.2, .7, .2, 1), filter .4s ease;
    will-change: transform;
}

/* Accessibilité : image immobile et non agrandie si l'animation est refusée */
@media (prefers-reduced-motion: reduce) {
    .parallax-media,
    .parallax-media-doux {
        transform: none;
    }
}


/* ============================================================
   Survol des images de contenu : zoom + éclat + élévation
   ------------------------------------------------------------
   Effet réservé aux images ENCADRÉES (conteneur qui rogne le
   débordement) : le zoom reste contenu -> rendu élégant.
     • Produits : UNIQUEMENT les captures Sirius FT / IPX / Colladrive
       (pas les images de description : bannière ni diagramme IPX).
     • Qui sommes-nous : image d'intro, "Notre vision", "Nos valeurs".
     • Contact : image de droite.
   Volontairement EXCLUS : bannière Sirius FT, diagramme IPX, carte
   d'Afrique, héro Colladrive et les petites icônes.
   ============================================================ */

/* Cadres des captures : rognés pour contenir le zoom.
   (Les hôtes de parallaxe cover le sont déjà via .parallax-hote.) */
.capture_produit,
.capture_ipx,
.captures {
    overflow: hidden;
}

/* Élévation du cadre au survol (captures + images encadrées Qui/Contact) */
.capture_produit,
.capture_ipx,
.captures,
.image_description,
.contenu_vision .droite,
.image_valeurs,
.image_droite {
    transition: box-shadow .4s ease;
}
.capture_produit:hover,
.capture_ipx:hover,
.captures:hover,
.image_description:hover,
.contenu_vision .droite:hover,
.image_valeurs:hover,
.image_droite:hover {
    box-shadow: 0 8px 15px rgba(0, 0, 0, .16);
}

/* Zoom + éclat des images en parallaxe au survol de leur cadre.
   (Le zoom passe par --px-hover : leur transform est piloté par
   variables — un transform CSS classique serait ignoré.)
   NB : on liste explicitement les hôtes cover à garder — on n'utilise
   PAS le générique .parallax-hote pour EXCLURE le diagramme IPX. */
.capture_produit:hover .parallax-media-doux,
.capture_ipx:hover .parallax-media-doux,
.captures:hover .parallax-media-doux,
.image_description:hover .parallax-media,
.contenu_vision .droite:hover .parallax-media,
.image_valeurs:hover .parallax-media,
.image_droite:hover .parallax-media {
    --px-hover: 1.03;
    filter: brightness(1.05) saturate(1.1);
}


/* ============================================================
   Icône décorative devant les grands titres de section
   ------------------------------------------------------------
   Petite « étincelle » verte de marque, en SVG inline (aucun
   fichier externe -> fonctionne aussi hors-serveur). S'applique
   à tous les titres h2 des pages de contenu + le titre Contact.
   ============================================================ */
.sections h2::before,
.contact_titre::before {
    content: "";
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 12px;
    vertical-align: middle;
    background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%232e9b8a'%20d='M12,2L14.2,9.8L22,12L14.2,14.2L12,22L9.8,14.2L2,12L9.8,9.8Z'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* Arabe (RTL) : l'icône passe à droite du titre */
[dir="rtl"] .sections h2::before,
[dir="rtl"] .contact_titre::before {
    margin-right: 0;
    margin-left: 12px;
}


/* ============================================================
   Icônes CONTEXTUELLES des grands titres (générées)
   Une icône par thème, choisie via data-ic="nom" sur le <h2>.
   SVG teal inline (aucun fichier externe). Surcharge l'icône
   par défaut ci-dessus. Régénérer via scratchpad/gen-icons.js.
   ============================================================ */
:is(.sections h2, .contact_titre)[data-ic="grid"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232e9b8a'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%204h6v6H4zM14%204h6v6h-6zM4%2014h6v6H4zM14%2014h6v6h-6z'/%3E%3C/svg%3E");}
:is(.sections h2, .contact_titre)[data-ic="finance"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232e9b8a'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cellipse%20cx='12'%20cy='6'%20rx='7'%20ry='3'/%3E%3Cpath%20d='M5%206v12c0%201.7%203.1%203%207%203s7-1.3%207-3V6'/%3E%3Cpath%20d='M5%2012c0%201.7%203.1%203%207%203s7-1.3%207-3'/%3E%3C/svg%3E");}
:is(.sections h2, .contact_titre)[data-ic="training"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232e9b8a'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%204%202%209l10%205%2010-5z'/%3E%3Cpath%20d='M6%2011v5c0%201%202.7%202%206%202s6-1%206-2v-5'/%3E%3Cpath%20d='M22%209v5'/%3E%3C/svg%3E");}
:is(.sections h2, .contact_titre)[data-ic="integration"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232e9b8a'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='5'%20cy='12'%20r='2'/%3E%3Ccircle%20cx='19'%20cy='6'%20r='2'/%3E%3Ccircle%20cx='19'%20cy='18'%20r='2'/%3E%3Cpath%20d='M7%2011%2017%207M7%2013l10%204'/%3E%3C/svg%3E");}
:is(.sections h2, .contact_titre)[data-ic="method"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232e9b8a'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2021V4'/%3E%3Cpath%20d='M5%204h12l-2%203%202%203H5'/%3E%3C/svg%3E");}
:is(.sections h2, .contact_titre)[data-ic="device"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232e9b8a'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4'%20width='18'%20height='12'%20rx='1'/%3E%3Cpath%20d='M8%2020h8M12%2016v4'/%3E%3C/svg%3E");}
:is(.sections h2, .contact_titre)[data-ic="software"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232e9b8a'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4'%20width='18'%20height='16'%20rx='2'/%3E%3Cpath%20d='M3%208h18'/%3E%3Cpath%20d='M9%2012l-2%202%202%202M15%2012l2%202-2%202'/%3E%3C/svg%3E");}
:is(.sections h2, .contact_titre)[data-ic="building"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232e9b8a'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='4'%20y='3'%20width='16'%20height='18'%20rx='1'/%3E%3Cpath%20d='M9%207h2M13%207h2M9%2011h2M13%2011h2M10%2021v-4h4v4'/%3E%3C/svg%3E");}
:is(.sections h2, .contact_titre)[data-ic="book"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232e9b8a'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%204h13v14H6a1%201%200%200%200-1%201z'/%3E%3Cpath%20d='M5%2018a1%201%200%200%201%201-1h12'/%3E%3C/svg%3E");}
:is(.sections h2, .contact_titre)[data-ic="screen"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232e9b8a'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4'%20width='18'%20height='12'%20rx='1'/%3E%3Cpath%20d='M8%2020h8M12%2016v4M7%2011l3%202%204-5'/%3E%3C/svg%3E");}
:is(.sections h2, .contact_titre)[data-ic="badge"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232e9b8a'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='9'%20r='6'/%3E%3Cpath%20d='M8.5%2014%207%2021l5-2.5L17%2021l-1.5-7'/%3E%3C/svg%3E");}
:is(.sections h2, .contact_titre)[data-ic="target"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232e9b8a'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='8'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='3.5'/%3E%3C/svg%3E");}
:is(.sections h2, .contact_titre)[data-ic="gear"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232e9b8a'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='3'/%3E%3Cpath%20d='M12%203v3M12%2018v3M3%2012h3M18%2012h3M5.6%205.6l2.1%202.1M16.3%2016.3l2.1%202.1M18.4%205.6l-2.1%202.1M7.7%2016.3l-2.1%202.1'/%3E%3C/svg%3E");}
:is(.sections h2, .contact_titre)[data-ic="news"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232e9b8a'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='4'%20y='3'%20width='16'%20height='18'%20rx='1'/%3E%3Cpath%20d='M8%208h8M8%2012h8M8%2016h5'/%3E%3C/svg%3E");}
:is(.sections h2, .contact_titre)[data-ic="calendar"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232e9b8a'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='5'%20width='18'%20height='16'%20rx='2'/%3E%3Cpath%20d='M3%209h18M8%203v4M16%203v4'/%3E%3C/svg%3E");}
:is(.sections h2, .contact_titre)[data-ic="mail"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232e9b8a'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='5'%20width='18'%20height='14'%20rx='2'/%3E%3Cpath%20d='M4%207l8%206%208-6'/%3E%3C/svg%3E");}
:is(.sections h2, .contact_titre)[data-ic="info"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232e9b8a'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M12%2011v5M12%207.5h.01'/%3E%3C/svg%3E");}
:is(.sections h2, .contact_titre)[data-ic="map"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232e9b8a'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%204%203%206v14l6-2%206%202%206-2V4l-6%202z'/%3E%3Cpath%20d='M9%204v14M15%206v14'/%3E%3C/svg%3E");}
:is(.sections h2, .contact_titre)[data-ic="chart"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232e9b8a'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2020h16'/%3E%3Cpath%20d='M7%2020v-6M12%2020V8M17%2020v-9'/%3E%3C/svg%3E");}
:is(.sections h2, .contact_titre)[data-ic="eye"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232e9b8a'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M2%2012s3.5-7%2010-7%2010%207%2010%207-3.5%207-10%207-10-7-10-7z'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='3'/%3E%3C/svg%3E");}
:is(.sections h2, .contact_titre)[data-ic="heart"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232e9b8a'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2020S3.5%2014.5%203.5%208.8A4.3%204.3%200%200%201%2012%206a4.3%204.3%200%200%201%208.5%202.8C20.5%2014.5%2012%2020%2012%2020z'/%3E%3C/svg%3E");}
:is(.sections h2, .contact_titre)[data-ic="users"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232e9b8a'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='9'%20cy='8'%20r='3.5'/%3E%3Cpath%20d='M3%2020a6%206%200%200%201%2012%200'/%3E%3Cpath%20d='M16%205a3.5%203.5%200%200%201%200%207M21%2020a6%206%200%200%200-4-5.7'/%3E%3C/svg%3E");}
:is(.sections h2, .contact_titre)[data-ic="transfer"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232e9b8a'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%208h14M15%205l3%203-3%203'/%3E%3Cpath%20d='M20%2016H6M9%2013l-3%203%203%203'/%3E%3C/svg%3E");}
:is(.sections h2, .contact_titre)[data-ic="cloud"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232e9b8a'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M7%2018a4%204%200%200%201%200-8%205%205%200%200%201%209.6-1A3.5%203.5%200%200%201%2018%2018z'/%3E%3C/svg%3E");}
:is(.sections h2, .contact_titre)[data-ic="star"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='%232e9b8a'%3E%3Cpath%20d='M12%203l2.6%205.6%206%20.6-4.5%204%201.3%206L12%2018.6%206.6%2021.8l1.3-6-4.5-4%206-.6z'/%3E%3C/svg%3E");}