/* ---------------------------------------------------------------------------
   M2X CONSEIL — feuille de raffinement du site
   ---------------------------------------------------------------------------
   Posée dans `website.custom_code_head`, le mécanisme natif d'Odoo pour ce
   genre d'ajout : rien à installer, réversible en vidant un champ, et le thème
   reste standard. Les couleurs et les polices, elles, restent pilotées par
   `user_values.scss` et `user_color_palette.scss` — on ne les redéclare pas ici.

   Ce fichier ne fait qu'une chose : donner au contenu un rythme et une mesure.
   Le site rendait un mur de texte de 130 caractères par ligne, sans alternance
   ni respiration. Tout ce qui suit vient de la charte, rien n'est décoratif.
   --------------------------------------------------------------------------- */

:root {
  --m2x-ink:     #101A2E;
  --m2x-blue:    #1E3A6E;
  --m2x-amber:   #1E3A6E;   /* D, 2026-09-05 : le bleu porte l'action, plus de seconde teinte */
  --m2x-amberink:#1E3A6E;
  --m2x-ivory:   #F7F6F3;
  --m2x-line:    #E3E0D9;
  --m2x-muted:   #646A78;   /* resserré le 2026-08-12 : passe aussi sur teinte */
  --m2x-measure: 68ch;      /* la mesure de la charte */

  /* Fonds teintés — dérivés du bleu et de l'ambre, séparation mesurée à 1.11
     et 1.10 sur l'ivoire. Ils ne portent que quatre encres : nuit, bleu, gris
     ci-dessus et erreur. Pas d'ambre-texte, pas de succès, pas d'alerte.     */
  --m2x-tint-blue:  #E4EBF6;
  --m2x-tint-amber: #E4EBF6;

  /* Un rayon de composant, deux de conteneur. Le composant est passé de 6 à
     14 px le 2026-08-12 : la grammaire d'interface se lit d'abord à la
     rondeur, et 6 px la contredisaient à chaque bouton.                      */
  --m2x-radius:    14px;
  --m2x-radius-lg: 24px;
  --m2x-radius-xl: 48px;

  /* Une carte se détache par sa BORDURE. L'ombre n'est qu'une nuance.        */
  --m2x-shadow: 0 1px 4px rgba(16, 26, 46, .06);
}

/* --- Mesure de lecture ----------------------------------------------------
   Le défaut le plus coûteux du site : sur 1140 px, une ligne courait à ~130
   caractères. Au-delà de ~75, l'œil perd le début de la ligne suivante. On
   borne le texte courant, jamais les tableaux ni les illustrations.          */
.s_text_block .container > p,
.s_text_block .container > ul,
.s_text_block .container > ol,
.s_text_block .container > h2 + p,
.s_banner .container p.lead {
  max-width: var(--m2x-measure);
}

/* --- Hiérarchie typographique --------------------------------------------
   Les titres écrasaient le corps sans hiérarchie entre eux. On resserre, on
   donne de l'air au-dessus et peu en dessous : un titre appartient au bloc
   qu'il ouvre.                                                              */
h1, .h1, h2, .h2, h3, .h3 {
  letter-spacing: -0.015em;
  line-height: 1.2;
  font-weight: 500;   /* jamais gras : un titre se distingue par son corps et
                         par l'espace au-dessus, pas par sa graisse          */
}

/* La règle générique ci-dessus perd contre `.display-3` du thème, qui compose
   en 300 : un titre de bannière arrivait donc plus maigre que son propre
   chapô. Constaté à l'écran le 2026-08-12. On remonte la spécificité au lieu
   de dégainer `!important`.                                                  */
/* Mesuré sur alan.com le 2026-08-28, styles calculés : `h1` = 40 px / 500 /
   interligne 48, `h2` = 32 / 500 / 40, bouton hauteur 40 rayon 16. La grammaire
   du socle transcrit donc **exactement** la référence, et l'échelle n'a jamais
   été le problème.

   Une passe l'avait portée à 74,8 px le même jour, en croyant que l'austérité
   venait de là. Elle n'en venait pas : ce qui fait Alan, c'est une image
   générée en pleine page, des cartes à photo, des pastilles à gros chiffre et
   un témoignage sur un visage. Le titre y est plus PETIT que ce qu'on avait
   posé. On revient donc à la règle, qui avait raison.                        */
.s_banner h1, .s_banner .display-3 {
  font-size: clamp(1.9rem, 2.9vw, 2.35rem);   /* ~40 px, comme la référence */
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-bottom: 1.1rem;
}
.s_banner .container p.lead { font-size: 1.1rem; line-height: 1.55; }

.s_text_block h2 {
  font-size: clamp(1.5rem, 2.3vw, 1.9rem);    /* ~32 px, comme la référence */
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin-top: 0;
  margin-bottom: 1.2rem;
  max-width: var(--m2x-measure);
}
.s_text_block h3 { font-size: 1.18rem; margin-bottom: .45rem; }
.s_text_block p  { margin-bottom: 1.05rem; }

/* Le filet sous les h2 a été retiré le 2026-08-12. Il compensait un rythme
   vertical trop serré ; celui-ci ayant doublé (ci-dessous), il ne séparait
   plus rien et alourdissait chaque titre.                                   */

/* Eyebrow — la petite ligne qui situe le lecteur au-dessus d'un titre.

   Elle prend l'encre ambre. C'est le second métier de l'accent, et le seul que
   la charte lui permette : l'ambre de bouton ne peut pas porter de texte
   (2,47:1 sur ivoire), sa variante assombrie `--m2x-amberink` le peut, mesurée
   à 4,51. Le site était quasi monochrome parce que l'accent n'avait qu'un
   emploi ; il en a deux, sans qu'aucune couleur nouvelle n'entre dans les
   jetons.

   ⚠️ La règle était bornée à `.s_banner` et à `.m2x-carte`. Les cinq pages
   intérieures posent la même classe dans une `s_text_block` ordinaire : leur
   eyebrow arrivait donc en gris hérité, pendant que celui de l'accueil était
   ambre. Deux styles pour le même objet, constatés à l'écran le 2026-08-28.
   La règle est donc portée au site entier, et les sélecteurs contextuels ne
   gardent que ce qui leur est propre : la marge.                             */
