/* Défilement fluide vers les ancres + petit décalage haut */
html{
    scroll-behavior: smooth;
}
:target{
    scroll-margin-top: 20px;
}


/* ============================================================
   Nos produits (division générale) — même ossature que
   "Qui sommes-nous" : barre d'ancres + zone de contenu
   ============================================================ */
.nos_produits{
    display: flex;
    justify-content: center;
    gap: 4%;
    /* Pas de padding-top ici : il décalerait le panneau .ancres par rapport
       au seuil du sticky (l'espacement haut est porté par .sections). */
    padding: 0 0 5% 0;
}


/* ============================================================
   Barre latérale d'ancres (.ancres)
   ============================================================ */
.nos_produits .ancres{
    width: 210px;
    background: #ffffff;          /* fond gris clair du panneau */
    padding: 30px 16px;
    /* Panneau figé au défilement, sans s'étirer sur toute la hauteur */
    align-self: flex-start;       /* garde sa hauteur de contenu + sa position haute */
    position: sticky;
    /* Aligné sur le padding-top de .main_view (90px) : dégage l'en-tête
       fixe (~74px) ET évite tout saut au défilement (position naturelle
       = seuil du sticky). */
    top: 90px;
}

/* Liste : empilée, les <li> occupent toute la largeur du panneau */
.nos_produits .ancres nav ul{
    list-style:  none;
    margin: 0;
    padding: 10px 12px;           /* petit espacement latéral : les liens ne collent pas aux bords */
    display: flex;
    flex-direction: column;
    align-items: stretch;         /* les <li> s'étirent sur toute la largeur */
    background-color: rgb(245, 245, 245);
}

.nos_produits .ancres nav li{
    margin-bottom: 14px;
}

/* Liens (état par défaut) : texte gris centré, largeur pleine et uniforme.
   box-sizing: border-box -> le padding reste inclus dans les 100 %, donc
   tous les liens (et donc le pavé .active) ont exactement la même largeur */
.nos_produits .ancres nav a{
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 14px 20px;
    border-radius: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    text-align: center;
    color: #8a8a8a;
    text-decoration: none;
    transition: color .2s, background .2s;
}

.nos_produits .ancres nav a:hover{
    color: #111;
}

/* Ancre active (déterminée dynamiquement par nos_produits.js) :
   pavé blanc arrondi */
.nos_produits .ancres nav a.active{
    background: #fff;
    color: #111;
    /* faux gras via text-shadow : épaissit sans élargir la boîte,
       donc l'ancre occupe la même largeur active ou non (pas de décalage) */
    text-shadow: 0 0 .6px currentColor, 0 0 .6px currentColor;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}


/* ============================================================
   Zone de contenu (.sections)
   ============================================================ */
.nos_produits .sections{
    width: 60%;
    /* Espacement haut du contenu (repris du padding-top retiré de
       .nos_produits) : n'affecte pas la position du panneau .ancres. */
    padding-top: 2%;
}

/* Espace uniforme entre les grandes parties */
.nos_produits .sections > div + div{
    margin-top: var(--espace-rubriques);
}


/* ============================================================
   En-tête produit (Sirius FT / Colladrive / IPX) :
   titre teal + trait + accroche — style commun aux 3 produits
   ============================================================ */
.nos_produits .sirius-ft h2,
.nos_produits .colladrive h2,
.nos_produits .ipx h2{
    margin: 0 0 18px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 34px;
    color: #2e9b8a;
}

.nos_produits .sirius-ft hr,
.nos_produits .colladrive hr,
.nos_produits .ipx hr{
    border: none;
    border-top: 1px solid #e3e3e3;
    margin: 0 0 22px;
}

.nos_produits .sirius-ft p,
.nos_produits .colladrive p,
.nos_produits .ipx p{
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: #9a9a9a;              /* gris clair, comme la capture */
}


/* ============================================================
   Bloc produit : bannière + avantages + capture
   ============================================================ */

/* Bannière (image large en haut du produit) */
.nos_produits .image-SFT{
    margin-top: 40px;
}
.nos_produits .image-SFT img{
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}


/* ------------------------------------------------------------
   Avantages : 3 colonnes (icône + titre teal + texte)
   ------------------------------------------------------------ */
.nos_produits .image_marketing_texte{
    background: #f4f4f4;
    position: relative;
}

.nos_produits .avantages{
    position:absolute;
    display: flex;
    justify-content: space-between;
    gap: 6%;
    top: 80%;
}

/* Une colonne */
.nos_produits .avantages > div{
    flex: 1;
    text-align: center;
}

/* Icône : garde son ratio natif, jamais rognée */
.nos_produits .avantages > div > img{
    width: 120px;
    height: 120px;
    object-fit: contain;
    margin-bottom: 22px;
}

/* Titre teal centré */
.nos_produits .avantages h6{
    margin: 0 0 14px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #1a8f7a;
}

