/* =========================================================
   KLEVOR - couche de personnalisation du template Ashley
   Chargee APRES css/style.css. Ne jamais editer style.css
   pour du design produit, tout passe par ce fichier.

   Reference unique de la marque : PLAQUETTE-KLEVOR.html.
   Palette encre et papier, deux fontes, filets d'un pixel,
   aucun arrondi sauf les pilules.

   Le prefixe de classe reste `mo-` : il designe le produit,
   `mil-` appartient au template.
   ========================================================= */

:root {
    /* fonds */
    --mo-ink: rgb(10, 16, 32);          /* Encre, fond sombre */
    --mo-ink-soft: rgb(19, 27, 48);     /* Encre douce, surface surelevee */
    --mo-paper: rgb(255, 255, 255);     /* Blanc, fond de carte */
    --mo-paper-soft: rgb(244, 242, 237); /* Papier, fond de page. Un creme. */
    --mo-hollow: rgb(251, 250, 248);    /* Creux, survol sur fond blanc */

    /* accents */
    --mo-accent: rgb(64, 110, 232);     /* Signature : lien, bouton, progression */
    --mo-accent-soft: rgba(64, 110, 232, .12);
    --mo-seal: rgb(200, 147, 58);       /* Sceau : le point du logo, ce qui est acquis */
    --mo-seal-soft: rgba(200, 147, 58, .14);
    --mo-alert: rgb(192, 69, 60);       /* Alerte : erreur, retard. Rien d'autre. */

    /* traits : de l'Encre a 10 %, 18 % pour un filet appuye */
    --mo-line-light: rgba(255, 255, 255, .1);
    --mo-line-light-strong: rgba(255, 255, 255, .18);
    --mo-line-dark: rgba(10, 16, 32, .1);
    --mo-line-dark-strong: rgba(10, 16, 32, .18);

    /* texte */
    --mo-text: rgb(10, 16, 32);
    --mo-text-muted: rgb(108, 117, 138); /* Ardoise */

    /* fontes : deux, pas trois. Plaquette 06. */
    --mo-font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --mo-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* la courbe de reference du produit */
    --mo-ease: .4s cubic-bezier(0, 0, 0.3642, 1);
}

/* =========================================================
   0 bis. Fond, typographie et selection
   Trois corrections au template Ashley.
   ========================================================= */

/* Le fond de page est du Papier creme, jamais un blanc pur.
   Les cartes restent en Blanc, posees dessus. */
html,
body {
    background-color: var(--mo-paper-soft);
}

/* Ashley peint ses sections sombres avec backdrop-filter: invert(100%).
   Le blanc de la page s'inverse donc en NOIR, pas en bleu nuit, et la
   marque perd sa couleur fondamentale. On pose un vrai fond d'Encre et
   on neutralise le filtre : le contenu de ces sections est deja ecrit
   en clair par le template, il n'a jamais dependu de l'inversion. */
.mil-dark-bg {
    background-color: var(--mo-ink);
}

.mil-dark-bg:before {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Fraunces porte deux axes de fantaisie. SOFT arrondit les angles,
   WONK fait basculer certaines lettres. Les deux a zero : on veut le
   serieux d'une fonte de journal, pas le clin d'oeil. */
h1, .mil-h1,
h2, .mil-h2,
h3, .mil-h3,
h4, .mil-h4,
h5, .mil-h5,
h6, .mil-h6 {
    font-optical-sizing: auto;
    font-variation-settings: "SOFT" 0, "WONK" 0;
}

/* Partout ou des chiffres se superposent : un 1 est plus etroit qu'un 8,
   et une colonne de montants ne s'aligne pas sans cette regle. */
.mo-num,
.mo-price,
table {
    font-variant-numeric: tabular-nums;
}

/* Le template rendait la selection invisible : fond transparent,
   couleur heritee. On la peint en Sceau -- l'accent du logo -- avec
   du texte en Encre. Le rapport vaut 6,94, lisible sur les deux fonds. */
*::-moz-selection {
    color: var(--mo-ink);
    background-color: var(--mo-seal);
    text-shadow: none;
}

*::selection {
    color: var(--mo-ink);
    background-color: var(--mo-seal);
    text-shadow: none;
}

/* =========================================================
   2. Forme animee : le document
   Remplace le dodecaedre du template. Trois feuilles
   empilees en 3D, filaires, qui tournent lentement.
   Trois tailles : grande, moyenne, petite.
   ========================================================= */

.mil-hidden-elements .mo-doc {
    display: none;
}

.mo-doc {
    position: relative;
    left: 90px;
    top: 60px;
    width: 132px;
    height: 176px;
    transform-style: preserve-3d;
    animation: mo-doc-rotate 100s infinite linear;
    /* taille par defaut : moyenne */
    --mo-doc-scale: 1;
}

.mo-sheet {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: none;
    stroke: rgb(255, 255, 255);
    stroke-width: 1;
    stroke-linejoin: round;
    backface-visibility: visible;
}

.mo-sheet--front {
    transform: translateZ(30px);
}

.mo-sheet--mid {
    transform: translateZ(0);
}

.mo-sheet--back {
    transform: translateZ(-30px);
}

/* les lignes de texte du document, plus discretes */
.mo-sheet .mo-sheet-rule {
    stroke-width: .75;
    opacity: .55;
}

/* le pli du coin, appuye */
.mo-sheet .mo-sheet-fold {
    stroke-width: 1.25;
}

@keyframes mo-doc-rotate {
    from {
        transform: scale(var(--mo-doc-scale)) rotateX(0deg) rotateY(360deg) rotateZ(360deg);
    }

    to {
        transform: scale(var(--mo-doc-scale)) rotateX(360deg) rotateY(0deg) rotateZ(-360deg);
    }
}

/* --- trois tailles, pilotees par la position --- */

/* grande */
.mil-position-1 .mo-doc {
    --mo-doc-scale: 1.45;
}

/* moyenne */
.mil-position-2 .mo-doc {
    --mo-doc-scale: 1;
    animation-delay: -25s;
}

/* petite */
.mil-position-3 .mo-doc {
    --mo-doc-scale: .6;
    animation-delay: -50s;
}

/* position 4 : banniere des pages internes.
   Par defaut sur fond sombre, variante .mil-dark sur fond clair,
   meme convention que le template. */
.mil-position-4 .mo-doc {
    --mo-doc-scale: 1.15;
    animation-delay: -70s;
}

.mil-position-4.mil-dark .mo-sheet {
    stroke: rgb(10, 16, 32);
}

/* classes explicites, utilisables hors des positions du template */
.mo-doc--lg {
    --mo-doc-scale: 1.45;
}

.mo-doc--md {
    --mo-doc-scale: 1;
}

.mo-doc--sm {
    --mo-doc-scale: .6;
}

/* =========================================================
   3. Modules : cartes de fonctionnalites
   ========================================================= */

.mo-module-card {
    display: block;
    height: 100%;
    padding: 40px;
    border: solid 1px var(--mo-line-dark);
    background-color: var(--mo-paper);
    transition: .4s cubic-bezier(0, 0, 0.3642, 1);
}

.mo-module-card:hover {
    border-color: var(--mo-accent);
    transform: translateY(-6px);
}

.mo-module-num {
    display: block;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .1em;
    color: var(--mo-accent);
    margin-bottom: 20px;
}

.mo-module-card p {
    color: var(--mo-text-muted);
}

/* liste de points forts a l'interieur d'un module */
.mo-feature-list {
    margin: 0;
    padding: 0;
}

.mo-feature-list li {
    list-style-type: none;
    padding: 18px 0;
    border-bottom: solid 1px var(--mo-line-dark);
}

.mo-feature-list li:last-child {
    border-bottom: none;
}

.mo-feature-list strong {
    display: block;
    font-weight: 500;
    margin-bottom: 4px;
}

.mo-feature-list span {
    color: var(--mo-text-muted);
    font-size: 15px;
}

.mil-dark-bg .mo-feature-list li {
    border-bottom-color: var(--mo-line-light);
}

.mil-dark-bg .mo-feature-list span {
    color: rgba(255, 255, 255, .6);
}

/* =========================================================
   4. Tarifs
   ========================================================= */

.mo-plan {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 50px 40px;
    border: solid 1px var(--mo-line-dark);
    background-color: var(--mo-paper);
    transition: .4s cubic-bezier(0, 0, 0.3642, 1);
}

.mo-plan:hover {
    transform: translateY(-6px);
}

.mo-plan--featured {
    background-color: var(--mo-ink);
    border-color: var(--mo-ink);
    color: rgb(255, 255, 255);
}

.mo-plan--featured h4,
.mo-plan--featured h3,
.mo-plan--featured .mo-plan-price {
    color: rgb(255, 255, 255);
}

.mo-plan--featured p,
.mo-plan--featured .mo-plan-feats li {
    color: rgba(255, 255, 255, .7);
}

.mo-plan--featured .mo-plan-feats li {
    border-bottom-color: var(--mo-line-light);
}

.mo-plan-badge {
    display: inline-block;
    padding: 6px 14px;
    margin-bottom: 24px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mo-seal);
    background-color: var(--mo-seal-soft);
}

.mo-plan-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 46px;
    font-weight: 400;
    line-height: 1;
}

.mo-plan-price .mo-plan-period {
    font-size: 16px;
    font-weight: 400;
    opacity: .6;
}

.mo-plan-feats {
    margin: 30px 0 40px 0;
    padding: 0;
    flex-grow: 1;
}

.mo-plan-feats li {
    list-style-type: none;
    position: relative;
    padding: 14px 0 14px 30px;
    border-bottom: solid 1px var(--mo-line-dark);
    color: var(--mo-text-muted);
}

.mo-plan-feats li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 21px;
    width: 14px;
    height: 8px;
    border-left: solid 1.5px var(--mo-accent);
    border-bottom: solid 1.5px var(--mo-accent);
    transform: rotate(-45deg);
}

.mo-plan-feats strong {
    color: var(--mo-text);
    font-weight: 500;
}

.mo-plan--featured .mo-plan-feats strong {
    color: rgb(255, 255, 255);
}

/* bascule mensuel / annuel */
.mo-billing-switch {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 8px;
    border: solid 1px var(--mo-line-dark);
}

.mo-billing-switch button {
    padding: 10px 22px;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    color: var(--mo-text-muted);
    cursor: pointer;
    transition: .2s cubic-bezier(0, 0, 0.3642, 1);
}

.mo-billing-switch button.mo-active {
    background-color: var(--mo-ink);
    color: rgb(255, 255, 255);
}

.mo-billing-note {
    display: inline-block;
    margin-left: 8px;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mo-seal);
}