.m2x-eyebrow {
  display: block;
  font-family: Archivo, system-ui, sans-serif;
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--m2x-amberink);
  margin-bottom: .6rem;
}

/* --- L'en-tête reste sous la main ------------------------------------------
   Il défilait avec la page : mesuré, `top` valait -1600 après 1600 px de
   défilement, et le seul appel permanent du site — « Réserver 30 minutes » —
   disparaissait avec lui. L'option de thème est dans un éditeur qui n'a pas
   voulu s'ouvrir ; la feuille fait le même travail, et elle est versionnée.

   ⚠️ Le fond ne peut pas rester transparent, ce qu'il était : un en-tête collé
   et transparent laisse le texte de la page défiler dessous et devenir
   illisible. Il prend donc l'ivoire du fond de page. Le filet du bas existait
   déjà, il sert de séparation — pas d'ombre, qui demanderait un état de
   défilement que la CSS seule ne sait pas tenir.                              */
header.o_header_standard {
  position: sticky;
  top: 0;
  z-index: 1020;
  background-color: var(--m2x-ivory);
}

/* --- Rythme vertical et alternance de fonds -------------------------------
   Quatre fonds suffisent à rythmer une page : blanc, ivoire, et le bleu nuit
   pour l'appel final. Aucune bordure de section, aucun dégradé.              */
/* ⚠️ `!important`, et ce n'est pas de la paresse. Les sections portent les
   classes utilitaires d'Odoo — `pt32 pb32` — qui posent leur padding en
   `!important` : sans le nôtre, cette règle **ne fait rien**. Et elle n'a rien
   fait du 2026-08-12 au 2026-08-26, alors que le README la décrivait comme « le
   changement le plus important de cette feuille ». Le padding calculé valait
   32 px sur les huit sections de l'accueil. Mesuré, pas relu.

   Borné à `s_text_block` : la bannière garde son `pt64 pb48`, qui est un choix
   de composition et non un reste.                                             */
main section.s_text_block { padding-block: 4rem !important; }
/* Porté de 6,5 à 8 rem le 2026-08-26, puis ramené à 5,5 le 2026-08-28. Le
   commentaire d'alors disait la chose juste — « le rythme seul n'y suffit pas,
   il faut aussi moins de sections et plus hautes » — mais seul le rythme avait
   été posé. Une section de 66 mots avec 128 px au-dessus et 128 en dessous ne
   respire pas : elle laisse 256 px de blanc entre deux paragraphes, et le site
   ne paraît pas sobre, il paraît inachevé. Constaté à l'écran le 2026-08-28.

   Le padding descend donc, et la hauteur revient par le contenu : `m2x-duo`
   donne un vis-à-vis aux sections qui n'en avaient pas, et les sections les
   plus courtes ont été fondues dans leur voisine. Les deux gestes vont
   ensemble — c'est ce que l'entrée précédente annonçait sans le faire.        */
@media (min-width: 992px) {
  main section.s_text_block { padding-block: 5.5rem !important; }
}

/* ⚠️ Le rythme est borné à `main`, et ce n'est pas une précaution théorique.
   Odoo enveloppe le bouton d'appel de l'en-tête dans une `<section
   class="s_text_block">` — un conteneur, pas une section de contenu. Sans cette
   borne, la règle ci-dessus lui donnait 104 px au-dessus et 104 en dessous, et
   l'en-tête passait de ~74 px à 272. Introduit puis constaté à l'écran le
   2026-08-12, sur signalement de Morgan : « la barre de navigation ça va pas
   du tout ». Même piège dans le pied de page.                                */
header section.s_text_block,
#footer section.s_text_block { padding-block: 0 !important; }

/* Le rythme a été porté de 3,25/4,25 rem à 4/6,5 rem le 2026-08-12. C'est le
   changement le plus important de cette feuille, et le moins spectaculaire à
   la lecture du diff : une page « propre » l'est par l'espace vertical, pas
   par la taille de ses titres. La référence tient ses sections entre 740 et
   1700 px de haut ; on ne va pas jusque-là — le site est éditorial et dense,
   pas illustré — mais on cesse de tasser.                                   */

/* --- La section à deux colonnes -------------------------------------------
   Le défaut structurel du site, mesuré page par page le 2026-08-28 : sur les
   cinq pages intérieures, PAS UNE section n'avait de seconde colonne. Chacune
   posait une colonne de texte bornée à 68 ch dans un conteneur de 1140, et les
   40 % de droite restaient vides — sur toute la hauteur, sur toutes les pages.

   La grammaire dit « la respiration à droite est voulue, ce n'est pas un vide
   à combler ». C'est vrai d'un paragraphe ; ça ne l'est plus quand c'est la
   page entière, et que rien ne vient jamais s'y poser. Ce qui manquait n'était
   pas de la largeur de texte, c'était un vis-à-vis.

   `m2x-duo` est ce vis-à-vis, et il n'a qu'une forme : le récit à gauche, un
   objet à droite — un schéma, une saillie, une carte. Jamais deux colonnes de
   prose, qui obligeraient l'œil à choisir par où commencer.                  */
.m2x-duo { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 992px) {
  .m2x-duo { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: 4rem; }
  /* Le vis-à-vis large — un schéma a besoin de place, une saillie non. */
  .m2x-duo--large { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); }
  /* Le vis-à-vis se centre sur la hauteur du récit quand il est court : posé en
     haut, il laisse un trou sous lui, ce qui rend le trou plus visible que
     l'objet. */
  .m2x-duo--centre { align-items: center; }
}
/* La colonne de texte d'un duo n'a plus besoin de sa borne de mesure : c'est la
   grille qui la tient, et la borne l'y rétrécirait une seconde fois. */
.m2x-duo > :first-child > p,
.m2x-duo > :first-child > ul,
.m2x-duo > :first-child > ol,
.m2x-duo > :first-child > h2,
.m2x-duo > :first-child > h3 { max-width: none; }

