/* ==========================================================================
   www.allmaint.fr : feuille de style unique
   Règle du site : aucun style dans les pages (ni attribut style, ni balise <style>).
   Couleurs, police et composants alignés sur allmaint.com (styles.css,
   stylesmain.css) : mêmes noms de variables, mêmes valeurs.
   ========================================================================== */

/* 1. Palette et typographie */
:root {
    /* Identiques à styles.css d'allmaint.com */
    --bleu:          #3A4EB1;  /* en-tête, pied de page, bouton « Ouvrir » */
    --bleu-survol:   #2C3C8C;
    --bleu-lien:     #386487;  /* liens, titres de section */
    --bleu-accent:   #1E3D7C;
    --orange:        #FE5900;  /* orange de marque : grand titre */
    --orange-bouton: #C3521D;  /* boutons (contraste AA) */
    --orange-survol: #8F3A11;
    --orange-clair:  #FFC08A;  /* numéro de téléphone sur fond bleu (AA) */
    --texte:         #3A3A3A;
    --texte-doux:    #656464;
    --ligne:         #CFCFCF;
    --blanc:         #FFFFFF;

    /* Repris des autres feuilles d'allmaint.com */
    --fond:          #EDF0F7;  /* fond « neutre clair », variante active */
    --carte-teinte:  #F6F9FD;  /* cartes légèrement teintées (.carte-logiciel) */
    --saas-haut:     #E9F1FB;  /* dégradé de la famille SaaS (.famille-saas) */
    --erreur:        #B00020;

    --police: system-ui, -apple-system, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;
    --largeur: 75rem;          /* 1200 px, comme allmaint.com */
}

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

html {
    -webkit-text-size-adjust: 100%;
    background: var(--fond);
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--police);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--texte);
}

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

a {
    color: var(--bleu-lien);
    text-underline-offset: .15em;
}

a:hover {
    color: var(--bleu-accent);
}

a[href^="tel:"] {
    white-space: nowrap;
}

:focus-visible {
    outline: 3px solid var(--orange-bouton);
    outline-offset: 2px;
}

h1,
h2,
h3 {
    margin: 0 0 .6em;
    line-height: 1.25;
    text-wrap: balance;
}

h2 {
    color: var(--bleu-lien);
}

h3 {
    color: var(--bleu-accent);
}

p {
    margin: 0 0 1em;
}

.conteneur {
    width: min(100% - 2rem, var(--largeur));
    margin-inline: auto;
}

/* Texte réservé aux lecteurs d'écran */
.sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.lien-evitement {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 20;
    padding: .6rem 1rem;
    border-radius: 5px;
    background: var(--bleu-accent);
    color: var(--blanc);
}

.lien-evitement:focus {
    top: 1rem;
    color: var(--blanc);
}

/* 3. Boutons : l'orange est réservé aux appels à l'action, comme sur allmaint.com */
.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: .6rem 1.25rem;
    border: 1px solid var(--orange-bouton);
    border-radius: 5px;
    background: var(--orange-bouton);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .18);
    color: var(--blanc);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background-color .2s, border-color .2s;
}

.bouton:hover {
    border-color: var(--orange-survol);
    background: var(--orange-survol);
    color: var(--blanc);
}

.bouton--grand {
    min-height: 3.1rem;
    padding: .7rem 1.1rem;
}

/* 4. En-tête : le bandeau bleu d'allmaint.com */
.entete {
    background: var(--bleu);
    color: var(--blanc);
}

.entete__barre {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 4.75rem;
    padding: .5rem 0;
}

/* La marque et le bouton gardent leur taille : c'est le reste qui s'adapte */
.marque {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: .65rem;
    margin-right: auto;
    color: var(--blanc);
    text-decoration: none;
}

.marque:hover {
    color: var(--blanc);
}

.marque img {
    width: 3.25rem;
}

/* Même écriture que dans l'application : « all » blanc, « MAINT » orangé */
.marque__nom {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
}

.marque__maint {
    color: var(--orange-clair);
}

.marque__nom small {
    display: block;
    margin-top: .1rem;
    color: rgba(255, 255, 255, .8);
    font-size: .8125rem;
    font-weight: 400;
}

.nav {
    display: none;
}