/* =========================================================
   5. Contact : boutons Cal.com et WhatsApp
   ========================================================= */

.mo-contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 40px;
    padding-top: 40px;
    border-top: solid 1px var(--mo-line-dark);
}

.mo-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 28px;
    border: solid 1px var(--mo-line-dark);
    font-size: 16px;
    line-height: 1;
    color: var(--mo-text);
    transition: .3s cubic-bezier(0, 0, 0.3642, 1);
}

.mo-action-btn svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
}

.mo-action-btn small {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    color: var(--mo-text-muted);
}

.mo-action-btn:hover {
    transform: translateY(-3px);
}

.mo-action-btn--cal:hover {
    border-color: var(--mo-accent);
    color: var(--mo-accent);
}

.mo-action-btn--cal svg {
    fill: var(--mo-accent);
}

.mo-action-btn--wa:hover {
    border-color: rgb(37, 211, 102);
    color: rgb(22, 148, 68);
}

.mo-action-btn--wa svg {
    fill: rgb(37, 211, 102);
}

.mo-action-label {
    text-align: left;
}

@media screen and (max-width: 560px) {
    .mo-action-btn {
        width: 100%;
    }
}

/* =========================================================
   6. Placeholders d'images
   Bloc gris avec le nom du visuel a fournir.
   ========================================================= */

.mo-ph {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: var(--mo-paper-soft);
    background-image:
        repeating-linear-gradient(45deg,
            rgba(10, 16, 32, .035) 0 12px,
            transparent 12px 24px);
    border: dashed 1px rgba(10, 16, 32, .18);
    overflow: hidden;
}

/* le template ne positionne pas ces conteneurs, on le fait ici
   pour que .mo-ph--fill s'y ancre correctement */
.mil-text-image,
.mil-about-quote .mil-avatar {
    position: relative;
}

.mo-ph-label {
    display: block;
    padding: 20px;
    text-align: center;
    font-size: 13px;
    line-height: 1.6;
    letter-spacing: .04em;
    color: rgba(10, 16, 32, .5);
}

.mo-ph-label strong {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: rgba(10, 16, 32, .75);
}

.mil-dark-bg .mo-ph {
    background-color: rgba(255, 255, 255, .04);
    background-image:
        repeating-linear-gradient(45deg,
            rgba(255, 255, 255, .04) 0 12px,
            transparent 12px 24px);
    border-color: rgba(255, 255, 255, .18);
}

.mil-dark-bg .mo-ph-label,
.mil-dark-bg .mo-ph-label strong {
    color: rgba(255, 255, 255, .55);
}

/* remplit un parent qui impose deja ses dimensions,
   par exemple .mil-img-frame, .mil-avatar ou .mil-text-image */
.mo-ph--fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

/* ratios utilitaires */
.mo-ph--16-9 {
    padding-bottom: 56.25%;
}

.mo-ph--4-3 {
    padding-bottom: 75%;
}

.mo-ph--1-1 {
    padding-bottom: 100%;
}

.mo-ph--portrait {
    padding-bottom: 160%;
}

.mo-ph--16-9 .mo-ph-label,
.mo-ph--4-3 .mo-ph-label,
.mo-ph--1-1 .mo-ph-label,
.mo-ph--portrait .mo-ph-label {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
}

/* =========================================================
   7. Divers
   ========================================================= */

/* etiquette "cachet" reutilisable */
.mo-seal-label {
    display: inline-block;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mo-seal);
    border: solid 1px var(--mo-seal);
}

/* bloc coordonnees */
.mo-info-list {
    margin: 0;
    padding: 0;
}

.mo-info-list li {
    list-style-type: none;
    margin-bottom: 30px;
}

.mo-info-list h6 {
    margin-bottom: 8px;
}

.mo-info-list a {
    color: var(--mo-accent);
}

/* chiffres cles */
.mo-stat {
    padding: 30px 0;
    border-top: solid 1px var(--mo-line-light);
}

.mo-stat-value {
    font-size: 48px;
    font-weight: 300;
    line-height: 1;
    margin-bottom: 10px;
}

.mo-stat-label {
    color: rgba(255, 255, 255, .6);
    font-size: 15px;
}

/* tableau comparatif support */
.mo-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.mo-table th,
.mo-table td {
    padding: 16px 12px;
    text-align: left;
    border-bottom: solid 1px var(--mo-line-dark);
}

.mo-table th {
    font-weight: 500;
    color: var(--mo-text);
}

.mo-table td {
    color: var(--mo-text-muted);
}

.mo-table td strong {
    color: var(--mo-text);
    font-weight: 500;
}

@media screen and (max-width: 768px) {
    .mo-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* le formulaire long du contact reprend les champs du template */
.mo-form label {
    display: block;
    margin-bottom: 10px;
    font-size: 15px;
    color: var(--mo-text-muted);
}

.mo-form .mo-required {
    color: var(--mo-accent);
}

.mo-form select {
    width: 100%;
    height: 60px;
    padding: 0 20px;
    font-family: inherit;
    font-size: 16px;
    color: var(--mo-text);
    background-color: transparent;
    border: solid 1px var(--mo-line-dark);
    outline: none;
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--mo-text) 50%),
        linear-gradient(135deg, var(--mo-text) 50%, transparent 50%);
    background-position:
        calc(100% - 22px) calc(50% + 2px),
        calc(100% - 16px) calc(50% + 2px);
    background-size: 6px 6px;
    background-repeat: no-repeat;
}

.mo-form select:focus {
    border-color: var(--mo-accent);
}

.mo-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    color: var(--mo-text-muted);
}

.mo-checkbox input {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    flex: 0 0 18px;
    accent-color: var(--mo-accent);
}

.mo-checkbox a {
    color: var(--mo-accent);
    text-decoration: underline;
}

/* honeypot anti-spam */
.mo-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* retour du formulaire */
.mo-form-feedback {
    display: none;
    padding: 18px 20px;
    margin-bottom: 20px;
    border-left: solid 3px var(--mo-accent);
    background-color: var(--mo-accent-soft);
    font-size: 15px;
}

.mo-form-feedback.mo-visible {
    display: block;
}

.mo-form-feedback.mo-error {
    border-left-color: rgb(200, 62, 62);
    background-color: rgba(200, 62, 62, .1);
}

/* =========================================================
   10. Le logo Klevor
   Le mot-symbole est un fichier, jamais du texte : un logo
   qui contient encore des lettres se rend en Times chez qui
   n'a pas Fraunces.
   ========================================================= */