/* --- La source ------------------------------------------------------------
   Une affirmation réglementaire porte sa source, et elle la porte DANS LA PAGE,
   pas seulement dans les données structurées : un visiteur qui doute doit
   pouvoir vérifier sans lire du JSON. C'est aussi ce qui manquait le plus côté
   modèles — le site ne portait, hors polices, aucun lien sortant, donc aucun
   ancrage vers quelque chose que quelqu'un d'autre puisse recouper.

   Composée petit et en gris : elle se lit après l'argument, pas avant. Les
   liens restent soulignés — un lien qui ne se distingue que par la couleur
   n'existe pas pour un daltonien.                                            */
.m2x-source {
  font-size: .88rem;
  color: var(--m2x-muted);
  border-top: 1px solid var(--m2x-line);
  padding-top: .9rem;
  margin-top: 1.6rem;
}

/* --- La bande pleine largeur ----------------------------------------------
   Un visuel qui traverse la page de bord à bord. Ce n'est pas la même chose
   qu'une vignette en vis-à-vis, et la différence n'est pas d'échelle mais de
   nature : la vignette accompagne un texte, la bande interrompt la page.

   Six vignettes de 350 px posées le 2026-08-28 n'ont rien changé à l'impression
   d'ensemble — « c'est toujours austère ». La bande, si : elle sort du
   conteneur, donc elle sort de la mesure de lecture qui borne tout le reste.

   ⚠️ `100vw` et non `100%` : la bande vit dans un `.container` de 1140 px, et
   c'est précisément de lui qu'elle doit s'échapper. Le décalage négatif la
   recentre sur la fenêtre. Pas de `overflow-x` sur le body à craindre — la
   bande ne dépasse pas la fenêtre, elle l'épouse.                            */
.m2x-bande {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-block: 3.5rem;
  line-height: 0;            /* sinon la ligne de base du svg ajoute un filet */
}
.m2x-bande svg { width: 100%; height: auto; display: block; }
/* Une bande posée juste avant la fin d'une section mange le padding de celle-ci
   — c'est voulu : elle doit toucher le bord, pas flotter à 88 px du suivant. */
.m2x-bande:last-child { margin-bottom: -5.5rem; }
.m2x-bande:first-child { margin-top: -5.5rem; }

/* --- Les sections en masse pleine -----------------------------------------
   Sur l'accueil, six sections sur sept étaient claires — blanc ou ivoire — et
   une seule en fond plein. Le regard n'avait aucun point d'ancrage, et c'est la
   deuxième cause de l'austérité après l'échelle des titres.

   `m2x-teinte` donne à une section le bleu teinté sur toute sa largeur. Aucune
   couleur nouvelle : c'est le jeton `--m2x-tint-blue`, qui servait déjà aux
   panneaux, appliqué à la section entière.                                    */