/* Paragraphe descriptif gris, centré */
.nos_produits .avantages p{
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #9a9a9a;
}


/* ------------------------------------------------------------
   Capture du produit (grande image encadrée gris clair)
   ------------------------------------------------------------ */
.nos_produits .capture_produit{
    margin-top: 250px;
    background: #f4f4f4;
    padding: 25px;
}
.nos_produits .capture_produit img{
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}


/* ============================================================
   COLLADRIVE
   Accroche, image héro centrée, rangée de 4 cartes rondes,
   puis capture logicielle + bouton "Essayez Colladrive"
   ============================================================ */

/* Conteneur général : empile héro -> cartes -> capture, centré */
.nos_produits .colladrive .images_et_avantages{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
}

/* Image héro (l'éléphant sur l'avion en papier) : centrée */
.nos_produits .colladrive .images_et_avantages > img{
    display: block;
    width: 75%;
    height: auto;
}

/* Rangée des 4 cartes : remonte légèrement pour chevaucher le bas du héro */
.nos_produits .avantages_colladrive{
    position: absolute;
    top: 650px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 22px;
    width: 100%;
    margin-top: -60px;
}

/* Une carte ronde : cercle blanc avec ombre douce, contenu centré */
.nos_produits .cadre_rond{
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 250px;
    height: 250px;
    padding: 30px 34px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .10);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Icône ligne (verte) en haut de la carte */
.nos_produits .cadre_rond > img{
    width: 69px;
    height: 69px;
    object-fit: contain;
    margin-bottom: 14px;
}

/* Titre teal de la carte */
.nos_produits .cadre_rond h6{
    margin: 0 0 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #1a8f7a;
}

/* Description grise */
.nos_produits .cadre_rond p{
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12.5px;
    line-height: 1.4;
    color: #9a9a9a;
}

/* ------------------------------------------------------------
   Capture logicielle Colladrive + bouton d'essai
   ------------------------------------------------------------ */
.nos_produits .captures{
    padding: 1%;
    width: 100%;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* background: #f4f4f4; */
}
.nos_produits .captures img{
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}
.nos_produits .captures a{
    margin-top: 22px;
    display: inline-block;
    padding: 20px 40px;
    background: #8dc63f;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    text-decoration: none;
    border-radius: 30px;
    transition: background .2s;
}
.nos_produits .captures a:hover{
    background: #7ab52f;
}


/* ============================================================
   IPX
   Panneau clair : colonne texte (titre + 4 avantages) à gauche,
   diagramme "hub" à droite, puis capture logicielle en dessous
   ============================================================ */

/* Panneau : l'image (diagramme) sert de FOND couvrant toute la division ;
   les textes se superposent au premier plan (colonne de gauche) */
.nos_produits .textes_images_ipx{
    position: relative;
    padding: 45px 50px;
    margin-top: 40px;
    overflow: hidden;
    background: #eef4fb;        /* fond de secours si l'image ne charge pas */
}

/* Diagramme (hub IPX) : arrière-plan, couvre toute la division */
.nos_produits .textes_images_ipx > img{
    position: absolute;
    inset: 0;                   /* top/right/bottom/left = 0 */
    width: 100%;
    height: 100%;
    object-fit: cover;          /* remplit toute la division */
    z-index: 0;
}

/* Titre du panneau : au premier plan, gras foncé, distinct du teal */
.nos_produits .textes_images_ipx > h6{
    position: relative;
    z-index: 1;
    max-width: 50%;             /* reste sur la colonne de gauche */
    margin: 0 0 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #3a3f44;
}

/* Petit trait sous le titre du panneau */
.nos_produits .textes_images_ipx > hr{
    position: relative;
    z-index: 1;
    width: 150px;
    margin: 0 0 26px;
    border: none;
    border-top: 2px solid #cfd6de;
}

/* Une ligne d'avantage : au premier plan, icône à gauche, texte à droite */
.nos_produits .icone_texte_ipx{
    position: relative;
    z-index: 1;
    max-width: 50%;             /* reste sur la colonne de gauche */
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
}
.nos_produits .icone_texte_ipx img{
    width: 46px;
    height: 46px;
    object-fit: contain;
    flex: none;
}
.nos_produits .icone_texte_ipx p{
    margin: 0;
}

/* Intitulé (teal) au-dessus de la précision grise entre parenthèses */
.nos_produits .icone_texte_ipx strong{
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #1a8f7a;
    margin-bottom: 2px;
}
.nos_produits .icone_texte_ipx span{
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13.5px;
    line-height: 1.4;
    color: #8a8a8a;
}

/* ------------------------------------------------------------
   Capture logicielle IPX (grande image encadrée gris clair)
   ------------------------------------------------------------ */
.nos_produits .capture_ipx{
    margin-top: 40px;
    background: #f4f4f4;
    padding: 25px;
}
.nos_produits .capture_ipx img{
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}