.mil-logo.mo-logo {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.mo-logo-img {
    display: block;
    width: 170px;
    height: auto;
    /* le fichier porte deja sa zone de protection : ne pas rogner */
    -webkit-user-drag: none;
    user-select: none;
}

@media screen and (max-width: 992px) {
    .mo-logo-img {
        width: 132px;
    }
}

/* =========================================================
   11. Le cadre flottant, et la couleur qui suit le fond

   CE QUE FAISAIT LE TEMPLATE. Ashley peignait ses sections
   sombres avec `backdrop-filter: invert(100%)`, pose au
   meme z-index que le cadre mais plus loin dans le DOM :
   le cadre passait donc SOUS le filtre et s'inversait, mais
   seulement la ou la section le recouvrait. Un logo a
   cheval sur deux fonds se coupait proprement en deux.

   POURQUOI ON NE PEUT PAS LE GARDER. Ce filtre est aussi ce
   qui peignait les sections en NOIR : inverser le blanc de
   la page ne donne pas du bleu nuit.

   CE QUI LE REMPLACE, ET OU LE POSER. `mix-blend-mode` ne
   melange qu'avec ce qui est peint dans le meme contexte
   d'empilement. `.mil-frame` est fixe et porte un z-index :
   il cree son propre contexte, donc le melange pose sur ses
   ENFANTS les melangeait avec du vide -- ils restaient
   blancs, invisibles sur fond clair. Le melange va sur
   l'element fixe lui-meme.
   ========================================================= */

.mil-frame {
    mix-blend-mode: difference;
}

/* `difference` sur du blanc rend l'inverse exact du fond.
   Tout ce que porte le cadre doit donc etre blanc. */
.mil-frame,
.mil-frame a,
.mil-frame .mil-link,
.mil-frame-bottom,
.mil-frame-bottom a,
.mil-frame-bottom .mil-current-page,
.mil-frame-bottom .mil-current-page a {
    color: rgb(255, 255, 255) !important;
}

.mil-frame .mil-arrow {
    fill: rgb(255, 255, 255) !important;
}

.mil-menu-btn span,
.mil-menu-btn span:before,
.mil-menu-btn span:after {
    background-color: rgb(255, 255, 255) !important;
}

/* Le menu ouvert a un fond connu : il ne se melange pas,
   sinon la croix s'inverserait contre son propre panneau. */
.mil-menu-frame {
    mix-blend-mode: normal;
}

.mo-logo-img {
    display: block;
    width: 170px;
    height: auto;
    -webkit-user-drag: none;
    user-select: none;
}

.mil-logo.mo-logo {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

/* =========================================================
   11 bis. Le point d'or

   Il est le seul element colore de l'identite, et il garde
   sa couleur sur les deux fonds : il ne peut donc pas etre
   dans le groupe qui se melange. Couche fixe a part, meme
   marge que le cadre, position tiree du fichier lui-meme --
   cx 3198.5, cy 777.5, r 60 dans une zone de 3358.5 x 949.
   En pourcentage, il suit le logo quand celui-ci retrecit.
   ========================================================= */

.mo-cadre-point {
    position: fixed;
    inset: 0;
    z-index: 3;
    padding: 50px 60px 60px 60px;
    pointer-events: none;
}

.mo-logo-boite {
    display: block;
    position: relative;
    width: 170px;
    aspect-ratio: 3358.5 / 949;
}

.mo-logo-point {
    position: absolute;
    left: 95.24%;
    top: 81.93%;
    width: 3.573%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: var(--mo-seal);
}

/* =========================================================
   11 ter. Le bouton de connexion

   Il se melange avec le reste du cadre, donc il reste
   monochrome : bordure et texte en blanc, fond transparent.
   Au survol, la bordure s'appuie et un voile tres clair
   apparait -- un aplat plein s'inverserait en une couleur
   imprevisible selon la section qui passe dessous.
   ========================================================= */

.mo-frame-actions {
    display: flex;
    align-items: center;
    gap: 28px;
    pointer-events: all;
}

.mo-login {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 24px;
    border: solid 1px rgba(255, 255, 255, .45);
    border-radius: 999px;
    font-family: var(--mo-font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: var(--mo-ease);
}

.mo-login:hover {
    border-color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255, .16);
}

@media screen and (max-width: 992px) {
    .mo-logo-img,
    .mo-logo-boite {
        width: 132px;
    }

    .mo-cadre-point {
        padding: 30px 30px 30px 30px;
    }

    .mo-login {
        height: 38px;
        padding: 0 18px;
        font-size: 11px;
        letter-spacing: .06em;
    }

    .mo-frame-actions {
        gap: 20px;
    }
}

@media screen and (max-width: 480px) {
    .mo-login {
        padding: 0 15px;
    }

    .mo-frame-actions {
        gap: 16px;
    }
}

/* Le bouton d'espace, dans le menu ouvert */
.mo-menu-login {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 48px;
    padding: 18px 32px;
    border: solid 1px var(--mo-line-light-strong);
    border-radius: 999px;
    color: rgb(255, 255, 255);
    font-family: var(--mo-font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: var(--mo-ease);
}

.mo-menu-login:hover {
    color: var(--mo-ink);
    background-color: rgb(255, 255, 255);
    border-color: rgb(255, 255, 255);
}

.mo-menu-login-note {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .04em;
    text-transform: none;
    opacity: .6;
}

/* =========================================================
   11 quater. De l'air
   Le template colle ses boutons et ses blocs. Deux boutons
   separes de six pixels se lisent comme un seul.
   ========================================================= */

.mil-buttons-frame {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px 32px;
}

.mil-services-button {
    margin-left: 32px;
}

@media screen and (max-width: 992px) {
    .mil-buttons-frame {
        gap: 18px 24px;
    }

    .mil-services-button {
        margin-left: 0;
        margin-top: 24px;
    }
}

/* =========================================================
   12. Les tuiles de modules
   Le template cache le texte jusqu'au survol. Un visiteur
   qui ne survole rien ne lit rien, et sur un ecran tactile
   il n'y a pas de survol du tout. Le texte reste lu ; le
   survol ne recompense plus que le filet et la fleche.
   ========================================================= */

.mil-service-card-sm p {
    opacity: 1;
    transform: none;
    -webkit-line-clamp: unset;
    line-clamp: unset;
}

.mil-service-card-sm .mil-button {
    transform: scale(1);
    filter: none;
    opacity: .55;
}

.mil-service-card-sm:hover .mil-button {
    opacity: 1;
}

/* =========================================================
   13. Les visuels remplacables
   Chaque emplacement porte le nom exact du fichier attendu
   dans public/media/site/. Tant que le fichier n'est pas la,
   la hachure et le nom s'affichent ; des qu'il est depose,
   il prend toute la place, sans toucher au code.

   L'image est un fond CSS, pas une balise img : il n'y a
   donc rien a enregistrer d'un clic droit, et le glisser
   est bloque. Ce n'est pas une protection -- le fichier
   reste servi en HTTP et visible dans l'inspecteur -- c'est
   ce qu'on peut faire sans rendre le site inutilisable.
   ========================================================= */

.mo-visuel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: var(--mo-ratio, 3 / 2);
    background-color: var(--mo-paper-soft);
    background-image:
        var(--mo-src, none),
        repeating-linear-gradient(45deg,
            rgba(10, 16, 32, .035) 0 12px,
            transparent 12px 24px);
    background-size: cover, auto;
    background-position: center, 0 0;
    background-repeat: no-repeat, repeat;
    border: dashed 1px var(--mo-line-dark-strong);
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.mo-visuel img,
.mo-visuel * {
    -webkit-user-drag: none;
}

.mil-dark-bg .mo-visuel {
    background-color: rgba(255, 255, 255, .04);
    background-image:
        var(--mo-src, none),
        repeating-linear-gradient(45deg,
            rgba(255, 255, 255, .04) 0 12px,
            transparent 12px 24px);
    border-color: var(--mo-line-light-strong);
}

/* le fichier est la : plus de hachure, plus de note */
.mo-visuel.mo-visuel--charge {
    background-image: var(--mo-src);
    border-style: solid;
    border-color: transparent;
}

.mo-visuel.mo-visuel--charge .mo-visuel-note {
    display: none;
}

.mo-visuel-note {
    padding: 12px 16px;
    font-family: var(--mo-font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .04em;
    line-height: 1.5;
    text-align: center;
    color: var(--mo-text-muted);
}

.mo-visuel-note strong {
    display: block;
    font-weight: 600;
    color: var(--mo-text);
}

.mil-dark-bg .mo-visuel-note {
    color: rgba(255, 255, 255, .5);
}

.mil-dark-bg .mo-visuel-note strong {
    color: rgba(255, 255, 255, .8);
}

/* variantes de cadrage */
.mo-visuel--rond {
    border-radius: 50%;
}

.mo-visuel--pilule {
    border-radius: 999px;
}

.mo-visuel--plein {
    height: 100%;
    aspect-ratio: auto;
}

/* =========================================================
   14. Tableau comparatif
   Le tableau defile dans son propre cadre : le corps de la
   page ne part jamais de travers.
   ========================================================= */

.mo-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: solid 1px var(--mo-line-dark);
    background-color: var(--mo-paper);
}

.mo-table-caption {
    padding: 18px 20px;
    text-align: left;
    font-family: var(--mo-font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mo-text-muted);
    border-bottom: solid 1px var(--mo-line-dark);
}

.mo-table thead th {
    font-family: var(--mo-font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mo-text-muted);
    white-space: nowrap;
}

.mo-table tbody th {
    font-weight: 500;
    white-space: nowrap;
}

.mo-table td {
    white-space: nowrap;
}

.mo-table tbody tr:last-child th,
.mo-table tbody tr:last-child td {
    border-bottom: none;
}

/* ce qui n'est pas ouvert reste lisible, sans crier */
.mo-table .mo-non {
    color: rgba(10, 16, 32, .35);
}

/* le tableau defile dans .mo-table-wrap, il n'a plus a le faire lui-meme */
@media screen and (max-width: 768px) {
    .mo-table {
        display: table;
        overflow: visible;
    }
}

/* =========================================================
   15. Les etapes de l'essai
   ========================================================= */

.mo-etape {
    height: 100%;
    padding-top: 26px;
    border-top: solid 2px var(--mo-accent);
}

.mo-etape-num {
    display: block;
    margin-bottom: 18px;
    font-family: var(--mo-font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--mo-accent);
}

.mil-dark-bg .mo-etape {
    border-top-color: var(--mo-seal);
}

.mil-dark-bg .mo-etape-num {
    color: var(--mo-seal);
}

/* =========================================================
   16. Questions frequentes
   Un volet natif : il s'ouvre sans JavaScript, il se lit
   au clavier, et son contenu reste dans la page pour les
   moteurs comme pour les modeles de langue.
   ========================================================= */

.mo-faq {
    border-top: solid 1px var(--mo-line-dark);
}

.mo-faq-item {
    border-bottom: solid 1px var(--mo-line-dark);
}

.mo-faq-item summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--mo-font-display);
    font-size: 20px;
    font-weight: 400;
    font-optical-sizing: auto;
    font-variation-settings: "SOFT" 0, "WONK" 0;
    color: var(--mo-text);
    transition: var(--mo-ease);
}

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

.mo-faq-item summary:after {
    content: "";
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin-top: 6px;
    background-image:
        linear-gradient(var(--mo-text), var(--mo-text)),
        linear-gradient(var(--mo-text), var(--mo-text));
    background-size: 14px 2px, 2px 14px;
    background-position: center, center;
    background-repeat: no-repeat;
    transition: var(--mo-ease);
}

.mo-faq-item[open] summary:after {
    background-size: 14px 2px, 2px 0;
}

.mo-faq-item summary:hover,
.mo-faq-item[open] summary {
    color: var(--mo-accent);
}

.mo-faq-item[open] summary:after {
    background-image:
        linear-gradient(var(--mo-accent), var(--mo-accent)),
        linear-gradient(var(--mo-accent), var(--mo-accent));
}

.mo-faq-body {
    padding-bottom: 30px;
}

.mo-faq-body p {
    margin-bottom: 14px;
    max-width: 68ch;
}

.mo-faq-body p:last-child {
    margin-bottom: 0;
}

/* =========================================================
   17. Mentions, WhatsApp, utilitaires
   ========================================================= */

.mo-mention {
    max-width: 76ch;
    margin-top: 40px;
    color: var(--mo-text-muted);
}

.mil-center .mo-mention,
.mo-mention.mil-center {
    margin-left: auto;
    margin-right: auto;
}

.mil-dark-bg .mo-mention {
    color: rgba(255, 255, 255, .55);
}

.mil-mt-30 {
    margin-top: 30px;
}

.mo-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border: solid 1px var(--mo-line-light-strong);
    border-radius: 999px;
    font-family: var(--mo-font-body);
    font-size: 13px;
    font-weight: 500;
    color: rgb(255, 255, 255);
    transition: var(--mo-ease);
}

.mo-whatsapp:hover {
    color: var(--mo-ink);
    background-color: rgb(255, 255, 255);
    border-color: rgb(255, 255, 255);
}

.mo-whatsapp svg {
    flex: 0 0 18px;
}

/* le libelle du siege supplementaire suit la bascule sans sauter */
.mo-plan-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.mo-plan-period {
    font-family: var(--mo-font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--mo-text-muted);
    white-space: nowrap;
}

.mo-plan--featured .mo-plan-period {
    color: rgba(255, 255, 255, .6);
}

.mo-billing-note {
    display: block;
    margin-top: 16px;
    font-size: 13px;
    color: var(--mo-text-muted);
}

/* =========================================================
   18. Cartes de contenu : ce qui est remplace, les themes,
   les voies de contact. Un filet en haut, pas une ombre.
   ========================================================= */

.mo-remplace {
    height: 100%;
    padding: 30px;
    background-color: var(--mo-paper);
    border: solid 1px var(--mo-line-dark);
    transition: var(--mo-ease);
}

.mo-remplace:hover {
    border-color: var(--mo-line-dark-strong);
    background-color: var(--mo-hollow);
}

.mo-remplace h5 {
    font-size: 19px;
}

.mo-remplace p {
    margin: 0;
    color: var(--mo-text-muted);
}

.mo-remplace--vide {
    background-color: transparent;
    border-style: dashed;
}

.mo-voie {
    padding: 30px 0;
    border-top: solid 1px var(--mo-line-dark);
}

.mo-voie:last-child {
    border-bottom: solid 1px var(--mo-line-dark);
}

.mo-voie p {
    margin: 0;
    color: var(--mo-text-muted);
}

/* =========================================================
   19. Numerotation de module
   Filet de 2 px, jamais 1 : un filet impair centre dans une
   ligne de hauteur paire tombe sur un demi-pixel et parait
   delave. Plaquette 07.
   ========================================================= */