section.m2x-teinte { background-color: var(--m2x-tint-blue); }
section.m2x-teinte .m2x-carte,
section.m2x-teinte .m2x-tuile { background: #fff; }
/* Dans une section teintée, le panneau ne peut plus être teinté du même bleu :
   il disparaîtrait. Il passe au blanc, et garde sa bordure. */
section.m2x-teinte .m2x-panneau {
  background: #fff;
  border: 1px solid var(--m2x-line);
}

/* --- La saillie ------------------------------------------------------------
   Une phrase de la page, sortie du paragraphe et posée en vis-à-vis. Elle ne
   dit rien de neuf : c'est ce qui la rend honnête, là où une statistique
   inventée comblerait le même vide en mentant. Le filet ambre la rattache à
   l'accent sans lui donner de fond, parce qu'un fond en ferait une carte et
   qu'une carte demande un titre.                                             */
.m2x-saillie {
  border-left: 3px solid var(--m2x-amber);
  padding-left: 1.5rem;
  margin: 0;
  font-family: Archivo, system-ui, sans-serif;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--m2x-ink);
}
.m2x-saillie cite {
  display: block;
  margin-top: .9rem;
  font-family: "Public Sans", system-ui, sans-serif;
  font-size: .9rem;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  color: var(--m2x-muted);
}
.m2x-sombre .m2x-saillie      { color: var(--m2x-ivory); }
.m2x-sombre .m2x-saillie cite { color: #C9CDD6; }

/* --- La tête d'une page intérieure -----------------------------------------
   Les cinq pages intérieures ouvraient sur une `s_text_block`, donc sur le
   rythme d'une section ordinaire : 128 px au-dessus du titre, 128 en dessous.
   Une tête de page n'est pas une section — elle porte le titre, elle est ce
   que le visiteur voit en arrivant, et elle doit tenir dans le premier écran.
   Elle prend donc son propre rythme, et il est plus serré, pas plus lâche.   */
main section.m2x-tete { padding-block: 3.5rem 3rem !important; }
@media (min-width: 992px) {
  main section.m2x-tete { padding-block: 4.5rem 4rem !important; }
}
.m2x-tete h1 {
  font-size: clamp(1.9rem, 2.9vw, 2.35rem);   /* ~40 px, comme la référence */
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-bottom: 1.1rem;
}
.m2x-tete .lead, .m2x-tete > .container > p:first-of-type {
  font-size: 1.1rem;
  line-height: 1.55;
}

.o_cc2, section.m2x-alt { background-color: var(--m2x-ivory); }
.m2x-sombre { background-color: var(--m2x-ink); color: var(--m2x-ivory); }
.m2x-sombre h2 { color: var(--m2x-ivory); border-bottom-color: rgba(247,246,243,.22); }
.m2x-sombre p  { color: #C9CDD6; }
.m2x-sombre a:not(.btn) { color: #C9CDD6; }  /* le bleu ne se lit pas sur la nuit : 1,56 */

/* --- Tableaux -------------------------------------------------------------
   Un tableau de comparaison est le seul endroit du site où le lecteur arbitre.
   En-tête tenu, filets discrets, première colonne portante.                  */
.s_text_block table { border-collapse: collapse; width: 100%; }
.s_text_block table thead th {
  background: var(--m2x-ivory);
  border-bottom: 2px solid var(--m2x-ink) !important;
  font-family: Archivo, system-ui, sans-serif;
  font-size: .95rem;
  padding: .7rem .9rem;
}
.s_text_block table td, .s_text_block table th { padding: .8rem .9rem; vertical-align: top; }
.s_text_block table tbody tr + tr td { border-top: 1px solid var(--m2x-line); }
.s_text_block table tbody td:first-child { font-weight: 600; color: var(--m2x-ink); white-space: nowrap; }

/* --- Encadrés -------------------------------------------------------------
   Le filet ambre marque ce qui appartient au lecteur : ses cas à lui, ce
   qu'il n'a pas à faire. Il ne marque jamais une offre.                      */
.m2x-encadre {
  background: var(--m2x-tint-amber);
  border-left: 3px solid var(--m2x-amber);
  border-radius: 0 var(--m2x-radius) var(--m2x-radius) 0;
  padding: 1.25rem 1.5rem;
  max-width: var(--m2x-measure);
}
.m2x-encadre > :last-child { margin-bottom: 0; }

/* --- La capture produit, dans son cadre ------------------------------------
   Relevé sur payfit.com le 2026-08-28 : le hero porte une capture du produit
   dans un cadre arrondi et ombré qui CHEVAUCHE le panneau au-dessus. C'est
   l'élément dominant de la page, et le seul qui montre ce qu'on achète.

   Le site n'avait que deux captures, posées à plat au fil du texte, dont une
   légendée « base de démonstration ». Une capture à plat est une pièce jointe ;
   une capture encadrée est un produit.

   ⚠️ L'ombre sort ici de la règle « l'ombre n'est qu'une nuance » de la charte,
   et c'est délibéré : cette règle vaut pour une CARTE, qui se détache par sa
   bordure. Un cadre de fenêtre est un objet posé au-dessus de la page — sans
   profondeur, il redevient une image collée.                                 */
.m2x-ecran {
  border-radius: var(--m2x-radius-lg);
  background: #fff;
  border: 1px solid var(--m2x-line);
  box-shadow: 0 24px 60px -20px rgba(16, 26, 46, .28),
              0 2px 8px rgba(16, 26, 46, .06);
  overflow: hidden;
}
/* La barre de fenêtre : trois pastilles et une adresse. Elle ne simule pas un
   navigateur pour tromper — elle dit « ceci est un écran », ce qu'une image
   rognée ne dit pas. */
.m2x-ecran-barre {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .7rem .9rem;
  background: var(--m2x-ivory);
  border-bottom: 1px solid var(--m2x-line);
}
.m2x-ecran-barre i {
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--m2x-line); flex: none;
}
.m2x-ecran-barre span {
  margin-left: .6rem;
  font-size: .78rem;
  color: var(--m2x-muted);
  font-family: Archivo, system-ui, sans-serif;
}
.m2x-ecran img { display: block; width: 100%; height: auto; }
.m2x-ecran figcaption {
  padding: .8rem 1rem;
  font-size: .84rem;
  color: var(--m2x-muted);
  border-top: 1px solid var(--m2x-line);
}
/* Le chevauchement : la capture mord sur la section suivante. C'est ce qui
   donne la profondeur, et ça ne marche que si le conteneur ne coupe pas. */
.m2x-ecran--deborde { margin-bottom: -5rem; position: relative; z-index: 2; }

/* --- La bande de preuve ---------------------------------------------------
   PayFit met « 4,5/5 parmi +22 000 entreprises » DANS le premier écran, puis
   six logos clients juste après le hero. Alan met des pastilles à gros chiffre
   avec source datée. Les deux références posent la preuve avant l'argument.

   M2X n'a ni logo client, ni note, ni volume — et on n'en invente pas. Ce qui
   est vrai et vérifiable tient quand même une bande : ce que le simulateur
   interroge, le délai de réponse, la version d'Odoo, le SIREN. C'est moins
   flatteur qu'un logo, et c'est contrôlable — ce qu'un logo emprunté n'est
   pas.                                                                       */
.m2x-preuve {
  display: grid;
  gap: 1.25rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  padding: 2rem 0;
  border-block: 1px solid var(--m2x-line);
}
.m2x-preuve > div { min-width: 0; }
.m2x-preuve b {
  display: block;
  font-family: Archivo, system-ui, sans-serif;
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--m2x-ink);
  margin-bottom: .3rem;
}
.m2x-preuve span { display: block; font-size: .92rem; color: var(--m2x-muted); }
.m2x-preuve cite {
  display: block; margin-top: .35rem; font-style: normal;
  font-size: .8rem; color: var(--m2x-muted);
}

/* --- Cartes ---------------------------------------------------------------
   Bordure fine plutôt qu'ombre portée : la carte se détache par son filet.
   L'ombre ajoutée le 2026-08-12 ne la fait pas flotter, elle la décolle du
   fond — c'est une nuance, et elle reste sous le seuil du perceptible isolé.
   Bouton secondaire et carte partagent ce matériau : c'est ce qui fait tenir
   l'ensemble.                                                               */
/* Une carte qui porte une combinaison du thème (`o_cc`) garde son fond et sa
   couleur de texte : repeinte en blanc, elle rendait un panneau vide, le texte
   blanc du thème sur le blanc de cette règle. Constaté le 2026-09-05 sur la
   saillie de « À propos ». Le padding ne s'y applique pas non plus : la carte
   `s_card` d'Odoo porte le sien par `--card-spacer-*`.                       */
.s_text_block .card:not(.o_cc), .m2x-carte {
  background: #fff;
  border: 1px solid var(--m2x-line);
  /* Une carte de CONTENU prend le rayon de conteneur, pas celui de composant.
     La grammaire tient trois niveaux — 16 bouton et petite carte, 24 carte de
     contenu, 48 grand panneau — et c'est cette hiérarchie de surface qu'on lit
     sans savoir la nommer. La feuille appliquait `--m2x-radius` (14) aux deux,
     ce qui l'effaçait. Aucun jeton nouveau : `--m2x-radius-lg` existe déjà.  */
  border-radius: var(--m2x-radius-lg);
  box-shadow: var(--m2x-shadow);
  padding: 1.5rem;
  height: 100%;
  /* --- Le survol, qui n'existait pas -------------------------------------
     Mesuré le 2026-08-26 : cartes, liens et images n'avaient AUCUNE
     transition (`all / 0s`), et les boutons héritaient des 150 ms de
     Bootstrap — juste sous la plage de la grammaire, 160 à 300 ms, `ease-out`,
     sans rebond. Une page sans retour au survol paraît morte sans qu'on
     sache dire pourquoi.

     Ce qui bouge : la bordure se fonce, l'ombre s'épaissit d'un cran. Rien ne
     se soulève et rien ne grandit — la grammaire interdit le rebond, et un
     déplacement au survol fait rater la cible sur un écran tactile, qui
     simule un survol au premier appui. La couleur de survol n'est pas
     inventée : c'est `--m2x-border`, le jeton de bordure de champ, déjà
     mesuré par la charte.                                                  */
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out;
}
.s_text_block .card:not(.o_cc):hover, .m2x-carte:hover {
  border-color: var(--m2x-border, #978E7B);
  box-shadow: 0 2px 10px rgba(16, 26, 46, .09);
}
.m2x-carte h3 { margin-top: 0; }
.m2x-carte > :last-child { margin-bottom: 0; }
/* La carte serre son eyebrow contre son titre : elle est petite, et la marge
   du site y ferait un trou. Tout le reste est hérité de la règle générale. */
.m2x-carte .m2x-eyebrow { margin-bottom: .35rem; }

/* --- Boutons --------------------------------------------------------------
   L'ambre ne porte jamais de texte clair : 2,67:1. Le libellé est en bleu
   nuit, mesuré à 6,51:1. Un seul bouton ambre par page.                      */
.btn {
  border-radius: var(--m2x-radius);
  font-weight: 500;
  padding-inline: 1.25rem;
  min-height: 48px;          /* la hauteur de bouton de la grammaire Site */
  display: inline-flex;
  align-items: center;
  transition: background-color 180ms ease-out, border-color 180ms ease-out,
              color 180ms ease-out, box-shadow 180ms ease-out;
}

/* `min-height` ci-dessus ne suffisait pas : `btn-lg` de Bootstrap compose en
   1,25 rem — 21,25 px — avec son propre rembourrage vertical, et le bouton
   mesurait **66 px de haut** pour une grammaire qui en demande 48. Son libellé
   faisait les deux tiers du corps d'un H2. Un bouton de la taille d'un titre
   n'est pas plus cliqué : il déséquilibre la page, et il vole au titre le rôle
   de première chose qu'on lit. Mesuré le 2026-08-26 sur l'accueil.            */
.btn-lg {
  font-size: 1rem;
  padding-block: 0;
  padding-inline: 1.25rem;
  min-height: 48px;
}
/* Le bouton secondaire porte exactement le matériau de carte.               */
.btn-outline-secondary, .btn-light {
  background: #fff;
  border: 1px solid var(--m2x-line);
  box-shadow: var(--m2x-shadow);
  color: var(--m2x-ink);
}
/* Depuis le 2026-09-05 (décision D) le bleu porte seul l'action : libellé
   blanc, mesuré à 11,14:1, et deux crans plus sombres au survol et à l'appui. */
.btn-secondary, .btn-secondary:focus {
  background-color: var(--m2x-amber);
  border-color: var(--m2x-amber);
  color: #fff;
}
.btn-secondary:hover  { background-color: #17305C; border-color: #17305C; color: #fff; }
.btn-secondary:active { background-color: #122649; border-color: #122649; color: #fff; }
.btn:focus-visible { outline: 3px solid var(--m2x-ink); outline-offset: 2px; box-shadow: none; }

/* --- Liens ---------------------------------------------------------------- */
main a:not(.btn):not(.nav-link) {
  color: var(--m2x-blue);
  text-underline-offset: .18em;
  transition: color 160ms ease-out;
}
main a:not(.btn):not(.nav-link):hover { color: var(--m2x-ink); }

/* --- Listes --------------------------------------------------------------- */
.s_text_block ul li { margin-bottom: .45rem; }

/* --- Illustrations -------------------------------------------------------- */
.m2x-illu { max-width: 720px; margin-inline: auto; }
.m2x-illu svg { width: 100%; height: auto; display: block; }

/* --- FAQ ------------------------------------------------------------------
   Balises natives : pas de JS, pas de dépendance, et le contenu reste lisible
   par un moteur de recherche même replié.                                    */
.m2x-faq { max-width: var(--m2x-measure); }
.m2x-faq details {
  border-bottom: 1px solid var(--m2x-line);
  padding: .95rem 0;
}
.m2x-faq details summary {
  cursor: pointer;
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.03rem;
  color: var(--m2x-ink);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.m2x-faq details summary::-webkit-details-marker { display: none; }
.m2x-faq details summary::after {
  content: "+";
  color: var(--m2x-amberink);
  font-size: 1.3rem;
  line-height: 1;
  transition: transform 160ms ease;
}
.m2x-faq details[open] summary::after { content: "–"; }
.m2x-faq details p { margin: .7rem 0 0; color: var(--m2x-muted); }
.m2x-faq details summary:focus-visible { outline: 3px solid var(--m2x-ink); outline-offset: 3px; }

/* --- Pied de page ---------------------------------------------------------
   Sombre, en colonnes. C'est le seul endroit du site où le fond est plein et
   foncé, et c'est ce qui FERME la page au lieu de la laisser se dissoudre dans
   le blanc. La référence fait pareil, et la charte prévoyait déjà le bleu nuit
   pour ce rôle (§« Rythme vertical et alternance de fonds »).               */
#footer {
  background: var(--m2x-ink);
  color: #C9CDD6;
  border-top: 0;
}
#footer section.s_text_block { padding-block: 3.5rem 1.5rem !important; }

#footer h5, #footer .h5 {
  font-family: Archivo, system-ui, sans-serif;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #8A93A6;
  margin-bottom: .9rem;
}
#footer a { color: #E8EAEF; text-decoration: none; }
#footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: .18em; }
#footer ul li { margin-bottom: .5rem; }
#footer p { color: #C9CDD6; }

.m2x-pied-marque {
  font-family: Archivo, system-ui, sans-serif;
  font-size: 1.05rem; font-weight: 500; color: #fff; margin-bottom: .2rem;
}
.m2x-pied-base { color: #8A93A6; margin-bottom: 1rem; }
/* Où est l'entreprise. Un pied de page d'agence le dit — Drakkar met « Nantes »
   jusque dans son titre — et c'est aussi ce que le JSON-LD affirme : la donnée
   structurée ne doit rien dire que la page ne montre pas. */
.m2x-pied-lieu { font-size: .86rem; line-height: 1.55; margin-top: 1rem; color: #8A93A6 !important; }

/* Le filet de bas de page : la mention légale ne se mélange pas à la
   navigation. Elle a son étage, plus petit et plus discret.                 */
.m2x-pied-fin {
  border-top: 1px solid rgba(232, 234, 239, .16);
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  font-size: .82rem;
  color: #8A93A6;
}
.m2x-pied-fin a { color: #8A93A6; text-decoration: underline; text-underline-offset: .18em; }
.m2x-pied-fin a:hover { color: #fff; }
.m2x-pied-fin > * { margin-bottom: 0; }

/* Odoo pose la bande des cookies et son copyright APRÈS `#footer`, dans un
   bloc clair. Sous un pied sombre, la page se terminait donc sur un liseré
   blanc détaché, comme si le site débordait. On la replie dans le pied.
   Le copyright natif est masqué : le nôtre est déjà dans le filet de fin, et
   il porte l'année calculée plutôt qu'une année figée.                      */
.o_cookie_policy_link_container,
#o_footer_copyright,
.o_footer_copyright {
  background: var(--m2x-ink);
  color: #8A93A6;
  padding-block: .35rem 1.25rem;
  margin: 0;
}
.o_cookie_policy_link_container a {
  color: #8A93A6;
  text-decoration: underline;
  text-underline-offset: .18em;
}
.o_cookie_policy_link_container a:hover { color: #fff; }
#o_footer_copyright, .o_footer_copyright { display: none; }
/* Idem pour la ligne de cookies d'Odoo : « Politique de cookies » et « Modifier
   mes préférences » sont maintenant DANS notre filet de fin, avec la classe
   `o_cookies_bar_toggle` qui les fait marcher. Deux lignes légales sous un pied
   sombre, disant « cookies » trois fois, se lisaient comme un oubli.        */
.o_cookie_policy_link_container { display: none; }

/* --- Panneau teinté -------------------------------------------------------
   Le geste qui structure une page longue : il POSE un bloc dans la page au
   lieu de la couper d'une bande pleine largeur. C'est la différence entre une
   page qui alterne et une page qui respire. Il sert à l'accroche d'une page,
   à une mise en perspective, à un encadré long.
   Réservé aux quatre encres autorisées sur teinte — voir tokens.css §4bis.  */
.m2x-panneau {
  background: var(--m2x-tint-blue);
  border-radius: var(--m2x-radius-xl);
  padding: 3.5rem 2rem;
  margin-block: 1rem;
}
@media (min-width: 992px) { .m2x-panneau { padding: 4.5rem 4rem; } }
.m2x-panneau > :last-child { margin-bottom: 0; }
.m2x-panneau h2 { max-width: var(--m2x-measure); }
.m2x-panneau p  { max-width: var(--m2x-measure); }

/* --- Pastille statistique -------------------------------------------------
   Un chiffre qui appartient au lecteur, posé en débord sur l'angle d'une
   illustration. Trois parties, et la troisième n'est pas optionnelle : le
   chiffre, ce qu'il signifie, et SA SOURCE DATÉE. Un chiffre sans source sur
   un site de conseil est un chiffre qu'on ne peut pas défendre en rendez-vous.
   L'ambre porte le fond, jamais le texte.                                   */
.m2x-stat {
  background: var(--m2x-tint-amber);
  border-radius: var(--m2x-radius-lg);
  padding: 1.25rem 1.5rem;
  max-width: 22rem;
}
.m2x-stat b {
  display: block;
  font-family: Archivo, system-ui, sans-serif;
  font-size: 1.85rem;
  font-weight: 500;
  line-height: 1.1;
  color: var(--m2x-ink);
  margin-bottom: .3rem;
}
.m2x-stat p      { margin: 0; color: var(--m2x-ink); }
.m2x-stat cite   { display: block; margin-top: .5rem; font-style: normal;
                   font-size: .82rem; color: var(--m2x-muted); }
/* En débord sur l'illustration voisine, seulement quand il y a la place.     */
@media (min-width: 992px) {
  .m2x-illu-stat { position: relative; }
  .m2x-illu-stat .m2x-stat { position: absolute; top: 1.5rem; left: -1.5rem; z-index: 1; }
}

/* --- Capture d'écran ------------------------------------------------------
   Une capture posée à nu sur la page flotte : elle a ses propres bords, sa
   propre lumière, et rien ne la relie au texte. Posée dans un panneau teinté
   avec de la marge, elle devient un objet de la page. C'est le dispositif de
   la référence pour ses captures d'application, et il vaut ici pour la même
   raison.

   Le filet autour de l'image n'est pas décoratif : une interface Odoo est
   claire sur fond clair, et sans lui on ne sait plus où finit la capture.

   ⚠️ Les captures viennent d'une base d'essai jetable, société française, dont
   les données sont les jeux de démonstration d'Odoo. JAMAIS de la production :
   son tableau de bord comptable affiche le solde bancaire réel. Et jamais de
   nom de base visible dans l'image — condition détaillée dans
   `tools/pousser_captures.py`.                                              */
.m2x-capture {
  background: var(--m2x-tint-blue);
  border-radius: var(--m2x-radius-lg);
  padding: 1.5rem;
}
@media (min-width: 992px) { .m2x-capture { padding: 2.25rem; } }
.m2x-capture img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--m2x-line);
  border-radius: var(--m2x-radius);
  box-shadow: 0 4px 16px rgba(16, 26, 46, .10);
}
.m2x-capture figcaption {
  margin-top: .9rem;
  font-size: .88rem;
  color: var(--m2x-muted);
}

/* --- Tuiles de statistique ------------------------------------------------
   Une rangée de chiffres-clés. Valeur d'abord, libellé dessous — l'inverse
   oblige à lire pour trouver le chiffre.                                    */
.m2x-tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
  margin-block: 1.5rem;
}
.m2x-tuile {
  background: #fff;
  border: 1px solid var(--m2x-line);
  border-radius: var(--m2x-radius);
  box-shadow: var(--m2x-shadow);
  padding: 1.25rem 1.35rem;
}
.m2x-tuile b {
  display: block;
  font-family: Archivo, system-ui, sans-serif;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.05;
  color: var(--m2x-ink);
  margin-bottom: .35rem;
}
.m2x-tuile span { color: var(--m2x-muted); font-size: .95rem; }

/* Une tuile est dimensionnée pour un CHIFFRE : 2 rem, c'est ce qui fait qu'un
   « 340 € » se lit avant son libellé. Posé sur un mot — « Devis », « Banque » —
   le même corps hurle. Ce modificateur sert la grille d'énumération, où la
   valeur est un nom et non une mesure.                                      */
.m2x-tuiles--mots .m2x-tuile b {
  font-size: 1.15rem;
  line-height: 1.3;
  margin-bottom: .25rem;
}

/* --- Le portail — grammaire APP, pas grammaire Site ------------------------
   `/my/*` n'est pas une vitrine : c'est une application, utilisée par quelqu'un
   qui a un travail à faire. Elle suit donc l'autre jeu de règles — titre de page
   à 24 px et jamais plus, cartes bordées à ombre presque nulle, l'écran se
   hiérarchisant par l'espace et non par la taille des mots.

   ⚠️ Ce qui suit MASQUE des entrées, il ne révoque pas d'accès. L'URL tapée à
   la main répond encore. C'est un choix d'affichage, tenable parce qu'on ne
   protège rien de sensible ici ; le jour où il faut vraiment fermer une porte,
   ça se joue dans les droits, pas dans une feuille de style.               */

/* Le titre est dans `.o_portal_wrap`, pas dans `.o_portal_my_home` — vérifié
   dans le DOM, un premier jet ciblait le mauvais ancêtre et ne s'appliquait
   pas. Il sortait à 34 px ; la grammaire App dit 24, quelle que soit
   l'importance de l'écran.                                                  */
.o_portal_wrap h1 { font-size: 1.4rem; line-height: 1.3; margin-bottom: 1.75rem; }

.o_portal_cards { gap: .75rem; }

.o_portal_index_card > a {
  background: #fff !important;
  border: 1px solid var(--m2x-line);
  border-radius: var(--m2x-radius) !important;
  box-shadow: var(--m2x-shadow);
  padding: 1rem 1.15rem !important;
  align-items: center;
  transition: border-color var(--m2x-duration, 160ms) ease;
}
.o_portal_index_card > a:hover { border-color: var(--m2x-ink); }
.o_portal_index_card > a:focus-visible { outline: 3px solid var(--m2x-ink); outline-offset: 2px; }

/* Les vignettes livrées par Odoo sont des rendus colorés de 64 px : à cette
   taille elles portent l'écran, alors qu'elles ne font qu'étiqueter une ligne.
   Ramenées au rang de repère.                                              */
.o_portal_index_card img { width: 34px !important; height: 34px !important; opacity: .85; }

.o_portal_index_card h3,
.o_portal_index_card .h3 { font-size: 1rem; font-weight: 500; margin-bottom: .15rem; }
.o_portal_index_card p   { font-size: .9rem; color: var(--m2x-muted); margin: 0; }

/* Ce qu'un client n'a pas à voir. Retiré le 2026-08-12 sur arbitrage de Morgan.
   « Nos factures » est le cas le plus net : ce sont les factures FOURNISSEUR
   de M2X, et deux entrées « factures » côte à côte laissent le client deviner
   laquelle est la sienne.
   Pour en rétablir une, supprimer sa ligne ici — rien d'autre n'a bougé.    */
.o_portal_index_card:has(a[href*="filterby=bills"]),
.o_portal_index_card:has(a[href="/my/signatures"]),
.o_portal_index_card:has(a[href="/my/projects"]),
.o_portal_index_card:has(a[href="/my/tasks"]),
.o_portal_index_card:has(a[href="/my/documents"]),
.o_portal_index_card:has(a[href="/knowledge/home"]) { display: none; }

/* Le bloc d'identité à droite prend le matériau de carte au lieu de flotter. */
.o_portal_wrap .col-lg-4 > .mt-3.mw-100 {
  background: #fff;
  border: 1px solid var(--m2x-line);
  border-radius: var(--m2x-radius);
  box-shadow: var(--m2x-shadow);
  padding: 1.25rem 1.35rem;
}

/* --- Mouvement ------------------------------------------------------------
   Une seule animation sur tout le site : le contenu se révèle en montant
   légèrement quand il entre dans la vue. Elle est faite en CSS pur avec
   `animation-timeline: view()` — pas de JS, pas d'observateur, rien à charger.

   `@supports` fait le repli : là où la propriété n'existe pas, il ne se passe
   rien du tout et le contenu est simplement visible. C'est le bon sens de
   l'échec pour une animation — jamais un contenu bloqué à `opacity: 0`.     */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .m2x-reveal {
      animation: m2x-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
    @keyframes m2x-reveal {
      from { opacity: 0; transform: translateY(1rem); }
      to   { opacity: 1; transform: none; }
    }
  }
}

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

/* --- Arriver par une ancre ------------------------------------------------
   `scroll-margin-top` réserve la hauteur de l'en-tête au-dessus de la cible,
   qui mesure 78 px.

   ⚠️ **L'en-tête n'est PAS collant aujourd'hui** — `o_header_standard`, et à
   1600 px de défilement son `top` vaut -1600 : mesuré le 2026-08-26, après que
   le premier jet de cette règle ait affirmé le contraire. La marge est donc
   sans effet pour l'instant, et elle est là pour le jour où l'option de thème
   « collant » sera activée (Personnaliser → En-tête, à l'écran : c'est du
   paramétrage). Elle ne coûte rien en attendant ; ce qui coûtait, c'était le
   motif faux écrit au-dessus.

   Le défilement est doux, et il ne l'est que si personne n'a demandé le
   contraire — deux ancres partent désormais du pied de page et de la carte
   d'accueil, et un saut sec sur 4000 px fait perdre au lecteur où il est.    */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

[data-m2x-bloc="fe-simulateur"],
[data-m2x-bloc="accueil-fin"],
#suis-je-concerne { scroll-margin-top: 6.5rem; }

/* --- L'anneau de focus ----------------------------------------------------
   La charte demande UN anneau, net, le même partout. Odoo sert à la place la
   bague de Bootstrap — `border-color` plus `box-shadow: 0 0 0 .25rem` d'un bleu
   dilué — visible, mais plus faible sur fond clair qu'un trait d'encre, et
   différente d'un composant à l'autre. `$input-focus-*` n'est pas exposé dans
   l'onglet Theme : c'est l'une des rares choses qu'Odoo ne sait pas faire et
   que la charte exige, donc l'une des rares qui restent ici.

   Elle portait le nom du simulateur (`.m2x-sim-in`) tant que le champ était à
   nous. Le champ est maintenant un `.form-control` comme les autres — la règle
   suit, et couvre du même coup les champs de la page Contact.               */
.form-control:focus-visible,
.form-select:focus-visible { outline: 3px solid var(--m2x-ink); outline-offset: 2px; }

/* --- Cartes en rangée -----------------------------------------------------
   Le bloc qui étirait les colonnes porteuses de carte en boîtes flex est parti
   le 2026-09-05 : les six pages sont composées en snippets standards, dont les
   cartes tiennent leur hauteur par `h-100`. La règle rangeait les paragraphes
   d'une colonne CÔTE À CÔTE dès qu'une carte voisinait un titre — constaté sur
   « À propos » et « Contact » le jour même, pour la troisième fois.          */
/* Le dernier élément se colle en bas — mais SEULEMENT dans une carte qui porte
   un appel à l'action, là où c'était le but : aligner les boutons d'une rangée
   de cartes inégales. Appliquée à toutes, la règle creusait un trou entre le
   titre et le texte des cartes les plus courtes d'une rangée, et ce trou se
   lisait comme un oubli. Constaté à l'écran le 2026-08-28 sur les trois cartes
   de « À qui ça s'adresse ». */
.m2x-carte:has(.btn) > :last-child { margin-top: auto; }
.m2x-carte > :last-child { margin-bottom: 0; }
.m2x-carte .btn { align-self: flex-start; }

/* --- Pied de page ---------------------------------------------------------
   Les libellés se cassaient sur deux lignes dans une colonne trop étroite.   */
#footer .container > .row > [class*="col-"] { min-width: 190px; }

/* Les libellés se coupaient EN PLEIN MOT — « Facture électroniqu / e »,
   « Confidentia / lité » — dans une colonne à 190 px de contenu. Une coupure
   au milieu d'un mot n'est pas une gêne esthétique : elle force à relire.
   On interdit la coupure intra-mot ; le libellé passe alors à la ligne entre
   deux mots, ce qui se lit. Constaté le 2026-08-12.                         */
#footer a, #footer li, #footer h5, #footer .h5 {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
#footer h5, #footer .h5 { font-size: 1.02rem; margin-bottom: .7rem; }
#footer a { text-decoration: none; }
#footer a:hover { text-decoration: underline; }

/* --- En-tête --------------------------------------------------------------
   Historique : le menu se repliait derrière un « + » dès 1200 px parce que
   l'en-tête portait la recherche, le numéro, « Se connecter » et l'appel à
   l'action. Le 2026-08-12, trois entrées pointant toutes vers `/helpdesk` —
   posées par l'installation du module, dont deux homonymes — ont été
   supprimées, et le numéro a été retiré (vue `website.header_text_element`
   désactivée). Il reste quatre entrées et un seul appel.                     */

/* L'équilibre de la référence : logo à gauche, puis un grand vide, puis le
   menu ET l'appel à l'action groupés à droite. Odoo pose `me-auto` sur le menu,
   ce qui le colle au logo et rejette l'appel seul à l'autre bout — l'œil doit
   alors traverser toute la barre pour relier les deux. On déplace la poussée.  */
header .navbar .top_menu {
  margin-left: auto !important;
  margin-right: 1.5rem !important;
  gap: .35rem;
}
header .navbar .top_menu .nav-link { padding-inline: .7rem; }

/* La barre se pose sur un filet plutôt que sur une ombre, comme les cartes.  */
header.o_header_standard { border-bottom: 1px solid var(--m2x-line); }
header .navbar { padding-block: .9rem; }

/* Connecté, c'est le COMPTE qui prime, pas l'appel à l'action : quelqu'un qui
   a un compte n'a plus à être démarché, il a à retrouver ses documents. C'est
   la disposition de la référence, où « Contactez-nous » est un lien discret et
   où l'identité porte le bouton. `:has()` sert d'indicateur de session : le
   menu utilisateur n'existe dans le DOM que connecté.                        */
header:has(.js_usermenu) .btn_cta {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--m2x-blue);
  text-decoration: underline;
  text-underline-offset: .18em;
  padding-inline: .5rem;
}
header:has(.js_usermenu) .btn_cta:hover { color: var(--m2x-ink); background: transparent; }

header .js_usermenu > .dropdown-toggle,
header .dropdown.o_no_autohide_item > .dropdown-toggle {
  background: #fff;
  border: 1px solid var(--m2x-line);
  border-radius: var(--m2x-radius);
  box-shadow: var(--m2x-shadow);
  color: var(--m2x-ink);
  padding: .5rem 1rem;
  font-weight: 500;
}
header .dropdown.o_no_autohide_item > .dropdown-toggle:hover { border-color: var(--m2x-ink); }
header .dropdown-menu {
  border: 1px solid var(--m2x-line);
  border-radius: var(--m2x-radius);
  box-shadow: var(--m2x-shadow-2, 0 4px 16px rgba(16,26,46,.10));
  padding: .35rem;
}
header .dropdown-menu .dropdown-item { border-radius: calc(var(--m2x-radius) - 4px); }