.nav ul {
    display: flex;
    gap: .3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav a {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: 5px;
    color: var(--blanc);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s, border-color .2s;
}

.nav a:hover {
    border-color: rgba(255, 255, 255, .45);
    background: var(--bleu-survol);
    color: var(--blanc);
}

/* « Des questions ? » au-dessus du numéro, comme sur allmaint.com */
.entete__tel {
    display: none;
    flex-shrink: 0;
    margin: 0;
    line-height: 1.25;
    text-align: right;
}

.entete__tel span {
    display: block;
    color: rgba(255, 255, 255, .8);
    font-size: .86rem;
}

.entete__tel a {
    color: var(--orange-clair);
    font-size: 1.12rem;
    font-weight: 700;
    text-decoration: none;
}

.entete__tel a:hover {
    color: var(--orange-clair);
    text-decoration: underline;
}

.entete :focus-visible {
    outline-color: var(--blanc);
}

.bouton--entete {
    flex-shrink: 0;
    min-height: 2.5rem;
    padding: .45rem .85rem;
    border-color: rgba(255, 255, 255, .85);
    font-size: .9375rem;
}

.bouton--entete:hover {
    border-color: rgba(255, 255, 255, .95);
}

/* Très petits écrans : le logo seul (il porte déjà « all MAINT »),
   le nom reste lu par les lecteurs d'écran */
@media (max-width: 23.99rem) {
    .marque__nom {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
    }
}

/* 5. Contenu : des blocs blancs sur fond clair, comme les sections d'allmaint.com */
.principal {
    padding: 1.25rem 0 1.5rem;
}

.carte {
    margin: 0 0 1.5rem;
    padding: 1.35rem 1.1rem;
    border: 1px solid var(--ligne);
    border-radius: 10px;
    background: var(--blanc);
    box-shadow: 0 1px 3px rgba(31, 41, 84, .06);
}

.carte > h2 {
    max-width: 40ch;
    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem);
}

.section__intro {
    max-width: 44em;
}

.section__lien {
    margin: 0;
}

/* 6. Ouverture et accès client */
.intro__grille {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
}

.intro h1 {
    max-width: 20ch;
    color: var(--orange);
    font-size: clamp(1.65rem, 1.2rem + 1.7vw, 2.3rem);
}

.intro__chapo {
    max-width: 38em;
    font-size: 1.0625rem;
}

.intro__points {
    display: grid;
    gap: .45rem;
    margin: 1.25rem 0 1.75rem;
    padding: 0;
    list-style: none;
}

/* Le petit trait orange reprend celui du logo */
.intro__points li {
    position: relative;
    padding-left: 1.4rem;
}

.intro__points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .78em;
    width: .75rem;
    height: 3px;
    background: var(--orange);
}

.intro__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.25rem;
    margin: 0;
    color: var(--texte-doux);
}

.intro__actions span a {
    font-weight: 700;
}

/* Cadre « Accès client » : la carte de la famille SaaS d'allmaint.com */
.acces {
    container-type: inline-size; /* la barre d'adresse s'adapte à la largeur du cadre */
    padding: 1.4rem 1.25rem 1.2rem;
    border: 1px solid var(--bleu-lien);
    border-radius: 10px;
    background: linear-gradient(180deg, var(--saas-haut) 0%, var(--carte-teinte) 100%);
}

.acces h2 {
    margin-bottom: .6rem;
    color: var(--bleu-accent);
    font-size: 1.35rem;
}

.acces h2::after {
    content: "";
    display: block;
    width: 2.5rem;
    height: 3px;
    margin-top: .5rem;
    background: var(--orange);
}

.acces__label {
    display: block;
    margin: 1rem 0 .45rem;
    font-weight: 700;
}

/* Barre d'adresse : https:// [ votre-espace ] .allmaint.fr [Ouvrir]
   - cadre étroit : « Ouvrir » passe sur toute la largeur, sous l'adresse ;
   - sans « field-sizing » (Firefox, Safari) : le champ occupe la place, aligné à droite
     contre « .allmaint.fr », et « https:// » reste masqué ;
   - avec (Chrome, Edge) : le champ prend la largeur du texte saisi.
   Le texte saisi ne renvoie jamais « .allmaint.fr » à la ligne : il défile dans le champ. */
.barre-url {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    overflow: hidden;
    border: 1px solid var(--ligne);
    border-radius: 6px;
    background: var(--blanc);
}

.barre-url:focus-within {
    outline: 3px solid var(--orange-bouton);
    outline-offset: 2px;
}

.barre-url__debut,
.barre-url__fin {
    display: flex;
    align-items: center;
    color: var(--texte-doux);
    white-space: nowrap;
}

.barre-url__debut {
    display: none;
    padding-left: .85rem;
}

.barre-url__fin {
    padding-right: .85rem;
}

.barre-url__champ {
    min-width: 0;
    min-height: 3.1rem;
    padding: 0 .1rem 0 .85rem;
    border: 0;
    background: transparent;
    color: var(--texte);
    font: inherit;
    font-weight: 700;
    text-align: right;
}