.mo-module-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    font-family: var(--mo-font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--mo-accent);
}

.mo-module-eyebrow:after {
    content: "";
    width: 44px;
    height: 2px;
    background-color: var(--mo-accent);
}

.mil-dark-bg .mo-module-eyebrow,
.mil-dark-bg .mo-module-eyebrow:after {
    color: var(--mo-seal);
}

.mil-dark-bg .mo-module-eyebrow:after {
    background-color: var(--mo-seal);
}

/* =========================================================
   20. Listes de fonctionnalites
   ========================================================= */

.mo-liste {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: solid 1px var(--mo-line-dark);
}

.mo-liste li {
    position: relative;
    padding: 14px 0 14px 26px;
    border-bottom: solid 1px var(--mo-line-dark);
    color: var(--mo-text-muted);
}

.mo-liste li:before {
    content: "";
    position: absolute;
    top: 22px;
    left: 0;
    width: 10px;
    height: 2px;
    background-color: var(--mo-accent);
}

.mo-liste--claire {
    border-top-color: var(--mo-line-light);
}

.mo-liste--claire li {
    border-bottom-color: var(--mo-line-light);
    color: rgba(255, 255, 255, .6);
}

.mo-liste--claire li:before {
    background-color: var(--mo-seal);
}

/* =========================================================
   21. Bloc vide : le hub sans article
   Dire qu'il n'y a rien encore vaut mieux qu'afficher des
   cartes fantomes.
   ========================================================= */

.mo-vide {
    padding: 60px 40px;
    text-align: center;
    border: dashed 1px var(--mo-line-dark-strong);
    background-color: var(--mo-paper);
}

.mo-vide-titre {
    margin-bottom: 16px;
    font-family: var(--mo-font-display);
    font-optical-sizing: auto;
    font-variation-settings: "SOFT" 0, "WONK" 0;
    font-size: 26px;
    font-weight: 300;
    color: var(--mo-text);
}

.mo-vide p {
    max-width: 62ch;
    margin-left: auto;
    margin-right: auto;
    color: var(--mo-text-muted);
}

/* =========================================================
   22. Formulaire : piege a robots et consentement
   ========================================================= */

/* Ni display:none ni hidden : certains robots les detectent.
   Le champ sort du cadre, reste hors du parcours clavier. */
.mo-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.mo-consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.mo-consent input[type="checkbox"] {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    accent-color: var(--mo-accent);
}

.mo-consent label {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--mo-text-muted);
}

.mo-consent label a {
    color: var(--mo-accent);
    text-decoration: underline;
}

/* le champ en faute se voit, sans crier */
.mo-form input:invalid:not(:placeholder-shown),
.mo-form textarea:invalid:not(:placeholder-shown) {
    border-color: var(--mo-alert);
}

.mo-form input:focus-visible,
.mo-form textarea:focus-visible,
.mo-form select:focus-visible {
    border-color: var(--mo-accent);
    outline: solid 2px var(--mo-accent-soft);
    outline-offset: 0;
}

.mo-form button[disabled] {
    opacity: .5;
    pointer-events: none;
}

/* =========================================================
   23. Fond doux et WhatsApp sur fond clair
   ========================================================= */

.mil-soft-bg {
    background-color: var(--mo-paper-soft);
}

.mo-whatsapp--sombre {
    color: var(--mo-text);
    border-color: var(--mo-line-dark-strong);
}

.mo-whatsapp--sombre:hover {
    color: var(--mo-paper);
    background-color: var(--mo-ink);
    border-color: var(--mo-ink);
}

/* =========================================================
   24. Accessibilite : le focus doit se voir
   Le template le retire un peu partout. Un site qui ne se
   pilote pas au clavier n'est pas fini.
   ========================================================= */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: solid 2px var(--mo-accent);
    outline-offset: 3px;
}

.mil-dark-bg a:focus-visible,
.mil-dark-bg button:focus-visible,
.mil-menu-frame a:focus-visible {
    outline-color: var(--mo-seal);
}

/* =========================================================
   25. Mouvement reduit
   Le produit tourne, les feuilles tournent, la page glisse.
   Qui demande moins de mouvement en obtient moins.
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .mo-doc,
    .mil-animation {
        animation: none !important;
    }

    *,
    *:before,
    *:after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================
   26. Bandeau de consentement
   Refuser et accepter ont le meme poids visuel : un
   bandeau qui met le refus en gris clair ne recueille
   pas un consentement libre.
   ========================================================= */

.mo-cookies {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    padding: 20px;
    background-color: var(--mo-ink);
    border-top: solid 2px var(--mo-seal);
}

.mo-cookies[hidden] {
    display: none;
}

.mo-cookies-corps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.mo-cookies-texte {
    flex: 1 1 420px;
    margin: 0;
    max-width: 82ch;
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .68);
}

.mo-cookies-texte strong {
    display: block;
    color: rgb(255, 255, 255);
    font-weight: 600;
}

.mo-cookies-texte a {
    color: var(--mo-seal);
    text-decoration: underline;
}

.mo-cookies-actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.mo-cookies-btn {
    padding: 12px 26px;
    border: solid 1px rgba(255, 255, 255, .35);
    border-radius: 999px;
    background: transparent;
    font-family: var(--mo-font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgb(255, 255, 255);
    cursor: pointer;
    transition: var(--mo-ease);
}

.mo-cookies-btn:hover {
    border-color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255, .1);
}

.mo-cookies-btn--oui {
    color: var(--mo-ink);
    background-color: rgb(255, 255, 255);
    border-color: rgb(255, 255, 255);
}

.mo-cookies-btn--oui:hover {
    background-color: var(--mo-seal);
    border-color: var(--mo-seal);
}

/* le lien de reouverture, dans la page legale */
button.mil-link {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    cursor: pointer;
}

@media screen and (max-width: 768px) {
    .mo-cookies-corps {
        gap: 18px;
    }

    .mo-cookies-actions {
        width: 100%;
    }

    .mo-cookies-btn {
        flex: 1 1 0;
        padding: 12px 14px;
    }
}

/* =========================================================
   27. La pastille des deux mois offerts
   Elle reste lisible tout le temps et s'allume quand
   l'annuel est choisi. Un avantage cache tant qu'il n'est
   pas selectionne ne se decouvre jamais.
   ========================================================= */

.mo-billing-switch button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.mo-pastille {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    border: solid 1px var(--mo-line-dark-strong);
    font-family: var(--mo-font-body);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    color: var(--mo-text-muted);
    background-color: transparent;
    transition: var(--mo-ease);
}

.mo-pastille--active {
    color: var(--mo-ink);
    background-color: var(--mo-seal);
    border-color: var(--mo-seal);
}

/* =========================================================
   28. Le bandeau TVA offerte
   Un sceau, parce que c'est ce que la couleur veut dire
   dans la charte : ce qui est acquis.
   ========================================================= */

.mo-bandeau {
    display: flex;
    align-items: stretch;
    gap: 0;
    border: solid 1px var(--mo-line-dark);
    background-color: var(--mo-paper);
    overflow: hidden;
}

.mo-bandeau-marque {
    flex: 0 0 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background-color: var(--mo-seal);
    color: var(--mo-ink);
    font-family: var(--mo-font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-align: center;
}

.mo-bandeau-corps {
    padding: 44px 48px;
}

.mo-bandeau-titre {
    margin-bottom: 20px;
    font-size: 30px;
    line-height: 1.2;
}

.mo-bandeau-corps p {
    max-width: 74ch;
    margin-bottom: 16px;
    color: var(--mo-text-muted);
}

.mo-bandeau-corps p:last-child {
    margin-bottom: 0;
}

.mo-bandeau-corps strong {
    color: var(--mo-text);
    font-weight: 600;
}

.mo-bandeau-note {
    padding-top: 16px;
    border-top: solid 1px var(--mo-line-dark);
    font-size: 12.5px;
    line-height: 1.6;
}

@media screen and (max-width: 992px) {
    .mo-bandeau {
        flex-direction: column;
    }

    .mo-bandeau-marque {
        flex: 0 0 auto;
        padding: 18px 20px;
    }

    .mo-bandeau-corps {
        padding: 32px 26px;
    }

    .mo-bandeau-titre {
        font-size: 24px;
    }
}

/* =========================================================
   29. Cartes de categorie cliquables
   ========================================================= */

.mo-remplace--lien {
    display: block;
    position: relative;
    padding-bottom: 62px;
    color: inherit;
}

.mo-remplace--lien h5 {
    color: var(--mo-text);
    transition: var(--mo-ease);
}

.mo-remplace--lien:hover h5 {
    color: var(--mo-accent);
}

.mo-remplace-fleche {
    position: absolute;
    left: 30px;
    bottom: 30px;
    width: 22px;
    height: 2px;
    background-color: var(--mo-accent);
    transition: var(--mo-ease);
}

.mo-remplace-fleche:after {
    content: "";
    position: absolute;
    right: 0;
    top: -3px;
    width: 8px;
    height: 8px;
    border-top: solid 2px var(--mo-accent);
    border-right: solid 2px var(--mo-accent);
    transform: rotate(45deg);
}

.mo-remplace--lien:hover .mo-remplace-fleche {
    width: 34px;
}

/* =========================================================
   30. La fleche du bouton ne se laisse plus ecraser
   Dans une carte etroite, le SVG est un element flexible :
   il retrecit sous sa largeur declaree et le rond devient
   une ellipse, la fleche disparait dedans.
   ========================================================= */

.mil-button svg {
    flex: 0 0 40px;
}

.mil-button.mil-icon-button-sm svg {
    flex: 0 0 40px;
}

/* le libelle peut se serrer, le rond jamais */
.mil-button span {
    min-width: 0;
}

/* dans une carte de tarif, le bouton prend la largeur */
.mo-plan .mil-button {
    width: 100%;
    padding-left: 30px;
    padding-right: 15px;
    justify-content: space-between;
}

.mo-plan .mil-button svg {
    margin-left: 16px;
}

/* =========================================================
   31. Les pastilles du carrousel d'avis
   Le template y met des photos de clients dans des ronds de
   90 px. Sans photos, le rond retombe sur un aplat rouge.
   On garde le decalage un sur deux -- c'est lui qui dessine
   le chevron -- et on remplace la photo par un point.
   ========================================================= */

.mil-revi-pagination .swiper-pagination-bullet {
    width: 44px;
    height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}

.mil-revi-pagination .swiper-pagination-bullet:hover {
    box-shadow: none;
}

.mil-revi-pagination .swiper-pagination-bullet:nth-child(2n) {
    margin-top: 22px !important;
}

.mil-revi-pagination .swiper-pagination-bullet .mil-custom-dot,
.mil-revi-pagination .swiper-pagination-bullet .mil-custom-dot.mil-slide-1,
.mil-revi-pagination .swiper-pagination-bullet .mil-custom-dot.mil-slide-2,
.mil-revi-pagination .swiper-pagination-bullet .mil-custom-dot.mil-slide-3,
.mil-revi-pagination .swiper-pagination-bullet .mil-custom-dot.mil-slide-4,
.mil-revi-pagination .swiper-pagination-bullet .mil-custom-dot.mil-slide-5,
.mil-revi-pagination .swiper-pagination-bullet .mil-custom-dot.mil-slide-6,
.mil-revi-pagination .swiper-pagination-bullet .mil-custom-dot.mil-slide-7 {
    width: 11px;
    height: 11px;
    background-image: none;
    background-color: transparent;
    border: solid 1px var(--mo-line-dark-strong);
    border-radius: 50%;
}

.mil-revi-pagination .swiper-pagination-bullet:hover .mil-custom-dot {
    border-color: var(--mo-text);
}

.mil-revi-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    box-shadow: none;
}

