/* =========================================================================
   DIGIPROD — feuille unique du site.
   ========================================================================= */

:root {
    --orange: #ea5b0c;
    --orange-fonce: #c94c09;
    /* rgba(0, 187, 179) — bandeau, pictogrammes, séparateurs en vagues */
    --turquoise: #00bbb3;
    /* rgba(73, 73, 73) */
    --texte: #494949;
    --titre: #000000;
    /* rgba(247, 252, 255) et rgba(238, 246, 251) */
    --fond-clair: #f7fcff;
    --fond-panneau: #eef6fb;
    --gris-bord: #e3e9ee;

    --largeur: 1170px;
    --hauteur-entete: 60px;
}

/* Poppins et Maven Pro sont servies depuis site/fonts : aucun appel à un tiers.
   Sous-ensemble latin de base uniquement, le site étant en français.
   Les deux familles sont sous licence SIL OFL, donc redistribuables. */
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins-300.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins-400.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins-700.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

/* Maven Pro est une police variable chez Google : un seul fichier couvre toutes
   les graisses. D'où la plage `400 700` — deux @font-face pointeraient sur le
   même octet. */
@font-face {
    font-family: 'Maven Pro';
    src: url('../fonts/mavenpro-var.woff2') format('woff2');
    font-weight: 400 700;
    font-display: swap;
}

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

html {
    scroll-behavior: smooth;
    /* L'en-tête devient fixe : sans cette marge, une ancre atterrit dessous. */
    scroll-padding-top: calc(var(--hauteur-entete) + 10px);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    margin: 0;
    font-family: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--texte);
    background: #ffffff;
}

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

a {
    color: var(--orange);
}

h1,
h2,
h3 {
    font-family: 'Maven Pro', 'Poppins', 'Segoe UI', system-ui, sans-serif;
    color: var(--titre);
    font-weight: 700;
    line-height: 1.25;
}

.conteneur,
.adapt-content {
    max-width: var(--largeur);
    margin: 0 auto;
    padding: 0 15px;
}

/* Bouton — plein, angles droits */
.bouton {
    display: inline-block;
    padding: 14px 30px;
    background: var(--orange);
    color: #ffffff;
    font-family: 'Maven Pro', 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: background 0.25s;
}

.bouton:hover,
.bouton:focus-visible {
    background: var(--orange-fonce);
}

/* ============================ BANDEAU + EN-TÊTE ========================== */

.bandeau {
    background: var(--turquoise);
    color: #ffffff;
    font-size: 14px;
}

.bandeau-in {
    display: flex;
    justify-content: flex-end;
    gap: 28px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.bandeau-lien {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    text-decoration: none;
}

.bandeau-lien:hover {
    text-decoration: underline;
}

.ico {
    width: 15px;
    height: 15px;
    fill: currentColor;
    flex: none;
}

.entete {
    background: #ffffff;
    border-bottom: 1px solid transparent;
}

/* Posée par site.js au-delà du premier écran : l'en-tête suit le défilement. */
.entete.fige {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    border-bottom-color: var(--gris-bord);
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.08);
}

.entete-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: var(--hauteur-entete);
}

.logo {
    flex: none;
    display: flex;
    align-items: center;
}

.logo img {
    display: block;
    width: 166px;
    height: auto;
}

