/* ============================================================================
   OMISYS — feuille de style de la refonte statique.

   Palette et largeurs relevées sur l'original (template Helix3, preset1) :
     bleu principal  #005b9a   liens, survols, boutons, bandeaux de titre
     bleu foncé      #003d67   survol des boutons
     bordure bouton  #00497b   /  état actif #002e4e
     conteneur       1170 px   (Bootstrap 3 du template, gouttière 15 px)
   Ces valeurs ne viennent pas de la base, dont le `params` du style actif est illisible :
   elles sont relevées sur le CSS compilé du preset et sur le HTML réellement servi.

   Police Nunito, servie en local (SIL OFL) — l'original la chargeait chez Google.
   ============================================================================ */

/* ---- Polices ------------------------------------------------------------ */
/* Fichiers variables : une seule ressource couvre les graisses 200 à 900.
   Le site n'utilise en pratique que 200, 400 et 800, plus un peu d'italique. */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url('/fonts/nunito-var-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url('/fonts/nunito-var-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Nunito';
    font-style: italic;
    font-weight: 200 900;
    font-display: swap;
    src: url('/fonts/nunito-var-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Variables ---------------------------------------------------------- */
:root {
    --bleu: #005b9a;
    --bleu-fonce: #003d67;
    --bleu-bordure: #00497b;
    --bleu-actif: #002e4e;
    /* Deux familles de couleurs cohabitent :
       - le template (menu, liens, pied) suit le preset1 de Helix3  -> --bleu
       - les blocs de SP Page Builder ont leurs propres couleurs, relevées sur le rendu
         d'origine -> --bleu-addon (titres) et --bleu-bouton.
       La base porte bien un `background_color: #444444` pour le bouton du héro, mais
       SP Page Builder ne l'a jamais compilé dans son CSS : la règle générée pour cet
       identifiant ne contient que des marges. Le visiteur voyait donc la couleur par
       défaut du composant. On suit le rendu réel, pas le champ inerte. */
    --bleu-addon: #337ab7;
    --bleu-bouton: #337ab7;   /* aligné sur le bleu du texte ; l'original servait #3071ff */
    --texte: #333;
    --texte-clair: #7a7a7a;
    --gris-fond: #f5f5f5;   /* valeur des sections de l'original */
    --blanc: #fff;
    --largeur: 1170px;
    --gouttiere: 15px;
    --hauteur-entete: 90px;
}

/* ---- Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Nunito', 'Segoe UI', Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    color: var(--texte);
    background: var(--blanc);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--bleu); text-decoration: none; }
a:hover, a:focus-visible { color: var(--bleu-fonce); text-decoration: underline; }

h1, h2, h3, h4 {
    margin: 0 0 .6em;
    line-height: 1.25;
    font-weight: 800;
    color: #2b2b2b;
}
h1 { font-size: 2.4rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1.1em; }
ul { margin: 0 0 1.1em; padding-left: 1.2em; }

/* Le conteneur porte ses paddings latéraux : toute classe posée sur le même élément écrit
   padding-top / padding-bottom séparément, un raccourci remettrait les côtés à zéro. */
.conteneur {
    width: 100%;
    max-width: var(--largeur);
    margin: 0 auto;
    padding-left: var(--gouttiere);
    padding-right: var(--gouttiere);
}

.centre { text-align: center; }

/* ---- Boutons ------------------------------------------------------------ */
/* Les boutons « Lire la suite » du carrousel portent la classe sppb-btn-success dans
   l'original : ils sont verts, pas bleus. */
.bouton {
    display: inline-block;
    padding: 11px 26px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: var(--bleu-bouton);
    color: var(--blanc);
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    cursor: pointer;
    transition: background-color .2s, border-color .2s;
}
.bouton:hover, .bouton:focus-visible {
    background: #2a6496;
    border-color: transparent;
    color: var(--blanc);
    text-decoration: none;
}
.bouton-clair {
    background: transparent;
    border-color: var(--blanc);
    color: var(--blanc);
}
.bouton-clair:hover, .bouton-clair:focus-visible {
    background: var(--blanc);
    border-color: var(--blanc);
    color: var(--bleu);
}

/* ---- Barre supérieure --------------------------------------------------- */
.barre-haut {
    background: var(--bleu);
    color: var(--blanc);
    font-size: .875rem;
}
.barre-haut-int {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 40px;
}
.barre-haut a { color: var(--blanc); }
.barre-haut a:hover { text-decoration: underline; }
.barre-haut svg { width: 15px; height: 15px; fill: currentColor; flex: none; }

.reseaux, .infos-contact {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.infos-contact li { display: flex; align-items: center; gap: 7px; }
.reseaux a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
}
.reseaux a:hover { background: var(--blanc); color: var(--bleu); }
.reseaux svg { width: 17px; height: 17px; }

/* ---- En-tête ------------------------------------------------------------ */
.entete {
    position: relative;
    z-index: 30;
    background: var(--blanc);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .09);
}
.entete-int {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: var(--hauteur-entete);
}
.logo { display: flex; align-items: center; flex: none; }
.logo img { display: block; width: 260px; height: auto; }

/* En-tête collant au défilement. position: fixed sans transform : un ancêtre transformé
   confine les descendants position:fixed à sa propre boîte. */
.entete.fige {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}
body.entete-figee { padding-top: var(--hauteur-entete); }

/* ---- Menu principal ----------------------------------------------------- */
.menu-principal ul {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.menu-principal a {
    display: block;
    padding: 10px 11px;
    color: #4a4a4a;
    font-size: .95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .01em;
    white-space: nowrap;
}
.menu-principal a:hover,
.menu-principal a.selected {
    color: var(--bleu);
    text-decoration: none;
}
/* L'entrée « MON ESPACE CLIENT » était mise en avant sur l'original (classe menuperso). */
.menu-principal a.menu-perso,
.menu-mobile a.menu-perso {
    margin-left: 6px;
    padding: 10px 16px;
    border-radius: 3px;
    background: var(--bleu);
    color: var(--blanc);
}
.menu-principal a.menu-perso:hover,
.menu-mobile a.menu-perso:hover { background: var(--bleu-fonce); }

/* ---- Bouton et panneau mobile ------------------------------------------- */
/* Barres en position absolue dans un carré de 46 px : un empilement par marges ne forme
   pas une croix régulière. */
.burger {
    display: none;
    position: relative;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.burger span {
    position: absolute;
    left: 11px;
    width: 24px;
    height: 2px;
    background: var(--bleu);
    transition: transform .25s, opacity .2s;
}
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 22px; }
.burger span:nth-child(3) { top: 28px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.menu-mobile {
    display: none;
    position: fixed;
    top: var(--hauteur-entete);
    left: 0;
    right: 0;
    z-index: 25;
    /* Le panneau peut dépasser la hauteur de l'écran : il défile seul, sinon son bas
       devient inatteignable. */
    max-height: calc(100vh - var(--hauteur-entete));
    overflow-y: auto;
    padding: 8px 0 16px;
    background: var(--blanc);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .12);
}
.menu-mobile[hidden] { display: none; }
.menu-mobile.ouvert { display: block; }
.menu-mobile ul { margin: 0; padding: 0; list-style: none; }
.menu-mobile li { border-bottom: 1px solid #eceff1; }
.menu-mobile li:last-child { border-bottom: 0; }
.menu-mobile a {
    display: block;
    padding: 13px var(--gouttiere);
    color: #3a3a3a;
    font-weight: 700;
    text-transform: uppercase;
}
.menu-mobile a:hover { color: var(--bleu); text-decoration: none; }
.menu-mobile a.menu-perso { margin: 10px var(--gouttiere); border-radius: 3px; text-align: center; }

/* ---- Bandeau de titre des pages intérieures ----------------------------- */
/* Le preset1 de Helix3 pose `background: #005b9a` sur ce bandeau, mais le rendu
   d'origine montre un titre gris sur fond blanc : c'est le rendu qui fait foi. */
.titre-page {
    padding-top: 46px;
    padding-bottom: 10px;
}
.titre-page h1 { margin: 0; color: #333; font-size: 2rem; font-weight: 400; }
.fil-ariane {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: .9rem;
    opacity: .9;
}
.fil-ariane { color: #777; }
.fil-ariane a { color: var(--bleu-addon); }
.fil-ariane li + li::before { content: "›"; margin-right: 8px; }

/* ---- Sections ----------------------------------------------------------- */
.section { padding-top: 60px; padding-bottom: 60px; }
.section-grise { background: var(--gris-fond); }
.section-bleue { background: var(--bleu); color: var(--blanc); }
.section-bleue h2, .section-bleue h3 { color: var(--blanc); }

.titre-section { margin-bottom: 34px; text-align: center; }
.titre-section h2 { margin-bottom: .3em; }
.titre-section p { max-width: 860px; margin: 0 auto; color: var(--texte-clair); }

/* ---- Grilles ------------------------------------------------------------ */
.grille {
    display: grid;
    gap: 28px;
}
.grille-2 { grid-template-columns: repeat(2, 1fr); }
.grille-3 { grid-template-columns: repeat(3, 1fr); }
.grille-4 { grid-template-columns: repeat(4, 1fr); }

/* ---- Cartes de service -------------------------------------------------- */
/* Sur l'original, les blocs « feature » n'ont ni cadre, ni fond, ni pastille :
   une grande icône sombre de 42 px (réglage icon_size dans la base), le titre en
   bleu, et le texte centré. */
.service {
    padding: 0 14px;
    text-align: center;
}
.service h3 { color: var(--bleu-addon); font-size: 1.3rem; text-transform: uppercase; }
.service p:last-child { margin-bottom: 0; }
.service-icone {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}
.service-icone svg { width: 42px; height: 42px; fill: #333; }

/* ---- Bloc image + texte ------------------------------------------------- */
.duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 44px;
}
.duo img { display: block; width: 100%; border-radius: 4px; }
.duo-texte h2 { margin-bottom: .5em; }
.duo-texte p:last-child { margin-bottom: 0; }
.duo-inverse .duo-media { order: 2; }

/* ---- Héro --------------------------------------------------------------- */
.hero {
    position: relative;
    /* padding 10px 0 0 10px dans l'original : la hauteur vient de l'illustration.
       Toute hauteur ajoutee ici fait recadrer le fond `cover`. */
    padding-top: 10px;
    padding-bottom: 0;
    overflow: hidden;
}
.hero-int {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 30px;
}
.hero h1 {
    font-size: 3.4rem;
    font-weight: 200;      /* graisse dominante de l'original */
    line-height: 1.2;
    color: #2b2b2b;
}
.hero h1 strong { font-weight: 800; color: var(--bleu); }
.hero-media img {
    display: block;
    /* centrée dans sa colonne : marge auto des DEUX côtés */
    margin-left: auto;
    margin-right: auto;
    /* Dans le rendu d'origine, l'illustration s'affiche à ~505 px de haut,
       pas à ses 800 px natifs. C'est elle qui donne sa hauteur au bandeau. */
    max-height: 505px;
    width: auto;
}

/* ---- Séparateur --------------------------------------------------------- */
.separateur {
    width: 70px;
    height: 3px;
    margin: 0 auto 22px;
    border: 0;
    background: var(--bleu);
}
.titre-section .separateur { margin-bottom: 20px; }

/* ---- Bandeau logos clients ---------------------------------------------- */
.clients {
    padding-top: 44px;
    padding-bottom: 44px;
    background: var(--gris-fond) url('/images/client-bg.png') center/cover no-repeat;
}
.clients-liste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    gap: 26px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.clients-liste img { max-height: 74px; width: auto; }

/* ---- Listes à puces bleues ---------------------------------------------- */
/* Puces standard : les captures ne montrent aucune pastille de couleur, juste les
   puces par défaut du navigateur. */
.liste-cochee { list-style: disc; padding-left: 1.3em; }
.liste-cochee li { margin-bottom: .45em; }

/* ---- Pied de page ------------------------------------------------------- */
/* Fond clair et liens bleus à chevrons, conformément au rendu d'origine — et non
   le pied sombre que j'avais posé au premier jet. Valeurs relevées au pixel :
   fond #f5f5f5, titres et adresse #333, liens #337ab7. */
.pied {
    padding-top: 54px;
    padding-bottom: 46px;
    background: #f5f5f5;
    color: #333;
    font-size: .95rem;
}
.pied-int {
    display: grid;
    grid-template-columns: 1fr 2fr 1.1fr;
    gap: 34px;
}
.pied h3 {
    margin-bottom: .8em;
    color: #333;
    font-size: 1.5rem;
    font-weight: 400;
}
.pied ul { margin: 0; padding: 0; list-style: none; }

/* Chaque entrée : chevron bleu, libellé bleu, filet de séparation dessous. */
.liste-pied li { border-bottom: 1px solid #e4e4e4; }
.liste-pied a {
    display: block;
    position: relative;
    padding: 9px 0 9px 20px;
    color: var(--bleu-addon);
}
.liste-pied a::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
}
.liste-pied a:hover { color: var(--bleu-fonce); text-decoration: none; }

/* Les deux colonnes de partenaires de l'original, réunies en une liste répartie. */
.liste-partenaires { columns: 2; column-gap: 40px; }
.liste-partenaires li { break-inside: avoid; }

.pied-groupe { text-align: center; }
.pied-groupe img { display: block; margin: 0 auto 18px; }
.pied-groupe .adresse { margin: 0; line-height: 1.7; }

.copyright {
    padding-top: 16px;
    padding-bottom: 16px;
    background: #ededed;
    color: #666;
    font-size: .875rem;
    text-align: center;
}

/* ---- Formulaire --------------------------------------------------------- */
.formulaire { display: grid; gap: 16px; }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ label { font-weight: 700; font-size: .95rem; }
.champ .obligatoire { color: #c0392b; }
.champ input, .champ textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d5dbe0;
    border-radius: 3px;
    font: inherit;
    color: inherit;
    background: var(--blanc);
}
.champ input:focus, .champ textarea:focus {
    outline: none;
    border-color: var(--bleu);
    box-shadow: 0 0 0 3px rgba(0, 91, 154, .12);
}
.champ textarea { min-height: 170px; resize: vertical; }
/* Honeypot : invisible pour un humain, rempli par les robots. Remplace le reCAPTCHA
   Google de l'original — un appel à un tiers de moins. */
.pot-de-miel {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.message-envoi { margin: 0; font-weight: 700; }
.message-envoi.ok { color: #1e7a45; }
.message-envoi.erreur { color: #c0392b; }

/* ---- Coordonnées (page contact) ----------------------------------------- */
.coordonnees { margin: 0; padding: 0; list-style: none; }
.coordonnees li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}
.coordonnees svg { width: 20px; height: 20px; margin-top: 3px; fill: var(--bleu); flex: none; }
/* Sans cette remise à zéro, la marge par défaut du <p> le décale sous son icône. */
.coordonnees p { margin: 0; }

/* ---- Cadre des offres associées ----------------------------------------- */
/* Le cadre porte sa propre mise en page : ne pas l'envelopper dans un conteneur
   supplémentaire, et garder scrolling="no" (barre de défilement parasite sinon). */
.cadre-offres {
    display: block;
    width: 100%;
    border: 0;
}

/* ============================================================================
   Adaptation aux petits écrans
   Dès qu'un flex passe en colonne, remettre align-items à stretch : sinon la valeur
   desktop pilote la largeur des enfants au lieu de leur alignement vertical.
   ============================================================================ */
@media (max-width: 1199px) {
    .menu-principal a { padding: 10px 8px; font-size: .88rem; }
    .logo img { width: 210px; }
}

/* Les huit entrées du menu, en majuscules et insécables, occupent environ 875 px à cette
   taille : sous ce seuil elles débordent du conteneur au lieu de se replier. Le passage au
   bouton mobile se fait donc ici, et non au point de rupture du reste de la mise en page.
   Valeur reprise à l'identique dans site.js (fermeture du panneau à l'élargissement). */
@media (max-width: 1149px) {
    .burger { display: block; }
    .menu-principal { display: none; }
}

@media (max-width: 991px) {
    .hero-int { grid-template-columns: 1fr; }
    .hero-media img { margin: 0 auto; }
    .duo { grid-template-columns: 1fr; gap: 28px; }
    .duo-inverse .duo-media { order: 0; }
    .grille-4 { grid-template-columns: repeat(2, 1fr); }
    .grille-3 { grid-template-columns: repeat(2, 1fr); }
    .pied-int { grid-template-columns: 1fr 1fr; }
    .pied-groupe { grid-column: 1 / -1; }
    .liste-partenaires { columns: 2; }
}

@media (max-width: 800px) {
    /* La gouttière desktop de 15 px est trop étroite sous cette largeur. */
    :root { --gouttiere: 24px; }
}

@media (max-width: 767px) {
    body { font-size: 15px; }
    h1 { font-size: 1.9rem; }
    h2 { font-size: 1.55rem; }
    .hero h1 { font-size: 2rem; }
    .section { padding-top: 44px; padding-bottom: 44px; }

    .barre-haut-int {
        flex-direction: column;
        align-items: stretch;   /* sinon la valeur desktop bride la largeur */
        gap: 6px;
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .infos-contact {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .reseaux { justify-content: flex-start; }

    .grille-2, .grille-3, .grille-4 { grid-template-columns: 1fr; }
    .pied-int { grid-template-columns: 1fr; }
    .liste-partenaires { columns: 1; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---- Héro : fond de l'original ------------------------------------------ */
.hero {
    background: var(--gris-fond) url('/images/slider.jpg') center/cover no-repeat;
}

/* ---- Accordéon ---------------------------------------------------------- */
/* Style « panel-modern » de l'original ; les trois panneaux sont fermés au
   chargement (réglage openitem vide dans la base). */
/* Panneaux DÉTACHÉS les uns des autres, chacun encadré (relevé sur les captures). */
.accordeon .panneau + .panneau { margin-top: 12px; }
.accordeon .panneau { border: 1px solid #e3e9ec; border-radius: 3px; overflow: hidden; }
.accordeon h3 { margin: 0; font-size: 1rem; }
.panneau-titre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    padding: 16px 20px;
    border: 0;
    /* Couleurs relevées au pixel : le bandeau reste clair même ouvert, il ne
       s'inverse PAS en bleu plein. */
    background: #f6fafb;
    font: inherit;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-align: left;
    color: #4b5981;
    cursor: pointer;
}
.panneau-titre:hover { background: #eef4f7; }
.panneau-titre[aria-expanded="true"] { background: #f6fafb; color: #4b5981; }
.chevron {
    flex: none;
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    /* fermé : chevron vers la DROITE — ouvert : vers le BAS (comme l'original) */
    transform: rotate(-45deg);
    transition: transform .25s;
}
.panneau-titre[aria-expanded="true"] .chevron { transform: rotate(45deg); }
.panneau-corps { padding: 20px 20px 6px; background: var(--blanc); }
.panneau-corps[hidden] { display: none; }

/* ---- Carrousel ---------------------------------------------------------- */
/* Deux vues en fondu (l'original : défilement auto 4 s, transition 600 ms).
   Les vues sont superposées ; seule l'active est visible et prend le flux. */
.carrousel { position: relative; }
.carrousel-piste { position: relative; }
.carrousel-vue {
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease;
}
.carrousel-vue.active {
    opacity: 1;
    visibility: visible;
}
/* Toutes les vues sauf l'active sortent du flux : la hauteur du bloc est celle
   de la vue affichée, sans saut au changement. */
.carrousel-piste .carrousel-vue:not(.active) {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
/* Les flèches d'origine sont de simples chevrons blancs, sans pastille ni fond coloré. Une ombre portée les garde visibles sur un fond clair. */
.carrousel-fleche {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.carrousel-fleche svg {
    width: 30px;
    height: 30px;
    fill: #fff;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, .28));
}
.carrousel-fleche:hover svg { fill: #e8e8e8; }
.carrousel-fleche.precedent { left: -8px; }
.carrousel-fleche.suivant { right: -8px; }
.carrousel-points {
    display: flex;
    justify-content: center;
    gap: 9px;
    margin-top: 18px;
}
.carrousel-points button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #dcdcdc;
    cursor: pointer;
}
.carrousel-points button[aria-selected="true"] { background: #fff; box-shadow: 0 0 0 1px #cfcfcf; }

/* ---- Mission ------------------------------------------------------------ */
.mission { font-size: 1.2rem; line-height: 1.75; }
.mission strong { font-weight: 700; }

@media (max-width: 991px) {
    /* Les flèches reviennent dans le cadre : plus de marge extérieure disponible. */
    .carrousel-fleche.precedent { left: 4px; }
    .carrousel-fleche.suivant { right: 4px; }
}

@media (max-width: 767px) {
    /* ÉCART ASSUMÉ : l'original masquait le carrousel sous 768 px (hidden_xs), ce qui
       faisait disparaître « Fujitsu Select Partner » et « Centre d'appels » sur
       téléphone. Ici les deux vues s'empilent et restent lisibles. */
    .carrousel-vue,
    .carrousel-piste .carrousel-vue:not(.active) {
        position: static;
        opacity: 1;
        visibility: visible;
    }
    .carrousel-vue + .carrousel-vue { margin-top: 38px; }
    .carrousel-fleche, .carrousel-points { display: none; }
}

/* Les vues gardent leur mise en page horizontale à toutes les largeurs : l'illustration
   se réduit au lieu de passer au-dessus du texte. Les deux sélecteurs doivent rester plus
   spécifiques que les règles de repli de .duo et .duo-inverse. */
.carrousel-vue.duo { grid-template-columns: 1fr 1fr; gap: 24px; }
.carrousel-vue.duo.duo-inverse .duo-media { order: 2; }
/* Les deux illustrations n'ont pas le même cadrage (608x483 et 521x652) : le plafond porte
   sur la hauteur, pour qu'elles occupent la même bande et que le fondu ne fasse pas sauter
   la hauteur du bloc. Centrées dans la colonne, jamais collées à un bord. */
.carrousel-vue .duo-media img {
    width: auto;
    max-width: 100%;
    max-height: 280px;
    margin-left: auto;
    margin-right: auto;
}

/* En dessous de cette largeur, la colonne de texte reprend la main sur l'illustration,
   qui devient trop étroite pour rester à parité. */
@media (max-width: 600px) {
    .carrousel-vue.duo { grid-template-columns: 1fr .62fr; gap: 14px; }
    .carrousel-vue .duo-texte h2 { font-size: 1.25rem; }
    .carrousel-vue .duo-texte p { font-size: .92rem; }
    .carrousel-vue .duo-texte .bouton { padding: 8px 16px; font-size: .9rem; }
}

/* ---- Bloc « image_content » (Notre mission) ----------------------------- */
/* Motif de l'addon SP Page Builder : l'image occupe la moitié GAUCHE de la pleine
   largeur, en image de fond (`contain`, calée à gauche, centrée verticalement), et
   le texte la moitié droite, à l'intérieur du conteneur.
   La section n'a ni fond ni padding propres dans l'original. */
.bloc-image-texte {
    position: relative;
    overflow: hidden;
}
.bloc-image {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 50%;
    background: url('/images/corporate.jpg') 50% 50% / cover no-repeat;
}
/* Le texte n'occupe pas toute la demi-largeur : il garde une marge intérieure de
   part et d'autre (relevé sur la capture — il commence ~55 px après la moitié et
   s'arrête ~55 px avant le bord du conteneur). */
.bloc-image-texte .bloc-texte {
    width: 50%;
    margin-left: auto;
    padding: 56px 55px 56px 55px;
}
.bloc-image-texte .bloc-texte h2 {
    margin-bottom: .7em;
    font-size: 2.1rem;
    font-weight: 400;
    color: #333;
}
/* La hauteur du bandeau vient du texte : sans garde-fou, un texte court laisserait
   l'image rognée. L'image d'origine fait 960 x 641 sur une demi-largeur de 585 px. */
.bloc-image-texte { min-height: 440px; }

@media (max-width: 991px) {
    /* L'image passe au-dessus du texte : à cette largeur, une demi-colonne
       d'illustration en `contain` devient illisible. */
    .bloc-image {
        position: static;
        width: 100%;
        height: 260px;
    }
    .bloc-image-texte { min-height: 0; }
    .bloc-image-texte .bloc-texte {
        width: 100%;
        margin-left: 0;
        padding: 34px var(--gouttiere);
    }
}

/* ---- Paddings des sections, valeurs de l'original ----------------------- */
/* services : 60px 0 60px — accordéon + carrousel : 50px 0 — clients : 50px 0 70px */
.section-accordeon { padding-top: 50px; padding-bottom: 50px; }
.section-accordeon .carrousel { margin-top: 44px; }
.section-accordeon { background: #f5f5f5; }
.clients { padding-top: 50px; padding-bottom: 70px; }

/* ---- Compléments relevés sur le rendu d'origine ------------------------- */
/* Liste à puces dans un bloc de service : le texte du bloc est centré, mais une
   liste centrée serait illisible — elle est donc centrée EN BLOC, texte à gauche. */
.liste-service {
    display: inline-block;
    margin: 0;
    padding-left: 1.1em;
    text-align: left;
}

/* Icône en tête de titre d'accordéon (marqueur, utilisateur, loupe). */
.panneau-icone {
    display: inline-flex;
    flex: none;
    margin-right: 9px;
}
.panneau-icone svg { width: 15px; height: 15px; fill: currentColor; }
.panneau-titre { justify-content: flex-start; }
/* Le chevron reste calé à droite malgré l'alignement à gauche du titre. */
.panneau-titre .chevron { margin-left: auto; }

/* Le titre « Nos services » est sombre, pas bleu (relevé au pixel). */
.titre-section h2 { color: #333; }
.titre-section p { color: #333; }

/* ---- Page contact ------------------------------------------------------- */
.grille-contact { align-items: start; }
.bloc-coordonnees h2 { margin-bottom: .2em; }
.bloc-coordonnees h3 { margin-bottom: 1em; color: var(--bleu-addon); }
.vcard-lien { margin-top: 22px; }
.mention-requis { font-size: .9rem; color: var(--texte-clair); }
.bloc-formulaire h3 { color: var(--bleu-addon); }
.bloc-formulaire h4 { margin-bottom: .4em; font-weight: 700; }
.actions-formulaire {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.actions-formulaire .bouton { flex: none; }

@media (max-width: 767px) {
    .actions-formulaire {
        flex-direction: column;
        align-items: stretch;   /* sinon la valeur desktop bride la largeur du bouton */
    }
}

/* ---- Pages métier (Infogérance, Matériel, Audit, Ingénierie, SAV) -------- */
/* Les quatre pages partagent le même gabarit : chapeau illustré, corps en listes,
   accroche illustrée, appel à l'action. */
.bloc-texte-long h3 {
    margin-top: 1.6em;
    color: var(--bleu-addon);
    font-size: 1.2rem;
}
.bloc-texte-long h3:first-child { margin-top: 0; }
.bloc-texte-long .liste-cochee ul {
    margin-top: .4em;
    margin-bottom: .2em;
    padding-left: 1.2em;
    list-style: disc;
}
.bloc-texte-long .liste-cochee ul { list-style: circle; }

/* L'illustration est un PNG détouré coupé net en bas : la section se colle au bloc suivant. */
.accroche { padding-bottom: 0; }

/* En colonne, l'illustration passe sous le texte pour rester au contact du bloc suivant,
   et cesse d'occuper toute la largeur : à 540 px de large elle écrase l'accroche. Sous
   400 px le plafond ne s'applique plus, la largeur disponible étant déjà inférieure. */
@media (max-width: 991px) {
    /* Le second sélecteur doit rester plus spécifique que la règle de repli de .duo-8-4,
       qui remet les trois pages en duo-inverse à order: 0. */
    .accroche .duo-media,
    .accroche .duo-8-4.duo-inverse .duo-media { order: 2; }
}
@media (max-width: 991px) {
    .accroche .duo-media img {
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Page « À propos » : le plafond porte sur la colonne entière, et non sur l'image seule,
   pour que le bouton posé dessous garde la largeur de l'illustration. */
@media (max-width: 991px) {
    .apropos .duo-media {
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
    }
}

.accroche-texte {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 200;
    line-height: 1.35;
}
.accroche-texte strong { font-weight: 800; }

.appel-action .appel-texte {
    margin-bottom: 1.2em;
    font-size: 1.35rem;
    font-weight: 200;
}

/* ---- Plan sans appel à un tiers (voir MAPS-SANS-TIERS.md) --------------- */
.carte {
    position: relative;
    display: flex;
    overflow: hidden;
    height: 460px;
}
/* Le cadre Google se pose PAR-DESSUS l'image, qui reste dans le flux : c'est elle qui
   dicte la hauteur du bloc, laquelle ne bouge donc pas au clic. Ne pas retirer l'image. */
.carte iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.carte__plan {
    /* « cover » depuis le centre : l'adresse est au centre de l'image, elle reste
       visible quelle que soit la forme du conteneur. */
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.carte__epingle {
    position: absolute;
    top: 50%;
    left: 50%;
    /* la pointe de l'épingle sur le point, pas son centre */
    transform: translate(-50%, -100%);
    fill: var(--bleu);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
    pointer-events: none;
}
.carte__credit {
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 2px 6px;
    font-size: 10px;
    color: #555;
    background: rgba(255, 255, 255, .75);
}
.carte__credit a { color: inherit; }
.carte__voile {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 18px;
    text-align: center;
    background: rgba(247, 252, 255, .72);
    opacity: 0;
    transition: opacity .25s ease;
}
/* Au survol ET au clavier : sans `focus-within`, le bouton serait atteignable en
   tabulation mais invisible. */
.carte:hover .carte__voile,
.carte:focus-within .carte__voile { opacity: 1; }
/* Sur écran tactile il n'y a pas de survol : le voile reste affiché, sinon ni le
   bouton ni la mention Google ne seraient jamais visibles. */
@media (hover: none) {
    .carte__voile { opacity: 1; }
}
.carte__adresse {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 700;
    color: #2b2b2b;
}
.carte__bouton {
    padding: 9px 20px;
    border: 0;
    border-radius: 4px;
    font: inherit;
    font-size: 14px;
    color: #fff;
    background: var(--bleu);
    cursor: pointer;
}
.carte__bouton:hover { background: var(--bleu-fonce); }
.carte__mention {
    /* Discret mais lisible : c'est l'information qui permet au visiteur de choisir. */
    max-width: 34ch;
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: #444;
}

@media (max-width: 767px) {
    .carte { height: 340px; }
}

/* ---- Conteneur de l'animation « offres associées » ---------------------- */
/* La galaxie est servie dans son propre cadre (offres/offres.htm) et attend ces
   deux classes de la feuille du site.
   `.adapt-content` garde une gouttière de 15 px même sur petit écran : les
   positions des pastilles sont calibrées pour cette largeur (contrairement à
   `.conteneur`, qui passe à 24 px sous 800 px). Ne pas les fusionner. */
.adapt-content {
    margin: auto;
    max-width: var(--largeur);
    padding: 0 15px;
}
.animBloc { position: relative; }

/* ---- Cadre des offres associées ---------------------------------------- */
.offres-cadre {
    display: block;
    width: 100%;
    border: 0;
}

/* ---- Page 404 ----------------------------------------------------------- */
/* padding-top / padding-bottom séparés : un raccourci remettrait à zéro les paddings
   latéraux du conteneur, posé sur le même élément. */
.page404 {
    padding-top: 20px;
    padding-bottom: 30px;
}
.code404 {
    margin: 0 0 .1em;
    font-size: 6rem;
    font-weight: 800;
    line-height: 1;
    color: var(--bleu-addon);
}
.page404 .bouton { margin: 4px 6px; }
.bouton-secondaire {
    background: transparent;
    border-color: var(--bleu-addon);
    color: var(--bleu-addon);
}
.bouton-secondaire:hover, .bouton-secondaire:focus-visible {
    background: var(--bleu-addon);
    border-color: var(--bleu-addon);
    color: #fff;
}

/* ---- Section à fond photographique (pages SAV et Matériel) -------------- */
/* images/2020/04/19/69.jpg est le fond posé par plusieurs sections de l'original.
   Un voile clair garde le texte lisible par-dessus. */
.section-fond {
    position: relative;
    background: url('/images/2020/04/19/69.jpg') center/cover no-repeat;
}
.section-fond::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .82);
}
.section-fond > * { position: relative; }

.texte-justifie { text-align: justify; }

/* Section « 8,4 » : deux tiers de texte, un tiers d'image. */
.duo-8-4 { grid-template-columns: 2fr 1fr; }
.duo-8-4.duo-inverse .duo-media { order: 2; }

@media (max-width: 991px) {
    .duo-8-4 { grid-template-columns: 1fr; }
    .duo-8-4.duo-inverse .duo-media { order: 0; }
}

/* ---- Section « 3,9 » (page Infogérance) --------------------------------- */
.colonnes-3-9 {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 34px;
    align-items: start;
}

/* ---- Onglets ------------------------------------------------------------ */
.onglets-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: -1px;
}
.onglets-nav button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    border: 1px solid #dde3e8;
    border-bottom-color: transparent;
    border-radius: 4px 4px 0 0;
    background: #eef2f5;
    font: inherit;
    font-weight: 700;
    font-size: .95rem;
    color: #4a4a4a;
    cursor: pointer;
}
.onglets-nav button svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.onglets-nav button:hover { color: var(--bleu-addon); }
.onglets-nav button[aria-selected="true"] {
    background: var(--blanc);
    color: var(--bleu-addon);
    border-bottom-color: var(--blanc);
}
.onglets-corps {
    padding: 22px 22px 6px;
    border: 1px solid #dde3e8;
    border-radius: 0 4px 4px 4px;
    background: var(--blanc);
}
.onglets-corps [hidden] { display: none; }

@media (max-width: 991px) {
    .colonnes-3-9 { grid-template-columns: 1fr; }
    /* Les onglets deviennent des blocs empilés : trois libellés longs côte à côte
       ne tiennent pas, et une barre qui déborde masquerait le troisième. */
    .onglets-nav { flex-direction: column; gap: 0; margin-bottom: 0; }
    .onglets-nav button {
        border-radius: 0;
        border-bottom-color: #dde3e8;
        text-align: left;
    }
    .onglets-nav button[aria-selected="true"] { border-bottom-color: #dde3e8; }
    .onglets-corps { border-radius: 0 0 4px 4px; }
}

/* ---- Frise de logos (page Matériel) ------------------------------------- */
/* Même mécanique de fondu que le carrousel de l'accueil, mais sur des bandeaux
   d'images. Celui-ci n'était pas masqué sur mobile (hidden_xs = 0) : ses vues
   ne s'empilent donc pas, le fondu reste actif à toutes les largeurs. */
.carrousel-frise { margin: 26px 0 34px; }
.carrousel-frise img { display: block; width: 100%; }

@media (max-width: 767px) {
    .carrousel-frise .carrousel-vue,
    .carrousel-frise .carrousel-piste .carrousel-vue:not(.active) {
        position: absolute;
        opacity: 0;
        visibility: hidden;
    }
    .carrousel-frise .carrousel-piste .carrousel-vue.active {
        position: static;
        opacity: 1;
        visibility: visible;
    }
    .carrousel-frise .carrousel-vue + .carrousel-vue { margin-top: 0; }
    .carrousel-frise .carrousel-points { display: flex; }
}

/* Bouton vert du carrousel (sppb-btn-success de l'original). */
.bouton-vert {
    background: #23cf5f;
    border-color: transparent;
}
.bouton-vert:hover, .bouton-vert:focus-visible {
    background: #1cb551;
    border-color: transparent;
}

/* Bouton pleine largeur, collé sous son illustration (page « A propos »). */
.bouton-large {
    display: block;
    margin-top: 0;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.duo-media .bouton-large { width: 100%; }