.mil-revi-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active .mil-custom-dot {
    width: 13px;
    height: 13px;
    background-color: var(--mo-seal);
    border-color: var(--mo-seal);
}

@media screen and (max-width: 992px) {
    .mil-revi-pagination .swiper-pagination-bullet {
        width: 34px;
        height: 34px;
    }
}

/* =========================================================
   32. Le menu ouvert
   Le survol du menu principal reprend celui du pied de page :
   le lien glisse de dix pixels et passe en Signature.
   ========================================================= */

.mil-main-menu ul li a:hover {
    transform: translateX(10px);
    color: var(--mo-accent);
}

.mil-main-menu ul li.mil-active a {
    color: var(--mo-accent);
}

.mil-main-menu ul li.mil-active a:hover {
    transform: none;
}

.mil-mt-60 {
    margin-top: 60px;
}

/* =========================================================
   33. Le bloc « de vive voix » sous le formulaire
   ========================================================= */

.mil-contact-alt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding-top: 40px;
    border-top: solid 1px var(--mo-line-dark);
}

.mil-contact-alt-label {
    width: 100%;
    margin-bottom: 10px;
    text-align: center;
    font-family: var(--mo-font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mo-text-muted);
}

.mil-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 60px;
    padding: 0 32px;
    border: solid 1px var(--mo-line-dark-strong);
    border-radius: 999px;
    font-family: var(--mo-font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mo-text);
    transition: var(--mo-ease);
}

.mil-contact-btn svg {
    flex: none;
    width: 20px;
    height: 20px;
}

.mil-contact-btn:hover {
    color: var(--mo-paper);
    background-color: var(--mo-ink);
    border-color: var(--mo-ink);
}

/* =========================================================
   34. La case a cocher du formulaire
   Une case native ne se style pas : on la redessine, avec
   la coche en SVG plutot qu'en caractere -- un caractere
   depend de la fonte installee.
   ========================================================= */

.mil-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    cursor: pointer;
}

.mil-checkbox input[type="checkbox"] {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 3px 0 0;
    padding: 0;
    border: solid 1px var(--mo-line-dark-strong);
    border-radius: 0;
    background-color: transparent;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: var(--mo-ease);
}

.mil-checkbox input[type="checkbox"]:checked {
    background-color: var(--mo-ink);
    border-color: var(--mo-ink);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px;
}

.mil-checkbox span {
    font-size: 14px;
    line-height: 1.6;
    color: var(--mo-text-muted);
}

.mil-checkbox a {
    color: var(--mo-accent);
    text-decoration: underline;
}

/* le retour du formulaire, au-dessus des champs */
.mo-form-feedback {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

/* =========================================================
   35. Respiration avant un bouton qui suit une liste
   Une pilule collee au dernier filet se lit comme la ligne
   suivante de la liste.
   ========================================================= */

.mo-liste + .mil-button,
.mo-liste + a.mil-button,
.mo-liste + .mil-link {
    margin-top: 40px;
}

/* =========================================================
   36. Les bannieres des pages internes
   Meme composition que l'accueil, mais l'accueil occupe
   tout l'ecran : une page interieure qui fait pareil
   repousse son contenu sous la ligne de flottaison.
   ========================================================= */

.mil-banner.mil-banner--interne {
    height: auto;
    min-height: 78vh;
    padding-top: 180px;
    padding-bottom: 80px;
}

@media screen and (max-width: 992px) {
    .mil-banner.mil-banner--interne {
        min-height: 0;
        padding-top: 140px;
        padding-bottom: 60px;
    }
}

/* =========================================================
   37. Aligner le point sur le mot

   LES DEUX FICHIERS N'ONT PAS LE MEME CADRE. `klevor-mot`
   mesure 3358.5 x 949 : le point y est compris. La version
   sans point est rognee a 3183.5 x 949. A largeur egale, le
   mot y serait donc dessine PLUS GRAND, et le point tomberait
   a cote.

   On raisonne dans le cadre du logo complet : la boite du
   point garde 3358.5, et l'image sans point est reduite du
   rapport 3183.5 / 3358.5 pour que la lettre garde la meme
   taille. Les deux partent du meme coin, tout s'aligne.
   ========================================================= */

:root {
    --mo-logo-l: 170px;
    /* 3183.5 / 3358.5 */
    --mo-logo-sans-point: .947893;
}

.mil-frame .mo-logo-img {
    width: calc(var(--mo-logo-l) * var(--mo-logo-sans-point));
}

.mo-logo-boite {
    width: var(--mo-logo-l);
}

@media screen and (max-width: 992px) {
    :root {
        --mo-logo-l: 132px;
    }
}

/* =========================================================
   38. Le trace du cadre doit etre BLANC avant de se melanger

   `difference` calcule |fond - source|. Avec une source
   blanche, le resultat est l'inverse exact du fond : clair
   sur l'Encre, sombre sur le Papier. Avec une source deja
   sombre, c'est l'inverse de l'inverse -- sombre sur sombre,
   clair sur clair. C'est ce qu'on voyait.

   `klevor-mot-sans-point.svg` est la version POSITIVE, son
   trace est en #0A1020. On le force en blanc pur avant le
   melange : `brightness(0)` ecrase tout en noir, `invert(1)`
   retourne en blanc. Aucune couleur ne survit, ce qui est
   exactement ce qu'on veut d'un trace monochrome.
   ========================================================= */

.mil-frame .mo-logo-img {
    filter: brightness(0) invert(1);
}

/* La fleche du bas : le `fill` pose sur le <svg> n'est herite
   que par un <path> qui n'en a pas. Une regle du template en
   donne un au path, donc il restait en Encre. */
.mil-frame .mil-arrow,
.mil-frame .mil-arrow path {
    fill: rgb(255, 255, 255) !important;
}

/* =========================================================
   39. Le menu ouvert

   TROIS DEFAUTS CORRIGES ENSEMBLE.

   1. Le template masque tout le panneau droit des que la
      fenetre fait moins de 800 px de haut. Sur un portable,
      la moitie du menu disparaissait sans explication.
   2. La zone droite etait bornee par `.container`, donc le
      menu n'occupait pas la largeur disponible.
   3. Empiler deux listes par colonne desalignait les titres
      des que les listes n'avaient pas la meme longueur. Le
      markup passe a trois colonnes d'une rubrique chacune ;
      il ne reste ici qu'a leur donner de la place.
   ========================================================= */

/* Le menu prend toute la largeur, avec la marge du cadre. */
.mil-menu-frame .container.mo-menu-large {
    max-width: none;
    width: 100%;
    padding-left: 60px;
    padding-right: 60px;
}

.mil-menu-frame .mil-menu-right-frame {
    padding-left: 60px;
}

.mil-menu-frame .mil-menu-right {
    width: 100%;
}

.mo-menu-colonnes > [class^="col-"],
.mo-menu-pied > [class^="col-"] {
    margin-bottom: 40px;
}

.mil-menu-frame .mil-divider {
    margin: 20px 0 50px;
}

.mil-menu-frame .mil-menu-list li {
    margin-bottom: 14px;
}

.mil-menu-frame .mil-menu-right h6 {
    white-space: nowrap;
}

/* Sur un ecran bas, le panneau reste : il se resserre et
   defile plutot que de s'effacer. */
@media screen and (max-height: 800px) and (min-width: 1201px) {
    .mil-menu-frame .mil-menu-right-frame {
        display: flex;
        align-items: center;
    }
}

@media screen and (max-height: 780px) and (min-width: 1201px) {
    .mil-menu-frame .mil-menu-right-frame {
        align-items: flex-start;
        padding-top: 130px;
        padding-bottom: 40px;
        overflow-y: auto;
    }

    .mil-menu-frame .mil-menu-right-frame .mil-menu-right {
        padding-bottom: 0;
    }

    .mo-menu-colonnes > [class^="col-"],
    .mo-menu-pied > [class^="col-"] {
        margin-bottom: 26px;
    }

    .mil-menu-frame .mil-menu-right h6 {
        margin-bottom: 16px !important;
    }

    .mil-menu-frame .mil-menu-list li {
        margin-bottom: 10px;
    }

    .mil-menu-frame .mil-divider {
        margin: 10px 0 28px;
    }

    .mil-main-menu ul li {
        margin-bottom: 24px;
    }
}

/* Sous cette hauteur il n'y a plus de place : le rail
   principal suffit, et il reste entier. */
@media screen and (max-height: 560px) {
    .mil-menu-frame .mil-menu-right-frame {
        display: none;
    }
}

@media screen and (max-width: 1200px) {
    .mil-menu-frame .container.mo-menu-large {
        padding-left: 30px;
        padding-right: 30px;
    }
}

/* =========================================================
   40. Les pastilles du carrousel, en plus gros
   ========================================================= */

.mil-revi-pagination .swiper-pagination-bullet {
    width: 56px;
    height: 56px;
}

.mil-revi-pagination .swiper-pagination-bullet:nth-child(2n) {
    margin-top: 30px !important;
}

.mil-revi-pagination .swiper-pagination-bullet .mil-custom-dot,
.mil-revi-pagination .swiper-pagination-bullet .mil-custom-dot.mil-slide-1,
.mil-revi-pagination .swiper-pagination-bullet .mil-custom-dot.mil-slide-2,
.mil-revi-pagination .swiper-pagination-bullet .mil-custom-dot.mil-slide-3,
.mil-revi-pagination .swiper-pagination-bullet .mil-custom-dot.mil-slide-4,
.mil-revi-pagination .swiper-pagination-bullet .mil-custom-dot.mil-slide-5,
.mil-revi-pagination .swiper-pagination-bullet .mil-custom-dot.mil-slide-6,
.mil-revi-pagination .swiper-pagination-bullet .mil-custom-dot.mil-slide-7 {
    width: 18px;
    height: 18px;
    border-width: 2px;
}

.mil-revi-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active .mil-custom-dot {
    width: 22px;
    height: 22px;
}

@media screen and (max-width: 992px) {
    .mil-revi-pagination .swiper-pagination-bullet {
        width: 44px;
        height: 44px;
    }

    .mil-revi-pagination .swiper-pagination-bullet .mil-custom-dot {
        width: 15px;
        height: 15px;
    }
}

/* =========================================================
   42. Les boutons du hero tiennent sur une ligne
   ========================================================= */

.mil-banner .mil-buttons-frame {
    flex-wrap: nowrap;
    align-items: center;
}

@media screen and (max-width: 768px) {
    .mil-banner .mil-buttons-frame {
        flex-wrap: wrap;
    }
}

/* =========================================================
   43. Les ancres ne se cachent plus sous le cadre

   Un lien vers /produit#extranet amenait la section pile
   sous la barre flottante : on arrivait au bon endroit et
   on ne voyait pas le titre. `scroll-margin-top` reserve la
   hauteur du cadre, sans rien deplacer a l'ecran.

   Le lien lui-meme ne passe plus par swup : une transition
   interne remplace le contenu sans jamais lire le fragment,
   donc le defilement n'avait pas lieu du tout.
   ========================================================= */

section[id],
div[id]:not(#top):not(#swupMain) {
    scroll-margin-top: 120px;
}

@media screen and (max-width: 992px) {
    section[id],
    div[id]:not(#top):not(#swupMain) {
        scroll-margin-top: 90px;
    }
}

/* =========================================================
   44. Les champs du formulaire

   Le template ne leur donne pas de fond : le navigateur en
   met un blanc par defaut, et sur la section creme chaque
   champ devenait une boite blanche au lieu d'une ligne.
   ========================================================= */

[data-mo-contact-form] input,
[data-mo-contact-form] textarea,
[data-mo-contact-form] select {
    background-color: transparent;
    border-bottom: solid 1px var(--mo-line-dark);
    margin-bottom: 30px;
}

[data-mo-contact-form] input:focus,
[data-mo-contact-form] textarea:focus,
[data-mo-contact-form] select:focus {
    border-bottom-color: var(--mo-accent);
}

/* Le remplissage automatique du navigateur repeint le fond
   en jaune ou en bleu : on le neutralise par une ombre
   interieure de la couleur de la section. */
[data-mo-contact-form] input:-webkit-autofill,
[data-mo-contact-form] input:-webkit-autofill:hover,
[data-mo-contact-form] input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--mo-paper-soft) inset;
    -webkit-text-fill-color: var(--mo-text);
}