.menu ul {
    display: flex;
    align-items: center;
    /* Corps réduit et espacement resserré : sans cela, la dernière entrée du menu
       retombe seule sous la barre. */
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu a {
    display: block;
    padding: 6px 0;
    color: #333333;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}

.menu a:hover,
.menu a:focus-visible {
    color: var(--orange);
}

.menu a.selected {
    color: var(--orange);
    border-bottom-color: var(--orange);
}

.burger {
    display: none;
    position: relative;
    width: 46px;
    height: 46px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

/* Barres en position absolue : empiler par marges rend la croix impossible à
   caler (l'écart réel entre barres doit être celui de la translation). */
.burger span {
    position: absolute;
    left: 11px;
    width: 24px;
    height: 2px;
    background: #333333;
    transition: transform 0.25s, opacity 0.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);
}

/* =============================== HÉRO =================================== */

.hero {
    position: relative;
    background: url('../images/herder11.jpg') center / cover no-repeat;
    padding: 40px 0 110px;
}

.hero-in {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.hero-img img {
    display: block;
    margin: 0 auto;
    max-width: 345px;
}

.hero h1 {
    margin: 0 0 18px;
    font-size: 40px;
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hero-accroche {
    margin: 0 0 22px;
    color: var(--orange);
    font-weight: 700;
    font-size: 18px;
}

.hero-liste {
    margin: 0 0 30px;
    padding-left: 22px;
}

.hero-liste li {
    margin-bottom: 4px;
}

/* Séparateurs en vagues, teintés turquoise : ils débordent volontairement de la
   section. */
.vague {
    position: absolute;
    left: 0;
    width: 100%;
    line-height: 0;
    pointer-events: none;
}

.vague svg {
    display: block;
    width: 100%;
    height: 100px;
}

.vague path {
    fill: var(--turquoise);
}

/* La rotation va sur le séparateur du bas, pas sur celui du haut : les tracés ont
   leur masse pleine du côté y = 0 et l'échancrure vers le bas, il faut donc les
   retourner pour qu'ils bordent un bas de section. */
.vague-bas {
    bottom: 0;
}

.vague-bas svg {
    transform: rotate(180deg);
}

.vague-haut {
    top: 0;
}

/* Le séparateur passe par-dessus le fond de la section suivante, sinon il
   disparaît sous elle. */
.vague-bas,
.vague-haut {
    z-index: 2;
}

/* ====================== BANDEAU DES TYPES DE DOCUMENTS ================== */

.documents {
    background: #ffffff;
    padding: 40px 0 80px;
    text-align: center;
    overflow: hidden;
}

.documents h2 {
    margin: 0 0 10px;
    font-size: 30px;
    text-transform: uppercase;
}

.documents-sous {
    margin: 0 0 40px;
    color: var(--orange);
    font-size: 20px;
}

/* Carrousel à deux couches : 6 vignettes, 5 puis 4 en dessous, une avance toutes
   les 5 s, fondu montant de 3 s, pause au survol.

   Les vignettes ne sont pas dimensionnées : elles se partagent la largeur et
   object-fit: contain les contient dans la hauteur de la fenêtre, qui commande
   donc leur taille apparente. */
.carrousel-fenetre {
    position: relative;
    height: 180px;
    overflow: hidden;
}

.carrousel-couche {
    position: absolute;
    inset: 0;
    display: flex;
}

.carrousel-couche img {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    padding: 0 10px;
    object-fit: contain;
}

.carrousel-couche.entre {
    animation: fondu-entrant 3s both;
}

.carrousel-couche.sort {
    animation: fondu-sortant 3s both;
}

@keyframes fondu-entrant {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes fondu-sortant {
    from {
        opacity: 1;
        transform: none;
    }

    to {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
}

/* ========================== LES QUATRE MÉTIERS ========================== */

/* Seul le fond de la section court sur toute la largeur de la fenêtre : le contenu
   reste dans le conteneur, l'image occupant une demi-largeur de conteneur. */
.metier {
    position: relative;
    background: var(--fond-clair);
}

.metier-inverse {
    background: #ffffff;
}

.metier-in {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    /* Surtout pas `stretch` : la colonne de texte doit garder sa hauteur propre
       et rester centrée face à l'image, sinon elle s'étire et le bloc se décale. */
    align-items: center;
    padding-top: 60px;
    padding-bottom: 60px;
}

/* Une section sur deux présente l'image en premier. L'ordre du HTML reste
   texte-puis-image dans les quatre cas : c'est l'ordre de lecture. */
.metier-inverse .metier-txt {
    order: 2;
}

.metier h2 {
    margin: 0 0 18px;
    font-size: 30px;
}

.metier p {
    margin: 0 0 18px;
    font-size: 15px;
    text-align: justify;
}

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

.metier-vague {
    padding-bottom: 60px;
}

/* ============================== AVANTAGES =============================== */

.avantages {
    position: relative;
    padding: 110px 0;
    background: url('../images/herder11.jpg') center / cover no-repeat;
    /* Parallaxe. Ignoré sur iOS, sans conséquence visuelle. */
    background-attachment: fixed;
}

.avantages h2 {
    margin: 0 0 40px;
    font-size: 34px;
    text-align: center;
    text-transform: uppercase;
}

.accordeon h3 {
    margin: 0 0 14px;
    font-size: inherit;
}

.accordeon button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 18px 24px;
    background: var(--fond-panneau);
    border: 1px solid var(--gris-bord);
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #3a3a3a;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s;
}

.accordeon button:hover {
    background: #e4eff7;
}

/* Le « + » bascule avec aria-expanded : l'icône suit l'état de son panneau. */
.accordeon button::after {
    content: '';
    flex: none;
    width: 16px;
    height: 16px;
    background:
        linear-gradient(var(--texte), var(--texte)) center / 100% 2px no-repeat,
        linear-gradient(var(--texte), var(--texte)) center / 2px 100% no-repeat;
    transition: transform 0.25s;
}

.accordeon button[aria-expanded="true"]::after {
    transform: rotate(45deg);
}

.panneau {
    padding: 6px 24px 22px;
    background: #ffffff;
    border: 1px solid var(--gris-bord);
    border-top: 0;
    margin: -14px 0 14px;
}

.panneau p {
    margin: 12px 0 0;
}

/* ============================ PAGES INTÉRIEURES ========================== */

.page {
    padding: 40px 0 70px;
}

.page h1 {
    margin: 0 0 10px;
    font-size: 40px;
    font-weight: 400;
}

.page h1 + .article,
.page h1 ~ .article,
.page h1 ~ .contact {
    border-top: 1px solid var(--gris-bord);
    padding-top: 30px;
}

.article h2 {
    margin: 34px 0 14px;
    font-size: 24px;
}

.article p {
    margin: 0 0 16px;
}

.article img {
    display: block;
    width: 100%;
}

.article hr {
    margin: 26px 0;
    border: 0;
    border-top: 1px solid var(--gris-bord);
}

.article-centre {
    text-align: center;
}

.ml-responsable {
    margin-top: 40px;
}

.sous-titre {
    font-weight: 400;
}

/* Le trait sous le titre, que les autres pages tiennent de `.article`. */
.offres {
    max-width: var(--largeur);
    margin: 0 auto;
    padding-top: 30px;
    border-top: 1px solid var(--gris-bord);
}

/* Hauteur de départ seulement : site.js la recale sur le contenu du cadre. */
.offres-cadre {
    display: block;
    width: 100%;
    height: 700px;
    border: 0;
}

/* ============================== CONTACT ================================= */

.contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: start;
}

/* ----- Plan sans appel à un tiers (voir MAPS-SANS-TIERS.md) ----- */

.carte {
    position: relative;
    display: flex;
    overflow: hidden;
    height: 700px;
}

/* 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 au chargement du plan. */
.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
       donc visible quelle que soit la forme de la colonne. */
    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(--orange);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
    pointer-events: none;
}

.carte__credit {
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 2px 6px;
    font-size: 10px;
    color: #555555;
    background: rgba(255, 255, 255, 0.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, 0.72);
    opacity: 0;
    transition: opacity 0.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;
    color: var(--titre);
    font-weight: 700;
}

.carte__bouton {
    padding: 9px 20px;
    border: 0;
    font: inherit;
    font-size: 14px;
    color: #ffffff;
    background: var(--orange);
    cursor: pointer;
}

.carte__bouton:hover {
    background: var(--orange-fonce);
}

.carte__mention {
    /* Volontairement discret mais lisible : c'est l'information qui permet au
       visiteur de choisir, elle ne doit pas être illisible pour autant. */
    max-width: 34ch;
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--texte);
}

.contact-form {
    padding: 24px;
    border: 1px solid var(--gris-bord);
}

.contact-adresse {
    margin: 0 0 24px;
    font-style: normal;
    line-height: 1.9;
}

.contact-form h2 {
    margin: 0 0 8px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--gris-bord);
    font-size: 26px;
    font-weight: 400;
}

.requis {
    color: var(--orange);
}

.requis-note {
    margin: 20px 0 24px;
    font-weight: 700;
    text-align: center;
}

.champ {
    display: grid;
    grid-template-columns: 130px 1fr;
    align-items: start;
    gap: 16px;
    margin: 0 0 18px;
}

.champ label {
    padding-top: 10px;
    font-weight: 700;
    text-align: right;
}

.champ input,
.champ textarea {
    width: 100%;
    padding: 9px 12px;
    font: inherit;
    color: var(--texte);
    border: 1px solid #b9c3cc;
    border-radius: 0;
    background: #ffffff;
}

.champ input:focus,
.champ textarea:focus {
    outline: 2px solid var(--turquoise);
    outline-offset: 1px;
}

.champ textarea {
    min-height: 125px;
    resize: vertical;
}

.champ-envoi {
    grid-template-columns: 130px 1fr;
}

.champ-envoi .bouton {
    justify-self: start;
}

/* Pot de miel : hors écran plutôt que display:none, que certains robots détectent. */
.pot-de-miel {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-retour {
    margin: 16px 0 0;
    font-weight: 700;
    text-align: center;
}

.form-retour.ok {
    color: #1c7c3a;
}

.form-retour.ko {
    color: #c0392b;
}

/* ============================== PIED DE PAGE ============================ */

.pied {
    padding: 60px 0 50px;
    background: #f8f8f8;
    font-size: 15px;
}

.pied-in {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr;
    gap: 30px;
    align-items: start;
}

.pied h2 {
    margin: 0 0 22px;
    font-size: 20px;
}

.pied-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.pied ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pied li {
    margin-bottom: 10px;
}

.pied a {
    color: #6b7480;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 14px;
}

.pied a:hover {
    color: var(--orange);
}

.pied-groupe {
    text-align: center;
}

.pied-groupe img {
    display: inline-block;
    width: 160px;
}

.pied-groupe address {
    margin-top: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.7;
    color: #4a4a4a;
}

/* ============================== RESPONSIVE ============================== */

/* Sur petit écran, 15 px ne suffisent pas : le texte vient coller aux bords.
   La gouttière s'élargit — même valeur que sur SERVITECH. Elle ne vise que
   `.conteneur` : `.adapt-content` n'est employée que dans le cadre des offres,
   dont les positions de pastilles sont calibrées sur sa largeur. */
@media (max-width: 800px) {
    .conteneur {
        padding: 0 24px;
    }
}

/* Le menu passe au burger avant que les sept entrées ne se marchent dessus. */
@media (max-width: 1099px) {
    .burger {
        display: block;
        order: 3;
    }

    /* Le panneau est enfant de .entete, qui devient `position: fixed` au
       défilement : il le suit donc et reste atteignable. Le sortir de
       l'en-tête le laisserait bloqué en haut de page. */
    .menu {
        display: none;
        order: 4;
        width: 100%;
        max-height: calc(100vh - var(--hauteur-entete) - 20px);
        overflow-y: auto;
        border-top: 1px solid var(--gris-bord);
    }

    .menu.ouvert {
        display: block;
    }

    .entete-in {
        flex-wrap: wrap;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .menu ul {
        display: block;
        padding: 8px 0;
    }

    .menu a {
        padding: 11px 4px;
        font-size: 15px;
    }

    .menu a.selected {
        border-bottom-color: transparent;
    }
}

@media (max-width: 991px) {
    .hero-in,
    .contact {
        grid-template-columns: 1fr;
    }

    .hero {
        padding: 30px 0 80px;
    }

    .hero-img {
        order: 2;
    }

    .hero h1 {
        font-size: 30px;
    }

    .carte {
        height: 380px;
    }

    /* Le nombre de vignettes visibles est géré en JS : 5 ici, 4 sous 567 px. Seule
       leur gouttière est réglée ici. */
    .carrousel-fenetre {
        height: 155px;
    }

    .carrousel-couche img {
        padding: 0 9px;
    }

    /* En colonne, l'image passe au-dessus du texte dans les deux sens, sinon
       une section sur deux commencerait par son texte et l'autre par sa photo. */
    .metier-in {
        grid-template-columns: 1fr;
        gap: 26px;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .metier-img {
        order: 1;
    }

    .metier-txt,
    .metier-inverse .metier-txt {
        order: 2;
    }

    .pied-in {
        grid-template-columns: 1fr 1fr;
    }

    /* Le bloc partenaires ne dispose plus que d'une demi-largeur : à trois
       sous-colonnes, « Omicrone Bureautique » passe sur deux lignes. Les trois
       listes se suivent alors d'un seul tenant — même rythme que la colonne
       « Liens », comme sur SERVITECH. Deux colonnes laisseraient la troisième
       liste décalée sous la première. */
    .pied-cols {
        display: block;
    }

    .pied-groupe {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767px) {
    .bandeau-in {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .vague svg {
        height: 50px;
    }

    .hero,
    .avantages {
        /* `fixed` sur mobile provoque des sauts de fond au défilement */
        background-attachment: scroll;
    }

    .avantages {
        padding: 70px 0;
    }

    .documents h2 {
        font-size: 22px;
    }

    .avantages h2 {
        font-size: 24px;
    }

    .metier h2 {
        font-size: 24px;
    }

    .carrousel-fenetre {
        height: 130px;
    }

    .carrousel-couche img {
        padding: 0 6px;
    }

    .accordeon button {
        padding: 14px 16px;
        font-size: 16px;
    }

    .panneau {
        padding: 6px 16px 18px;
    }

    /* Libellés au-dessus des champs : à cette largeur, une colonne de 130 px
       ne laisse plus rien à la saisie. */
    .champ,
    .champ-envoi {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .champ label {
        padding-top: 0;
        text-align: left;
    }

    .pied-in,
    .pied-cols {
        grid-template-columns: 1fr;
    }

    .offres-cadre {
        height: 560px;
    }

    .page h1,
    .hero h1 {
        font-size: 26px;
    }
}