/* La partie à saisir se distingue de « https:// » et « .allmaint.fr », qui sont fixes */
.barre-url__champ::placeholder {
    color: var(--bleu-lien);
    font-style: italic;
    font-weight: 400;
    opacity: 1;
}

.barre-url__champ:focus {
    outline: none;
}

.barre-url__bouton {
    grid-column: 1 / -1;
    min-height: 3rem;
    padding: 0 1.25rem;
    border: 0;
    background: var(--bleu);
    color: var(--blanc);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s;
}

.barre-url__bouton:hover {
    background: var(--bleu-survol);
}

@container (min-width: 21rem) {
    .barre-url {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    .barre-url__bouton {
        grid-column: auto;
    }
}

@supports (field-sizing: content) {
    .barre-url {
        grid-template-columns: minmax(5ch, max-content) 1fr;
    }

    .barre-url__champ {
        field-sizing: content;
        text-align: left;
    }

    @container (min-width: 18.5rem) {
        .barre-url {
            grid-template-columns: auto minmax(5ch, max-content) 1fr;
        }

        .barre-url__debut {
            display: flex;
        }

        .barre-url__champ {
            padding-left: .1rem;
        }
    }

    @container (min-width: 24.5rem) {
        .barre-url {
            grid-template-columns: auto minmax(5ch, max-content) 1fr auto;
        }
    }

    /* entre 21 et 24,5rem, le bouton reste sous l'adresse pour laisser voir « https:// » */
    @container (min-width: 21rem) and (max-width: 24.49rem) {
        .barre-url__bouton {
            grid-column: 1 / -1;
        }
    }
}

.acces__message {
    margin: .55rem 0 .25rem;
    font-size: .9375rem;
}

.acces__message:empty {
    margin: 0 0 .8rem;
}

.acces--erreur .barre-url {
    border-color: #c00;
    box-shadow: 0 0 0 3px #ffd6d6;
}

.acces--erreur .acces__message {
    color: var(--erreur);
    font-weight: 600;
}

.acces__memo {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
    font-size: .9375rem;
    cursor: pointer;
}

.acces__memo[hidden] {
    display: none;
}

.acces__memo input {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    accent-color: var(--bleu);
}

.acces__aide {
    margin: .25rem 0 0;
    padding-top: .85rem;
    border-top: 1px solid rgba(56, 100, 135, .25);
    color: var(--texte-doux);
    font-size: .9375rem;
}

.acces__aide a {
    font-weight: 700;
}

/* 7. Fonctionnalités et captures */
.fonctions {
    display: grid;
    gap: 1rem;
    margin: 1.75rem 0;
}

.fonctions > div {
    padding: 15px 17px;
    border: 1px solid var(--ligne);
    border-radius: 9px;
    background: var(--carte-teinte);
}

.fonctions dt {
    margin-bottom: .3rem;
    color: var(--bleu-lien);
    font-weight: 700;
}

.fonctions dd {
    margin: 0;
    font-size: .96rem;
    line-height: 1.55;
}

/* Les captures sont les seules images de la page : bord fin, ombre légère, clic pour agrandir */
.capture {
    margin: 1.5rem 0;
}

.capture__lien {
    display: block;
    border-radius: 8px;
}

.capture img {
    border: 1px solid var(--ligne);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(31, 41, 84, .12);
}

.capture__lien:hover img {
    border-color: var(--bleu-lien);
}

.capture figcaption {
    max-width: 52em;
    margin-top: .7rem;
    color: var(--texte-doux);
    font-size: .9375rem;
}

.captures {
    display: grid;
    gap: 1.5rem;
    margin: 0 0 1.5rem;
}

.captures .capture {
    margin: 0;
}

/* 8. Web ou installé */
.versions {
    display: grid;
    gap: 1.25rem;
    margin: 1.5rem 0;
}

.version {
    padding: 1.25rem 1.35rem .35rem;
    border: 1px solid var(--ligne);
    border-radius: 9px;
    background: var(--carte-teinte);
}

/* La version présentée par ce site reprend la carte SaaS d'allmaint.com */
.version--web {
    border-color: var(--bleu-lien);
    background: linear-gradient(180deg, var(--saas-haut) 0%, var(--carte-teinte) 100%);
}

.version h3 {
    color: var(--bleu-lien);
    font-size: 1.15rem;
}

.version ul {
    margin: 0 0 1rem;
    padding-left: 1.15rem;
}

.version li {
    margin-bottom: .4rem;
}

.version li::marker {
    color: var(--bleu-lien);
}

.versions__note {
    max-width: 44em;
    margin: 0;
    color: var(--texte-doux);
}

/* 9. Questions fréquentes : le rendu de la FAQ d'allmaint.com */
.faq {
    max-width: 52rem;
    margin-top: 1rem;
}

.faq details {
    padding: 4px 10px;
    border-bottom: 1px solid var(--ligne);
    border-radius: 6px;
    transition: background-color .15s;
}

.faq details:last-child {
    border-bottom: 0;
}

.faq details:hover {
    background: #F6F8FC;
}

.faq summary {
    position: relative;
    padding: 12px 34px 12px 0;
    cursor: pointer;
    list-style: none;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary::after {
    content: "+";
    position: absolute;
    right: 6px;
    top: 50%;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #F1EAE4;
    color: var(--orange-bouton);
    font-size: 17px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    transform: translateY(-50%);
}

.faq details[open] summary::after {
    content: "\2212";
}

.faq summary h3 {
    display: inline;
    margin: 0;
    color: var(--bleu-lien);
    font-size: 1rem;
}

.faq details p {
    max-width: 46em;
    margin: 4px 0 14px;
}

/* 10. Contact */
.contact {
    display: grid;
    gap: 1.25rem;
}

.contact__liste {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .35rem 1.5rem;
    margin: 1.25rem 0 0;
}

.contact__liste dt {
    color: var(--texte-doux);
}

.contact__liste dd {
    margin: 0;
    font-weight: 700;
}

.contact__action {
    margin: 0;
}

/* 11. Pied de page : le bandeau bleu centré d'allmaint.com */
.pied {
    padding: 1.75rem 0 1.5rem;
    background: var(--bleu);
    color: var(--blanc);
    text-align: center;
}

.pied a {
    color: var(--blanc);
    text-decoration: none;
}

.pied a:hover {
    color: var(--blanc);
    text-decoration: underline;
}

.pied :focus-visible {
    outline-color: var(--blanc);
}

.pied__liens {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 22px;
    margin: 0 0 .75rem;
    padding: 0;
    list-style: none;
}

.pied__reseaux {
    margin-bottom: 1.25rem;
    font-size: .9375rem;
}

.pied__texte {
    max-width: 40em;
    margin: 0 auto 1.25rem;
    color: rgba(255, 255, 255, .9);
}

.pied__legal {
    max-width: 60em;
    margin: 0 auto;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, .25);
    color: rgba(255, 255, 255, .85);
    font-size: .8125rem;
}

.pied__legal h2 {
    margin-bottom: .5rem;
    color: var(--blanc);
    font-size: .875rem;
}

.pied__legal p {
    margin-bottom: .5em;
}

.pied__legal a {
    text-decoration: underline;
}

/* 12. Bouton « revenir en haut », comme sur allmaint.com : il apparaît après
   400 px de défilement (classe ajoutée par le script). Sans JavaScript, il reste masqué. */
.haut-de-page {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 50%;
    background: var(--bleu);
    box-shadow: 0 3px 12px rgba(31, 41, 84, .28);
    color: var(--blanc);
    cursor: pointer;
    /* masqué tant qu'on n'a pas défilé : opacity + visibility plutôt que display,
       pour garder la transition */
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s, transform .2s, visibility .2s, background-color .2s;
}

.haut-de-page_visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.haut-de-page:hover {
    background: var(--orange-bouton);
}

.haut-de-page svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 13. Écrans plus larges */
@media (min-width: 35rem) {
    .principal {
        padding: 1.5rem 0 2rem;
    }

    .carte {
        margin-bottom: 2rem;
        padding: 2rem;
    }

    .acces {
        padding: 1.6rem 1.5rem 1.3rem;
    }

    .haut-de-page {
        right: 22px;
        bottom: 22px;
        width: 46px;
        height: 46px;
    }

    .bouton--grand {
        padding: .7rem 1.5rem;
        font-size: 1.0625rem;
    }
}

@media (min-width: 36rem) {
    .entete__tel {
        display: block;
    }
}

@media (min-width: 40rem) {
    .fonctions {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 48rem) {
    .entete__barre {
        gap: 1.5rem;
    }

    .marque img {
        width: 4rem;
    }

    .marque__nom {
        font-size: 1.1875rem;
    }

    .bouton--entete {
        min-height: 2.75rem;
        padding: 8px 14px;
        font-size: 1rem;
    }

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

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

@media (min-width: 60rem) {
    .intro__grille {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        align-items: center;
        gap: 3rem;
    }

    .contact {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
    }
}

@media (min-width: 64rem) {
    .fonctions {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 75rem) {
    .nav {
        display: block;
    }
}

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

    .bouton,
    .nav a,
    .barre-url__bouton,
    .faq details,
    .haut-de-page {
        transition: none;
    }
}

@media print {
    .haut-de-page {
        display: none;
    }
}