/* La zone de message respire, et son libelle tient sur
   plusieurs lignes plutot que de deborder. */
[data-mo-contact-form] textarea {
    height: auto;
    min-height: 170px;
    padding: 26px 30px;
    line-height: 1.7;
    resize: vertical;
}

[data-mo-contact-form] textarea::placeholder {
    line-height: 1.7;
}

/* Le menu deroulant s'aligne sur les champs texte. */
[data-mo-contact-form] select {
    height: 70px;
    padding: 0 40px 0 30px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--mo-text);
    border-left: none;
    border-right: none;
    border-top: none;
}

[data-mo-contact-form] select:invalid {
    color: rgba(10, 16, 32, .55);
}

[data-mo-contact-form] select option {
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--mo-text);
    background-color: var(--mo-paper);
}

/* La case a cocher et la mention s'alignent sur la marge
   des champs, pas sur le bord de la colonne. */
[data-mo-contact-form] .mil-checkbox,
[data-mo-contact-form] .col-lg-8 > p {
    padding-left: 30px;
}

@media screen and (max-width: 768px) {
    [data-mo-contact-form] .mil-checkbox,
    [data-mo-contact-form] .col-lg-8 > p {
        padding-left: 0;
    }
}

/* =========================================================
   45. La croix du menu redevient cliquable

   `.mil-frame-top` et `.container` sont deux enfants du
   panneau, sans z-index : c'est l'ordre du DOM qui decide,
   et le conteneur vient apres. Tant qu'il etait borne en
   largeur, la croix depassait sur le cote et restait
   atteignable ; en pleine largeur, le conteneur est passe
   par-dessus elle. On remet la barre du haut au premier
   plan de son panneau.
   ========================================================= */

.mil-menu-frame .mil-frame-top {
    position: relative;
    z-index: 2;
}

/* =========================================================
   46. La page ne defile plus derriere le menu
   ========================================================= */

html.mo-menu-ouvert,
html.mo-menu-ouvert body {
    overflow: hidden;
}

/* =========================================================
   47. Le menu deroulant, redessine

   Le `<select>` reste dans la page : c'est lui qui porte le
   nom du champ, la validation et la valeur envoyee. Il est
   seulement retire de la vue -- pas `display: none`, qui le
   sortirait du formulaire pour certains navigateurs.
   ========================================================= */

.mo-select {
    position: relative;
}

.mo-select select {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    border: none;
    opacity: 0;
    pointer-events: none;
}

.mo-select-bouton {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    height: 70px;
    padding: 0 30px;
    margin-bottom: 30px;
    background: transparent;
    border: none;
    border-bottom: solid 1px var(--mo-line-dark);
    border-radius: 0;
    font-family: var(--mo-font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: left;
    color: var(--mo-text);
    cursor: pointer;
    transition: var(--mo-ease);
}

.mo-select-bouton.mo-select-vide {
    color: rgba(10, 16, 32, .55);
}

.mo-select-bouton:after {
    content: "";
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-right: solid 1px currentColor;
    border-bottom: solid 1px currentColor;
    transform: rotate(45deg);
    transition: var(--mo-ease);
}

.mo-select-bouton.mo-select-ouvert {
    border-bottom-color: var(--mo-accent);
    color: var(--mo-text);
}

.mo-select-bouton.mo-select-ouvert:after {
    margin-top: 2px;
    transform: rotate(225deg);
}

.mo-select-liste {
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 320px;
    overflow-y: auto;
    padding: 0;
    margin: 0;
    list-style: none;
    background-color: var(--mo-paper);
    border: solid 1px var(--mo-line-dark-strong);
    /* La DA n'arrondit que les pilules. Une liste posee sur la page se
       distingue par un filet, pas par une ombre floue. */
    box-shadow: 0 18px 40px rgba(10, 16, 32, .10);
}

.mo-select-liste[hidden] {
    display: none;
}

.mo-select-option {
    padding: 15px 30px;
    font-family: var(--mo-font-body);
    font-size: 14px;
    line-height: 1.5;
    color: var(--mo-text);
    cursor: pointer;
    border-bottom: solid 1px var(--mo-line-dark);
    transition: background-color .18s ease;
}

.mo-select-option:last-child {
    border-bottom: none;
}

.mo-select-option:hover,
.mo-select-option:focus {
    background-color: var(--mo-hollow);
    outline: none;
}

.mo-select-option--actif {
    background-color: var(--mo-hollow);
    font-weight: 600;
}

.mo-select-option--actif:before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 2px;
    margin-right: 12px;
    vertical-align: middle;
    background-color: var(--mo-seal);
}

/* =========================================================
   48. Le pied de page se termine plus tot
   Cent vingt pixels sous la derniere ligne donnaient
   l'impression d'une page qui n'a pas fini de charger.
   ========================================================= */

footer .container.mil-p-120-60 {
    padding-bottom: 20px;
}

/* =========================================================
   49. Le rendez-vous s'ouvre dans un volet, pas un onglet
   Le bouton reste le notre : Cal ne fait qu'ecouter son
   attribut. Le curseur du template doit le savoir.
   ========================================================= */

[data-cal-link] {
    cursor: pointer;
}

/* =========================================================
   50. La liste du menu deroulant passe devant les champs

   Elle n'etait pas transparente : son fond est bien blanc
   opaque. Elle passait DESSOUS. GSAP pose un `transform`
   sur chaque `.mil-up`, ce qui fait de chaque colonne du
   formulaire un contexte d'empilement : le `z-index` de la
   liste ne valait donc qu'a l'interieur de sa propre
   colonne, et les colonnes suivantes -- la zone de message,
   la case a cocher -- se peignaient par-dessus.

   La colonne qui porte le champ est elevee elle-meme.
   ========================================================= */

.mo-select {
    position: relative;
    z-index: 30;
}

/* =========================================================
   51. Les deux moities du menu partent de la meme ligne

   Le rail principal est centre sur toute la hauteur, le
   panneau droit etait cale en bas -- et en haut des que la
   fenetre etait basse. Les deux colonnes ne commencaient
   jamais au meme endroit, et le rail paraissait tomber
   au milieu de nulle part.
   ========================================================= */

.mil-menu-frame .mil-menu-right-frame {
    align-items: center;
}

/* Le calage haut n'existe que dans la requete ci-dessous : sans cette
   remise a zero, le rembourrage y survivait et decalait le rail de
   soixante-cinq pixels sur les grands ecrans. */
.mil-menu-frame .mil-main-menu {
    padding-top: 0;
}

/* Le template reserve soixante pixels sous le panneau droit : centre, il
   remonte donc de trente par rapport au rail. */
.mil-menu-frame .mil-menu-right-frame .mil-menu-right {
    padding-bottom: 0;
}

@media screen and (max-height: 780px) and (min-width: 1201px) {
    .mil-menu-frame .mil-menu-right-frame {
        align-items: flex-start;
    }

}

/* =========================================================
   52. La casse saisie se voit

   Le template met `text-transform: uppercase` sur tous les
   champs : une adresse electronique tapee en minuscules
   s'affichait en capitales, et on ne voyait plus ce qu'on
   ecrivait. Le libelle garde la capitale -- c'est lui qui
   porte le style de la page -- la valeur non.
   ========================================================= */

[data-mo-contact-form] input,
[data-mo-contact-form] textarea {
    text-transform: none;
    font-size: 15px;
    letter-spacing: .01em;
}

