/* =====================================================================
   Les Commercialisateurs — refonte 2.0 : socle du système de design.
   Chargé après main.css. Contient :
   1. la typographie éditoriale (Newsreader pour les titres, Proxima Nova pour le reste) ;
   2. les couleurs : bleu de marque dominant, menthe réduite à quelques touches ;
   3. le langage décoratif (surtitres numérotés, dessins d'architecture, mots en fond, courbes) ;
   4. l'en-tête, le menu mobile et le pied de page.
   ===================================================================== */

/* Newsreader (licence SIL OFL, fichiers dans assets/fonts) — graisses variables 200 à 800, taille optique
   automatique. Remplace Fraunces le 02/11/2026 (J et F jugés trop fantaisie). */
@font-face {
  font-family: 'Newsreader'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('../fonts/newsreader-latin-opsz-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader'; font-style: italic; font-weight: 200 800; font-display: swap;
  src: url('../fonts/newsreader-latin-opsz-wght-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1. Jetons ---------- */
:root {
  --lc-font-display: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --lc-ink: #0b2440;
  --lc-sky: #eef4fa;              /* bleu très clair : sections alternées */
  --lc-sand: #f7f5f0;             /* blanc cassé chaud : sections éditoriales */
  --lc-line: #dde6ef;             /* filets sur fond clair */
  --lc-line-dark: rgba(255, 255, 255, 0.16);
  --lc-blue-soft: #9ccbf2;        /* bleu clair lisible sur bleu nuit */
  --lc-mist: var(--lc-sky);
  --lc-radius: 20px;
  --lc-shadow-soft: 0 1px 2px rgba(4, 31, 58, 0.06), 0 22px 48px -30px rgba(4, 31, 58, 0.45);
  --lc-dur: 640ms;
}

/* ---------- 2. Typographie ---------- */
/* Sélecteurs de classe : ils passent avant la règle de protection « font-family: inherit » de main.css. */
html body :is(.display, .h2, .h3, .card__title, .footer__statement, .footer__name, .serif, .figure strong, .fact strong, .slide__card .h2, .menu > a, .bg-word, .eyebrow__num) {
  font-family: var(--lc-font-display) !important;
}
html body .display {
  font-weight: 380; text-transform: none; letter-spacing: -0.03em; line-height: 0.96;
  font-size: clamp(2.9rem, 7.2vw, 7.2rem);
}
html body .h2 { font-weight: 400; letter-spacing: -0.025em; line-height: 1.02; font-size: clamp(2.2rem, 4.6vw, 4.5rem); }
html body .h2--caps { text-transform: none; letter-spacing: -0.025em; }
html body .h3 { font-weight: 500; letter-spacing: -0.012em; line-height: 1.12; }
html body .card__title { font-weight: 500; font-size: 22px; letter-spacing: -0.01em; }
/* Mot en italique dans un titre : accent de couleur. */
:is(.display, .h2, .h3, .footer__statement) em { font-style: italic; font-weight: inherit; color: var(--lc-blue); }
:is(.hero, .page-hero, .stack, .journey, .contact-band, .partners, .footer, .section--night) :is(.display, .h2, .h3, .footer__statement) em { color: var(--lc-blue-soft); }
/* Sous-titre des grands titres : capitales espacées, en sans-serif. */
.display-sub { font-weight: 600; letter-spacing: 0.2em; font-size: clamp(0.9rem, 1.35vw, 1.2rem); margin-top: 18px; opacity: 0.92; }
.h2 span[style*="display:block"] { font-family: var(--lc-font) !important; font-weight: 600 !important; font-size: clamp(0.85rem, 1.1vw, 1rem) !important; letter-spacing: 0.2em !important; text-transform: uppercase; margin-top: 18px !important; opacity: 0.8; }
.kicker { font-size: 13px; letter-spacing: 0.18em; }
html body .figure strong, html body .fact strong { font-weight: 400; letter-spacing: -0.02em; }
.lead { line-height: 1.55; }

/* ---------- 3. Couleurs : la menthe ne reste qu'en touches (« Exclusivité », marqueurs) ---------- */
:focus-visible { outline: 2px solid var(--lc-blue); outline-offset: 3px; }
:is(.hero, .page-hero, .stack, .journey, .contact-band, .partners, .footer, .menu, .section--night, .nav:not(.is-solid)) :focus-visible { outline-color: #fff; }
::selection { background: var(--lc-blue); color: #fff; }
.on-dark .kicker, .section--night .kicker { color: var(--lc-blue-soft); }
/* Le bouton « menthe » devient un bouton blanc sur les fonds sombres. */
.btn--mint, .btn--light { --bg: #fff; --fg: var(--lc-night); }
@media (hover: hover) and (pointer: fine) { .btn--mint:hover, .btn--light:hover { background: var(--lc-sky); } }
.btn--mint .btn__icon, .btn--light .btn__icon { background: var(--lc-blue); color: #fff; }
.link { text-decoration-color: var(--lc-blue); }
.nav__links a::after { background: currentColor; }
.search__field:focus-within { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85); }
.card__price { color: #fff; }
.step__mark { color: var(--lc-blue-soft); font-family: var(--lc-font-display); font-weight: 300; }
.tag::before, .prose ul li::before { color: var(--lc-blue); }
.qa[open] summary::after { background: var(--lc-blue); color: #fff; }
.segmented input:focus-visible + label, [data-card].is-picked .card, .leaflet-marker-icon:focus-visible .mk { outline-color: var(--lc-blue); }
@media (hover: hover) and (pointer: fine) { .contact-lines a:hover { color: var(--lc-blue-soft); } }
.advisor__avatar { background: var(--lc-sky); color: var(--lc-blue); }
.advisor--dark .advisor__avatar { background: rgba(255, 255, 255, 0.14); color: #fff; }
.advisor--dark .advisor__tel, .advisor-chip a { color: var(--lc-blue-soft); }
.prose a { text-decoration-color: rgba(0, 97, 178, 0.4); }
.demo-note { background: var(--lc-sky); }
.demo-note::before { color: var(--lc-blue); }
@media (max-width: 860px) { .mobile-bar__cta { background: var(--lc-blue); color: #fff; } }

/* ---------- 4. Langage décoratif ---------- */
/* Surtitre « 01 —— Libellé ». */
.eyebrow {
  display: inline-flex; align-items: center; gap: 14px; margin: 0 0 22px;
  font: 600 12.5px/1 var(--lc-font); letter-spacing: 0.2em; text-transform: uppercase; color: var(--lc-blue);
}
.eyebrow__num { font-style: italic; font-weight: 400; font-size: 17px; letter-spacing: 0; text-transform: none; }
.eyebrow__line { width: 48px; height: 1px; background: currentColor; opacity: 0.55; transform-origin: left; }
.js .eyebrow[data-reveal] { opacity: 1; transform: none; }
.js .eyebrow[data-reveal] .eyebrow__line { transform: scaleX(0); transition: transform 900ms var(--lc-ease) 120ms; }
.js .eyebrow[data-reveal].is-in .eyebrow__line { transform: scaleX(1); }
:is(.hero, .page-hero, .stack, .journey, .contact-band, .partners, .footer, .section--night) .eyebrow { color: rgba(255, 255, 255, 0.82); }

/* Dessins d'architecture (inc/deco.php) : traits fins de la couleur du texte. */
.deco { position: absolute; pointer-events: none; color: var(--lc-blue); opacity: 0.09; z-index: 0; }
.deco * { vector-effect: non-scaling-stroke; }

/* Mot géant en contour, en fond. */
.bg-word {
  position: absolute; z-index: 0; pointer-events: none; user-select: none; white-space: nowrap;
  font-weight: 300; font-style: italic; line-height: 0.8; letter-spacing: -0.04em;
  font-size: clamp(5.5rem, 17vw, 17rem); color: transparent; -webkit-text-stroke: 1px rgba(0, 97, 178, 0.16);
}

/* Fonds : trame de plan très légère, sable chaud. */
.bg-blueprint {
  background-color: var(--lc-sky);
  background-image: linear-gradient(rgba(0, 97, 178, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 97, 178, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
}
.section--sand { background: var(--lc-sand); }
.rule { height: 1px; background: var(--lc-line); border: 0; }

/* Bas de section en courbe : la section suivante remonte en arc. */
.curve-b { --curve-bg: var(--lc-paper); }
.curve-b::after {
  content: ''; position: absolute; z-index: 1; left: -10%; right: -10%; bottom: -1px; height: clamp(26px, 4vw, 64px);
  background: var(--curve-bg); border-radius: 50% 50% 0 0 / 100% 100% 0 0; pointer-events: none;
}

/* En-tête des pages intérieures : trame d'architecture en filigrane, titre plus éditorial. */
.page-hero__deco { right: -4vw; top: 34%; width: min(58vw, 820px); height: auto; color: #fff; opacity: 0.12; z-index: -1; }
.page-hero__inner { padding-bottom: clamp(56px, 8vw, 110px); }
.page-hero .display { font-size: clamp(2.7rem, 6.4vw, 6.2rem); max-width: 16ch; }
.page-hero .lead { max-width: 52ch; }
.crumbs { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }

/* ---------- 5. En-tête ---------- */
.nav, .nav.is-solid, .nav:not(.is-solid) { gap: 18px; }
.nav:not(.is-solid) { background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
/* Mêmes marges et bordures dans les deux états de la barre : en changeant d'état au défilement, logo et liens
   ne se décalent plus (6 px au téléphone, où la marge de gauche est plus étroite). */
.nav.is-solid { box-shadow: var(--lc-shadow-soft); }
.nav__pill { margin-left: auto; margin-right: auto; gap: 2px; padding: 5px; border-radius: 999px; border: 1px solid transparent; }
.nav:not(.is-solid) .nav__pill {
  background: rgba(4, 31, 58, 0.36); border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: var(--lc-glass-blur); -webkit-backdrop-filter: var(--lc-glass-blur);
}
.nav__pill a { padding: 9px 16px; border-radius: 999px; font-size: 15px; transition: background-color 240ms var(--lc-ease), color 240ms var(--lc-ease); }
.nav__pill a::after { display: none; }
.nav:not(.is-solid) .nav__pill a[aria-current='page'] { background: rgba(255, 255, 255, 0.16); }
.nav.is-solid .nav__pill a[aria-current='page'] { background: var(--lc-sky); color: var(--lc-blue); }
@media (hover: hover) and (pointer: fine) {
  .nav:not(.is-solid) .nav__pill a:hover { background: rgba(255, 255, 255, 0.12); }
  .nav.is-solid .nav__pill a:hover { background: var(--lc-sky); }
}
.nav__actions { gap: 14px; }
.nav__tel { font-variant-numeric: tabular-nums; }
.nav:not(.is-solid) .nav__actions .btn { --bg: #fff; --fg: var(--lc-night); }
.nav:not(.is-solid) .nav__actions .btn .btn__icon { background: var(--lc-blue); color: #fff; }
@media (hover: hover) and (pointer: fine) { .nav:not(.is-solid) .nav__actions .btn:hover { background: var(--lc-sky); } }
.nav:not(.is-solid) .nav__toggle { background: rgba(4, 31, 58, 0.36); border-color: rgba(255, 255, 255, 0.45); backdrop-filter: var(--lc-glass-blur); -webkit-backdrop-filter: var(--lc-glass-blur); }
/* Logo lisible sur toutes les photos. */
.nav:not(.is-solid) .nav__brand img { filter: drop-shadow(0 1px 8px rgba(4, 31, 58, 0.45)); }

/* Menu plein écran (téléphone) : liens numérotés en serif, façade en filigrane. */
.menu { counter-reset: menu; background: rgba(4, 31, 58, 0.9); }
.menu > a { font-weight: 400; letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 14px; padding-block: 4px; border-bottom: 1px solid var(--lc-line-dark); }
.menu > a::before { counter-increment: menu; content: counter(menu, decimal-leading-zero); font: italic 400 15px/1 var(--lc-font-display); opacity: 0.6; min-width: 24px; }
.menu__deco { right: -18vw; bottom: 6vh; width: 90vw; color: #fff; opacity: 0.08; }

/* ---------- 6. Pied de page ---------- */
.footer { padding-top: clamp(80px, 10vw, 140px); }
.footer::after { background: radial-gradient(circle, rgba(0, 97, 178, 0.35), rgba(0, 97, 178, 0) 65%); }
.footer__deco { left: -6vw; top: 40px; width: min(70vw, 980px); color: #fff; opacity: 0.045; z-index: -1; }
.footer__top {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: end;
  padding-bottom: clamp(48px, 6vw, 80px); margin-bottom: clamp(48px, 6vw, 72px); border-bottom: 1px solid var(--lc-line-dark);
}
.footer__statement { font-weight: 350; font-size: clamp(2.4rem, 5.4vw, 5.4rem); line-height: 1; letter-spacing: -0.03em; max-width: 14ch; }
.footer__cta { padding: 0; display: grid; gap: 22px; }
.footer__cta .muted { font-size: 17px; max-width: 42ch; }
.footer__actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* Les liens du pied de page sont blancs : les boutons gardent leur propre couleur de texte. */
.footer a.btn, .footer a.btn:hover { color: var(--fg); text-decoration: none; }
.footer a.btn--glass, .footer a.btn--glass:hover { color: #fff; }
.footer__grid { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
.footer__about { display: grid; gap: 18px; align-content: start; }
.footer__about img { width: 180px; height: auto; }
.footer__about .muted { font-size: 15.5px; max-width: 34ch; }
.footer h2 { display: flex; align-items: baseline; gap: 10px; color: rgba(255, 255, 255, 0.6); font-size: 12.5px; letter-spacing: 0.2em; margin-bottom: 18px; }
.footer h2 span { font: italic 400 15px/1 var(--lc-font-display); letter-spacing: 0; color: var(--lc-blue-soft); }
@media (hover: hover) and (pointer: fine) { .footer a:hover { text-decoration-color: var(--lc-blue-soft); } .socials a:hover { background: #fff; color: var(--lc-night); } }
.footer__name {
  margin-top: clamp(64px, 9vw, 120px); font-weight: 300; font-style: italic; white-space: nowrap; overflow: hidden;
  /* Newsreader italique : le texte fait 9,54 fois la taille de police ; 8,6vw laisse ~12 % de marge, et le
     retrait intérieur laisse dépasser la pente du dernier « s » sans qu'elle soit coupée (03/11/2026). */
  font-size: clamp(2rem, 8.6vw, 8.8rem); line-height: 0.95; letter-spacing: -0.04em; text-align: center; padding-inline: 0.08em;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.28);
}
.footer__legal { border-top: 1px solid var(--lc-line-dark); margin-top: 28px; }

@media (max-width: 1180px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .footer__top { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__about { grid-column: 1 / -1; }
  .footer__grid > div:last-child { grid-column: 1 / -1; }
  .page-hero__deco { width: 120vw; right: -40vw; top: 48%; }
  .bg-word { font-size: clamp(4rem, 26vw, 8rem); }
}

@media (prefers-reduced-motion: reduce) {
  .js .eyebrow[data-reveal] .eyebrow__line { transform: none; transition: none; }
}
@media print { .deco, .bg-word, .curve-b::after { display: none; } }

/* ---------- 7. Finitions mobiles ---------- */
html { -webkit-tap-highlight-color: transparent; }
.consent input[type='checkbox'] { flex: none; width: 22px; height: 22px; accent-color: var(--lc-blue); }
.scroll-cue { min-height: 44px; }
@media (max-width: 860px) {
  /* Pas de survol au doigt : les flèches des cartes restent visibles. */
  .card .card__go { transform: none; opacity: 1; width: 36px; height: 36px; }
  .btn { min-height: 48px; }
}

/* ---------- Contact par email en priorité (02/11/2026) ---------- */
/* Lien « Nous écrire » de l'en-tête (remplace le numéro, qui reste dans le menu et le pied de page). */
.nav__mail { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.nav__mail svg { width: 18px; height: 18px; flex: none; }
/* Menu mobile : bouton email en tête des coordonnées. */
.menu__foot .menu__mail { justify-self: start; font-size: 16px; color: #fff; }
.menu__foot .menu__tel { font-weight: 400; opacity: 0.8; }
/* Coordonnées des bandeaux contact : enveloppe devant l'adresse. */
.contact-lines__mail { display: inline-flex; align-items: center; gap: 10px; }
.contact-lines__mail svg { width: 20px; height: 20px; flex: none; }
/* Encart contact de la fiche : téléphone en lien secondaire sous le bouton email. */
.prog-aside__tel { margin: -2px 0 4px; font-size: 14px; text-align: center; color: var(--lc-ink-soft, #4a5d70); }
.muted-light { font-size: 15px; opacity: 0.82; }

/* ---------- Survol : un texte blanc reste blanc (03/11/2026) ----------
   Une règle extérieure au thème du type « a:hover { color: … } » (extension ou feuille parente) peut colorer
   tout lien survolé : elle l'emporte sur une couleur simplement héritée (pied de page, menu, bandeaux) ou posée
   par une seule classe (cartes, boutons), et un texte blanc devenait bleu sur fond sombre. Ces règles, plus
   précises, gardent la couleur d'origine. Les liens bleus des textes courants ne sont pas concernés. */
@media (hover: hover) {
  /* Liens sans classe dans les zones sombres ou sur photo : même couleur qu'au repos (héritée). */
  html body :is(.footer, .menu, .nav, .socials, .crumbs, .contact-lines, .contact-band, .xp-final, .glass, .card__body, .launch-bar, .launch__body, .prog-hero, .page-hero, .harchi, .mobile-bar, .dock-card, .xp-b, .hist-pub__actions, .consent, .muted-light) a:not([class]):is(:hover, :focus-visible),
  html body a:is(.nav__brand, .menu__tel, .footer__mail, .contact-lines__mail):is(:hover, :focus-visible) { color: inherit; }
  /* Cartes et tuiles qui sont des liens (texte blanc sur photo ou fond nuit). */
  html body a:is(.card, .xp-card, .xp-persp__card, .xp-b--reach, .harchi__cue, .skip, .launch__media):is(:hover, :focus-visible) { color: #fff; }
  /* Boutons : couleur du texte propre à chaque variante (bleu, menthe, verre, clair…). */
  html body a.btn:is(:hover, :focus-visible) { color: var(--fg); }
}

/* ---------- FAQ : le titre tient dans sa colonne (03/11/2026) ----------
   La colonne de gauche ne fait que 40 % de la largeur : en Newsreader, un mot long (« Commercialisation »)
   débordait sous les questions. Taille plafonnée pour que le mot le plus long tienne, coupure de secours. */
html body .faq > :first-child .h2 { font-size: clamp(2rem, 3.6vw, 3.4rem); overflow-wrap: break-word; }
.faq > :first-child { min-width: 0; }