/* ═══════════════════════════════════════════════════
   DEISS IMMOBILIER — Brand Design System
   Identité Phase 2 : Digital Blue · Cream · DM Sans + DM Serif Display
   ═══════════════════════════════════════════════════ */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* L'attribut hidden doit toujours gagner, même sur les éléments display:flex/grid */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }

/* ── Reperage au clavier ──
   Sans regle explicite, le navigateur dessine son propre anneau en
   reprenant la couleur du texte. Sur un bouton bleu a texte blanc, cela
   donnait un anneau BLANC pose sur une barre blanche : invisible.
   Verifie en naviguant reellement a la touche Tab — les liens de
   navigation avaient bien leur anneau gris fonce, les boutons bleus
   n'avaient rien. On pose donc un anneau bleu partout, en blanc sur les
   fonds sombres ou le bleu ne ressortirait pas.
   `:focus-visible` et non `:focus` : le clic a la souris ne doit pas
   laisser d'anneau derriere lui. */
:focus-visible {
  outline: 2px solid var(--blue, #405AD2);
  outline-offset: 2px;
}
.section--dark :focus-visible,
.footer :focus-visible,
.svc-tabs__visual :focus-visible {
  outline-color: #fff;
}
body {
  font-family: 'Plus Jakarta Sans', -apple-system, 'Inter', sans-serif;
  color: #04024D;
  background: #fff;
  line-height: 1.5;   /* 16/24 chez eux, contre 16/25,6 */
  -webkit-font-smoothing: antialiased;
  /* ── Plus de `overflow-x` du tout sur le corps ──
     Il y avait `clip` ici, contre un debordement horizontal. Mesure faite
     sur 8 pages a 390 et a 768 px, la regle desactivee : AUCUNE ne
     deborde. Le debordement qu'elle retenait a ete corrige ailleurs
     depuis, et la regle survivait a son motif.
     Or `clip` sur un ancetre d'un element colle est une source connue de
     saccade sur Safari. Comparaison de la chaine complete avec la leur,
     du bloc colle jusqu'a `html` : chez eux tout est en `visible`. C'etait
     la derniere difference structurelle qui restait.
     Si un debordement horizontal reapparait un jour, ne pas remettre
     `hidden` : sur iOS il fait du corps un conteneur de defilement et
     confisque le toucher des blocs internes. Corriger l'element fautif. */
}

/* ── Tokens ── */
:root {
  /* ── Taille du titre de page ──
     L'echelle relevee sur lemlist, ecrite une seule fois. Chaque hero de
     chaque page la reprend par cette variable au lieu de redeclarer sa
     propre courbe : c'est ainsi que le site s'etait retrouve avec quatre
     tailles de h1 — 36 px sur les opportunites, 48 sur l'accueil, 51,2 sur
     les guides, 54,4 sur les comparatifs — et deux graisses. Un hero qui
     ecrit sa propre valeur sort de l'echelle sans que personne le voie. */
  --fs-h1: clamp(2rem, 1.586rem + 1.77vw, 3rem);

  /* Le titre d'un ecran de l'application n'est pas un titre de page vitrine :
     il coiffe un outil de travail, pas une accroche, et reste donc plus bas
     que l'echelle du site. Il lui faut malgre tout une seule valeur — les
     quatre ecrans en portaient trois : 41,6 sur les biens et les projets,
     38,4 sur la proposition, 35,2 sur les parametres. */
  --fs-h1-app: clamp(1.8rem, 4vw, 2.6rem);

  /* Meme raison pour les titres de section : la page des garanties fixait
     les siens a 36 px, rattrapes a 28 sur telephone, quand l'echelle y
     descend a 24,8. Les composants qui portent leur propre taille — les
     onglets de l'accueil, les cartes — restent libres : ce n'est pas une
     derive, c'est leur dessin. */
  --fs-h2: clamp(1.55rem, 1.2rem + 1.3vw, 2.25rem);

  /* Deiss brand palette */
  --blue:        #405AD2;   /* Digital Blue — couleur primaire */
  --blue-dark:   #04024D;   /* Royal Blue — sections sombres */
  --blue-light:  #e8ebfe;   /* Digital Blue 10% */
  --blue-mid:    #c5ccfb;   /* Digital Blue 25% */
  --blue-pale:   #f2f3fe;   /* Digital Blue 5% */
  --cream:       #f7f2ed;   /* Fond principal Deiss */
  --black:       #04024D;   /* Royal Blue comme noir de marque */
  --gray-900:    #0a0940;
  --gray-700:    #2d2c5e;
  --gray-600:    #4a4878;
  /* 500 et 300 manquaient a l'appel : une trentaine de declarations les
     utilisaient sans jamais s'appliquer. Valeurs interpolees dans la gamme
     existante, entre leurs deux voisines. */
  --gray-500:    #6c6a94;
  /* 8e8cb0 donnait 3,22 de contraste sur blanc, sous le seuil de 4,5 —
     et cette nuance sert a toutes les legendes et mentions du site.
     Releve chez eux : DEUX gris de texte en tout, une encre et un gris
     sourd. Nous en avions quatre en service simultane, dont 6c6a94 et
     726f96 que personne ne distingue — deux valeurs a 0,3 point de
     contraste l'une de l'autre. Le 400 prend donc la valeur du 500 : la
     variable reste, pour ne rien casser dans les feuilles qui l'appellent,
     mais la palette de texte tombe a deux gris. Contraste sur blanc :
     5,03 au lieu de 4,74, donc en hausse. */
  --gray-400:    #6c6a94;
  --gray-300:    #b3b1c8;
  --gray-200:    #d8d6e0;
  --gray-100:    #f0ede8;
  --gray-50:     #f8f7f5;
  --white:       #ffffff;
  --accent:      #ed797b;   /* Coral — couleur d'accentuation */
  --accent-light: rgba(237,121,123,0.10);
  /* La marque n'a qu'un rouge : #ed797b. Ces deux variables portaient une
     version assombrie (#b44d4f) destinee au texte sur fond clair, ou le
     corail ne fait que 2,76 de contraste. Ce second rouge a ete supprime
     partout, sur decision explicite — un seul rouge pour la marque.
     Les deux noms restent pour ne pas casser la trentaine d'appels qui
     les utilisent, mais ils valent desormais le corail. Ne pas y remettre
     une teinte differente. */
  --accent-dark:  #ed797b;
  --accent-text:  #ed797b;
  --green:       #16a34a;
  --green-light: #dcfce7;
  --border:      #e2e0db;
  /* Les halos colores sont supprimes : ils datent le dessin et n'ajoutent
     aucune information. Conserves comme alias transparents pour ne rien
     casser la ou ils sont encore appeles. */
  --shadow-accent: none;
  /* Trois rayons, contre cinq auparavant — dont 18 et 20 px qui ne se
     distinguaient pas a l'oeil. */
  --r:           12px;
  --r-lg:        16px;
  --r-xl:        40px;
  --shadow-sm:   none;
  --shadow-md:   0 1px 2px rgba(4,2,77,0.05);
  --shadow-lg:   0 2px 8px rgba(4,2,77,0.06);
  --shadow-blue: none;

  /* ── Echelle d'espacement ──
     Relevee chez eux : leurs huit valeurs les plus employees sont toutes
     des multiples de 8 — 8, 16, 24, 32, 40, 48, 64, 80 —, le 8 seul
     revenant 441 fois. Nos valeurs, elles, comptent 14, 21, 18, 22 et 30,
     qui n'appartiennent a aucune famille.
     Ces variables ne corrigent RIEN de l'existant : reprendre des
     centaines de valeurs deja reglees a la mesure ferait courir un risque
     de regression sans rapport avec le gain, et j'ai verifie qu'aucun
     desalignement visible n'en decoule aujourd'hui. Elles sont la pour que
     le code ecrit a partir de maintenant tombe sur la grille, et que le
     site y converge sans qu'on ait a le refaire. */
  --e-1:  8px;
  --e-2: 16px;
  --e-3: 24px;
  --e-4: 32px;
  --e-5: 40px;
  --e-6: 48px;
  --e-7: 64px;
  --e-8: 80px;
}

/* ── Typography — DM Sans + DM Serif Display ── */
/* ═══════════════════════════════════════════════════════════════
   ECHELLE TYPOGRAPHIQUE — relevee sur lemlist.com le 6 septembre 2026
   ───────────────────────────────────────────────────────────────
   Mesuree chez eux a trois largeurs : h1 32 px a 375, 42 a 790, 48 a
   1280 ; h2 36 ; h3 32 ; corps 16/24. Interlignes larges — 1,17 et
   1,25 sur les titres, 1,5 sur le corps — et AUCUN resserrement de
   lettres. C'est cet air entre les lignes qui donne l'equilibre, plus
   que la taille elle-meme.
   La formule « base + vw » reproduit leur progression continue ; un
   clamp en vw seul restait bloque sur son minimum des 400 px.
   ═══════════════════════════════════════════════════════════════ */
h1 {
  font-size: var(--fs-h1, clamp(2rem, 1.586rem + 1.77vw, 3rem));
  font-weight: 700; line-height: 1.17; letter-spacing: normal; color: var(--black);
  /* Filet, pas une facon de composer : la coupure ne s'active que si un mot
     ne tient pas du tout dans sa colonne. Un nom de ville a traits d'union
     insecables forme un seul mot — « Montigny-le-Bretonneux » demandait
     399 px pour 335 disponibles sur telephone, et sortait du cadre sans que
     la page defile, donc sans que rien ne le signale. */
  overflow-wrap: break-word;
}
/* ── Le fragment differenciant du titre ──
   Un titre de page porte deux choses : ce que la page est, et ce qui la
   distingue. La seconde passe en bleu vif. La regle vivait dans le seul
   `index.html`, si bien qu'aucune autre page ne pouvait s'en servir — et
   de fait, quatre titres sur quarante portaient un accent, chacun par un
   moyen different (`span` ici, `em` sur le concept, `b` sur les garanties).
   `font-style: normal` parce que le fragment est parfois porte par un
   `em`, dont l'italique n'est pas voulu ici. */
.hero-accent { color: var(--blue, #405AD2); font-style: normal; }

h2 {
  font-size: var(--fs-h2, clamp(1.55rem, 1.2rem + 1.3vw, 2.25rem));
  font-weight: 700; line-height: 1.25; letter-spacing: normal; color: var(--black);
}
/* 32 px chez eux, contre 18,4 chez nous : notre echelle tombait d'une
   falaise entre h2 et h3. Les composants qui fixent leur propre taille
   — cartes, panneaux, etapes — ne sont pas touches. */
h3 { font-size: 2rem; font-weight: 700; color: var(--black); line-height: 1.25; }
h4 { font-size: 0.8125rem; font-weight: 700; color: var(--black); letter-spacing: 0.06em; text-transform: uppercase; }
/* ── Longueur de ligne ──
   Releve chez eux : leurs paragraphes tiennent entre 48 et 57 signes par
   ligne, jamais plus. Les notres allaient de 49 a 172 — la note du
   comparatif faisait 172 signes, les reponses de la FAQ 100. Au-dela de
   75, l'oeil perd la ligne suivante en revenant a la marge.
   La valeur est en rem et non en `ch` : le « 0 » de Plus Jakarta Sans est
   large, 72ch valaient 843 px, soit une centaine de signes — l'unite
   promettait le contraire de ce qu'elle donnait.
   34em et non 34rem : la valeur suit la taille du paragraphe. En rem, le
   plafond etait le meme pour tous, si bien qu'un texte en 13 px logeait
   80 signes par ligne la ou un texte en 16 px en logeait 62 — le reglage
   se relachait a mesure que le corps diminuait, exactement quand il
   faudrait le resserrer.
   C'est un plafond, pas une largeur : sur une carte etroite la regle ne
   mord pas, elle n'agit que la ou le texte s'etale.
   Pas de `margin-inline: auto` ici — il decalerait les paragraphes que
   leur conteneur aligne deja sur un titre. Les blocs centres sont traites
   separement, plus bas. */
p  { color: var(--gray-600); max-width: 34em; }
/* ── Documents : le plafond ne s'y applique pas ──
   Un contrat ou une fiche destinee au PDF sont composes dans une largeur
   de page arretee ; y rogner les paragraphes de 15 % laisserait une
   colonne de texte flottant dans une page A4. Verifie sur l'apercu du
   mandat : ses paragraphes tombaient de 518 a 442 px. La regle de confort
   de lecture vaut pour l'ecran, pas pour l'imprime.
   Les selecteurs visent les RACINES de ces documents, pas des classes de
   paragraphe : dans ces gabarits le texte porte lui-meme `.lead` ou
   `.cover__subtitle`, un selecteur descendant ne l'aurait pas atteint.
   `.lead` et `__subtitle` venaient de la plaquette commerciale, page
   supprimee depuis ; ils sont conserves, le gabarit PDF pouvant les
   reprendre. */
.mandat-page p, .mandat-page .alias, .mandat-page .expose,
.page p, .page [class*="__subtitle"], .page .lead,
.apercu p, .pdf p, [class*="pdf"] p, [class*="fiche"] p { max-width: none; }
@media print { p { max-width: none; } }
/* Un paragraphe dont le texte est centre recentre sa boite : sans cela,
   le plafond ci-dessus le collait a gauche de son conteneur tout en
   gardant son texte centre — pire que trop long.
   `!important` assume : beaucoup de ces paragraphes portent une marge en
   style direct (`style="margin:0 0 36px"`), qui bat toute regle de
   feuille. C'est le cas d'ecole ou le mot-cle est legitime — corriger un
   style en dur qu'on ne peut pas atteindre autrement. Il ne porte que sur
   les marges laterales, jamais sur les verticales. */
p[style*="text-align:center"],
p[style*="text-align: center"],
[style*="text-align:center"] > p,
[style*="text-align: center"] > p,
.hero p, .hero--centre p, .cta-banner p,
.social-proof > .container > p,
.faq-accueil__titre + p,
.flux-hero p, .example-block__details p,
.concept-hero p, .cu-hero p { margin-left: auto !important; margin-right: auto !important; }
/* `.pg .col > p` etait dans la liste ci-dessus, a tort : ces sections sont
   alignees a gauche, titre et tableau partant du bord de la colonne. Le
   plafond de 34em recentrait la boite du paragraphe, qui demarrait 100 px
   plus a droite que le h2 juste au-dessus. Le paragraphe garde sa largeur
   de lecture, mais cale a gauche comme le reste de la section. Le
   chapeau du hero, lui, porte `margin:24px auto` en style direct et
   reste centre sans passer par ici. */
.pg .col > p { margin-left: 0; margin-right: 0; }
a  { color: inherit; }

/* ── Layout ── */
.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.container--sm { max-width: 800px; }
.container--lg { max-width: 1320px; }

/* ── Marge laterale proportionnelle sous le plafond ──
   Comparaison mesuree avec eux, meme page, memes largeurs :

     largeur   leur marge laterale   la notre (avant)
      2560           720 px               720 px
      1920           400 px               400 px
      1280            93 px                80 px
      1024            86 px                20 px
       768            50 px                20 px
       390            25 px                20 px

   Au-dessus de 1120 nous etions deja identiques : le plafond commande, et
   le vide sur les cotes est assume de part et d'autre. C'est EN DESSOUS
   que nous divergions. Leur marge est proportionnelle — autour de 7 % de
   la fenetre — quand la notre etait un chiffre fixe de 20 px, soit 2 % sur
   une tablette. Le contenu venait donc toucher les bords sur tout ce qui
   n'est pas un ordinateur de bureau.
   7 % redonne 27 px a 390, 54 a 768, 72 a 1024, 90 a 1280 — leur courbe.
   La regle s'arrete a 1119 px, et pas plus haut : des que le plafond de
   1120 commande, il fournit deja la marge, et un rembourrage
   proportionnel viendrait EN PLUS rogner la largeur utile — il est
   compris dans la boite. Essaye a 1289, la marge montait a 170 px a
   1280 px de fenetre, contre 93 chez eux. */
@media (max-width: 1119px) {
  .container { padding-inline: 7%; }
}

/* ── Très grands écrans (iMac / moniteurs 1440p & 4K) ──
   Le conteneur restait bridé à 1160px → beaucoup de vide sur les côtés.
   On l'élargit et on grossit légèrement la base typo (rem) pour mieux
   occuper la largeur disponible, proportionnellement. */
/* Plus d'escalade au-dela de 1600 px. Le site passait la racine a 17 puis
   18 px et le conteneur a 1340 puis 1480 : sur un grand ecran, tout
   grossissait et les lignes s'allongeaient. lemlist garde 16 px et 1120
   a toutes les largeurs — le vide sur les cotes est assume, et c'est
   precisement ce qui fait paraitre la page composee. */
.section    { padding: 100px 0; position: relative; }
.section--sm { padding: 64px 0; }

/* Section backgrounds */
.section--gray { background: linear-gradient(180deg, rgba(64, 90, 210,0.04) 0%, #fff 50%); }
.section--white { background: transparent; }
.section--blue { background: var(--blue); }
.section--blue-light { background: var(--blue-light); }
.section--dark { background: var(--blue-dark); }
.section--cream { background: var(--cream); }

/* ── Enchainement des sections ──
   Il y avait ici un effet de feuille : chaque section chevauchait la
   precedente de 24 px avec un haut arrondi, et compensait par un
   padding de 124 px. C'etait le seul dispositif de separation du site,
   et il ne repondait a rien d'autre dans le dessin.
   Il fait desormais doublon avec l'alternance des fonds — deux
   separations superposees, dont une qui deforme le bord des blocs.
   On garde la seule qui se lit : le changement de fond. */
.section + .section { padding-top: 80px; }
.page-header + .section { padding-top: 80px; }

/* ── Tags / Badges ── */
/* Étiquettes de section : texte majuscule bleu, sans pastille —
   aligné sur le style des onglets services (svc-tabs__tag). */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--blue);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 14px;
}
.tag--white { color: rgba(255,255,255,0.85); }
.tag--dark { color: var(--gray-700); }
.tag--green { color: var(--green); }
.tag--accent { background: var(--accent-light); color: var(--accent-text, #ed797b); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  /* DEUX tailles pour tout le site, releve chez eux : secondaire 40 px de
     haut (8x16, rayon 10, corps 14), principal 48 px (8x32, rayon 12,
     corps 16). Le padding vertical reste a 8 px dans les deux cas — la
     hauteur vient du corps du texte, pas du rembourrage. On avait cinq
     hauteurs differentes, de 44 a 59 px.
     Plancher a 44 px : le leur tombe a 40, sous la cible tactile. */
  padding: 8px 32px; min-height: 44px; border-radius: 12px;
  font-family: inherit; font-size: 1rem; font-weight: 500;
  letter-spacing: normal;
  text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1); white-space: nowrap;
  position: relative; overflow: hidden;
}
.btn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%);
  transform: translateX(-100%); transition: transform 0.25s;
}
.btn:hover::after { transform: translateX(100%); }
/* Relief releve chez eux : un degrade vertical discret, un anneau de 1 px
   de la couleur du bouton qui en durcit le bord, puis deux ombres courtes
   et peu marquees. Leur trio exact :
     0 0 0 1px <couleur du bouton>,
     0 4px 6px -1px rgba(0,0,0,.1),
     0 2px 4px -2px rgba(0,0,0,.1)
   J'avais conclu « aucune ombre » lors de ma premiere analyse et mis nos
   variables a `none` : c'etait faux pour les boutons, et les notres sont
   restes plats depuis. */
.btn--blue {
  background: linear-gradient(#5871dd, var(--blue));
  color: #fff; border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue),
              0 4px 6px -1px rgba(0,0,0,0.1),
              0 2px 4px -2px rgba(0,0,0,0.1);
}
.btn--blue:hover {
  background: linear-gradient(#3f57cf, #2a3fd6);
  border-color: #2a3fd6; transform: translateY(-2px);
  box-shadow: 0 0 0 1px #2a3fd6,
              0 8px 12px -2px rgba(0,0,0,0.14),
              0 4px 6px -3px rgba(0,0,0,0.12);
}
.btn--dark { background: var(--blue-dark); color: #fff; border-color: var(--blue-dark); }
.btn--dark:hover { background: #0a0940; transform: translateY(-2px); box-shadow: var(--shadow-md); }
/* Le secondaire recoit le meme traitement, en plus sourd : degrade
   blanc -> #FBFBFB et anneau gris clair, comme leur bouton « Get a demo ».
   Bordure TRANSPARENTE : chez eux le contour est `1px solid transparent`
   et l'anneau vient uniquement de l'ombre `0 0 0 1px #EFEFEF`. En gardant
   notre bordure grise de 1,5 px par-dessus, le bouton portait DEUX
   contours — un gris soutenu et un gris clair — et se lisait comme une
   pastille cerclee la ou le leur n'a qu'un filet a peine visible.
   La bordure reste declaree pour que le survol puisse la colorer. */
.btn--outline {
  background: linear-gradient(#fff, #fbfbfb);
  color: var(--blue-dark); border-color: transparent;
  box-shadow: 0 0 0 1px #efefef,
              0 4px 6px -1px rgba(0,0,0,0.08),
              0 2px 4px -2px rgba(0,0,0,0.08);
}
/* Au survol, c'est l'anneau qui passe au bleu, pas la bordure : sinon on
   revenait au double contour au moment precis ou l'oeil s'y arrete. */
.btn--outline:hover {
  color: var(--blue); background: linear-gradient(#fff, #f7f8ff);
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px var(--blue),
              0 4px 10px -2px rgba(64,90,210,0.18),
              0 2px 4px -2px rgba(64,90,210,0.12);
}
.btn--outline-blue { background: transparent; color: var(--blue); border-color: var(--blue); }
.btn--outline-blue:hover { background: var(--blue); color: #fff; transform: translateY(-1px); }
/* 0,40 et non 0,35 : le contour est la seule chose qui dessine ce bouton,
   et a 0,35 il tombait a 2,97 sur le marine de la banniere — juste sous
   les 3,0 qu'exige la limite d'un element d'interface. A 0,40 : 3,53. */
.btn--outline-white { background: transparent; color: #fff; border-color: rgba(255,255,255,0.40); }
.btn--outline-white:hover { background: rgba(255,255,255,0.1); border-color: #fff; }
.btn--white { background: #fff; color: var(--blue); border-color: #fff; font-weight: 600; }
.btn--white:hover { background: var(--cream); color: var(--blue); transform: translateY(-2px); box-shadow: 0 1px 3px rgba(4,2,77,0.07); }
.btn--accent { background: var(--accent); color: #fff; border-color: var(--accent-text, #ed797b); }
.btn--accent:hover { background: #d66567; border-color: #d66567; transform: translateY(-2px); box-shadow: var(--shadow-accent); }
.btn--outline-accent { background: transparent; color: var(--accent-text, #ed797b); border-color: var(--accent-text, #ed797b); }
.btn--outline-accent:hover { background: var(--accent); color: #fff; transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--blue); border-color: transparent; padding-left: 0; padding-right: 0; }
.btn--ghost:hover { gap: 12px; }
.btn--ghost::after { display: none; }
.btn--sm-ancien { padding: 10px 20px; font-size: 0.8125rem; border-radius: 10px; }
/* Le bouton serrait 208 px de texte dans 283 px de bouton : 36 px de
   rembourrage lateral et 63 px de haut, quand leur plus grand bouton
   fait 48 px pour un texte de 16 px et un rayon de 12. Ramene a leurs
   proportions — 24 px sur les cotes, 48 px de haut. */
.btn--lg { padding: 12px 24px; font-size: 1rem; border-radius: 12px; }
.btn--hero {
  background: var(--blue); color: #fff; border-color: var(--blue);
  /* Aligne sur .btn, qui suit desormais l'echelle de lemlist. Le bouton
     du hero faisait 63 px de haut contre 40 chez eux : il ecrasait tout
     ce qui l'entourait. */
  padding: 8px 32px; min-height: 44px; font-size: 1rem; font-weight: 500; border-radius: 12px;
  /* Plus de halo bleu : la couleur pleine suffit a designer l'action. */
}
.btn--hero:hover {
  background: #2a3fd6; border-color: #2a3fd6;
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(64, 90, 210,0.4), 0 2px 6px rgba(0,0,0,0.08);
}
.btn--hero::after { display: none; }

/* ═══════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: #fff;
  border-bottom: 1px solid transparent;
  transition: background 0.2s, border-bottom-color 0.2s, box-shadow 0.2s;
}
/* Le filet seul separe la barre du contenu, sans ombre par-dessus : chez
   eux la barre porte `1px solid #DEDEDE` et rien d'autre. Les deux
   ensemble faisaient doublon — on lisait deux traits la ou il en faut un. */
.nav.scrolled {
  background: #fff;
  border-bottom-color: var(--border);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px; max-width: 1160px; margin: 0 auto; padding: 0 24px;
}
.nav__logo {
  text-decoration: none; display: flex; align-items: center; gap: 0;
  transition: opacity 0.2s;
}
.nav__logo:hover { opacity: 0.8; }
.nav__logo-shape { width: 75px; height: auto; flex-shrink: 0; }
.nav__logo-text { display: flex; flex-direction: column; line-height: 1.15; letter-spacing: -0.01em; margin-left: -1px; }
/* ── Wordmark Mandak (spec handoff : PJS 800, tracking -3,5 %, "ak" bleu, carré) ── */
.mandak-wordmark {
  display: inline-flex; align-items: baseline;
  font-weight: 700; letter-spacing: -0.035em; line-height: 1;
  font-size: 1.85rem;
  color: var(--blue-dark, #04024D);
}
.mandak-wordmark__ak { color: var(--blue, #405AD2); }
.mandak-wordmark__dot {
  display: inline-block;
  width: 0.266em; height: 0.266em;
  border-radius: 0.078em;
  background: var(--blue-dark, #04024D);
  margin-left: 0.14em;
  transform: translateY(0.02em);
}
/* Desktop : wordmark seul — l'icône M ferait doublon avec le M du mot */
.nav__logo .nav__logo-shape { display: none; }
/* Mobile : wordmark légèrement réduit, carré conservé ; compact : icône seule */
@media (max-width: 768px) {
  .nav__logo .mandak-wordmark { font-size: 1.5rem; }
}
@media (max-width: 340px) {
  .nav__logo .mandak-wordmark { font-size: 1.25rem; }
}
/* Contextes sombres : wordmark inversé (blanc, "ak" bleu clair, carré blanc) */
.footer__brand-logo .mandak-wordmark,
.cmpx__brand .mandak-wordmark,
.cmp-th--ours .mandak-wordmark,
.cmp-logo-header .mandak-wordmark { color: #fff; }
.footer__brand-logo .mandak-wordmark__ak,
.cmpx__brand .mandak-wordmark__ak,
.cmp-th--ours .mandak-wordmark__ak,
.cmp-logo-header .mandak-wordmark__ak { color: #C5CCFB; }
.footer__brand-logo .mandak-wordmark__dot,
.cmpx__brand .mandak-wordmark__dot,
.cmp-th--ours .mandak-wordmark__dot,
.cmp-logo-header .mandak-wordmark__dot { background: #fff; }
/* Tailles en contexte tableau comparatif */
.cmpx__brand .mandak-wordmark { font-size: 1.25rem; }
.cmp-th--ours .mandak-wordmark, .cmp-logo-header .mandak-wordmark { font-size: 1rem; }
.cmp-card-nous__logo .mandak-wordmark { font-size: 1.125rem; }

.nav__logo-text .logo-top { font-size: 1.125rem; font-weight: 700; color: var(--black); }
.nav__logo-text .logo-bottom { font-size: 1.125rem; font-weight: 700; color: var(--blue); }
.nav__links { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav__links > li { position: relative; }
.nav__links > li > a {
  font-size: 0.875rem; font-weight: 500; color: var(--gray-600);
  text-decoration: none; transition: color 0.2s; position: relative;
  padding: 8px 12px; display: flex; align-items: center; gap: 4px;
}
.nav__links > li > a::after {
  content: ''; position: absolute; bottom: 2px; left: 12px; right: 12px;
  height: 2px; background: var(--blue); border-radius: 2px;
  transform: scaleX(0); transform-origin: center;
  transition: transform 0.2s cubic-bezier(0.4,0,0.2,1);
}
.nav__links > li > a:hover { color: var(--black); }
/* Simple nav style */
.nav__links--simple { gap: 32px; }
/* Minuscules, majuscule initiale seulement. L'interlettrage de 0,06 em
   partait avec les capitales : c'est un reglage propre aux capitales,
   il aere un mot en minuscules jusqu'a le decoudre. Et 13 px suffisaient
   en capitales, pas en minuscules, qui se lisent plus petit a taille
   egale — d'ou 15. */
.nav__links--simple > li > a,
.nav__links--simple > li > span {
  display: flex; align-items: center;
  font-size: 0.9375rem; font-weight: 500; letter-spacing: normal; text-transform: none;
  line-height: 1.4;
  color: var(--blue-dark, #04024D);
  padding: 6px 0; border-radius: 0; position: relative; transition: color 0.2s;
}
/* Ce bloc neutralise le style des liens de nav a l'interieur du menu
   deroulant. Il portait aussi `font-size: inherit`, qui alignait
   l'intitule de colonne, le titre et le sous-titre d'un item sur les
   16 px du lien parent : les trois niveaux de texte du menu avaient la
   meme taille, et sa hierarchie n'existait plus. Le plafond de taille
   est retire, chaque element reprend la sienne — 12, 14 et 12 px. */
.nav__links--simple .nav__mega-item strong,
.nav__links--simple .nav__mega-item span,
.nav__links--simple .nav__mega-desc,
.nav__links--simple .nav__mega-label { text-transform: none; letter-spacing: normal; }
.nav__links--simple .nav__mega-label { text-transform: uppercase; }
.nav__links--simple > li > a::after,
.nav__links--simple > li > span::after { left: 0; right: 0; }
.nav__links--simple > li > a:hover,
.nav__links--simple > li > span:hover { color: var(--blue); }
.nav__links--simple > li > a:hover::after,
.nav__links--simple > li > span:hover::after { transform: scaleX(1); }
/* L'entree courante a la meme graisse que les autres : 500.
   Elle a ete a 700, puis a 600 — un cran au-dessus pour marquer « la page
   ou vous etes ». Mais dans une barre de trois entrees, un ecart de
   graisse ne se lit pas comme un reperage : il se lit comme deux polices
   differentes. Les trois entrees sont donc identiques.
   Consequence a assumer : plus rien ne signale la rubrique courante dans
   la barre. Le soulignement de `::after` reste masque pour elle, comme
   avant — il ne sert qu'au survol des deux autres. */
.nav__links--simple .nav__link--active { color: var(--blue-dark, #04024D); font-weight: 500; }
.nav__links--simple .nav__link--active::after { display: none; }
.nav__links > li > a:hover::after { transform: scaleX(1); }
.nav__links > li > a.active { color: var(--blue); }
.nav__links > li > a.active::after { transform: scaleX(1); }
.nav__links > li > a .nav-chevron {
  width: 12px; height: 12px; transition: transform 0.2s; flex-shrink: 0;
}
.nav__links > li:hover > a .nav-chevron { transform: rotate(180deg); }

/* ── Nav desktop : sous-menu de l'espace membre sous le bouton "Mon Projet"
   (injecté par js/main.js sur .nav__actions, visible connecté uniquement) ── */
.nav__account { position: relative; }
.nav__account .btn .nav__account-chev,
.nav__account-chev { width: 12px; height: 12px; flex-shrink: 0; transition: transform 0.2s; margin-left: 6px; vertical-align: middle; }
.nav__account:hover .nav__account-chev { transform: rotate(180deg); }
.nav__account-menu {
  position: absolute; top: calc(100% + 12px); right: 0;
  min-width: 240px;
  background: #fff;
  border: 1px solid rgba(15,23,42,0.06);
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 1px 3px rgba(4,2,77,0.07);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
  z-index: 300;
}
/* Pont invisible entre le bouton et le menu (évite la fermeture au survol) */
.nav__account-menu::before {
  content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px;
}
/* Ouverture au clic, plus au survol : le bouton était à la fois un lien vers
   « Mes projets » et un déclencheur de menu, si bien que le menu s'ouvrait dès
   qu'on passait la souris pour aller ailleurs. Il ne fait plus qu'une chose. */
.nav__account.is-open .nav__account-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__account.is-open .nav__account-chev { transform: rotate(180deg); }
.nav__account-chev { transition: transform 0.2s ease; }
.nav__account-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  font-size: 0.875rem; font-weight: 600;
  color: var(--blue-dark, #04024D);
  text-decoration: none; text-transform: none; letter-spacing: 0;
  transition: background 0.15s, color 0.15s;
}
.nav__account-menu a::after { display: none; }
.nav__account-menu a:hover { background: var(--blue-pale, #f2f3fe); color: var(--blue, #405AD2); }
.nav__account-menu a .il-icon { width: 19px; height: 19px; }
.nav__account-menu a[data-nav-role="adviser"] { display: none; }
.nav__account.is-adviser .nav__account-menu a[data-nav-role="adviser"] { display: flex; }
/* Le pendant de la règle ci-dessus : les pages de l'investisseur disparaissent
   pour le conseiller. Même mécanisme que le rail latéral, qui masque déjà
   .page-sidebar__item[data-role="client"] quand .page-sidebar est .is-adviser. */
.nav__account.is-adviser .nav__account-menu a[data-nav-role="client"] { display: none; }
.nav__account-sep { height: 1px; background: rgba(15,23,42,0.07); margin: 8px 6px; }
.nav__account-menu a.nav__account-logout { color: #b91c1c; }
.nav__account-menu a.nav__account-logout .il-icon { color: #b91c1c; }
.nav__account-menu a.nav__account-logout:hover { background: #fef2f2; color: #b91c1c; }

/* ── Mega-menu dropdown (full-width) ── */
.nav__mega {
  position: fixed; top: 72px; left: 16px; right: 16px;
  background: #fff; border-radius: 20px;
  /* 52/56 datait d'un contenu bien plus aere — filets, colonnes de 548 px
     et items a 14 px de rembourrage. Avec la mise en page resserree, ces
     marges laissaient une bande vide au-dessus et au-dessous de la liste.
     Leur panneau, lui, se contente de 24 px. */
  padding: 36px 0 40px;
  box-shadow:
    0 25px 80px rgba(4,2,77,0.10),
    0 8px 24px rgba(4,2,77,0.05),
    0 0 0 1px rgba(4,2,77,0.03);
  display: flex; justify-content: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.2s cubic-bezier(0.4,0,0.2,1), transform 0.2s cubic-bezier(0.4,0,0.2,1), visibility 0.2s;
  z-index: 200;
}
/* Invisible bridge to prevent hover gap */
.nav__links > li > a + .nav__mega::before,
.nav__links > li > span + .nav__mega::before {
  content: ''; position: absolute; top: -20px; left: 0; right: 0; height: 20px;
}
.nav__links > li:hover > .nav__mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0);
}
.nav__mega-inner {
  display: grid; width: 100%; max-width: 1200px; padding: 0 40px;
}
/* ── Menu deroulant : organisation relevee chez lemlist ──
   Mesures prises sur leur menu Product, a 1440 px :
     colonnes 269,5 px, ecart 24 px
     intitule de colonne  12 px / 600, sans interlettrage
     description          12 px / 400, en gris
     item                 rayon 8, ecart 8, hauteur 52
     tuile d'icone        34 x 34, fond #FBFBFB, bord 1 px #EFEFEF, rayon 8
   Trois choses sont tombees, qu'ils n'ont pas : le filet bleu sous chaque
   intitule, le trait vertical entre les colonnes, et l'ombre au survol. */
/* Colonnes a largeur fixe et centrees, pas des `1fr` : reparties sur les
   1200 px du panneau, deux colonnes faisaient 548 px chacune et chaque
   entree trainait sur une demi-largeur d'ecran, avec un grand vide a sa
   droite. Chez eux une colonne fait 270 px — c'est la largeur d'une
   liste, pas d'un paragraphe. 340 ici, nos entrees portant en plus un
   sous-titre. */
.nav__mega--2col .nav__mega-inner { grid-template-columns: 340px 340px; gap: 0 24px; justify-content: center; }
.nav__mega--3col .nav__mega-inner { grid-template-columns: repeat(3, 300px); gap: 0 24px; justify-content: center; }
.nav__mega-col { display: flex; flex-direction: column; gap: 2px; }
.nav__mega-label {
  font-size: 0.75rem; font-weight: 600; letter-spacing: normal;
  text-transform: uppercase;
  color: var(--blue-dark);
  line-height: 1.35;
  display: flex; align-items: center; gap: 8px;
}
/* Ligne d'explication sous l'intitule : c'est elle qui manquait le plus.
   Chez eux chaque colonne dit ce qu'elle regroupe avant d'aligner ses
   entrees ; sans elle, deux listes se suivent sans qu'on sache ce qui
   les relie. */
.nav__mega-desc {
  font-size: 0.75rem; font-weight: 400; line-height: 1.35;
  color: var(--gray-500);
  margin-bottom: 10px;
}
.nav__mega-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; border-radius: 8px;
  text-decoration: none;
  transition: background 0.18s;
}
.nav__mega-item:hover { background: var(--blue-pale, #f2f3fe); }
.nav__mega-item strong {
  display: block; font-size: 0.875rem; font-weight: 700;
  color: var(--blue-dark);
  margin-bottom: 1px;
  transition: color 0.18s;
}
.nav__mega-item:hover strong { color: var(--blue); }
.nav__mega-item span {
  display: block; font-size: 0.75rem; color: var(--gray-500); line-height: 1.35;
}
/* La tuile est dessinee par le SVG lui-meme : 34 px de cote, 8 px de
   rembourrage et 1 px de bord laissent exactement les 16 px d'icone
   qu'ils ont. Pas de balise supplementaire dans le balisage. */
.nav__mega-icon {
  width: 34px; height: 34px; flex-shrink: 0;
  padding: 8px;
  color: var(--blue-dark);
  background: #fbfbfb;
  border: 1px solid #efefef;
  border-radius: 8px;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.nav__mega-item:hover .nav__mega-icon {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

/* ── Mega-menu mobile (accordion in nav__mobile) ── */
.nav__mobile-mega { display: none; flex-direction: column; padding: 4px 0 8px 16px; }
.nav__mobile-mega.open { display: flex; }
.nav__mobile-mega .nav__mega-label {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--blue-dark);
  margin: 12px 0 6px; padding: 0;
  border-bottom: none;
}
.nav__mobile-mega .nav__mega-label:first-child { margin-top: 4px; }
.nav__mobile-mega .nav__mega-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin: 1px 0; border-radius: 10px;
  text-decoration: none;
}
.nav__mobile-mega .nav__mega-item:hover { background: var(--blue-pale); }
.nav__mobile-mega .nav__mega-icon { display: none; }
/* Le menu du telephone est une liste compacte : il masque deja les
   sous-titres des entrees. La description de colonne suit la meme regle,
   sinon deux lignes d'explication s'intercalent dans une liste qu'on
   parcourt au pouce. */
.nav__mobile-mega .nav__mega-desc { display: none; }
.nav__mobile-mega .nav__mega-item strong {
  font-size: 0.875rem; font-weight: 600; color: var(--blue-dark); margin: 0;
}
.nav__mobile-mega .nav__mega-item span { display: none; }
.nav__mobile-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; cursor: pointer;
  background: none; border: none; font: inherit; color: inherit;
  padding: 14px; font-size: 1rem; font-weight: 500; text-align: left;
  border-radius: 10px;
}
.nav__mobile-toggle svg:not(.nav-mobile-icon) {
  width: 18px; height: 18px; color: var(--gray-500);
  transition: transform 0.2s;
}
.nav__mobile-toggle.open svg:not(.nav-mobile-icon) { transform: rotate(180deg); }
.nav__actions { display: flex; align-items: center; gap: 10px; }
/* Gabarit de barre, plus compact que celui des boutons de page. Releve
   chez eux : 8 px sur 16, rayon 10, 14 px de texte — leurs boutons de
   barre font environ 36 px de haut, les notres en faisaient 44 avec
   32 px de rembourrage lateral, ce qui donnait deux pastilles massives
   posees a cote de liens de 15 px.
   Le plancher de 44 px du systeme ne s'applique pas ici : il existe pour
   la cible tactile, or `.nav__actions` est masque des le format
   telephone — ces boutons ne sont jamais touches au doigt.
   La police reste a 15 px, celle de nos liens de barre, pour que les
   deux se lisent sur la meme ligne de force. */
.nav__actions .btn {
  min-height: 40px; padding: 8px 16px; border-width: 1px;
  border-radius: 10px; font-size: 0.9375rem;
}
/* « Connexion » est un lien, pas un bouton — releve chez eux : leur
   « Log in » fait 70 x 40, sans bordure (0 px), sans ombre et sans fond,
   avec le meme rembourrage que ses voisins pour rester sur leur ligne.
   Le bouton blanc cercle, chez eux, c'est « Get a demo » : un troisieme
   niveau, pas la connexion. */
.nav__cta-connexion {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 8px 16px; border-radius: 10px;
  font-family: inherit; font-size: 0.9375rem; font-weight: 500;
  color: var(--blue-dark, #04024D); text-decoration: none;
  background: none; border: 0; box-shadow: none; white-space: nowrap;
  transition: color 0.2s, background-color 0.2s;
}
.nav__cta-connexion:hover { color: var(--blue); background: rgba(64,90,210,0.06); }
.nav__burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.nav__burger span { width: 22px; height: 2px; background: var(--black); border-radius: 2px; display: block; transition: all 0.2s; }
.nav__burger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav__burger.open span:nth-child(2) { opacity: 0; }
.nav__burger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
.nav__mobile {
  display: none; position: fixed; top: 68px; left: 0; right: 0; bottom: 0;
  background: #fff; z-index: 99; padding: 24px; flex-direction: column; gap: 4px;
  opacity: 0; transform: translateY(-10px);
  transition: opacity 0.2s, transform 0.2s;
  overflow-y: auto;}
.nav__mobile.open { display: flex; opacity: 1; transform: translateY(0); }
.nav__mobile a { padding: 14px; font-size: 1rem; font-weight: 500; color: var(--black); text-decoration: none; border-radius: 10px; }
.nav__mobile a:hover { background: var(--gray-50); }
.nav__mobile a.btn--blue { color: #fff; }
.nav__mobile a.btn--blue:hover { background: var(--blue); }
/* ── Icônes communes (.il-icon) ──
   Classe partagée par toutes les pages — SVG générés par ILIcons (js/main.js).
   24px et bleu primaire par défaut ; surcharger la taille/couleur par contexte,
   ex : .ma-zone .il-icon { width: 18px; color: var(--gray-500); } */
.il-icon { width: 24px; height: 24px; color: var(--blue); flex-shrink: 0; }

/* Icônes filaires injectées via JS dans le menu mobile (classe contextuelle
   nav-mobile-icon — sert aussi à exclure l'icône de la rotation du chevron) */
.nav__mobile a:not(.btn),
.nav__mobile-toggle { display: flex; align-items: center; gap: 12px; }
.nav__mobile-toggle { justify-content: space-between; }
.nav__mobile-toggle > span { flex: 1; text-align: left; }

/* ═══════════════════════════════════════════════════
   HERO (shared structure, page-specific overrides)
   ═══════════════════════════════════════════════════ */
.hero { padding: 140px 0 80px; position: relative; overflow: hidden; z-index: 1; }
.hero--compact { padding: 140px 0 60px; }

/* ── Page Header (for inner pages) ── */
.page-header {
  padding: 140px 0 56px; position: relative; overflow: hidden;
  background: var(--blue-pale);
  border-radius: 0 0 24px 24px;
}
.page-header__bg {
  position: absolute; right: -80px; top: 40px;
  width: 400px; opacity: 0.04; pointer-events: none;
}
.page-header .tag { margin-bottom: 12px; }
/* Le plafond etait le bon, mais pas la courbe : `4vw` rejoignait l'echelle
   a 1200 px et s'en ecartait en dessous — 36 px a 900 la ou l'accueil en
   affichait 41. La regle ne garde donc que sa marge, et laisse la taille a
   l'echelle commune. */
.page-header h1 { margin-bottom: 16px; }
.page-header p { font-size: 1.125rem; max-width: 560px; line-height: 1.7; }
.page-header .breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.8125rem; color: var(--gray-400); margin-bottom: 24px;
}
.page-header .breadcrumb a { color: var(--gray-400); text-decoration: none; transition: color 0.2s; }
.page-header .breadcrumb a:hover { color: var(--blue); }
.page-header .breadcrumb span { color: var(--gray-600); }

/* ═══════════════════════════════════════════════════
   SHARED COMPONENTS
   ═══════════════════════════════════════════════════ */

/* ── Cards ── */
.card {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 36px; background: #fff; transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
  position: relative; overflow: hidden;
  box-shadow: 0 2px 8px rgba(4,2,77,0.06);
}
.card:hover { border-color: var(--blue); transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card__deco {
  position: absolute; right: -20px; bottom: -20px; width: 100px; opacity: 0.06;
  transition: opacity 0.2s;
}
.card:hover .card__deco { opacity: 0.1; }

/* ── Icon Box ── */
.icon-box {
  width: 52px; height: 52px; border-radius: var(--r);
  background: var(--blue-light); display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; margin-bottom: 20px; flex-shrink: 0;
  transition: all 0.2s;
}
.card:hover .icon-box { background: var(--blue); transform: scale(1.05); }
.card:hover .icon-box .icon-svg { filter: brightness(0) invert(1); }
.icon-box--blue { background: var(--blue); color: #fff; }
.icon-box--lg { width: 64px; height: 64px; border-radius: 16px; font-size: 1.5rem; }

/* ── Chip / Tag Inline ── */
.chip {
  display: inline-block; background: var(--blue-light); color: var(--blue);
  font-size: 0.75rem; font-weight: 700; padding: 4px 10px; border-radius: 999px;
}
.chip--green { background: var(--green-light); color: var(--green); }

/* ── Grid Layouts ── */
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 48px; align-items: start; }
.grid-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; align-items: start; }
.grid-1-1 { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }

/* ── Stats Row ── */
.stats-row { display: grid; grid-template-columns: repeat(4,1fr); }
.stat {
  padding: 48px 28px; text-align: center;
  border-right: 1px solid var(--border);
}
.stat:last-child { border-right: none; }
.stat__val {
  font-size: clamp(2.2rem,3.5vw,3rem); font-weight: 700;
  color: var(--blue); letter-spacing: -0.03em; display: block; line-height: 1; margin-bottom: 8px;
}
.stat__label { font-size: 0.875rem; color: var(--gray-600); }

/* Stat blocks — card style */
.stat-block {
  background: #fff; border-radius: var(--r-xl); padding: 32px 24px;
  text-align: center; border: 1.5px solid var(--border);
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
}
.stat-block:hover {
  border-color: var(--blue); transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.stat-block__icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--blue-light); display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px; transition: all 0.2s;
}
.stat-block__icon svg { width: 22px; height: 22px; color: var(--blue); transition: color 0.2s; }
.stat-block:hover .stat-block__icon { background: var(--blue); }
.stat-block:hover .stat-block__icon svg { color: #fff; }
.stat-block__val {
  font-size: clamp(2rem, 3vw, 2.6rem); font-weight: 700;
  color: var(--accent-text, #ed797b); letter-spacing: -0.03em; display: block; line-height: 1; margin-bottom: 8px;
}
.stat-block__label { font-size: 0.875rem; color: var(--gray-600); }

/* ── Testimonial Cards ── */
.testi-card {
  border: 1px solid var(--border); border-radius: var(--r-lg); padding: 36px;
  background: #fff; transition: all 0.2s; position: relative;
}
.testi-card::before {
  content: '\201C'; position: absolute; top: 16px; right: 28px;
  font-size: 4.5rem; font-weight: 300;
  color: var(--blue-light); line-height: 1; pointer-events: none;
}
.testi-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); border-color: var(--blue); }
.testi-card__stars { color: var(--blue); font-size: 0.875rem; letter-spacing: 2px; margin-bottom: 16px; }
.testi-card__text { font-size: 0.875rem; color: var(--gray-600); line-height: 1.75; margin-bottom: 24px; font-style: italic; }
.testi-card__author { display: flex; align-items: center; gap: 12px; }
.testi-card__avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--blue); color: #fff; font-weight: 600; font-size: 0.8125rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.testi-card__name { font-size: 0.875rem; font-weight: 700; color: var(--black); }
.testi-card__meta { font-size: 0.75rem; color: var(--gray-400); }

/* ── FAQ ── */
.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 4px; }
.faq-item { border: none; border-radius: var(--r); overflow: hidden; transition: border-color 0.2s; border-bottom: 1px solid var(--border); }
.faq-item.open { border-color: var(--blue); }
.faq-item__q {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 24px; cursor: pointer; font-weight: 600; font-size: 0.875rem; color: var(--black);
  background: #fff; transition: background 0.15s; user-select: none;
}
.faq-item__q:hover { background: var(--gray-50); }
.faq-item__icon {
  width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; line-height: 1; color: var(--gray-600);
  transition: all 0.2s; flex-shrink: 0; margin-left: 16px;
}
.faq-item.open .faq-item__icon { transform: rotate(45deg); background: var(--blue); border-color: var(--blue); color: #fff; }
.faq-item__a {
  max-height: 0; overflow: hidden; background: #fff;
  font-size: 0.875rem; color: var(--gray-600); line-height: 1.75;
  transition: max-height 0.25s cubic-bezier(0.4,0,0.2,1), padding 0.2s;
  padding: 0 24px;
}
.faq-item.open .faq-item__a { max-height: 300px; padding: 0 24px 20px; }

/* ── CTA Banner ──
   Refondu sur le modele du leur, mesure sur lemlist.com : titre puis
   boutons, sur un seul axe centre. Trois elements sont tombes — le
   surtitre, le paragraphe explicatif et la forme decorative du coin —
   parce qu'ils n'ont aucun equivalent chez eux et qu'ils eloignaient
   le titre de l'action : le titre tirait a gauche, le bouton a droite,
   soit deux points de fixation la ou il n'en faut qu'un.
   Deux boutons desormais, comme eux : ils associent toujours un
   engagement fort a une porte de sortie douce. Qui n'est pas pret a
   parler a quelqu'un n'avait, ici, que la sortie.
   Le panneau marine reste. Leur bloc final est blanc parce que leur
   bloc sombre est au milieu de page ; chez nous c'est cette banniere
   qui est l'unique bloc sombre et qui ferme le rythme. */
.cta-banner {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 30px;
  padding: 80px 48px; background: var(--blue-dark);
  border-radius: var(--r-xl);
  overflow: hidden; position: relative;
}
.cta-banner h2 { color: #fff; max-width: 640px; margin: 0; }
/* Boutons et mention forment un bloc : la mention se rattache aux
   boutons (14 px) et non au titre, dont la separent les 30 px du
   conteneur. */
.cta-banner__bas { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cta-banner__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; position: relative; }
.cta-banner p { color: rgba(255,255,255,0.65); font-size: 0.9375rem; margin: 0; max-width: 520px; }

/* ═══════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════ */
.footer { background: var(--blue-dark); padding: 72px 0 36px; border-radius: 24px 24px 0 0; margin-top: -24px; position: relative; z-index: 1; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 56px; }
.footer__brand-logo {
  display: flex; align-items: center;
  text-decoration: none; margin-bottom: 14px;
}
.footer__brand-logo img, .footer__brand-logo svg { width: 75px; height: auto; flex-shrink: 0; filter: brightness(0) invert(1); }
.footer__brand-logo .nav__logo-text { margin-left: -1px; }
.footer__brand-logo .nav__logo-text .logo-top { font-size: 1.125rem; font-weight: 700; color: #fff; }
.footer__brand-logo .nav__logo-text .logo-bottom { font-size: 1.125rem; font-weight: 700; color: var(--blue); }
.footer__brand p { font-size: 0.875rem; color: rgba(255,255,255,0.72); line-height: 1.7; max-width: 260px; margin-bottom: 20px; }
.footer__contact { display: flex; flex-direction: column; gap: 6px; }
.footer__contact a { font-size: 0.8125rem; color: rgba(255,255,255,0.72); text-decoration: none; transition: color 0.2s; }
.footer__contact a:hover { color: var(--blue); }
.footer__col h4 { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 18px; }
.footer__links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer__links a { font-size: 0.875rem; color: rgba(255,255,255,0.72); text-decoration: none; transition: color 0.2s; }
.footer__links a:hover { color: #fff; }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.06); padding-top: 28px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.75rem; color: rgba(255,255,255,0.2); flex-wrap: wrap; gap: 12px;
}
.footer__bottom-links { display: flex; gap: 24px; }
.footer__bottom-links a { color: rgba(255,255,255,0.2); text-decoration: none; transition: color 0.2s; }
.footer__bottom-links a:hover { color: rgba(255,255,255,0.5); }

/* ═══════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════ */

/* ── Page Loader ── */
.loader {
  position: fixed; inset: 0; z-index: 9999;
  background: #fff; display: flex; align-items: center; justify-content: center;
  transition: opacity 0.25s ease, visibility 0.25s;
}
.loader.done { opacity: 0; visibility: hidden; pointer-events: none; }

/* ── Logo d'attente ─────────────────────────────────────────────────
   Le mot posé, et trois carrés qui s'allument l'un après l'autre puis
   s'effacent ensemble. Les lettres ondulaient auparavant ; le mouvement
   portait sur la marque elle-même, ce qui la déformait à chaque cycle.
   Ici la marque reste stable et seule la ponctuation s'anime.

   Tout est exprimé en em : la déclinaison réduite (.mk-load--sm) n'a qu'à
   changer la taille de police pour que carrés, écarts et rayons suivent. */
.mk-load {
  display: inline-flex; align-items: flex-end; gap: 0.146em;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 700; letter-spacing: -0.035em; line-height: 1;
  font-size: 48px; color: var(--blue-dark, #04024D);
  -webkit-user-select: none; user-select: none;
}
.mk-load__mot { display: inline-flex; }
.mk-load__mot span { color: var(--blue, #405AD2); }
.mk-load__points { display: flex; gap: 0.125em; margin: 0 0 0.125em 0.042em; }
.mk-load__points i {
  width: 0.271em; height: 0.271em; border-radius: 0.083em; display: block;
  animation-duration: 2s; animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.mk-load__points i:nth-child(1) { background: var(--blue-dark, #04024D); animation-name: mkPop1; }
.mk-load__points i:nth-child(2) { background: var(--blue, #405AD2); animation-name: mkPop2; }
.mk-load__points i:nth-child(3) { background: var(--blue-mid, #C5CCFB); animation-name: mkPop3; }
/* Loader de contenu (placeholder pendant un fetch) : même logo, plus petit. */
.mk-load--sm { font-size: 27px; }

@keyframes mkPop1 { 0%,6%{opacity:0;transform:scale(0.4)}  14%,76%{opacity:1;transform:scale(1)} 86%,100%{opacity:0;transform:scale(0.4)} }
@keyframes mkPop2 { 0%,28%{opacity:0;transform:scale(0.4)} 36%,76%{opacity:1;transform:scale(1)} 86%,100%{opacity:0;transform:scale(0.4)} }
@keyframes mkPop3 { 0%,50%{opacity:0;transform:scale(0.4)} 58%,76%{opacity:1;transform:scale(1)} 86%,100%{opacity:0;transform:scale(0.4)} }

/* Sans animation, les trois carrés restent posés — ils servent encore de
   repère d'attente. */
@media (prefers-reduced-motion: reduce) {
  .mk-load__points i { animation: none; opacity: 1; transform: none; }
}

/* ── Scroll Reveal ── */
/* 0,65 s etait trop long pour un bloc qui apparait au fil du defilement : le
   temps qu'il finisse, on etait deja plus bas. 0,42 s se termine dans le
   mouvement. */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.42s cubic-bezier(0.4,0,0.2,1), transform 0.42s cubic-bezier(0.4,0,0.2,1);
}
.reveal.visible {
  opacity: 1; transform: translateY(0);
}
.reveal-left {
  opacity: 0; transform: translateX(-40px);
  transition: opacity 0.65s cubic-bezier(0.4,0,0.2,1), transform 0.65s cubic-bezier(0.4,0,0.2,1);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right {
  opacity: 0; transform: translateX(40px);
  transition: opacity 0.65s cubic-bezier(0.4,0,0.2,1), transform 0.65s cubic-bezier(0.4,0,0.2,1);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }
.reveal-scale {
  opacity: 0; transform: scale(0.92);
  transition: opacity 0.65s cubic-bezier(0.4,0,0.2,1), transform 0.65s cubic-bezier(0.4,0,0.2,1);
}
.reveal-scale.visible { opacity: 1; transform: scale(1); }

/* Stagger delays */
.d1 { transition-delay: 0.05s; } .d2 { transition-delay: 0.12s; }
.d3 { transition-delay: 0.19s; } .d4 { transition-delay: 0.26s; }
.d5 { transition-delay: 0.33s; } .d6 { transition-delay: 0.25s; }

/* ── Text Split Reveal ── */
.text-reveal {
  overflow: hidden; display: inline-block;
}
.text-reveal__inner {
  display: inline-block; transform: translateY(110%);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.text-reveal.visible .text-reveal__inner {
  transform: translateY(0);
}

/* ── Marquee ── */
.marquee { overflow: hidden; white-space: nowrap; }
.marquee__inner {
  display: inline-flex; gap: 48px; animation: marquee 30s linear infinite;
}
.marquee__inner:hover { animation-play-state: paused; }
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Parallax ── */
.parallax-shape { transition: transform 0.1s linear; will-change: transform; }

/* ── Hover Glow ── */
.glow-hover {
  position: relative;
}
.glow-hover::before {
  content: ''; position: absolute; inset: -1px;
  border-radius: inherit; background: conic-gradient(from 0deg, var(--blue), transparent, var(--blue));
  opacity: 0; transition: opacity 0.2s; z-index: -1; filter: blur(12px);
}
.glow-hover:hover::before { opacity: 0.15; }

/* ── Floating Animation ── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.float { animation: float 4s ease-in-out infinite; }
.float-slow { animation: float 6s ease-in-out infinite; }

/* ── Pulse Dot ── */
@keyframes pulse-ring {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}
.pulse-dot { position: relative; }
.pulse-dot::after {
  content: ''; position: absolute; inset: -4px;
  border-radius: 50%; border: 2px solid var(--blue);
  animation: pulse-ring 2s ease-out infinite;
}

/* ── Gradient Text ── */
.gradient-text {
  background: linear-gradient(135deg, var(--blue), var(--blue-dark), var(--blue));
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 4s ease infinite;
}
@keyframes gradientShift {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 200% center; }
}

/* ── Line Draw ── */
.line-draw {
  position: relative;
}
.line-draw::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 100%; height: 3px; background: var(--blue); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.line-draw.visible::after { transform: scaleX(1); }

/* ═══════════════════════════════════════════════════
   PROPTECH DESIGN SYSTEM
   ═══════════════════════════════════════════════════ */

/* ── Glassmorphism Cards ── */
.glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--r-xl);
  box-shadow: 0 1px 3px rgba(4,2,77,0.07);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.glass-card:hover { box-shadow: 0 1px 3px rgba(4,2,77,0.07); transform: translateY(-2px); }
.glass-card--dark { background: rgba(0, 0, 0, 0.4); border-color: rgba(255, 255, 255, 0.08); }
.glass-card--blue { background: rgba(61, 86, 240, 0.08); border-color: rgba(61, 86, 240, 0.15); }

/* ── Gradient Mesh Backgrounds ── */
.mesh-bg { position: relative; }
.mesh-bg::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(61, 86, 240, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(124, 58, 237, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(22, 163, 74, 0.04) 0%, transparent 50%);
  pointer-events: none; z-index: 0;
}
.mesh-bg > * { position: relative; z-index: 1; }

/* ── Grain Texture Overlay ── */
.grain-overlay { position: relative; }
.grain-overlay::after {
  content: ''; position: absolute; inset: 0; opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 2;
}

/* ── Enhanced Hover Glow ── */
.glow-hover-blue { position: relative; }
.glow-hover-blue::before {
  content: ''; position: absolute; inset: -2px; border-radius: inherit;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark), var(--blue));
  opacity: 0; transition: opacity 0.25s; z-index: -1; filter: blur(16px);
}
.glow-hover-blue:hover::before { opacity: 0.2; }

/* ── Micro Charts (CSS only) ── */
.micro-bar { display: flex; align-items: flex-end; gap: 3px; height: 32px; }
.micro-bar__col { width: 6px; border-radius: 3px; background: var(--blue-light); transition: all 0.2s; }
.micro-bar__col--active { background: var(--blue); }

.micro-donut {
  width: 48px; height: 48px; border-radius: 50%;
  background: conic-gradient(var(--blue) 0% var(--donut-pct, 75%), var(--blue-light) var(--donut-pct, 75%) 100%);
  display: flex; align-items: center; justify-content: center;
}
.micro-donut__inner {
  width: 32px; height: 32px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6rem; font-weight: 700; color: var(--blue);
}

/* ── Progress Bar ── */
.progress-bar { height: 6px; background: var(--gray-100); border-radius: 3px; overflow: hidden; }
.progress-bar__fill {
  height: 100%; background: linear-gradient(90deg, var(--blue-dark), var(--blue));
  border-radius: 3px; transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Stat Card (Proptech) ── */
.stat-card {
  padding: 28px; border: 1.5px solid var(--border); border-radius: var(--r-lg);
  background: #fff; transition: all 0.2s; position: relative; overflow: hidden;
}
.stat-card:hover { border-color: var(--blue); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.stat-card__icon {
  width: 40px; height: 40px; border-radius: 12px; background: var(--blue-light);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.stat-card__icon svg { width: 20px; height: 20px; stroke: var(--blue); fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.stat-card:hover .stat-card__icon { background: var(--blue); }
.stat-card:hover .stat-card__icon svg { stroke: #fff; }
.stat-card__val { font-size: 1.8rem; font-weight: 700; color: var(--black); letter-spacing: -0.03em; line-height: 1; margin-bottom: 4px; }
.stat-card__label { font-size: 0.8125rem; color: var(--gray-400); }
.stat-card__trend {
  position: absolute; top: 20px; right: 20px;
  font-size: 0.75rem; font-weight: 700; color: var(--green);
  background: var(--green-light); padding: 3px 8px; border-radius: 999px;
}

/* ── Icon SVG utility ── */
.icon-svg { width: 20px; height: 20px; stroke: var(--blue); fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; transition: all 0.2s; }
.icon-svg--sm { width: 16px; height: 16px; }
.icon-svg--lg { width: 24px; height: 24px; }
.icon-svg--white { stroke: #fff; }

/* ── Badge ── */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; }
.badge--green { background: var(--green-light); color: var(--green); }
.badge--blue { background: var(--blue-light); color: var(--blue); }
.badge--gray { background: var(--gray-100); color: var(--gray-600); }

/* ── Divider ── */
.divider { width: 100%; height: 1px; background: var(--border); margin: 24px 0; }
.divider--blue { background: linear-gradient(90deg, transparent, var(--blue), transparent); opacity: 0.3; }

/* ═══════════════════════════════════════════════════
   RESPONSIVE
   ─────────────────────────────────────────────────────
   Stratégie 3 paliers :
   - Desktop  : > 1024px (default, tout le reste du CSS)
   - Tablette : 769px - 1024px (le bloc max-width:1024px ci-dessous)
   - Mobile   : ≤ 768px (le bloc max-width:768px ci-dessous)
   Les règles tablette s'empilent avec celles mobile (cascade CSS),
   donc une règle dans `max-width: 1024px` s'applique aussi en mobile
   sauf si elle est ré-écrasée par le bloc `max-width: 768px`.
   ═══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .grid-3 { grid-template-columns: repeat(2,1fr); }
  .grid-1-1 { gap: 40px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .stats-row { grid-template-columns: repeat(2,1fr); }
  .cta-banner { padding: 48px; }

  /* ─── Tablette : padding sections plus aérés que desktop ─── */
  /* Sur iPad portrait/landscape, les paddings 100px desktop sont
     overkill et créent des "trous" entre les sections. On serre. */
  .section { padding: 76px 0; }
  .section + .section { padding-top: 96px; }
  .page-header + .section { padding-top: 96px; }
  .hero { padding: 110px 0 56px; }

  /* La marge laterale proportionnelle remplace les 20 px qui etaient poses
     ici pour « gagner de la place ». C'etait l'inverse qu'il fallait faire —
     voir le bloc de commentaire pres de `.container`, plus haut. */
}
@media (max-width: 768px) {
  .section { padding: 72px 0; }
  .hero { padding: 110px 0 56px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-1-1, .grid-2-1, .grid-1-2 { grid-template-columns: 1fr; gap: 32px; }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .stat { border-bottom: 1px solid var(--border); }
  .stat:nth-child(odd) { border-right: 1px solid var(--border); }
  .stat:last-child, .stat:nth-last-child(2):nth-child(odd) ~ .stat { border-bottom: none; }
  /* La pleine largeur datait des DEUX boutons de la banniere : cote a cote
     sur telephone, chacun serait tombe sous 150 px, d'ou l'empilement
     etire. Il n'en reste qu'un, et un bouton seul n'a aucune raison de
     s'etirer d'un bord a l'autre — il prend la largeur de son texte et
     reste centre par le conteneur. */
  .cta-banner { padding: 48px 24px; gap: 26px; }
  .cta-banner__actions { flex-direction: column; align-items: center; }
  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
  /* Aucun défilement horizontal en mobile : c'est déjà `body { overflow-x: clip }`,
     en haut de ce fichier, qui s'en charge — à toutes les largeurs.
     Ne PAS remettre `overflow-x: hidden` ici, et surtout pas sur `html` : Safari
     fait alors de la racine un conteneur de défilement, qui confisque les gestes
     de ses descendants. Les tableaux de chiffres et le fil de discussion, qui
     défilent dans leur propre cadre, cessaient de répondre au doigt. */
  .nav__links, .nav__actions { display: none; }
  .nav__burger { display: flex; }
  .nav__inner { padding: 0 12px; }
  .nav__logo-shape { width: 55px; }
  /* Le rapetissement du h1 en dessous de 900 px est parti avec la courbe
     `4vw` : l'echelle descend deja d'elle-meme jusqu'a 32 px. */
  /* Rounded corners: slightly smaller on mobile */
  .section + .section,
  .page-header + .section { border-radius: 20px 20px 0 0; margin-top: -20px; padding-top: 92px; }
  .page-header { border-radius: 0 0 20px 20px; }
  .footer { border-radius: 20px 20px 0 0; margin-top: -20px; }
}
@media (max-width: 480px) {
  .stats-row { grid-template-columns: 1fr; }
  .stat { border-right: none !important; }
}

/* ── Sticky CTA (mobile) ── */
.sticky-cta {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  background: #fff; border-top: 1px solid var(--border);
  padding: 12px 20px; box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
  transform: translateY(100%); transition: transform 0.2s cubic-bezier(0.4,0,0.2,1);
}
.sticky-cta.visible { transform: translateY(0); }
.sticky-cta__inner {
  display: flex; gap: 10px; max-width: 600px; margin: 0 auto;
}
.sticky-cta .btn { flex: 1; justify-content: center; font-size: 0.875rem; padding: 13px 16px; }
@media (max-width: 768px) {
  .sticky-cta { display: block; }
  .footer { padding-bottom: 90px; }
}

/* ── Logo-shaped images (CSS mask) ── */
.logo-img {
  display: inline-block; position: relative;
  -webkit-mask-image: url('../img/logo-icon.svg');
  mask-image: url('../img/logo-icon.svg');
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  filter: drop-shadow(0 12px 32px rgba(4,2,77,0.18));
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
}
.logo-img:hover { transform: translateY(-8px) scale(1.03); }
.logo-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.logo-img--sm  { width: 140px; height: 140px; }
.logo-img--md  { width: 220px; height: 220px; }
.logo-img--lg  { width: 320px; height: 320px; }
.logo-img--xl  { width: 420px; height: 420px; }

/* Strategic logo-image placement helpers */
.logo-img-float {
  position: absolute; z-index: 2; pointer-events: none;
}
.logo-img-float .logo-img { pointer-events: auto; }

.logo-img-inline {
  display: flex; align-items: center; justify-content: center;
}

/* Section with logo-image side layout */
.logo-section {
  display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center;
}
.logo-section--reverse { grid-template-columns: auto 1fr; }

@media (max-width: 768px) {
  .logo-img--lg { width: 200px; height: 200px; }
  .logo-img--xl { width: 280px; height: 280px; }
  .logo-section, .logo-section--reverse { grid-template-columns: 1fr; }
  .logo-section .logo-img-inline { order: -1; }
}

/* ═══════════════════════════════════════════════════
   CTA RDV — Widget flottant
   ═══════════════════════════════════════════════════ */
/* « --mk-barre-basse » : hauteur d'une eventuelle barre fixe en bas de page.
   Les pages qui en posent une la publient ; le bouton se decale d'autant au
   lieu de s'asseoir dessus et d'en rogner le libelle. Valeur nulle ailleurs. */
.cta-fab {
  position: fixed; bottom: calc(28px + var(--mk-barre-basse, 0px)); right: 28px; z-index: 9000;
  width: 60px; height: 60px; border-radius: 16px;
  background: var(--blue); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 28px rgba(64, 90, 210,0.35);
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
}
.cta-fab:hover { transform: scale(1.08) rotate(-3deg); box-shadow: 0 8px 36px rgba(64, 90, 210,0.45); }
.cta-fab svg { width: 26px; height: 26px; transition: transform 0.2s; }
.cta-fab.open { border-radius: 50%; background: var(--blue-dark); }
/* Bascule en bleu marine quand le FAB survole une section de même couleur bleue */
.cta-fab--on-dark:not(.open) {
  background: var(--blue-dark);
  box-shadow: 0 1px 3px rgba(4,2,77,0.07);
}
.cta-fab--on-dark:not(.open):hover { box-shadow: 0 1px 3px rgba(4,2,77,0.07); }
.cta-fab--on-dark:not(.open) .cta-fab__pulse { border-color: var(--blue-dark); }
.cta-fab.open svg { transform: rotate(90deg); }
.cta-fab__pulse {
  position: absolute; inset: -4px; border-radius: 16px;
  border: 2px solid var(--blue); animation: cta-pulse 2.5s ease-out infinite;
  pointer-events: none;
}
.cta-fab.open .cta-fab__pulse { border-radius: 50%; }
@keyframes cta-pulse {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* CTA Panel */
.cta-panel {
  position: fixed; bottom: 100px; right: 28px; z-index: 9001;
  width: 380px;
  background: #fff; border-radius: 20px;
  box-shadow: 0 1px 3px rgba(4,2,77,0.07);
  display: flex; flex-direction: column;
  transform: translateY(20px) scale(0.95); opacity: 0;
  pointer-events: none;
  transition: all 0.2s cubic-bezier(0.16,1,0.3,1);
  overflow: hidden;
}
.cta-panel.open {
  transform: translateY(0) scale(1); opacity: 1;
  pointer-events: auto;
}
.cta-panel__close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  background: rgba(255,255,255,0.9); backdrop-filter: blur(8px);
  border: none; border-radius: 50%; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--gray-600); transition: all 0.2s;
}
.cta-panel__close:hover { background: #fff; color: var(--blue-dark); transform: rotate(90deg); }
.cta-panel__close svg { width: 16px; height: 16px; }

/* Photo section + carousel */
.cta-panel__photo {
  position: relative; height: 160px; overflow: hidden;
}
.cta-panel__slide {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1s ease;
}
.cta-panel__slide.active { opacity: 1; }
.cta-panel__city-label {
  position: absolute; top: 12px; left: 12px;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(8px);
  padding: 4px 12px; border-radius: 8px;
  font-size: 0.75rem; font-weight: 700; color: var(--blue-dark);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.cta-panel__photo-overlay {
  position: absolute; bottom: 12px; left: 12px;
}
.cta-panel__badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(8px);
  padding: 6px 12px; border-radius: 8px;
  font-size: 0.75rem; font-weight: 600; color: var(--blue-dark);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Body */
.cta-panel__body { padding: 20px 24px 24px; }

/* Avatars */
.cta-panel__avatars {
  display: flex; align-items: center; gap: 0; margin-bottom: 14px;
}
.cta-panel__avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2.5px solid #fff;
  margin-right: -8px;
}
.cta-panel__avatar:last-of-type { margin-right: 0; }
.cta-panel__avatars-text {
  font-size: 0.75rem; font-weight: 600; color: var(--gray-600);
  margin-left: 14px;
  display: flex; align-items: center; gap: 5px;
}
.cta-panel__avatars-text::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #4ade80; display: inline-block;
}

/* Title & description */
.cta-panel__title {
  font-size: 1.125rem; font-weight: 700; color: var(--blue-dark);
  line-height: 1.25; margin-bottom: 8px;
}
.cta-panel__desc {
  font-size: 0.8125rem; color: var(--gray-600); line-height: 1.55;
  margin-bottom: 16px;
}

/* Perks */
.cta-panel__perks {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 20px;
}
.cta-panel__perk {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.75rem; font-weight: 500; color: var(--blue-dark);
}
.cta-panel__perk svg { flex-shrink: 0; }

/* CTA Button */
.cta-panel__btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 16px;
  background: var(--blue); color: #fff;
  border: none; border-radius: 12px;
  font-family: inherit; font-size: 0.875rem; font-weight: 700;
  cursor: pointer; text-decoration: none;
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 4px 16px rgba(64, 90, 210,0.25);
}
.cta-panel__btn:hover {
  background: #2a3fd6;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(64, 90, 210,0.35);
}

/* Footer */
.cta-panel__footer {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 14px;
  font-size: 0.68rem; color: var(--gray-400); font-weight: 500;
}

@media (max-width: 480px) {
  .cta-panel { right: 12px; left: 12px; width: auto; bottom: 80px; }
  .cta-fab { bottom: calc(16px + var(--mk-barre-basse, 0px)); right: 16px; }
}

@media (max-width: 480px) {
  .chatbot { right: 0; left: 0; bottom: 0; width: 100%; max-height: 85vh; border-radius: 20px 20px 0 0; }
  .chatbot-fab { bottom: 20px; right: 20px; width: 54px; height: 54px; }
  .chatbot__input input { font-size: 16px; } /* Prevent iOS zoom */
}

/* ═══════════════════════════════════════════════════
   POP-UP CTA
   ═══════════════════════════════════════════════════ */
.cta-popup {
  position: fixed; z-index: 8000;
  transform: translateY(30px); opacity: 0;
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.16,1,0.3,1);
}
.cta-popup.visible {
  transform: translateY(0); opacity: 1;
  pointer-events: auto;
}

/* ── Exit-intent overlay popup ── */
.cta-popup--exit {
  inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(4,2,77,0.55); backdrop-filter: blur(6px);
  transform: none; padding: 20px;
}
.cta-popup--exit .cta-popup__card {
  background: #fff; border-radius: 24px; padding: 48px 40px;
  max-width: 520px; width: 100%; text-align: center;
  position: relative; box-shadow: 0 32px 80px rgba(4,2,77,0.25);
}
.cta-popup--exit .cta-popup__close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; border-radius: 50%;
  border: none; background: var(--gray-100); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-600); transition: all 0.2s;
}
.cta-popup--exit .cta-popup__close:hover { background: var(--gray-200); }
.cta-popup--exit .cta-popup__close svg { width: 16px; height: 16px; }
.cta-popup--exit .cta-popup__icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--blue-light); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
}
.cta-popup--exit .cta-popup__icon svg { width: 28px; height: 28px; }
.cta-popup--exit h3 {
  font-size: 1.5rem; font-weight: 700; color: var(--blue-dark);
  margin-bottom: 10px; letter-spacing: -0.02em;
}
.cta-popup--exit p {
  font-size: 0.875rem; color: var(--gray-600); margin-bottom: 24px; line-height: 1.6;
}
.cta-popup--exit .cta-popup__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.cta-popup--exit .cta-popup__btn {
  padding: 13px 28px; border-radius: 12px; font-size: 0.875rem;
  font-weight: 700; border: none; cursor: pointer; text-decoration: none;
  transition: all 0.2s; font-family: inherit;
}
.cta-popup--exit .cta-popup__btn--primary {
  background: var(--blue); color: #fff;
}
.cta-popup--exit .cta-popup__btn--primary:hover {
  background: var(--blue-dark); transform: translateY(-2px);
}
.cta-popup--exit .cta-popup__btn--ghost {
  background: transparent; color: var(--gray-600);
  border: 1.5px solid var(--border);
}
.cta-popup--exit .cta-popup__btn--ghost:hover { border-color: var(--blue); color: var(--blue); }

/* ── Slide-in bottom-left toast popup ── */
.cta-popup--toast {
  bottom: 28px; left: 28px;
  background: #fff; border-radius: 16px;
  padding: 20px 24px; max-width: 360px;
  box-shadow: 0 1px 3px rgba(4,2,77,0.07);
  display: flex; gap: 14px; align-items: flex-start;
  transform: translateX(-30px); opacity: 0;
}
.cta-popup--toast.visible { transform: translateX(0); opacity: 1; }
.cta-popup--toast .cta-popup__toast-icon {
  width: 42px; height: 42px; border-radius: 10px;
  background: var(--accent-light); color: var(--accent-text, #ed797b);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cta-popup--toast .cta-popup__toast-icon svg { width: 20px; height: 20px; }
.cta-popup--toast .cta-popup__toast-content { flex: 1; }
.cta-popup--toast .cta-popup__toast-title {
  font-size: 0.8125rem; font-weight: 700; color: var(--blue-dark); margin-bottom: 3px;
}
.cta-popup--toast .cta-popup__toast-text {
  font-size: 0.75rem; color: var(--gray-600); line-height: 1.5; margin-bottom: 10px;
}
.cta-popup--toast .cta-popup__toast-link {
  font-size: 0.75rem; font-weight: 700; color: var(--blue);
  text-decoration: none; transition: opacity 0.2s;
}
.cta-popup--toast .cta-popup__toast-link:hover { opacity: 0.7; }
.cta-popup--toast .cta-popup__toast-close {
  position: absolute; top: 10px; right: 10px;
  background: none; border: none; cursor: pointer;
  color: var(--gray-400); padding: 2px; transition: color 0.2s;
}
.cta-popup--toast .cta-popup__toast-close:hover { color: var(--blue-dark); }
.cta-popup--toast .cta-popup__toast-close svg { width: 14px; height: 14px; }

@media (max-width: 480px) {
  .cta-popup--toast { left: 12px; right: 12px; max-width: none; bottom: 96px; }
  .cta-popup--exit .cta-popup__card { padding: 36px 24px; }
}

/* ═══════════════════════════════════════════════════
   CONTACT MODAL — Prise de RDV + Message
   ═══════════════════════════════════════════════════ */
.contact-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}
.contact-modal.open { opacity: 1; visibility: visible; }
.contact-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(4,2,77,0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.contact-modal__card {
  position: relative; z-index: 1;
  background: #fff;
  border-radius: 24px;
  width: 100%; max-width: 520px;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 32px 80px rgba(4,2,77,0.2);
  transform: translateY(20px) scale(0.97);
  transition: transform 0.2s cubic-bezier(0.16,1,0.3,1);
}
.contact-modal.open .contact-modal__card {
  transform: translateY(0) scale(1);
}
.contact-modal__close {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--gray-50, #f8f8fa); border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.2s;
}
.contact-modal__close:hover { background: var(--gray-100, #eee); }
.contact-modal__close svg { width: 18px; height: 18px; color: var(--gray-600); }
.contact-modal__header {
  padding: 36px 36px 0;
  text-align: center;
}
.contact-modal__icon {
  width: 56px; height: 56px; margin: 0 auto 16px;
  background: var(--blue-light, #e8ebfe);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
}
.contact-modal__icon svg { width: 26px; height: 26px; color: var(--blue); }
.contact-modal__header h2 {
  font-size: 1.5rem; font-weight: 700;
  color: var(--blue-dark); margin-bottom: 6px;
}
.contact-modal__header p {
  font-size: 0.875rem; color: var(--gray-400);
  line-height: 1.5;
}

/* Tabs */
.contact-modal__tabs {
  display: flex; gap: 4px;
  margin: 24px 36px 0;
  background: var(--gray-50, #f8f8fa);
  border-radius: 12px; padding: 4px;
}
.contact-modal__tab {
  flex: 1; padding: 10px 12px;
  border: none; background: transparent;
  font-size: 0.8125rem; font-weight: 600;
  color: var(--gray-400); cursor: pointer;
  border-radius: 10px; transition: all 0.2s;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.contact-modal__tab svg { width: 16px; height: 16px; }
.contact-modal__tab.active {
  background: #fff; color: var(--blue);
  box-shadow: 0 2px 8px rgba(4,2,77,0.08);
}

/* Form */
.contact-modal__form {
  padding: 24px 36px 36px;
}
.contact-modal__row {
  display: flex; gap: 12px;
}
.contact-modal__field {
  margin-bottom: 16px; flex: 1;
}
.contact-modal__field label {
  display: block; font-size: 0.75rem; font-weight: 600;
  color: var(--gray-600); margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.contact-modal__field input,
.contact-modal__field select,
.contact-modal__field textarea {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid var(--border, #e5e7eb);
  border-radius: 12px; font-size: 0.875rem;
  font-family: inherit; color: var(--blue-dark);
  background: #fff; transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}
.contact-modal__field input:focus,
.contact-modal__field select:focus,
.contact-modal__field textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(64, 90, 210,0.1);
}
.contact-modal__field textarea {
  resize: vertical; min-height: 100px;
}
.contact-modal__field input::placeholder,
.contact-modal__field textarea::placeholder {
  color: var(--gray-300, #c0c0c0);
}
.contact-modal__submit {
  width: 100%; padding: 14px;
  background: var(--blue); color: #fff;
  font-size: 0.875rem; font-weight: 700;
  border: none; border-radius: 12px;
  cursor: pointer; transition: background 0.2s, transform 0.2s;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.contact-modal__submit:hover {
  background: var(--blue-dark);
  transform: translateY(-1px);
}
.contact-modal__footer {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; margin-top: 16px;
  font-size: 0.75rem; color: var(--gray-300);
}
.contact-modal__footer svg { width: 12px; height: 12px; }

/* Success state */
.contact-modal__success {
  padding: 48px 36px;
  text-align: center; display: none;
}
.contact-modal__success.show { display: block; }
.contact-modal__success-icon {
  width: 64px; height: 64px; margin: 0 auto 20px;
  background: rgba(22,163,106,0.1);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.contact-modal__success-icon svg { width: 32px; height: 32px; color: #16a34a; }
.contact-modal__success h3 {
  font-size: 1.25rem; font-weight: 700;
  color: var(--blue-dark); margin-bottom: 8px;
}
.contact-modal__success p {
  font-size: 0.875rem; color: var(--gray-400);
  line-height: 1.5;
}

/* Panel hidden by tab */
.contact-modal__panel { display: none; }
.contact-modal__panel.active { display: block; }

@media (max-width: 540px) {
  .contact-modal { padding: 12px; }
  .contact-modal__card { border-radius: 20px; }
  .contact-modal__header { padding: 28px 24px 0; }
  .contact-modal__tabs { margin: 20px 24px 0; }
  .contact-modal__form { padding: 20px 24px 28px; }
  .contact-modal__row { flex-direction: column; gap: 0; }
  .contact-modal__header h2 { font-size: 1.25rem; }
}

/* Les fenêtres de connexion en .login-modal* ont été supprimées le 27 août
   2026 avec leur balisage : la maquette du pop-up les remplace (.mk-*, plus
   bas dans ce fichier). Aucun élément ne portait plus ces classes. */


/* ═══════════════════════════════════════════════════
   COMPARATIF — cartes "autre chasseur vs nous" (partagé : bien.html,
   index.html, guides). Le détail chiffré reste dans un tableau replié.
   ═══════════════════════════════════════════════════ */
    /* Comparatif — épuré sur fond de page, carte "nous" en avant */
    .cmp-hero { padding:8px 0 0; font-family:'Plus Jakarta Sans', sans-serif; }
    .cmp-hero__head {
      display:flex; justify-content:space-between; align-items:flex-end;
      gap:16px; margin-bottom:24px; flex-wrap:wrap;
    }
    .cmp-hero__eyebrow {
      display:block; font-size: 0.75rem; font-weight:700; letter-spacing:0.14em;
      text-transform:uppercase; color:var(--bs-accent, #405AD2); margin-bottom:10px;
    }
    .cmp-hero__title {
      font-size:1.5rem; font-weight: 700; color:var(--blue-dark, #04024D); margin:0;
      letter-spacing:-0.015em; line-height:1.4; text-align:left;
    }
    /* Montant économisé : texte corail simple (le pill global est trop lourd ici) */
    .cmp-hero .cmp-highlight {
      background:none; box-shadow:none; padding:0; margin:0;
      color:var(--bs-coral, #ed797b); font-size:1.1em; font-weight: 700;
    }
    .cmp-hero__link {
      font-size: 0.8125rem; font-weight:600; color:var(--gray-600, #6b7280);
      text-decoration:underline; text-underline-offset:4px;
      white-space:nowrap; padding-bottom:4px;
      transition:color 0.2s;
    }
    .cmp-hero__link:hover { color:var(--blue-dark, #04024D); }
    .cmp-hero__cards { display:grid; grid-template-columns:1fr 1.1fr; gap:16px; align-items:stretch; }
    .cmp-card-conc { background:#f6f7fb; border-radius:16px; padding:24px 26px; }
    .cmp-card-conc__name { font-size: 0.875rem; color:var(--gray-600, #6b7280); margin-bottom:16px; }
    .cmp-card-conc__value {
      font-size:2rem; font-weight: 700; color:var(--gray-600, #6b7280);
      letter-spacing:-0.02em; font-variant-numeric:tabular-nums;
      line-height:1.1; margin-bottom:10px;
    }
    .cmp-card-conc__sub { font-size: 0.8125rem; color:var(--gray-400, #9ca3af); }
    .cmp-card-nous {
      background:#fff; border-radius:16px; padding:24px 26px;
      border:1px solid rgba(15,23,42,0.08);
      box-shadow: 0 1px 3px rgba(4,2,77,0.07);
    }
    .cmp-card-nous__head {
      display:flex; justify-content:space-between; align-items:center;
      gap:12px; margin-bottom:16px; flex-wrap:wrap;
    }
    /* Logo : mêmes classes que le header (nav__logo-shape / nav__logo-text),
       simplement redimensionné pour la carte. */
    .cmp-card-nous__logo { display:flex; align-items:center; gap:2px; }
    .cmp-card-nous__logo .nav__logo-shape { width:48px; }
    .cmp-card-nous__logo .nav__logo-text .logo-top,
    .cmp-card-nous__logo .nav__logo-text .logo-bottom { font-size: 1rem; }
    .cmp-card-nous__badge { font-size: 0.8125rem; font-weight:700; color:var(--bs-coral, #ed797b); white-space:nowrap; }
    .cmp-card-nous__value {
      font-size:2.2rem; font-weight: 700; color:var(--blue-dark, #04024D);
      letter-spacing:-0.02em; font-variant-numeric:tabular-nums;
      line-height:1.1; margin-bottom:10px;
    }
    .cmp-card-nous__sub { font-size: 0.8125rem; color:var(--gray-600, #6b7280); }
    .cmp-card-nous__sub strong { color:var(--blue-dark, #04024D); font-weight: 700; }
    @media (max-width:640px) {
      .cmp-hero__head { margin-bottom:18px; }
      .cmp-hero__title { font-size: 1.125rem; }
      .cmp-hero__cards { grid-template-columns:1fr; gap:12px; }
      .cmp-card-conc, .cmp-card-nous { padding:20px 18px; }
      .cmp-card-conc__value { font-size: 1.5rem; }
      .cmp-card-nous__value { font-size:1.75rem; }
    }

/* Compteur "économisez X€" : moins massif sur tablette/mobile */
@media (max-width: 768px) {
  .cmp-highlight { font-size: 1.12em !important; padding: 3px 10px !important; border-radius: 8px !important; }
  .cmp-hero .cmp-highlight { padding: 0 !important; }
}

/* ── Placeholder d'images de contenu ──
   Fond bleu pâle + logo en filigrane, visible pendant le chargement des
   photos (et conservé si l'image ne charge pas — voir main.js). */
/* `.opp-card__piste img` a remplace `.mb-card__img img` : Mes biens a pris
   la vignette partagee, et son ancienne classe n'existe plus. Le filigrane
   couvre du coup TOUTES les vignettes du site, pas seulement celle-la. */
.svc-tabs__img-wrap img, .opp-card__piste img, .bp-gallery__main img,
.bien-photo__main img, .img-fallback {
  background-color: #eef0fb;
  background-image: url('../img/filigrane-mandak.svg'),
    linear-gradient(135deg, #f2f3fe 0%, #e8ebfe 100%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 88px auto, cover;
}
.img-fallback { object-fit: contain; }

/* ═══════════════════════════════════════════════════
   MENU BURGER « 3b » — panneau plein écran (mobile),
   tiroir 420px (tablette/desktop). Structure construite
   par js/main.js (buildMobileMenu) sur toutes les pages.
   ═══════════════════════════════════════════════════ */
.nav__mobile.mk-menu {
  position: fixed; inset: 0; z-index: 9500; /* au-dessus du FAB rendez-vous (9000) */
  width: 100%; max-width: none; height: 100%; max-height: none;
  display: none; flex-direction: column;
  background: #fff; padding: 0; margin: 0;
  overflow: hidden; border: none; transform: none;
}
.nav__mobile.mk-menu.open { display: flex; }
@media (min-width: 768px) {
  .nav__mobile.mk-menu { left: auto; width: 420px; box-shadow: -8px 0 32px rgba(4,2,77,0.10); }
}
/* Resets : neutralise les styles génériques de .nav__mobile a */
.nav__mobile.mk-menu a, .nav__mobile.mk-menu button { border-bottom: none; box-shadow: none; }

/* ── Bandeau compte ──
   Repris du pied des vignettes (css/vignette.css) : fond bleu vif, texte
   blanc, action en pastille blanche, et un grand arrondi la ou le bleu
   rencontre le blanc. Le geste est simplement retourne — le pied est en
   bas d'une carte, ce bandeau est en haut du menu, l'arrondi passe donc
   du coin haut-gauche au coin bas-gauche.

   Pas besoin ici de la construction en deux couches de la vignette : la
   son coin donnait sur du lavande, il fallait repeindre le blanc. Ce
   bandeau donne directement sur le fond blanc du menu, l'arrondi suffit. */
.mk-top {
  flex: none; padding: 0 24px 24px;
  background: var(--blue, #405AD2);
  border-radius: 0 0 0 28px;
}
.mk-bar { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.mk-logo {
  font-weight: 700; font-size: 20px; line-height: 1; letter-spacing: -0.02em;
  color: #fff; display: inline-flex; align-items: baseline;
}
.mk-logo-dot {
  width: 0.266em; height: 0.266em; border-radius: 0.078em;
  /* Le corail, comme partout ailleurs sur le site. Il ne contraste qu'a
     2,11:1 avec le bleu vif du bandeau — mais c'est une marque, pas un
     texte ni un pictogramme porteur de sens : le point est `aria-hidden`,
     rien ne se perd s'il se voit mal. */
  background: var(--accent, #ED797B); margin-left: 0.14em;
  transform: translateY(0.02em); display: inline-block;
}
.mk-close {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 0; padding: 0; border-radius: 999px;
  /* La pastille blanche du pied, dans son role d'action. */
  background: #fff; color: var(--blue, #405AD2);
  cursor: pointer; transition: background 0.12s, transform 0.12s;
}
.mk-close:hover { background: var(--blue-dark, #04024D); color: #fff; }
/* Bandeau d'accueil : un simple bloc de texte, jamais cliquable — la
   connexion se fait depuis la section « Autres » de la liste. */
.mk-account { display: flex; flex-direction: column; padding: 10px 0; }
.mk-name { font-weight: 700; font-size: 18px; line-height: 1.2; letter-spacing: -0.02em; color: #fff; }
/* Ligne de rôle sous le bonjour : discrète, dans le bleu clair du bandeau. */
/* Le #C5CCFB d'avant etait calibre sur le navy ; sur le bleu vif il
   n'atteignait plus le contraste requis pour 13 px. */
.mk-role { font-weight: 500; font-size: 13px; line-height: 1.3; color: rgba(255,255,255,0.86); margin-top: 5px; }

/* ── Navigation ── */
.mk-nav { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 0 8px; display: flex; flex-direction: column; }
.mk-group {
  font-weight: 600; font-size: 11px; line-height: 1; letter-spacing: 0.06em;
  text-transform: uppercase; color: #9B9AB6; padding: 0 24px 8px;
}
/* « Découvrir » est un bouton qui garde l'apparence d'un libellé de groupe :
   un <div> ne se plie pas au clavier, et une section repliable doit annoncer
   son état. Le chevron reprend celui de l'accordéon « Investir », en plus
   petit et dans la couleur du libellé. */
.mk-group--pliable {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; border: 0; background: none; font: inherit; cursor: pointer;
  font-weight: 600; font-size: 11px; line-height: 1; letter-spacing: 0.06em;
  text-transform: uppercase; color: #9B9AB6; padding: 0 24px 8px;
  text-align: left;
}
.mk-group--pliable:hover { color: var(--blue, #405AD2); }
/* La regle generale fait tourner le chevron de 180 quand c'est ouvert ;
   pour une section, un quart de tour vers la droite dit mieux « repliee ». */
.mk-group--pliable[aria-expanded="false"] .mk-chevron { transform: rotate(-90deg); }
.mk-group--pliable[aria-expanded="true"] .mk-chevron { transform: none; }
.mk-section { display: flex; flex-direction: column; }
.mk-section[data-open="false"] { display: none; }
.mk-section[data-open="true"] { animation: mk-in 0.22s; }
/* `.mk-section` s'ajoute a la liste : repliee, elle reste dans le flux, et
   « Decouvrir » se retrouvait colle au titre suivant. */
.mk-item + .mk-group, .mk-sub + .mk-group, .mk-group + .mk-group,
.mk-section + .mk-group { padding-top: 22px; }
.nav__mobile.mk-menu .mk-item {
  display: flex; align-items: center; justify-content: flex-start; gap: 14px;
  width: 100%; min-height: 44px; padding: 13px 24px; margin: 0;
  border: 0; background: none; font-family: inherit;
  font-weight: 600; font-size: 16px; line-height: 1.25;
  color: var(--blue-dark, #04024D); text-align: left; text-decoration: none;
  cursor: pointer; transition: background 0.12s; border-radius: 0;
}
/* ── Les icônes du menu ──
   Posées à la construction par mkIcone(), dans js/main.js. Le chevron de
   l'accordéon est repoussé à droite par une marge automatique : les entrées
   ne sont plus étalées par `space-between`, donc l'icône colle au libellé
   au lieu de s'en éloigner. */
.mk-ico {
  width: 19px; height: 19px; flex: none;
  color: var(--blue, #405AD2);
  transition: color 0.12s;
}
.nav__mobile.mk-menu .mk-item:hover .mk-ico { color: var(--blue-dark, #04024D); }
.nav__mobile.mk-menu .mk-item .mk-chevron { margin-left: auto; }
/* « Investir » n'a pas d'icône — c'est l'en-tête d'un accordéon. Sans ce
   retrait son libellé commencerait 33 px à gauche de ceux d'en dessous. */
.nav__mobile.mk-menu .mk-item--sans-ico { padding-left: 57px; }
/* Les sept guides portent les icônes du méga-menu de l'ordinateur. */
.nav__mobile.mk-menu .mk-sub a { display: flex; align-items: center; gap: 12px; }
.nav__mobile.mk-menu .mk-sub a .mk-ico { width: 17px; height: 17px; }

/* ── Le bas du menu ──
   Un filet à la place du titre « Autres », et le rendez-vous sorti de la
   liste. `sticky` SANS `margin-top:auto` : le bouton se pose après la
   dernière entrée, et n'est retenu au bas de l'écran que si la liste
   déborde — une boîte collante dont la position naturelle est déjà visible
   ne bouge pas. Avec la marge automatique, un écran haut montrait 186 px de
   vide au milieu du menu. Le fond blanc masque la liste qui passe dessous
   quand elle défile. */
.mk-filet {
  height: 1px; flex: none;
  background: rgba(4, 2, 77, 0.09);
  margin: 14px 24px 16px;
}
.mk-pied {
  /* `margin-top: auto` ET `sticky`, les deux ensemble — c'est leur
     combinaison qui tient les deux cas :
       liste courte  → la marge pousse le bouton au bas de l'appareil, et le
                       menu occupe toute la hauteur au lieu de s'arreter en
                       haut avec du blanc dessous ;
       liste longue  → il ne reste aucune place libre, la marge vaut donc
                       zero, et c'est `sticky` qui retient le bouton.
     Aucun des deux ne provoque de defilement : une marge automatique
     consomme l'espace restant, elle n'en cree pas. */
  margin-top: auto;
  position: sticky; bottom: 0;
  padding: 10px 24px 18px;
  background: #fff;
}
.nav__mobile.mk-menu .mk-pied .mk-item--cta {
  justify-content: center;
  background: var(--blue, #405AD2); color: #fff;
  border-radius: 999px; min-height: 48px;
  padding: 13px 20px; font-weight: 700;
}
.nav__mobile.mk-menu .mk-pied .mk-item--cta:hover { background: var(--blue-dark, #04024D); }

/* Survol : voile bleu très léger plutôt que du beige, qui jurait avec le
   marine du texte et le bandeau du haut. */
.nav__mobile.mk-menu .mk-item:hover { background: rgba(64, 90, 210, 0.06); }
.nav__mobile.mk-menu .mk-item--muted { color: #514F7E; }
/* Item connexion/déconnexion : icône + libellé côte à côte */
.nav__mobile.mk-menu #mobileAuthBtn { justify-content: flex-start; gap: 12px; }
.nav__mobile.mk-menu #mobileAuthBtn .nav-mobile-icon { width: 20px; height: 20px; flex-shrink: 0; }
.mk-chevron { transition: transform 0.22s; flex-shrink: 0; }
[aria-expanded="true"] .mk-chevron { transform: rotate(180deg); }
.mk-sub { display: none; flex-direction: column; gap: 2px; padding: 2px 0 10px; }
.mk-sub[data-open="true"] { display: flex; animation: mk-in 0.22s; }
.nav__mobile.mk-menu .mk-sub a {
  font-weight: 500; font-size: 14.5px; line-height: 1.2; color: #514F7E;
  padding: 9px 24px 9px 36px; margin: 0; text-decoration: none;
  transition: color 0.12s, background 0.12s;
}
.nav__mobile.mk-menu .mk-sub a:hover { color: var(--blue, #405AD2); background: rgba(64, 90, 210, 0.06); }
@keyframes mk-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── Pied rendez-vous : carte « Parlons de votre projet » ── */
/* Prise de rendez-vous : un lien de la liste comme les autres, distingué par
   la couleur seule. Le menu reste une liste homogène. */
.nav__mobile.mk-menu .mk-item--cta { color: var(--blue, #405AD2); font-weight: 700; }

/* ── Champs : pas de zoom automatique sur iPhone ──────────────────────
   Safari iOS agrandit la page dès qu'on touche un champ dont le texte
   fait moins de 16px, et n'en ressort pas tout seul. La règle ne
   s'applique qu'en dessous de 768px : le dessin reste intact sur
   grand écran, où le zoom n'existe pas. Les cases à cocher et les
   boutons radio n'ont pas de texte, ils ne sont pas concernés. */
@media (max-width: 767px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px;
  }
}

/* ── Rôle : masquage tant qu'il n'est pas établi ──────────────────────
   Les entrées qui dépendent du rôle restent invisibles jusqu'à ce que
   l'authentification ait répondu. Mieux vaut une barre incomplète pendant
   un instant qu'une barre fausse qu'il faut corriger sous les yeux de
   l'utilisateur — c'est ce qui faisait « clignoter » le statut. */
html:not(.mk-role-connu) .page-sidebar__item[data-role],
html:not(.mk-role-connu) .page-sidebar-mobile-top .page-sidebar__item[data-role] {
  visibility: hidden;
}

/* ── Visiteur non connecté : pas de barre latérale ────────────────────
   Le rail dessert l'espace membre. Pour un visiteur, il n'a aucune entrée
   valide à proposer — et le laisser afficher « Déconnexion » à quelqu'un
   qui n'est pas connecté n'a pas de sens. On retire aussi le décalage du
   contenu, sans quoi il resterait une gouttière vide de 120px. */
html.mk-visiteur .page-sidebar,
html.mk-visiteur .page-sidebar-mobile-top { display: none !important; }
html.mk-visiteur .section { padding-left: 0; }


/* ═══════════════════════════════════════════════════════════════════
   RAIL LATÉRAL — navigation de l'espace membre
   ───────────────────────────────────────────────────────────────────
   Ces règles vivaient recopiées dans le <style> de chacune des 10 pages
   de l'espace. Elles sont ici pour que main.js puisse poser le rail sur
   les pages qui ne l'avaient pas — accueil, concept, contact, mentions…
   Les 10 pages gardent leur copie en ligne : identique, et la cascade
   leur donne le dernier mot, donc rien ne bouge chez elles.

   Le décalage du contenu (padding-left) est le seul point sensible : il
   n'est appliqué que si <html> porte .mk-rail, classe posée par main.js
   au moment de l'injection. Sans cette précaution, toute page chargeant
   style.css se serait décalée de 120 px, rail ou pas.
   ═══════════════════════════════════════════════════════════════════ */
.page-sidebar {
  /* Démarre sous la barre de navigation : à top:0 il recouvrait le logo. */
  position: fixed; left: 0; top: 69px;
  height: calc(100vh - 69px); width: 92px;
  z-index: 100; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 20px 6px 16px;
  background: var(--blue-dark, #04024D);
  border-radius: 0 28px 28px 0;
  box-shadow: 0 1px 3px rgba(4,2,77,0.07);
  overflow-y: auto; scrollbar-width: none;
}
.page-sidebar::-webkit-scrollbar { display: none; }
.page-sidebar__item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; width: 80px; padding: 22px 4px;
  border-radius: 12px; box-sizing: border-box;
  text-decoration: none; cursor: pointer;
  /* 86 % d'opacité : en dessous, le libellé passe sous le seuil de
     contraste lisible sur le bleu marine. */
  color: rgba(255,255,255,0.86);
  transition: background 0.18s, color 0.18s;
}
.page-sidebar__item span {
  font-size: 11px; font-weight: 600; letter-spacing: 0.01em;
  line-height: 1.2; text-align: center; white-space: nowrap;
}
.page-sidebar__item .psb-svg { width: 21px; height: 21px; display: block; flex: none; }
.page-sidebar__item:hover { color: #fff; background: rgba(255,255,255,0.10); }
/* Bleu clair et non le bleu de marque : sur le marine, #405AD2 ne donne que
   3,22:1 — le minimum est 3,0, et c'est l'entrée qui doit se lire d'un coup
   d'œil. #C5CCFB monte à 11,96:1. */
.page-sidebar__item.active {
  color: var(--blue-dark, #04024D); background: var(--blue-mid, #C5CCFB);
  box-shadow: 0 1px 3px rgba(4,2,77,0.07);
}
.page-sidebar__item.active span { font-weight: 700; }
.page-sidebar__item.active .psb-svg { stroke-width: 2; }
.page-sidebar__spacer { flex: 1; min-height: 14px; }
.page-sidebar__divider { width: 56px; height: 1px; background: rgba(255,255,255,0.18); margin: 9px 0; }
/* Paramètres et Déconnexion : mêmes couleur et icône que les entrées du
   haut. Leur atténuation à 66 % n'ajoutait rien — le trait de séparation
   au-dessus porte déjà la hiérarchie — et coûtait de la lisibilité sur le
   fond marine. Seul l'espacement reste plus compact, pour que le rail tienne
   sans défiler. */
.page-sidebar__item--minor { padding: 12px 4px; }
/* Paramètres et Déconnexion reprennent la taille des entrées du haut :
   la demi-taille d'écart les faisait paraître d'une autre police. Leur
   distinction passe désormais par la couleur et l'espacement seuls. */

/* Visibilité par rôle : la classe is-adviser est posée sur le <nav>. */
.page-sidebar__item[data-role="adviser"] { display: none; }
.page-sidebar.is-adviser .page-sidebar__item[data-role="adviser"] { display: flex; }
.page-sidebar.is-adviser .page-sidebar__item[data-role="client"] { display: none; }

/* ── Décalage du contenu à côté du rail ──
   Le décalage ne visait que « .section ». Or le héros de l'accueil est un
   « .hero », le pied de page un « .footer », et il existe une dizaine
   d'autres types de blocs : tous passaient sous le rail, qui recouvrait
   alors le texte — 72 px avalés sur le titre de l'accueil, mesurés à
   940 px de large.

   On vise désormais la POSITION dans le document et non le nom de classe :
   tout bloc de premier niveau est décalé, et un nouveau type de section le
   sera sans qu'on ait à y penser. C'est ce qui manquait pour que le défaut
   ne revienne pas.

   Le rembourrage laisse le fond du bloc pleine largeur — seul le contenu
   se décale, et le rail se pose sur la bande ainsi libérée.

   .bp-page reste nommée : la fiche proposée est un <div>, pas une
   <section>.

   La classe est répétée à dessein. Les pages déclarent leurs blocs avec
   deux classes — « .section.avis » dans index.html, par exemple — et en
   CSS deux classes l'emportent sur une classe suivie de trois balises,
   quel que soit l'ordre des feuilles. Sans cette répétition, la règle
   perd et le rail recouvre le texte. C'est la seule façon de gagner sans
   recourir à !important, qui écraserait aussi les rembourrages légitimes
   des pages.

   Le décalage n'est posé qu'au-dessus de 768 px, là où le rail est visible.
   On remettait auparavant « padding-left: 0 » en mobile pour l'annuler, en
   supposant que chaque bloc tenait sa gouttière d'un « .container » interne.
   Les blocs qui portent leur propre rembourrage — .bp-page, mais aussi
   .pillars-manifesto sur la page Concept — se retrouvaient alors collés au
   bord gauche tandis que leur côté droit gardait ses 16 px. Ne rien écrire
   en mobile laisse chaque bloc garder sa propre règle, et le problème ne
   peut plus se reproduire sur un bloc qu'on aurait oublié de reprendre. */
@media (min-width: 769px) {
  html.mk-rail.mk-rail body > section,
  html.mk-rail.mk-rail body > footer,
  html.mk-rail.mk-rail body > main,
  html.mk-rail.mk-rail .bp-page { padding-left: 120px; }
}

@media (max-height: 800px) { .page-sidebar__item { padding: 14px 4px; } }
@media (max-height: 700px) {
  .page-sidebar__item { padding: 9px 4px; }
  .page-sidebar__item--minor { padding: 7px 4px; }
  .page-sidebar__divider { margin: 5px 0; }
}
@media (max-width: 768px) {
  .page-sidebar { display: none; }
}

/* Les styles de l'œil générique (.mk-champ-mdp) sont partis avec sa fonction :
   les seuls champs mot de passe du site vivent dans le pop-up, qui a les
   siens (.mk-oeil, plus bas). */



/* ═══ Pop-up de connexion, inscription et réinitialisation ═══════════════
   Maquette fournie par Nicolas le 27 août 2026, intégrée sans retouche de
   design. Quatre écarts assumés par rapport au fichier livré :

   1. Les variables de palette passent de :root à .mk-overlay. Sous :root
      elles écraseraient celles du site — « --bord », « --gris » sont des
      noms trop courants pour être posés globalement.
   2. Les règles body et « button, input » du fichier livré sont écartées :
      une feuille de site ne peut pas réinitialiser toutes les pages.
   3. Le voile est masqué par défaut et s'affiche sur .open, la classe que
      le site utilise déjà pour ouvrir ses modales.
   4. Les conteneurs gardent les identifiants loginModal et resetModal : une
      dizaine d'endroits les ouvrent par ce nom, dont ?login=1.
   ══════════════════════════════════════════════════════════════════════ */

.mk-overlay {
  /* Quatre de ces couleurs sont déjà des jetons du site sous un autre nom :
     on pointe vers eux plutôt que de recopier la valeur, sinon une retouche
     de charte devrait se faire à deux endroits et le pop-up dériverait. */
  --marine: var(--blue-dark);
  --bleu: var(--blue);
  --creme: var(--cream);
  --bleu-pale: var(--blue-pale);
  /* Ces trois-là diffèrent VRAIMENT des jetons du site : les gris de la
     maquette sont neutres (#6B7280) là où ceux du site sont violacés
     (--gray-600: #4a4878). On garde la maquette telle qu'elle a été
     validée — c'est un arbitrage de design, pas de code. */
  --bord: #E7E2DC;
  --gris: #6B7280;
  --gris-clair: #9CA3AF;
}

/* Voile + carte */

.mk-overlay {
    /* 9999 et non le 1000 du fichier livré : le site pose au-dessus de 1000
       son bouton rendez-vous (9000), son panneau (9001) et le menu mobile
       (9500). À 1000, le bouton calendrier bleu restait visible et cliquable
       par-dessus le voile. L'ancienne fenêtre était déjà à 9999. */
    position:fixed; inset:0; z-index:9999;
    background:rgba(4,2,77,0.45);
    display:flex; align-items:center; justify-content:center; padding:24px;
  }

.mk-overlay .mk-modal {
    width:396px; max-width:100%; max-height:calc(100vh - 48px); overflow-y:auto;
    background:var(--creme); border-radius: 20px;
    padding:40px 40px 32px; box-sizing:border-box; text-align:center;
    box-shadow:0 40px 80px -30px rgba(4,2,77,0.55);
  }

.mk-overlay .mk-logo { width:54px; height:37px; display:block; margin:0 auto 20px; }

/* 20 px : barreau de l'echelle, contre 21 auparavant. */
.mk-overlay .mk-titre { font-size:20px; font-weight: 700; color:var(--marine); letter-spacing:-0.02em; }

.mk-overlay .mk-sous { margin:8px 0 24px; font-size:13px; line-height:1.6; color:var(--gris); }

  /* Bouton Google */

.mk-overlay .mk-google {
    display:flex; align-items:center; justify-content:center; gap:11px;
    width:100%; padding:14px 0; border:none; border-radius: 12px; cursor:pointer;
    background:var(--marine); color:#fff; font-size:14px; font-weight:700;
    box-shadow: 0 1px 3px rgba(4,2,77,0.07); transition:background .15s;
  }

.mk-overlay .mk-google:hover { background:var(--bleu); }

.mk-overlay .mk-google__pastille { width:25px; height:25px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; flex:none; }

.mk-overlay .mk-gicon { width:14px; height:14px; }

  /* Séparateur */

.mk-overlay .mk-ou { display:flex; align-items:center; gap:14px; margin:20px 0; }
  .mk-overlay .mk-ou::before,

.mk-overlay .mk-ou::after { content:''; flex:1; height:1px; background:var(--bord); }

.mk-overlay .mk-ou span { font-size:11px; font-weight:700; color:var(--gris-clair); letter-spacing:0.06em; }

  /* Champs */

.mk-overlay .mk-champs { display:flex; flex-direction:column; gap:12px; text-align:left; }

.mk-overlay .mk-noms { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.mk-overlay .mk-input {
    width:100%; box-sizing:border-box; padding:13px 15px;
    border:1.5px solid var(--bord); border-radius: 12px;
    font-size:13.5px; color:var(--marine); background:#fff; outline:none;
  }

.mk-overlay .mk-input:focus { border-color:var(--bleu); }

.mk-overlay .mk-input::placeholder { color:var(--gris-clair); }

.mk-overlay .mk-mdp { position:relative; }

.mk-overlay .mk-mdp .mk-input { padding-right:44px; }

.mk-overlay .mk-oeil {
    position:absolute; right:6px; top:50%; transform:translateY(-50%);
    width:32px; height:32px; border:none; background:none; border-radius: 8px;
    display:flex; align-items:center; justify-content:center; color:var(--gris-clair); cursor:pointer;
  }

.mk-overlay .mk-oeil:hover { color:var(--bleu); background:var(--bleu-pale); }

.mk-overlay .mk-oeil svg { width:16px; height:16px; }

.mk-overlay .mk-regle { font-size:11px; line-height:1.5; color:var(--gris-clair); padding:0 2px; text-align:left; }

  /* CTA + liens */

.mk-overlay .mk-oubli { display:flex; justify-content:flex-end; margin:10px 0 16px; }
  .mk-overlay .mk-oubli a,
.mk-overlay .mk-bascule,

.mk-overlay .mk-pied a { color:var(--bleu); text-decoration:none; }

.mk-overlay .mk-oubli a { font-size:12px; font-weight:600; }
  .mk-overlay .mk-oubli a:hover,
.mk-overlay .mk-bascule:hover,

.mk-overlay .mk-pied a:hover { color:var(--marine); }

.mk-overlay .mk-cta {
    width:100%; padding:14px 0; border:none; border-radius: 12px; cursor:pointer;
    background:var(--bleu); color:#fff; font-size:14px; font-weight:700;
    box-shadow:0 12px 26px -10px rgba(64,90,210,0.6); transition:background .15s;
  }

.mk-overlay .mk-cta:hover { background:var(--marine); }

.mk-overlay .mk-alt { margin-top:18px; font-size:12.5px; color:var(--gris); }

.mk-overlay .mk-bascule { font-weight:700; cursor:pointer; background:none; border:none; font-size:12.5px; padding:0; }

.mk-overlay .mk-pied { margin-top:22px; padding-top:16px; border-top:1px solid var(--bord); font-size:11px; line-height:1.6; color:var(--gris-clair); }

.mk-overlay .mk-pied a { color:var(--gris); text-decoration:underline; }

  /* Deux modes : data-mode="connexion" | "inscription" sur la carte */

.mk-overlay .mk-modal[data-mode="connexion"] .mk-si-inscription { display:none; }

.mk-overlay .mk-modal[data-mode="inscription"] .mk-si-connexion { display:none; }



/* Ouverture : le fichier livré affiche le voile en permanence, la maquette
   étant une page de démonstration. Sur le site il attend d'être ouvert. */

.mk-overlay { display: none; }

.mk-overlay.open { display: flex; }
.mk-overlay button,

.mk-overlay input { font-family: inherit; }

/* ── Réinitialisation : règles propres à cette carte ── */
/* Le :root de la seconde maquette est retiré : ses variables sont déjà
   posées sur .mk-overlay plus haut, et un :root venant d'une maquette
   n'a pas à redéfinir de variables pour tout le site. */


.mk-overlay .mk-modal[data-etape="demande"] .mk-si-envoye { display:none; }

.mk-overlay .mk-modal[data-etape="envoye"] .mk-si-demande { display:none; }

.mk-overlay .mk-retour {
    display:inline-flex; align-items:center; gap:7px;
    margin-top:18px; font-size:12.5px; font-weight:600;
    color:var(--bleu); background:none; border:none; cursor:pointer; padding:0;
  }

.mk-overlay .mk-retour:hover { color:var(--marine); }

.mk-overlay .mk-retour svg { width:13px; height:13px; }



.mk-overlay .mk-adresse { font-weight:700; color:var(--marine); }

.mk-overlay .mk-info { margin-top:18px; font-size:12px; line-height:1.7; color:var(--gris-clair); }

.mk-overlay .mk-renvoyer { font-weight:700; color:var(--bleu); background:none; border:none; cursor:pointer; padding:0; font-size:12.5px; }

.mk-overlay .mk-renvoyer:hover { color:var(--marine); }

.mk-overlay .mk-renvoyer:disabled { color:var(--gris-clair); cursor:default; }

/* ── Pop-up « Nos honoraires » ─────────────────────────────────────────
   Maquette du 27 août 2026, intégrée sans retouche. Elle réutilise le voile
   des autres pop-ups ; seule la carte diffère — plus large (720 px) et
   encadrée de bleu, la grille tarifaire ayant besoin de place. Le détail
   de la grille est en styles en ligne dans concept.html, comme livré. */
.mk-overlay .mk-hono {
  position:relative; width:720px; max-width:100%;
  max-height:calc(100vh - 48px); overflow-y:auto;
  background:#405AD2; border-radius:24px; padding:44px;
  box-sizing:border-box;
}
.mk-overlay .mk-hono__fermer {
  position:absolute; top:16px; right:16px;
  width:34px; height:34px; border:none; border-radius:10px;
  background:rgba(255,255,255,0.14); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0;
  transition:background .15s;
}
.mk-overlay .mk-hono__fermer:hover { background:rgba(255,255,255,0.28); }
.mk-overlay .mk-hono__fermer svg { width:15px; height:15px; }
@media (max-width:760px) { .mk-overlay .mk-hono { padding:28px 18px; } }

/* Le bouton qui l'ouvre, dans la réponse de la FAQ. */
.faq-item__cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px; padding: 10px 20px; border-radius: 999px;
  border: 1.5px solid var(--blue, #405AD2); background: #fff;
  color: var(--blue, #405AD2); font-family: inherit;
  font-size: 0.8125rem; font-weight: 700; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.faq-item__cta:hover { background: var(--blue, #405AD2); color: #fff; }

/* ── Pop-up de déconnexion : deux règles propres à cette carte ──
   Maquette du 27 août 2026. Tout le reste (voile, carte, logo, titre,
   sous-titre, bouton principal, pied) est déjà défini plus haut et
   identique au fichier livré — rien à redéclarer.

   L'ordre des boutons est celui de la maquette et n'est pas une erreur :
   le bouton PLEIN est « Rester connecté », le bouton bordé « Me
   déconnecter ». L'action sûre est mise en avant, la destructrice en
   retrait. C'est délibéré, ne pas inverser. */
.mk-overlay .mk-actions { display:flex; flex-direction:column; gap:12px; }
.mk-overlay .mk-secondaire {
  width:100%; padding:13px 0; border:1.5px solid var(--bord); border-radius: 12px; cursor:pointer;
  background:#FFFFFF; color:var(--marine); font-size:14px; font-weight:700; transition:all .15s;
}
.mk-overlay .mk-secondaire:hover { border-color:var(--bleu); background:var(--bleu-pale); }

/* Message d'erreur, demandé par le guide : sous le champ concerné, en
   #B0413E, et jamais en alert(). */

.mk-overlay .mk-erreur {
  margin: 10px 0 0; font-size: 12.5px; line-height: 1.5;
  color: #B0413E; text-align: left; min-height: 0;
}

.mk-overlay .mk-erreur:empty { display: none; }

.mk-overlay .mk-input.is-erreur { border-color: #B0413E; }

/* ══ Lecteur de documents en plein écran ══
   Le navigateur sait afficher un PDF dans un cadre — pages, zoom, miniatures
   — mais refuse de le faire en navigation directe, où il bascule en
   « Enregistrer sous ». D'où ce lecteur, qui occupe tout l'écran plutôt que
   d'encadrer le site. Voir js/telechargement.js.

   Le calque est créé à l'ouverture et retiré à la fermeture : un
   « position: fixed » plein écran laissé en place, même transparent, sort les
   zones défilantes du dessous du défilement rapide de Safari. */
.mk-lecteur-ouvert, .mk-lecteur-ouvert body { overflow: hidden; }
.mk-lecteur {
  /* Au-dessus de TOUT ce qui flotte deja : le bouton d'appel (9000), son
     panneau (9001), le menu mobile (9500), la visionneuse de photos et la
     fenetre d'agenda (10000). Le lecteur est opaque et plein ecran ; rien ne
     doit le percer. */
  position: fixed; inset: 0; z-index: 10050;
  display: flex; flex-direction: column;
  background: #0A0930;
}
.mk-lecteur__barre {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  background: rgba(4, 2, 77, 0.92);
  color: #fff;
}
.mk-lecteur__nom {
  flex: 1 1 auto; min-width: 0;
  font-size: 13px; font-weight: 700; letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mk-lecteur__b {
  flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: 50%; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.10); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  cursor: pointer; transition: background 0.15s;
}
.mk-lecteur__b:hover { background: rgba(255, 255, 255, 0.20); }
.mk-lecteur__b svg { width: 17px; height: 17px; }
.mk-lecteur__vue {
  flex: 1 1 auto; min-height: 0;
  width: 100%; border: 0; display: block;
  background: #fff;
}
/* Une image ou une vidéo garde ses proportions sur le fond sombre ; seul le
   PDF occupe toute la surface, son lecteur gérant lui-même ses marges. */
.mk-lecteur__vue--media { background: transparent; object-fit: contain; }

/* ── Rail resserré ──
   Posé par js/main.js quand le rail a dû être raccourci pour ne pas passer
   sur le pied de page, et que ses entrées n'y tiennent plus. Mêmes valeurs
   que les paliers @media (max-height) ci-dessus : c'est le même besoin,
   déclenché par la hauteur disponible plutôt que par celle de la fenêtre. */
.page-sidebar.is-serre .page-sidebar__item { padding: 9px 4px; }
.page-sidebar.is-serre .page-sidebar__item--minor { padding: 7px 4px; }
.page-sidebar.is-serre .page-sidebar__divider { margin: 5px 0; }
.page-sidebar.is-serre .page-sidebar__spacer { min-height: 6px; }