[data-mo-contact-form] input::placeholder,
[data-mo-contact-form] textarea::placeholder {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* =========================================================
   53. L'asterisque des champs obligatoires

   Elle se pose sur la colonne : un caractere glisse dans un
   placeholder ne se colore pas, le placeholder est peint
   d'un bloc.
   ========================================================= */

.mo-requis {
    position: relative;
}

.mo-requis:after {
    content: "*";
    position: absolute;
    top: 24px;
    right: 26px;
    font-family: var(--mo-font-body);
    font-size: 16px;
    line-height: 1;
    color: var(--mo-accent);
    pointer-events: none;
}

/* Le champ laisse la place a l'asterisque. */
.mo-requis input,
.mo-requis textarea {
    padding-right: 46px;
}

.mo-requis .mo-select-bouton {
    padding-right: 52px;
}

.mo-requis[data-mo-select]:after {
    right: 52px;
}

@media screen and (max-width: 992px) {
    .mo-requis:after {
        right: 16px;
    }

    .mo-requis[data-mo-select]:after {
        right: 44px;
    }
}

/* =========================================================
   54. Les pages de documents legaux
   Un texte de loi se lit en colonne etroite, avec des
   respirations. Le sommaire de gauche reste sous les yeux.
   ========================================================= */

.mo-legal-aside {
    padding: 26px 0 0;
    border-top: solid 2px var(--mo-accent);
}

.mo-legal-aside h6 {
    font-size: 17px;
}

.mo-legal-maj {
    margin: 0 0 6px;
    font-size: 12.5px;
    color: var(--mo-text-muted);
}

.mo-legal {
    max-width: 68ch;
}

.mo-legal h3 {
    margin: 50px 0 18px;
    font-size: 23px;
}

.mo-legal h3:first-child {
    margin-top: 0;
}

.mo-legal p {
    margin-bottom: 16px;
    color: var(--mo-text-muted);
}

.mo-legal strong {
    color: var(--mo-text);
    font-weight: 600;
}

.mo-legal a {
    color: var(--mo-accent);
    text-decoration: underline;
}

.mo-legal em {
    font-style: normal;
    padding: 1px 8px;
    background-color: var(--mo-seal-soft);
    color: var(--mo-text);
    font-size: .94em;
}

/* Le rappel qu'un document n'est pas encore ferme */
.mo-legal-chantier {
    padding: 18px 22px;
    margin-bottom: 40px;
    border-left: solid 3px var(--mo-seal);
    background-color: var(--mo-seal-soft);
    color: var(--mo-text) !important;
    font-size: 13.5px;
}

/* Les listes de definitions : libelle a gauche, valeur a droite,
   separees d'un filet. Le meme dessin que les tableaux du produit. */
.mo-legal-liste {
    margin: 0 0 30px;
    border-top: solid 1px var(--mo-line-dark);
}

.mo-legal-liste dt {
    float: left;
    clear: left;
    width: 46%;
    padding: 13px 0;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--mo-text);
}

.mo-legal-liste dd {
    margin: 0;
    padding: 13px 0;
    padding-left: 48%;
    border-bottom: solid 1px var(--mo-line-dark);
    font-size: 13.5px;
    color: var(--mo-text-muted);
}

@media screen and (max-width: 576px) {
    .mo-legal-liste dt {
        float: none;
        width: auto;
        padding-bottom: 0;
    }

    .mo-legal-liste dd {
        padding-left: 0;
        padding-top: 4px;
    }
}

/* Le chapeau d'un document contractuel : ce qu'il faut savoir avant de lire. */
.mo-legal-chapo {
    padding: 20px 24px;
    margin-bottom: 44px;
    border-left: solid 3px var(--mo-accent);
    background-color: var(--mo-accent-soft);
    color: var(--mo-text) !important;
    font-size: 14px;
}


/* =========================================================
   55. LE SIGNE DU CODE — page Produit, bloc « Outils sur mesure »
   =========================================================
   POURQUOI PAS UNE CAPTURE. Aucun outil sur mesure n'a encore
   ete livre. Une capture inventee promettrait un ecran qui
   n'existe pas, et un cadre vide dirait que la rubrique n'est
   pas finie. On montre donc le geste plutot que le resultat :
   le signe du code qui s'ecrit.

   PAS DE LOTTIE, ET C'EST UN CHOIX. Lottie demande une
   bibliotheque de soixante kilo-octets et un fichier JSON pour
   trois traits. Le meme mouvement tient en SVG et en CSS, se
   charge avec la page, se colore avec les variables de la
   charte, et suit la teinte du fond sans qu'on le lui demande.

   RIEN A ENREGISTRER. C'est du balisage, pas une image : il n'y
   a ni clic droit « enregistrer », ni glisser-deposer, sans
   qu'on ait a les bloquer.
   ========================================================= */

.mo-code {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    margin: 0;
    padding: 48px 32px;
    aspect-ratio: 3 / 2;
    background-color: var(--mo-ink);
    border: solid 1px var(--mo-line-light);
    overflow: hidden;
}

/* La trame de fond : la meme que les bandeaux sombres du produit,
   pour que le bloc appartienne a la page et non a une autre. */
.mo-code-grille {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
}

.mo-code-signe {
    position: relative;
    width: min(260px, 62%);
    height: auto;
    overflow: visible;
}

.mo-code-trait {
    fill: none;
    stroke: var(--mo-paper);
    stroke-width: 7;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* La longueur du trace sert de pointille : le trait se dessine
       en ramenant le decalage a zero. 300 couvre le plus long des
       trois chemins. */
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: mo-code-ecrire 2.4s cubic-bezier(0, 0, .3642, 1) infinite;
}

/* La barre du milieu est en Sceau : c'est le point du logotype,
   la seule couleur chaude de la charte, et elle ne sert qu'a
   marquer ce qui compte. */
.mo-code-trait--b {
    stroke: var(--mo-seal);
    stroke-width: 6;
    animation-delay: .22s;
}

.mo-code-trait--d {
    animation-delay: .44s;
}

@keyframes mo-code-ecrire {
    0%        { stroke-dashoffset: 300; opacity: 0; }
    12%       { opacity: 1; }
    46%, 74%  { stroke-dashoffset: 0; opacity: 1; }
    94%, 100% { stroke-dashoffset: 0; opacity: .16; }
}

/* Quatre lignes qui se remplissent l'une apres l'autre : ce que
   la barre de progression d'un chantier montrerait, en plus sobre. */
.mo-code-lignes {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 9px;
    width: min(240px, 58%);
}

.mo-code-ligne {
    position: relative;
    display: block;
    height: 4px;
    background-color: rgba(255, 255, 255, .09);
    overflow: hidden;
}

.mo-code-ligne::after {
    content: "";
    position: absolute;
    inset: 0;
    transform-origin: left center;
    transform: scaleX(0);
    background-color: var(--mo-accent);
    animation: mo-code-remplir 2.4s cubic-bezier(0, 0, .3642, 1) infinite;
}

.mo-code-ligne:nth-child(1)::after { width: 100%; animation-delay: .1s; }
.mo-code-ligne:nth-child(2)::after { width: 72%;  animation-delay: .28s; }
.mo-code-ligne:nth-child(3)::after { width: 88%;  animation-delay: .46s; }
.mo-code-ligne:nth-child(4)::after { width: 54%;  animation-delay: .64s; }

.mo-code-ligne--sceau::after {
    background-color: var(--mo-seal);
}

@keyframes mo-code-remplir {
    0%        { transform: scaleX(0); }
    38%, 76%  { transform: scaleX(1); }
    96%, 100% { transform: scaleX(0); }
}

.mo-code-note {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mo-font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
}

.mo-code-curseur {
    display: block;
    width: 7px;
    height: 13px;
    background-color: var(--mo-seal);
    animation: mo-code-clignoter 1.1s steps(1, end) infinite;
}

@keyframes mo-code-clignoter {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0; }
}

@media (max-width: 992px) {
    .mo-code {
        aspect-ratio: 4 / 3;
        padding: 36px 24px;
        gap: 20px;
    }
}

/* Une animation qui tourne en boucle est exactement ce qu'on
   demande d'arreter quand le systeme le dit. Le bloc reste
   lisible : le signe est trace, les lignes sont pleines. */
@media (prefers-reduced-motion: reduce) {

    .mo-code-trait,
    .mo-code-ligne::after,
    .mo-code-curseur {
        animation: none;
    }

    .mo-code-trait {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    .mo-code-ligne::after {
        transform: scaleX(1);
    }
}


/* =========================================================
   56. LES ARTICLES SUR UNE PAGE DE THÈME
   =========================================================
   PAS D'IMAGE MISE EN AVANT, ET C'EST LE POINT DE DÉPART.
   Un article de Klevor n'a pas de visuel : en inventer un
   par article, ce serait quarante illustrations décoratives
   qui ne montrent rien. La carte doit donc tenir sur la
   typographie seule.

   LA FORME EST CELLE D'UN SOMMAIRE, PAS D'UNE GRILLE DE
   VIGNETTES. Des rangées séparées d'un filet, un numéro en
   chiffres tabulaires, un titre en Fraunces, une phrase
   d'accroche, et la durée de lecture. C'est ce que fait une
   revue qui a du texte et pas de photos, et ça tient aussi
   bien à trois articles qu'à vingt.

   LE NUMÉRO EST LE SEUL ORNEMENT. Il donne le rythme visuel
   que l'image aurait donné, il se lit comme une position
   dans une série, et il ne prétend rien illustrer.
   ========================================================= */

.mo-articles {
    border-top: solid 1px var(--mo-line-dark);
}

.mo-article {
    position: relative;
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: baseline;
    gap: 0 28px;
    padding: 34px 0;
    border-bottom: solid 1px var(--mo-line-dark);
    text-decoration: none !important;
    transition: background-color .4s cubic-bezier(0, 0, 0.3642, 1);
}

.mo-article:hover {
    background-color: var(--mo-hollow);
}

.mo-article-num {
    font-family: var(--mo-font-body);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: .06em;
    color: var(--mo-seal);
    padding-left: 4px;
}

.mo-article-corps {
    min-width: 0;
}

.mo-article-titre {
    display: block;
    font-family: var(--mo-font-display);
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 400;
    line-height: 1.24;
    letter-spacing: -.01em;
    color: var(--mo-text);
    transition: color .4s cubic-bezier(0, 0, 0.3642, 1);
}

.mo-article:hover .mo-article-titre {
    color: var(--mo-accent);
}

.mo-article-accroche {
    display: block;
    margin-top: 10px;
    max-width: 62ch;
    font-family: var(--mo-font-body);
    font-size: 15px;
    line-height: 1.65;
    color: var(--mo-text-muted);
}

.mo-article-meta {
    display: block;
    margin-top: 14px;
    font-family: var(--mo-font-body);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mo-text-muted);
    opacity: .8;
}

/* La flèche ne bouge qu'au survol : au repos, la rangée doit
   rester une ligne de sommaire, pas un bouton. */
.mo-article-fleche {
    align-self: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--mo-text-muted);
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity .4s cubic-bezier(0, 0, 0.3642, 1),
                transform .4s cubic-bezier(0, 0, 0.3642, 1),
                color .4s cubic-bezier(0, 0, 0.3642, 1);
}

.mo-article:hover .mo-article-fleche {
    opacity: 1;
    transform: none;
    color: var(--mo-accent);
}

.mo-article-fleche svg {
    width: 100%;
    height: 100%;
    display: block;
}

@media (max-width: 768px) {
    .mo-article {
        grid-template-columns: 40px 1fr;
        gap: 0 16px;
        padding: 26px 0;
    }

    .mo-article-fleche {
        display: none;
    }
}

/* --- L'en-tête d'un article ------------------------------
   Le fil d'Ariane et la durée de lecture, au-dessus du titre.
   Rien d'autre : pas d'auteur, pas de vignette. */

.mo-article-entete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-bottom: 22px;
    font-family: var(--mo-font-body);
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.mo-article-entete a {
    color: rgba(255, 255, 255, .75);
    text-decoration: none;
    border-bottom: solid 1px rgba(255, 255, 255, .25);
    transition: color .4s cubic-bezier(0, 0, 0.3642, 1);
}

.mo-article-entete a:hover {
    color: var(--mo-paper);
}

.mo-article-entete span::before {
    content: "·";
    margin-right: 16px;
    opacity: .5;
}

.mo-article-entete span:first-child::before {
    content: none;
    margin: 0;
}

/* --- Le corps d'un article -------------------------------
   La colonne s'arrête sous le bouton Connexion du cadre
   fixe : c'est la limite lisible demandée. 1040 px de
   plafond, et toute la largeur utile en dessous. Le cadre
   étant fixe et le corps commençant sous la bannière, les
   deux ne se croisent jamais : le bouton sert de repère de
   longueur de ligne, pas de zone à éviter. */

.mo-corps {
    max-width: min(100%, 1040px);
}

.mo-corps h2 {
    margin: 56px 0 20px;
    font-size: clamp(24px, 2.6vw, 30px);
    line-height: 1.22;
}

.mo-corps h3 {
    margin: 40px 0 14px;
    font-size: clamp(18px, 2vw, 21px);
    line-height: 1.3;
}

.mo-corps p {
    margin: 0 0 20px;
    font-size: 16px;
    line-height: 1.75;
    color: var(--mo-text);
}

.mo-corps ul,
.mo-corps ol {
    margin: 0 0 24px;
    padding-left: 0;
    list-style: none;
}

.mo-corps ul li,
.mo-corps ol li {
    position: relative;
    margin-bottom: 12px;
    padding-left: 26px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--mo-text);
}

.mo-corps ul li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 12px;
    width: 10px;
    height: 1px;
    background-color: var(--mo-seal);
}

.mo-corps ol {
    counter-reset: mo-corps-liste;
}

.mo-corps ol li {
    counter-increment: mo-corps-liste;
}

.mo-corps ol li::before {
    content: counter(mo-corps-liste) ".";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mo-seal);
}

.mo-corps a {
    color: var(--mo-accent);
    text-decoration: none;
    border-bottom: solid 1px var(--mo-accent-soft);
    transition: border-color .4s cubic-bezier(0, 0, 0.3642, 1);
}

.mo-corps a:hover {
    border-bottom-color: var(--mo-accent);
}

.mo-corps em {
    display: block;
    margin: 0 0 8px;
    font-style: normal;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mo-text-muted);
}

/* =========================================================
   57. LE CATALOGUE D'ARTICLES

   OU IL SERT. Sur /ressources, qui porte tous les articles,
   et sur les cinq pages de theme. Meme composant des deux
   cotes : une barre de recherche, une grille de cartes en
   trois colonnes, une pagination.

   POURQUOI DES CARTES ET PLUS DES RANGEES. Le sommaire en
   rangees tient jusqu'a une dizaine d'articles. Au-dela, la
   page devient une colonne interminable ou rien ne se
   distingue. Trois colonnes redonnent une densite lisible.

   AUCUNE IMAGE MISE EN AVANT. La carte se tient par sa
   typographie et par la pastille de theme. Une vignette
   generique vaudrait moins que l'espace qu'elle prendrait.

   LA GRILLE EST UN FILET, PAS UNE COLLECTION DE BOITES. Les
   cartes se touchent, separees d'un trait d'un pixel obtenu
   par la couleur de fond du conteneur. C'est ce que fait un
   tableau, et ca evite l'effet vignette.

   SANS JAVASCRIPT, TOUT S'AFFICHE. Toutes les cartes sont
   dans le HTML : la recherche et la pagination ne font que
   masquer. Un robot voit la totalite des liens, et un
   visiteur sans script voit la liste complete.
   ========================================================= */

.mo-catalogue {
    position: relative;
}

/* --- La barre : recherche a gauche, compte a droite ------ */

.mo-catalogue-barre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 30px;
    margin-bottom: 40px;
    padding-bottom: 22px;
    border-bottom: solid 1px var(--mo-line-dark);
}

.mo-recherche {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 320px;
    max-width: 420px;
}

.mo-recherche > svg {
    position: absolute;
    left: 0;
    width: 17px;
    height: 17px;
    color: var(--mo-text-muted);
    pointer-events: none;
}

/* Le champ n'a pas de cadre : un trait sous la ligne suffit,
   comme les autres champs du site. */
.mo-recherche-champ {
    width: 100%;
    padding: 10px 28px;
    border: none;
    border-bottom: solid 1px var(--mo-line-dark-strong);
    border-radius: 0;
    background: transparent;
    font-family: var(--mo-font-body);
    font-size: 15px;
    color: var(--mo-text);
    transition: border-color var(--mo-ease);
    -webkit-appearance: none;
    appearance: none;
}

.mo-recherche-champ::placeholder {
    color: var(--mo-text-muted);
    opacity: .75;
}

.mo-recherche-champ:focus {
    outline: none;
    border-bottom-color: var(--mo-accent);
}

.mo-recherche-champ::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

/* La croix d'effacement, posee nous-memes : celle du
   navigateur ne se style pas et n'existe pas sur Firefox. */
.mo-recherche-vider {
    position: absolute;
    right: 0;
    width: 22px;
    height: 22px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--mo-text-muted);
    cursor: pointer;
    transition: color var(--mo-ease);
}

.mo-recherche-vider:hover {
    color: var(--mo-text);
}

.mo-recherche-vider.mo-visible {
    display: flex;
}

.mo-recherche-vider svg {
    width: 13px;
    height: 13px;
    display: block;
    color: currentColor;
}

.mo-catalogue-compte {
    margin: 0;
    font-family: var(--mo-font-body);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mo-text-muted);
}

/* --- La grille ------------------------------------------- */

.mo-cartes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background-color: var(--mo-line-dark);
    border: solid 1px var(--mo-line-dark);
}

.mo-carte {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 30px 28px 26px;
    background-color: var(--mo-paper);
    text-decoration: none !important;
    transition: background-color var(--mo-ease);
}

.mo-carte:hover {
    background-color: var(--mo-hollow);
}

.mo-carte-pastille {
    align-self: flex-start;
    margin-bottom: 20px;
    padding: 5px 10px;
    border: solid 1px var(--mo-line-dark-strong);
    font-family: var(--mo-font-body);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mo-text-muted);
    transition: color var(--mo-ease), border-color var(--mo-ease);
}

.mo-carte:hover .mo-carte-pastille {
    color: var(--mo-seal);
    border-color: var(--mo-seal);
}

.mo-carte-titre {
    display: block;
    font-family: var(--mo-font-display);
    font-optical-sizing: auto;
    font-variation-settings: "SOFT" 0, "WONK" 0;
    font-size: clamp(19px, 1.5vw, 22px);
    font-weight: 400;
    line-height: 1.26;
    letter-spacing: -.01em;
    color: var(--mo-text);
    transition: color var(--mo-ease);
}

.mo-carte:hover .mo-carte-titre {
    color: var(--mo-accent);
}

/* Trois lignes d'accroche au maximum : au-dela, les cartes
   d'une meme rangee cessent d'avoir la meme hauteur utile. */
.mo-carte-accroche {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 12px;
    font-family: var(--mo-font-body);
    font-size: 14px;
    line-height: 1.65;
    color: var(--mo-text-muted);
}

.mo-carte-pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: auto;
    padding-top: 26px;
}

.mo-carte-duree {
    font-family: var(--mo-font-body);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mo-text-muted);
    opacity: .85;
}

.mo-carte-fleche {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--mo-text-muted);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity var(--mo-ease), transform var(--mo-ease), color var(--mo-ease);
}

.mo-carte:hover .mo-carte-fleche {
    opacity: 1;
    transform: none;
    color: var(--mo-accent);
}

.mo-carte-fleche svg {
    width: 100%;
    height: 100%;
    display: block;
}

.mo-carte[hidden] {
    display: none;
}

/* --- Quand la recherche ne trouve rien ------------------- */

.mo-catalogue-rien {
    margin: 0;
    padding: 60px 40px;
    text-align: center;
    border: dashed 1px var(--mo-line-dark-strong);
    background-color: var(--mo-paper);
    font-family: var(--mo-font-body);
    color: var(--mo-text-muted);
}

.mo-catalogue-rien strong {
    color: var(--mo-text);
    font-weight: 500;
}

/* --- La pagination --------------------------------------- */

.mo-pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 44px;
}

.mo-pages:empty {
    display: none;
}

.mo-page {
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: solid 1px var(--mo-line-dark);
    background-color: var(--mo-paper);
    font-family: var(--mo-font-body);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--mo-text-muted);
    text-decoration: none !important;
    transition: color var(--mo-ease), border-color var(--mo-ease), background-color var(--mo-ease);
}

.mo-page:hover {
    color: var(--mo-text);
    border-color: var(--mo-line-dark-strong);
}

.mo-page.mo-actuelle {
    color: var(--mo-paper);
    background-color: var(--mo-ink);
    border-color: var(--mo-ink);
    cursor: default;
}

.mo-page[aria-disabled="true"] {
    opacity: .35;
    pointer-events: none;
}

.mo-page-saut {
    min-width: 22px;
    text-align: center;
    color: var(--mo-text-muted);
    opacity: .6;
}

@media (max-width: 991px) {
    .mo-cartes {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .mo-cartes {
        grid-template-columns: 1fr;
    }

    .mo-carte {
        padding: 26px 22px 22px;
    }

    .mo-catalogue-barre {
        margin-bottom: 30px;
    }

    .mo-recherche {
        max-width: none;
    }
}