/* Accueil « concept » (essai du 2026-10-16) : style B + C, couleurs du portail.
   B : bandeau indigo, capture de l'application au centre, chiffres en avant.
   C : titres Bricolage Grotesque, pastilles aux couleurs des modules, formes arrondies. */

@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/plus-jakarta-sans-v12-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/plus-jakarta-sans-v12-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/plus-jakarta-sans-v12-latin-700.woff2') format('woff2'); }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/bricolage-grotesque-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/bricolage-grotesque-latin-800-normal.woff2') format('woff2'); }

:root {
  --indigo: #1f2057;
  --indigo-2: #2a2b70;
  --violet: #4c3bcf;
  --violet-vif: #6d4aff;
  --lavande: #ede8fd;
  --lavande-2: #f6f4fe;
  --encre: #1e1b3a;
  --texte: #424b6b;
  --bord: #e6e3f5;
  --vert: #10b981;
  --orange: #f59e0b;
  --rose: #ec4899;
  --titre: 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif;
  --nav-bg: rgba(31, 32, 87, .96);
  --gradient: linear-gradient(90deg, #5eead4 0%, #60a5fa 45%, #c084fc 100%);
  --ombre: 0 1px 2px rgba(30, 27, 58, .05), 0 12px 28px -16px rgba(31, 32, 87, .32);
}

.cx *, .cx *::before, .cx *::after { box-sizing: border-box; }
.cx { background: #fff; color: var(--encre); font-family: 'Plus Jakarta Sans', system-ui, sans-serif; margin: 0; }
.cx main { display: block; }
/* :where() garde une spécificité nulle : les marges des composants l'emportent */
:where(.cx) h1, :where(.cx) h2, :where(.cx) h3 { font-family: var(--titre); color: var(--encre); margin: 0; }
:where(.cx) p { margin: 0; }
.cx-wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* ---------- Bandeau de navigation (demande de Joe) ----------
   Il reste en haut de la page et ne suit pas le défilement.
   Ses liens prennent la police de la page, à une taille lisible. */
.cx #main-nav, .cx #main-nav.scrolled { position: absolute; }
.cx #main-nav .nav-logo { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 20px; font-weight: 700; }
.cx #main-nav .nav-links { gap: 20px; margin: 0 24px; }
.cx #main-nav .nav-links a { white-space: nowrap; }
@media (min-width: 1181px) and (max-width: 1400px) {
  .cx #main-nav .nav-links { gap: 13px; margin: 0 14px; }
  .cx #main-nav .nav-links a { font-size: 13px; }
  .cx #main-nav .nav-logo { font-size: 18px; }
}
.cx #main-nav .nav-links a, .cx #main-nav .nav-legal-btn { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0; }
.cx #main-nav .nav-cta { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 14px; font-weight: 700; padding: 11px 20px; }
@media (max-width: 1180px) {
  .cx #main-nav .nav-links { position: absolute; top: 72px; margin: 0; }
  .cx #main-nav .nav-links a, .cx #main-nav .nav-legal-btn { font-size: 15px; }
}
@media (max-width: 600px) {
  .cx #main-nav .nav-logo { font-size: 15px; }
  .cx #main-nav .nav-cta { font-size: 12px; padding: 9px 12px; }
}

/* ---------- Pied de page aux couleurs du portail ---------- */
.cx footer { background: var(--indigo); border-top: 0; }
/* Liens « Produit » sur deux colonnes : un pied de page moins haut (demande de Joe) */
.cx footer .footer-links-group > .footer-col:first-child { display: grid; grid-template-columns: repeat(2, auto); column-gap: 40px; row-gap: 10px; align-content: start; }
.cx footer .footer-links-group > .footer-col:first-child h4 { grid-column: 1 / -1; }

/* ---------- Boutons ---------- */
.cx-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px; border-radius: 999px;
  font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.cx-btn--primary { background: var(--violet-vif); color: #fff; box-shadow: 0 8px 20px -10px rgba(109, 74, 255, .7); }
.cx-btn--primary:hover { background: var(--violet); transform: translateY(-1px); }
.cx-btn--ghost { border: 2px solid currentColor; color: var(--violet); }
.cx-btn--ghost:hover { background: var(--lavande); }
.cx-btn--light { background: #fff; color: var(--indigo); }
.cx-btn--light:hover { transform: translateY(-1px); }
.cx-btn--block { width: 100%; }
.cx a:focus-visible, .cx summary:focus-visible { outline: 3px solid var(--violet-vif); outline-offset: 3px; border-radius: 8px; }

/* ---------- 1. Promesse : bandeau indigo ---------- */
.cx-hero { background: var(--indigo); color: #fff; padding: 132px 0 88px; overflow: hidden; position: relative; }
.cx-hero::after { content: ''; position: absolute; right: -180px; top: -160px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(109, 74, 255, .35), transparent 70%); pointer-events: none; }
.cx-hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 56px; align-items: center; position: relative; z-index: 1; }
.cx-hero h1 { color: #fff; font-size: clamp(40px, 5vw, 68px); line-height: 1.02; font-weight: 800; letter-spacing: -.025em; margin: 32px 0 24px; }
.cx-hero h1 span { color: #b9acff; }
.cx-lead { font-size: 19px; line-height: 1.6; color: #d6d9f2; max-width: 560px; }
.cx-hero .cx-btn--ghost { color: #fff; }
.cx-hero .cx-btn--ghost:hover { background: rgba(255, 255, 255, .1); }
.cx-actions { display: flex; flex-wrap: wrap; gap: 16px; margin: 36px 0 20px; }
.cx-note { font-size: 15px; color: #aeb3dc; }

.cx-points { display: flex; flex-wrap: wrap; gap: 8px 26px; list-style: none; padding: 0; margin: 0; font-size: 15px; font-weight: 600; color: #e4e6fb; }
.cx-points li { display: inline-flex; align-items: center; gap: 10px; }
.cx-points li::before { content: ''; width: 13px; height: 13px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent); }
.cx-hero .cx-btn { min-height: 58px; padding: 0 44px; font-size: 17px; }

.cx-hero-visual { margin: 0; position: relative; }
/* Branches de Joe autour de la capture, derrière la fenêtre */
.cx-leaf { position: absolute; z-index: 0; pointer-events: none; height: auto; }
/* Massif de feuilles menthe et lavande dessiné d'après la maquette de Joe (images/illustrations/massif-feuilles.svg).
   Repère du dessin : la fenêtre couvre 1000 unités de large, le dessin 1550 ; margin-top en % suit la largeur. */
.cx-massif { left: -20%; top: 0; width: 155%; margin-top: -22%; max-width: none; }
/* Habillage dense façon maquette : massif de feuilles derrière la fenêtre, colibri posé dessus */

.cx-traits { position: absolute; z-index: 2; width: 38px; height: 38px; fill: none; stroke: #b9acff; stroke-width: 3; stroke-linecap: round; pointer-events: none; }
.cx-traits--haut { right: 24px; top: -54px; }
.cx-traits--bas { right: -44px; bottom: 30px; }
.cx-window { z-index: 1; }
/* Fleur rose du colibri, redessinée en SVG, au pied de la capture (demande de Joe) */
.cx-fleur { position: absolute; z-index: 2; width: 84px; height: auto; right: -34px; bottom: -96px; transform-origin: 50% 100%; pointer-events: none; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .25)); }
/* Colibri en vol au-dessus de la capture, avec sa trace en pointillés (demande de Joe) */
.cx-hero-colibri { position: absolute; z-index: 2; width: 104px; height: auto; left: 30%; top: -150px; transform: rotate(-4deg); filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .35)); pointer-events: none; }
.cx-hero-trace { position: absolute; z-index: 2; width: 120px; height: 70px; left: calc(30% - 112px); top: -96px; fill: none; stroke: #a99cf0; stroke-width: 1.6; stroke-dasharray: 4 5; stroke-linecap: round; pointer-events: none; }
.cx-window { position: relative; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55); }
.cx-window-bar { display: flex; gap: 6px; padding: 10px 14px; background: #f1f0fa; }
.cx-window-bar span { width: 10px; height: 10px; border-radius: 50%; background: #d4d0ee; }
.cx-window img { display: block; width: 100%; height: auto; }

/* ---------- Sections ---------- */
.cx-section { padding: 64px 0; }
/* Le bandeau reste fixe en haut : une ancre s'arrête sous lui */
.cx section[id] { scroll-margin-top: 16px; }
.cx-section--tint { background: var(--lavande-2); }
.cx-eyebrow { font-size: 13px; font-weight: 700; color: var(--violet); margin-bottom: 10px; }
.cx-eyebrow--light { color: #b9acff; }
.cx-section h2, .cx-collab h2, .cx-final h2 { margin-bottom: 0; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.1; font-weight: 800; letter-spacing: -.015em; max-width: 760px; }
.cx-sub { margin-top: 16px; color: var(--texte); font-size: 16px; }
.cx-more { margin-top: 20px; }
.cx-more a { color: var(--violet); font-weight: 700; text-decoration: none; }
.cx-more a:hover { text-decoration: underline; }

.cx-ico { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--c); color: #fff; flex: 0 0 auto; }
.cx-ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cx-ico--sm { width: 40px; height: 40px; border-radius: 12px; }
.cx-ico--sm svg { width: 20px; height: 20px; }

/* ---------- 2. Trois engagements ---------- */
.cx-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.cx-pillar { background: #fff; border: 1px solid var(--bord); border-radius: 24px; padding: 28px; box-shadow: var(--ombre); }
.cx-pillar h3 { font-size: 22px; font-weight: 800; margin: 20px 0 10px; }
.cx-pillar p { color: var(--texte); line-height: 1.6; }

/* Relief (demande de Joe : « trop blanc ») : fond teinté, carte colorée en tête, ombre portée */
.cx-section--concept { position: relative; overflow: hidden; background: linear-gradient(180deg, #f6f4fe 0%, #ede8fd 100%); }
/* Même plante que la droite des tarifs, en miroir (demande de Joe) */
.cx-section--concept::before { content: ''; position: absolute; left: -70px; top: 14%; bottom: -60px; width: 300px; height: auto; background: url('../images/illustrations/hero/branche-menthe-360.webp') right 0 bottom -40px / 200px auto no-repeat, url('../images/illustrations/hero/branche-lavande-360.webp') left 0 top 0 / 280px auto no-repeat; opacity: .55; transform: scaleX(-1) rotate(8deg); pointer-events: none; }
.cx-section--concept::after { content: ''; position: absolute; right: -50px; top: 30px; width: 220px; height: 400px; background: url('../images/illustrations/hero/branche-lavande-360.webp') center / contain no-repeat; opacity: .6; transform: rotate(12deg); pointer-events: none; }
.cx-section--concept .cx-wrap { position: relative; z-index: 1; }
.cx-pillar:nth-child(1) { --c: #10b981; --t: #e7f8f1; }
.cx-pillar:nth-child(2) { --c: #f59e0b; --t: #fef3dc; }
.cx-pillar:nth-child(3) { --c: #ec4899; --t: #fde7f2; }
.cx-pillar {
  border: 0;
  background: linear-gradient(180deg, var(--t) 0%, #fff 48%);
  box-shadow: inset 0 5px 0 var(--c), 0 2px 4px rgba(31, 32, 87, .06), 0 26px 50px -24px rgba(31, 32, 87, .38);
  transition: transform .25s ease, box-shadow .25s ease;
}
.cx-pillar:hover { transform: translateY(-4px); box-shadow: inset 0 5px 0 var(--c), 0 4px 8px rgba(31, 32, 87, .08), 0 34px 60px -24px rgba(31, 32, 87, .45); }
.cx-pillar .cx-ico { width: 60px; height: 60px; border-radius: 18px; box-shadow: 0 12px 22px -10px var(--c); }
.cx-pillar .cx-ico svg { width: 30px; height: 30px; }

/* ---------- 2 bis. Trois engagements autour de l'application (sans cartes) ---------- */
.cx-eyebrow--trait { display: flex; align-items: center; gap: 14px; text-transform: uppercase; letter-spacing: .2em; font-size: 12px; }
.cx-eyebrow--trait::after { content: ''; width: 44px; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--violet-vif) 45%, transparent); }
.cx-section--concept .cx-sub { font-size: 19px; color: #424b6b; }
/* Trois engagements autour du colibri, reliés par des pointillés (modèle de Joe) */
.cx-trio { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 260px minmax(0, 1fr); grid-template-areas: "e1 hub e2" ". e3 e3"; column-gap: 48px; row-gap: 16px; align-items: center; margin-top: 32px; }
.cx-hub { grid-area: hub; position: relative; width: 220px; height: 220px; margin: 0 auto; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 70%); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.cx-hub-anneau { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed rgba(109, 74, 255, .4); }
.cx-liens { position: absolute; left: -170px; top: 0; width: 560px; height: 340px; overflow: visible; pointer-events: none; }
.cx-liens path { fill: none; stroke: rgba(109, 74, 255, .5); stroke-width: 2; stroke-dasharray: 3 7; stroke-linecap: round; }
.cx-liens circle { fill: var(--c); stroke: #fff; stroke-width: 3; transform-box: fill-box; transform-origin: center; }
.cx-hub img { position: relative; width: 96px; height: auto; margin-bottom: 4px; filter: drop-shadow(0 8px 10px rgba(31, 32, 87, .25)); }
.cx-hub-nom { position: relative; font-family: var(--titre); font-weight: 800; font-size: 20px; color: var(--indigo); }
.cx-hub-nom b { color: var(--violet-vif); }
.cx-eng { position: relative; z-index: 1; max-width: 360px; display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; align-items: center; }
.cx-eng--1 { grid-area: e1; justify-self: start; }
.cx-eng--1 h3 { max-width: 230px; }
.cx-eng.cx-eng--1 p { grid-column: 1 / -1; }
.cx-eng--2 { grid-area: e2; justify-self: start; }
/* 01 et 02 partent de la même ligne, en haut du colibri */
.cx-eng--1, .cx-eng--2 { align-self: start; }
.cx-eng--3 { grid-area: e3; justify-self: start; margin-left: -30px; max-width: 440px; }
.cx-eng-num { grid-column: 1 / -1; font-family: var(--titre); font-weight: 800; font-size: 26px; line-height: 1; color: color-mix(in srgb, var(--c) 82%, #000); margin-bottom: 12px; }
/* Icône façon écran Administration : fond pâle, contour et picto de la couleur (demande de Joe) */
.cx-eng-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; color: color-mix(in srgb, var(--c) 85%, #000); background: color-mix(in srgb, var(--c) 14%, #fff); border: 1.5px solid color-mix(in srgb, var(--c) 70%, #fff); box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--c) 70%, transparent); }
.cx-eng-ico svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cx-eng h3 { font-size: 23px; font-weight: 800; line-height: 1.2; margin: 0; }
.cx-eng p { grid-column: 2; color: var(--texte); line-height: 1.6; margin-top: 10px; }
.cx-eng p + p { margin-top: 10px; }
/* Titre sur une ligne : le texte remonte sous le titre (demande de Joe) */
.cx-eng--2 .cx-eng-prix, .cx-eng--3 p { margin-top: 0; }
.cx-eng-prix { color: var(--encre) !important; }
.cx-eng-prix strong { font-weight: 800; color: var(--indigo); }

/* ---------- 3. Bureau ---------- */
.cx-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.cx-role { background: #fff; border-radius: 20px; padding: 24px; border: 1px solid var(--bord); }
.cx-role h3 { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.cx-role p { color: var(--texte); line-height: 1.6; }
.cx-modules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; list-style: none; padding: 0; margin: 28px 0 0; }
.cx-modules a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #fff; border: 1px solid var(--bord); border-radius: 16px; color: var(--encre); font-weight: 700; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.cx-modules a:hover { transform: translateY(-2px); box-shadow: var(--ombre); }

/* Relief partagé (demande de Joe : pas de blocs plats et blancs) */
.cx { --relief: 0 2px 4px rgba(31, 32, 87, .06), 0 22px 44px -22px rgba(31, 32, 87, .34); --relief-haut: 0 4px 8px rgba(31, 32, 87, .08), 0 32px 56px -24px rgba(31, 32, 87, .42); }
.cx-section--bureau { position: relative; overflow: hidden; background: linear-gradient(180deg, #ede8fd 0%, #f6f4fe 100%); }
.cx-section--bureau::after { content: ''; position: absolute; right: -40px; bottom: -60px; width: 260px; height: 300px; background: url('../images/illustrations/hero/eventail-pastel-420.webp') center / contain no-repeat; opacity: .55; transform: rotate(10deg); pointer-events: none; }
/* Habillage de feuilles à gauche (demande de Joe) */
.cx-section--bureau::before { content: ''; position: absolute; left: -70px; top: 40px; width: 260px; height: 520px; background: url('../images/illustrations/hero/branche-lavande-360.webp') center / contain no-repeat; opacity: .55; transform: rotate(-16deg) scaleX(-1); pointer-events: none; }
.cx-section--bureau .cx-wrap { position: relative; z-index: 1; }
.cx-role { border: 0; display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; align-items: start; background: linear-gradient(135deg, #fff 55%, #f3f0ff 100%); box-shadow: var(--relief); }
.cx-role .cx-ico { grid-row: span 2; box-shadow: 0 10px 20px -10px var(--c); }
.cx-role h3 { margin-top: 2px; }
.cx-modules li:nth-child(1) { --c: #10b981; } .cx-modules li:nth-child(2) { --c: #f59e0b; }
.cx-modules li:nth-child(3) { --c: #ec4899; } .cx-modules li:nth-child(4) { --c: #8b5cf6; }
.cx-modules li:nth-child(5) { --c: #0ea5e9; } .cx-modules li:nth-child(6) { --c: #14b8a6; }
.cx-modules li:nth-child(7) { --c: #eab308; } .cx-modules li:nth-child(8) { --c: #d946ef; }
.cx-modules a { border: 0; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 14%, #fff) 0%, #fff 70%); box-shadow: inset 4px 0 0 var(--c), var(--relief); }
.cx-modules a:hover { box-shadow: inset 4px 0 0 var(--c), var(--relief-haut); transform: translateY(-3px); }
/* Icônes des modules : même style que l'écran Administration de l'application
   (fond pâle, contour et pictogramme dans la couleur du module) */
.cx-modules .cx-ico { background: color-mix(in srgb, var(--c) 14%, #fff); color: color-mix(in srgb, var(--c) 85%, #000); border: 1.5px solid color-mix(in srgb, var(--c) 70%, #fff); border-radius: 10px; box-shadow: none; }
.cx-faq { border: 0; box-shadow: var(--relief); }

.cx-section--tarifs { position: relative; overflow: hidden; background: linear-gradient(180deg, #f6f4fe 0%, #ece7fd 100%); }
.cx-section--tarifs::after { content: ''; position: absolute; right: -70px; top: 12%; width: 280px; height: 640px; transform: rotate(8deg); background: url('../images/illustrations/hero/branche-lavande-360.webp') center / contain no-repeat; opacity: .55; pointer-events: none; }
.cx-section--tarifs::before { content: ''; position: absolute; right: 40px; bottom: -40px; width: 200px; height: 320px; transform: rotate(-10deg); background: url('../images/illustrations/fleur-rose.svg') left 6px bottom 30px / 70px auto no-repeat, url('../images/illustrations/hero/branche-menthe-360.webp') center / contain no-repeat; opacity: .7; pointer-events: none; }
.cx-section--tarifs .cx-wrap { position: relative; z-index: 1; }
@media (max-width: 1024px) { .cx-section--tarifs::after { width: 200px; height: 220px; top: auto; bottom: -40px; transform: none; opacity: .5; } }

/* ---------- 3 bis. Tableau d'accès compact (reprend l'écran Administration de l'application) ---------- */
.cx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cx-acces { margin-top: 24px; background: #fff; border-radius: 24px; box-shadow: var(--relief-haut); overflow: hidden; }
.cx-acces-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 24px; }
.cx-acces-titre { font-family: var(--titre); font-weight: 800; font-size: 18px; color: var(--encre); }
.cx-legende { display: flex; flex-wrap: wrap; gap: 16px; list-style: none; padding: 0; margin: 0; font-size: 13px; color: var(--texte); }
.cx-legende li { display: flex; align-items: center; gap: 6px; }
.cx-acces-defile { overflow-x: auto; }
.cx-acces-table { width: 100%; border-collapse: collapse; }
.cx-acces-table thead th { background: #eef0fb; padding: 9px 8px; font-size: 13px; font-weight: 700; color: var(--indigo); text-align: center; }
.cx-acces-table thead th:first-child { text-align: left; padding-left: 24px; }
.cx-acces-table tbody tr + tr { border-top: 1px solid #eef0f6; }
.cx-acces-table tbody tr { transition: background .2s ease; }
.cx-acces-table tbody tr:hover { background: #faf9ff; }
.cx-acces-table td { text-align: center; padding: 9px 8px; }
.cx-acces-table tbody th { text-align: left; padding: 12px 8px 12px 24px; font-weight: 400; display: flex; align-items: center; gap: 12px; }
.cx-membre { display: flex; flex-direction: column; line-height: 1.3; }
.cx-membre strong { font-weight: 700; color: var(--encre); }
.cx-membre small { font-size: 13px; color: var(--texte); }
.cx-avatar { flex: 0 0 auto; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font-size: 13px; font-weight: 700; }
.cx-avatar[data-role="tresorier"]  { background: #e8effd; color: #2747e0; }
.cx-avatar[data-role="secretaire"] { background: #fef3c7; color: #b45309; }
.cx-avatar[data-role="president"]  { background: #ede9fe; color: #6d28d9; }
.cx-avatar[data-role="benevole"]   { background: #fce7f3; color: #be185d; }
/* Icônes des colonnes : mêmes pictogrammes et teintes que l'écran Administration */
.cx-col-ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: #eef2ff; color: #4f46e5; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 45%, transparent); transition: transform .2s ease; }
.cx-col-ico:hover { transform: translateY(-2px); }
.cx-col-ico svg { width: 20px; height: 20px; }
.cx-col-ico[data-module="comptabilite"] { background: #d1fae5; color: #059669; }
.cx-col-ico[data-module="adherents"]    { background: #fef3c7; color: #d97706; }
.cx-col-ico[data-module="facturation"]  { background: #fce7f3; color: #db2777; }
.cx-col-ico[data-module="ndf"]          { background: #ede9fe; color: #7c3aed; }
.cx-col-ico[data-module="reporting"]    { background: #e0f2fe; color: #0284c7; }
.cx-col-ico[data-module="rdv"]          { background: #ccfbf1; color: #0d9488; }
.cx-col-ico[data-module="ged"]          { background: #fae8ff; color: #c026d3; }
.cx-droit { display: inline-grid; place-items: center; min-width: 30px; height: 24px; padding: 0 6px; border-radius: 7px; font-size: 12px; font-weight: 700; }
.cx-droit--M { background: #d1fae5; color: #047857; }
.cx-droit--L { background: #e0e7ff; color: #3730a3; }
.cx-droit--- { background: #f1f2f6; color: #8a90a6; }
.cx-more a + a { margin-left: 24px; }
/* Rangée de modules cliquables sous le tableau : nom en clair, flèche, survol marqué */
.cx-col-ico[data-module="modeles"] { background: #fef9c3; color: #a16207; }
.cx-decouvrir { border-top: 1px solid #eef0f6; background: #faf9ff; padding: 14px 24px 18px; }
.cx-decouvrir-titre { font-size: 14px; font-weight: 700; color: var(--indigo); margin-bottom: 14px; text-align: center; }
/* Deux rangées de quatre, centrées (demande de Joe) */
.cx-decouvrir ul { list-style: none; padding: 0; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 820px; }
.cx-decouvrir li { display: flex; }
.cx-decouvrir a { width: 100%; }
.cx-fleche { margin-left: auto; }
.cx-decouvrir a { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px #e6e3f5, 0 6px 14px -10px rgba(31, 32, 87, .5); color: var(--encre); font-weight: 700; font-size: 14px; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, color .2s ease; }
.cx-decouvrir .cx-col-ico { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; }
.cx-decouvrir a { white-space: nowrap; }
.cx-decouvrir .cx-col-ico svg { width: 17px; height: 17px; }
.cx-fleche { color: var(--violet); transition: transform .2s ease; }
.cx-decouvrir a:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--violet-vif), 0 10px 20px -10px rgba(109, 74, 255, .6); color: var(--violet); }
.cx-decouvrir a:hover .cx-fleche { transform: translateX(3px); }

/* ---------- 4. Collaboratif : frise en trois temps (modèle de Joe) ---------- */
.cx-collab { background: var(--indigo); color: #fff; padding: 80px 0; position: relative; overflow: hidden; }
.cx-collab::before { content: ''; position: absolute; right: -60px; bottom: -90px; width: 340px; height: 520px; background: url('../images/illustrations/hero/branche-lavande-360.webp') center / contain no-repeat; opacity: .35; transform: rotate(-18deg); pointer-events: none; }
.cx-collab-colibri { position: absolute; top: 56px; right: 7%; width: 110px; height: auto; transform: scaleX(-1) rotate(-8deg); filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .35)); pointer-events: none; }
.cx-collab-trace { position: absolute; top: 118px; right: calc(7% - 96px); width: 120px; height: 70px; fill: none; stroke: #a99cf0; stroke-width: 1.6; stroke-dasharray: 4 5; stroke-linecap: round; pointer-events: none; }
.cx-collab .cx-wrap { position: relative; }
.cx-collab h2 { color: #fff; font-size: clamp(32px, 3.5vw, 50px); }
.cx-collab h2 span { color: #c4b5fd; }
.cx-eyebrow--light { color: #c9c3f5; }
.cx-collab .cx-eyebrow--trait::after { background: rgba(201, 195, 245, .6); }
.cx-collab-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 56px; align-items: center; }
.cx-collab-lead { color: #e4e6fb; font-size: 19px; line-height: 1.6; margin: 24px 0 36px; max-width: 520px; }
.cx-btn--grand { min-height: 60px; padding: 0 48px; font-size: 17px; gap: 12px; }
.cx-fleche-btn { font-size: 20px; transition: translate .2s ease; }
.cx-btn:hover .cx-fleche-btn { translate: 4px 0; }
.cx-sign { margin-top: 28px; font-size: 14px; color: #b9b3f0; }
.cx-frise-bloc { position: relative; }
/* La ligne part du bord de la pastille 01 et s'arrête au bord de la 03 (demande de Joe) */
.cx-frise-vague { position: absolute; left: calc((100% - 40px) / 6 + 27px); top: 126px; width: calc(100% - 2 * ((100% - 40px) / 6 + 27px)); height: 40px; fill: none; stroke: #a99cf0; stroke-width: 2; vector-effect: non-scaling-stroke; }
.cx-frise { position: relative; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; text-align: center; }
.cx-frise li { display: flex; flex-direction: column; align-items: center; }
.cx-frise-ico { display: grid; place-items: center; width: 104px; height: 104px; }
.cx-frise-ico svg { width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cx-frise-ico .cx-c2 { stroke: #6ee7c8; }
.cx-frise-ico .cx-c3 { stroke: #c4b5fd; }
.cx-frise-n { position: relative; display: grid; place-items: center; width: 54px; height: 54px; margin: 14px 0 20px; border-radius: 50%; background: #c4b5fd; color: var(--indigo); font-family: var(--titre); font-weight: 800; font-size: 18px; box-shadow: 0 0 0 7px rgba(196, 181, 253, .16); }
.cx-frise h3 { color: #fff; font-size: 24px; font-weight: 800; }
.cx-frise p { color: #e4e6fb; font-size: 16px; line-height: 1.5; margin-top: 10px; max-width: 240px; }
.cx-frise h3 { white-space: nowrap; }

/* ---------- 5. Tarifs : deux colonnes séparées d'un filet (modèle de Joe) ---------- */
.cx-tarifs-tete { text-align: center; }
.cx-tarifs-tete h2 { max-width: none; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -.03em; }
.cx-tarifs-tete h2 span { display: block; color: var(--violet-vif); }
.cx-tarifs-tete .cx-sub { font-size: 18px; margin-top: 12px; }
.cx-periode { display: flex; justify-content: center; gap: 32px; margin-top: 18px; }
.cx-periode[hidden] { display: none; }
.cx-periode button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 6px 8px; font: 600 18px 'Plus Jakarta Sans', system-ui, sans-serif; color: var(--texte); cursor: pointer; }
.cx-periode button[aria-pressed="true"] { color: var(--violet-vif); font-weight: 700; border-bottom-color: var(--violet-vif); }
.cx-periode button:focus-visible { outline: 3px solid var(--violet-vif); outline-offset: 3px; border-radius: 6px; }
.cx-plans { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); column-gap: 64px; max-width: 1140px; margin: 28px auto 0; }
.cx-plans-sep { background: #d9d3f5; margin: 12px 0; }
.cx-plan-tete { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 20px; align-items: center; }
.cx-plan-ico { position: relative; display: grid; place-items: center; width: 72px; height: 72px; }
.cx-plan-ico--doc { border-radius: 50%; background: #e4defc; color: var(--violet); }
.cx-plan-ico--doc svg:first-child { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cx-plan-ico--etoile svg:first-child { width: 48px; height: 48px; fill: var(--violet-vif); filter: drop-shadow(0 8px 14px rgba(109, 74, 255, .4)); }
.cx-plan-eclat { position: absolute; top: -18px; right: -14px; width: 26px; height: 26px; fill: none; stroke: #5eead4; stroke-width: 2.2; stroke-linecap: round; }
.cx-plan--pop .cx-plan-eclat { stroke: #a78bfa; }
.cx-plan h3 { font-size: 32px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.cx-plan-reco { margin-left: 14px; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 17px; font-weight: 700; color: var(--violet-vif); letter-spacing: 0; vertical-align: middle; }
.cx-plan-for { font-size: 17px; color: var(--texte); margin-top: 4px; }
.cx-plan-prix { display: flex; align-items: flex-start; margin: 16px 0 0 92px; color: var(--indigo); line-height: 1; }
.cx-montant { font-family: var(--titre); font-weight: 800; font-size: 88px; letter-spacing: -.05em; line-height: .9; }
.cx-euro { font-family: var(--titre); font-weight: 800; font-size: 40px; margin: 2px 0 0 12px; }
.cx-unite { align-self: flex-end; font-size: 32px; color: var(--texte); margin: 0 0 4px 6px; }
.cx-plan-alt { margin: 8px 0 0 92px; font-size: 17px; color: var(--texte); }
.cx-plan ul { list-style: none; padding: 0; margin: 18px 0 0 52px; display: grid; gap: 8px; }
.cx-plan li { display: flex; align-items: center; gap: 14px; font-size: 16px; color: var(--encre); }
.cx-check { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #c9f5e4; color: #0f6e56; }
.cx-check svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.cx-tarifs-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 36px; margin-top: 28px; }
.cx-tarifs-actions .cx-btn--grand { padding: 0 72px; }
.cx-lien-souligne { color: var(--violet); font-weight: 600; font-size: 17px; text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 3px; }
.cx-lien-souligne:hover { color: var(--violet-vif); }

/* ---------- 6. Démarrer et FAQ ---------- */
.cx-start { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cx-start li { background: #fff; border: 1px solid var(--bord); border-radius: 20px; padding: 24px; }
.cx-start h3 { font-size: 19px; font-weight: 800; margin: 14px 0 6px; }
.cx-start p { color: var(--texte); line-height: 1.55; }
.cx-faq { margin-top: 40px; background: #fff; border: 1px solid var(--bord); border-radius: 20px; max-width: 860px; }
.cx-faq details + details { border-top: 1px solid var(--bord); }
.cx-faq summary { cursor: pointer; list-style: none; padding: 20px 56px 20px 24px; font-weight: 700; position: relative; }
.cx-faq summary::-webkit-details-marker { display: none; }
.cx-faq summary::after { content: '+'; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--violet); }
.cx-faq details[open] summary::after { content: '−'; }
.cx-faq details p { padding: 0 24px 20px; color: var(--texte); line-height: 1.6; }

/* ---------- Appel final ---------- */
/* Bandeau bas, comme l'accueil du portail (demande de Joe : moins haut) */
.cx-final { padding: 56px 0; }
.cx-final-box { background: var(--lavande) url('../images/bandeau-colibri-app.webp') right center / cover no-repeat; border-radius: 24px; padding: 34px 36% 34px 48px; }
.cx-final h2 { margin: 0 0 8px; font-size: clamp(24px, 2.4vw, 32px); }
.cx-final p { color: var(--texte); margin-bottom: 18px; }
.cx-final .cx-btn { min-height: 46px; }

/* ---------- Mouvement (demande de Joe : « aucun effet, aucune animation ») ----------
   Entrée animée du haut de page, feuilles qui ondulent, colibri qui flotte,
   apparitions en cascade au défilement. Tout est coupé si le système demande moins d'animations. */
@keyframes cx-monte { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes cx-fenetre { from { opacity: 0; transform: translateY(60px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes cx-pousse { from { opacity: 0; transform: translateY(40px) scale(.7); } to { opacity: 1; } }
@keyframes cx-ondule { 0%, 100% { rotate: 0deg; } 50% { rotate: 3deg; } }
@keyframes cx-flotte { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes cx-arrive { from { opacity: 0; transform: translate(-60px, -40px) rotate(-20deg); } to { opacity: 1; transform: rotate(-6deg); } }
@keyframes cx-capsule { 0% { opacity: 0; transform: scale(.6); } 70% { transform: scale(1.06); } 100% { opacity: 1; transform: none; } }
@keyframes cx-trait { from { opacity: 0; stroke-dasharray: 40; stroke-dashoffset: 40; } to { opacity: 1; stroke-dasharray: 40; stroke-dashoffset: 0; } }
@keyframes cx-respire { 0%, 100% { rotate: 0deg; scale: 1; } 50% { rotate: .8deg; scale: 1.015; } }
@keyframes cx-tourne { to { rotate: 360deg; } }
/* Pastille pleine : seul le halo pulse, la ligne ne se voit jamais au travers */
@keyframes cx-halo { 0%, 100% { box-shadow: 0 0 0 7px rgba(196, 181, 253, .16); } 50% { box-shadow: 0 0 0 13px rgba(196, 181, 253, .07); } }
@keyframes cx-flux { to { stroke-dashoffset: -20; } }
@keyframes cx-lueur { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }

@media (prefers-reduced-motion: no-preference) {
  .cx-hero-copy > * { animation: cx-monte .7s cubic-bezier(.2, .8, .2, 1) both; }
  .cx-hero-copy > :nth-child(1) { animation-delay: .05s; }
  .cx-hero-copy > :nth-child(2) { animation-delay: .15s; }
  .cx-hero-copy > :nth-child(3) { animation-delay: .3s; }
  .cx-hero-copy > :nth-child(4) { animation-delay: .45s; }
  .cx-hero-copy > :nth-child(5) { animation-delay: .55s; }
  .cx-points li { animation: cx-monte .5s cubic-bezier(.2, .8, .2, 1) both; }
  .cx-points li:nth-child(2) { animation-delay: .12s; } .cx-points li:nth-child(3) { animation-delay: .24s; }
  .cx-hero-visual.cx-reveal { opacity: 1 !important; transform: none !important; }
  .cx-window { animation: cx-fenetre 1s cubic-bezier(.2, .8, .2, 1) .25s both; }
  .cx-leaf { animation: cx-pousse 1.1s cubic-bezier(.2, .8, .2, 1) both, cx-ondule 7s ease-in-out 1.3s infinite; transform-origin: 50% 100%; }
  .cx-massif { animation: cx-pousse 1.2s cubic-bezier(.2, .8, .2, 1) .5s both, cx-respire 9s ease-in-out 1.8s infinite; transform-origin: 60% 60%; }
  .cx-traits path { animation: cx-trait .6s ease-out 1.5s both; }
  .cx-hero::after { animation: cx-lueur 6s ease-in-out infinite; }
  .cx-hub-anneau { animation: cx-tourne 40s linear infinite; }
  .cx-hub img { animation: cx-flotte 3.4s ease-in-out infinite; }
  .cx-eng:hover .cx-eng-ico { animation: cx-flotte .8s ease-in-out; }
  .cx-liens path { animation: cx-flux 2.4s linear infinite; }
  .cx-collab-colibri { animation: cx-flotte 3.6s ease-in-out infinite; }
  .cx-fleur { animation: cx-pousse 1.1s cubic-bezier(.2, .8, .2, 1) 1.1s both, cx-ondule 5s ease-in-out 2.2s infinite; }
  .cx-hero-colibri { animation: cx-arrive 1.1s cubic-bezier(.2, .8, .2, 1) .9s both, cx-flotte 3.2s ease-in-out 2s infinite; }
  .cx-hero-trace { animation: cx-flux 3s linear infinite; }
  .cx-collab-trace { animation: cx-flux 3s linear infinite; }
  .cx-frise-n { animation: cx-halo 3s ease-in-out infinite; }
  .cx-frise li:nth-child(2) .cx-frise-n { animation-delay: 1s; } .cx-frise li:nth-child(3) .cx-frise-n { animation-delay: 2s; }
  .cx-frise li:hover .cx-frise-ico { animation: cx-flotte .8s ease-in-out; }
  .cx-liens circle { animation: cx-lueur 2.6s ease-in-out infinite; }
  .cx-liens circle:nth-of-type(2) { animation-delay: .8s; } .cx-liens circle:nth-of-type(3) { animation-delay: 1.6s; }

  .cx-motion .cx-anim { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 90ms); }
  .cx-motion .cx-anim.is-in { opacity: 1; transform: none; }
  .cx-modules a:hover .cx-ico { animation: cx-ondule .5s ease-in-out 2; }
  .cx-pillar:hover .cx-ico, .cx-role:hover .cx-ico { animation: cx-flotte .8s ease-in-out; }
}
@media (prefers-reduced-motion: reduce) {
  .cx-btn, .cx-modules a { transition: none; }
}

/* ---------- Ordinateur : réduction progressive selon la hauteur de la fenêtre ----------
   Plein à 950 px de haut et plus, compact à 720 px et moins, progressif entre les deux (Joe, 2026-10-18).
   Remplace l'ancien seuil à 820 px, qui donnait un rendu différent entre deux navigateurs de hauteurs voisines. */
@media (min-width: 1025px) {
  .cx-section { padding: clamp(44px, -18.6px + 8.696vh, 64px) 0; }
  .cx-section h2, .cx-collab h2 { font-size: min(clamp(28px, 3.2vw, 42px), clamp(36px, 17.2px + 2.609vh, 42px)); }
  .cx-collab { padding: clamp(56px, -19.1px + 10.435vh, 80px) 0; }
  .cx-collab h2 { font-size: min(clamp(32px, 3.5vw, 50px), clamp(36px, -7.8px + 6.087vh, 50px)); }
  .cx-hero { padding: clamp(112px, 49.4px + 8.696vh, 132px) 0 clamp(56px, -44.2px + 13.913vh, 88px); }
  .cx-hero h1 { font-size: min(clamp(40px, 5vw, 68px), clamp(56px, 18.4px + 5.217vh, 68px)); margin: clamp(22px, -9.3px + 4.348vh, 32px) 0 clamp(18px, -0.8px + 2.609vh, 24px); }
  .cx-trio { margin-top: clamp(20px, -17.6px + 5.217vh, 32px); }
  .cx-hub { width: clamp(190px, 96.1px + 13.043vh, 220px); height: clamp(190px, 96.1px + 13.043vh, 220px); }
  .cx-hero-colibri { width: clamp(80px, 4.9px + 10.435vh, 104px); top: clamp(-150px, 155.7px + -32.174vh, -76px); left: clamp(4%, calc(30% - (950px - 100vh) * .68), 30%); }
  .cx-acces-table td, .cx-acces-table thead th { padding-top: clamp(7px, 0.7px + 0.870vh, 9px); padding-bottom: clamp(7px, 0.7px + 0.870vh, 9px); }
  .cx-tarifs-tete h2 { font-size: min(clamp(30px, 3.6vw, 48px), clamp(40px, 15.0px + 3.478vh, 48px)); }
  .cx-tarifs-tete .cx-sub { margin-top: clamp(8px, -4.5px + 1.739vh, 12px); font-size: clamp(16px, 9.7px + 0.870vh, 18px); }
  .cx-periode { margin-top: clamp(10px, -15.0px + 3.478vh, 18px); }
  .cx-plans { margin-top: clamp(16px, -21.6px + 5.217vh, 28px); }
  .cx-plan-ico { width: clamp(60px, 22.4px + 5.217vh, 72px); height: clamp(60px, 22.4px + 5.217vh, 72px); }
  .cx-plan-tete { grid-template-columns: clamp(60px, 22.4px + 5.217vh, 72px) minmax(0, 1fr); }
  .cx-plan h3 { font-size: clamp(28px, 15.5px + 1.739vh, 32px); }
  .cx-plan-prix { margin: clamp(10px, -8.8px + 2.609vh, 16px) 0 0 clamp(80px, 42.4px + 5.217vh, 92px); }
  .cx-plan-alt { margin-left: clamp(80px, 42.4px + 5.217vh, 92px); }
  .cx-montant { font-size: clamp(72px, 21.9px + 6.957vh, 88px); }
  .cx-euro { font-size: clamp(32px, 7.0px + 3.478vh, 40px); }
  .cx-unite { font-size: clamp(26px, 7.2px + 2.609vh, 32px); }
  .cx-plan ul { margin-top: clamp(12px, -6.8px + 2.609vh, 18px); gap: clamp(5px, -4.4px + 1.304vh, 8px); }
  .cx-tarifs-actions { margin-top: clamp(18px, -13.3px + 4.348vh, 28px); }
}
@media (min-width: 1025px) and (max-height: 820px) { .cx-hero-trace { display: none; } }

/* ---------- Tablette ---------- */
@media (max-width: 1024px) {
  .cx-hero-grid, .cx-collab-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .cx-collab-grid { gap: 64px; }
  .cx-collab-colibri { top: 40px; width: 84px; }
  .cx-hero-visual { margin-top: 72px; }
  .cx-hero-colibri { width: 76px; top: -96px; left: 14%; }
  .cx-hero-trace { display: none; }
  .cx-collab-trace { display: none; }
  .cx-plans { column-gap: 40px; }
  .cx-plan-prix, .cx-plan-alt { margin-left: 0; }
  .cx-plan ul { margin-left: 0; }
  .cx-montant { font-size: 92px; }
  .cx-hero-visual { max-width: 680px; }
  .cx-decouvrir ul { max-width: 560px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-pillars, .cx-roles, .cx-start { grid-template-columns: minmax(0, 1fr); }
  .cx-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-final-box { padding-right: 40%; }
}

@media (max-width: 1024px) {
  .cx-trio { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hub" "e1" "e2" "e3"; row-gap: 36px; }
  .cx-liens { display: none; }
  .cx-hub { width: 180px; height: 180px; }
  .cx-hub img { width: 70px; }
  .cx-eng--1, .cx-eng--2, .cx-eng--3 { justify-self: stretch; max-width: 560px; margin: 0; }
  .cx-eng--1 h3 { max-width: none; }
  .cx-eng.cx-eng--1 p { grid-column: 2; }
}

/* ---------- Téléphone ---------- */
@media (max-width: 600px) {
  .cx-membre small { display: none; }
  .cx-acces-table tbody th, .cx-acces-table thead th:first-child { padding-left: 14px; }
  .cx-acces-table td, .cx-acces-table thead th { padding: 10px 2px; }
  .cx-avatar { display: none; }
  .cx-membre strong { font-size: 14px; }
  .cx-acces-table thead th:first-child { font-size: 0; }
  .cx-acces-table tbody th { padding-right: 4px; }
  .cx-col-ico { width: 28px; height: 28px; }
  .cx-col-ico svg { width: 16px; height: 16px; }
  .cx-droit { min-width: 24px; height: 22px; padding: 0 4px; }
  .cx-acces-tete { padding: 16px 14px; }
  .cx-decouvrir { padding: 16px 14px 18px; }
  .cx-decouvrir ul { gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-decouvrir a { font-size: 13px; padding-right: 12px; gap: 8px; }
  .cx-decouvrir .cx-fleche { display: none; }
  .cx-more a + a { margin-left: 0; display: block; margin-top: 12px; }
}
@media (max-width: 600px) {
  .cx-hero { padding: 104px 0 64px; }
  .cx-lead { font-size: 16px; }
  .cx-actions .cx-btn { flex: 1 1 100%; }
  .cx-window { transform: none; }
  .cx-traits--bas { display: none; }
  .cx-traits--haut { right: 8px; top: -40px; width: 28px; height: 28px; }
  .cx-section, .cx-collab, .cx-final { padding: 64px 0; }
  .cx-pillar { padding: 24px; border-radius: 20px; }
  .cx-modules a { padding: 10px; gap: 10px; font-size: 14px; }
  .cx-section--concept::before, .cx-section--concept::after { width: 130px; height: 220px; opacity: .4; }
  .cx-section--bureau::before { width: 130px; height: 260px; opacity: .35; }
  .cx-hero .cx-btn { padding: 0 24px; }
  .cx-points { font-size: 14px; }
  .cx-collab-colibri { width: 64px; top: 28px; right: 16px; }
  .cx-hero-visual { margin-top: 56px; }
  .cx-fleur { width: 56px; right: -6px; bottom: -64px; }
  .cx-hero-colibri { width: 60px; top: -70px; left: 18%; }
  .cx-hero-trace { display: none; }
  .cx-frise-vague { display: none; }
  .cx-frise { grid-template-columns: minmax(0, 1fr); gap: 28px; text-align: left; }
  .cx-frise li { display: grid; grid-template-columns: 54px minmax(0, 1fr); column-gap: 18px; align-items: start; }
  .cx-frise-ico { display: none; }
  .cx-frise-n { grid-row: span 2; margin: 0; }
  .cx-frise h3 { font-size: 20px; white-space: normal; }
  .cx-frise p { margin-top: 4px; max-width: none; }
  .cx-btn--grand { padding: 0 28px; width: 100%; }
  .cx-plans { grid-template-columns: minmax(0, 1fr); row-gap: 44px; }
  .cx-plans-sep { height: 1px; margin: 0; }
  .cx-plan-tete { grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; }
  .cx-plan-ico { width: 64px; height: 64px; }
  .cx-plan-ico--doc svg:first-child { width: 32px; height: 32px; }
  .cx-plan-ico--etoile svg:first-child { width: 42px; height: 42px; }
  .cx-plan h3 { font-size: 28px; }
  .cx-plan-reco { display: block; margin: 4px 0 0; font-size: 14px; }
  .cx-plan-for { font-size: 16px; }
  .cx-montant { font-size: 76px; }
  .cx-euro { font-size: 34px; }
  .cx-unite { font-size: 28px; }
  .cx-plan-alt { font-size: 17px; }
  .cx-plan li { font-size: 16px; gap: 14px; }
  .cx-check { width: 28px; height: 28px; }
  .cx-tarifs-tete .cx-sub { font-size: 17px; }
  .cx-tarifs-actions .cx-btn--grand { padding: 0 28px; }
  /* Le haut de l'image se fond dans la couleur du bandeau : pas de démarcation */
  .cx-final-box { background: linear-gradient(180deg, #d3d2fe 0%, #d3d2fe 70%, rgba(211, 210, 254, 0) 86%), url('../images/bandeau-colibri-app.webp') center bottom / 100% auto no-repeat, #d3d2fe; padding: 32px 20px 104px; border-radius: 24px; }
}
.cx-nowrap { white-space: nowrap; }

/* Logo : « Asso » au dégradé du colibri (turquoise, bleu, violet), demande de Joe du 2026-10-18.
   Soutenu dans la barre blanche pour rester lisible, plus lumineux dans le pied de page indigo
   (le dégradé en style en ligne du gabarit est remplacé). */
.cx #main-nav .nav-logo span { background: linear-gradient(90deg, #0d9488 0%, #2563eb 50%, #7c3aed 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.cx footer a[href*="index"] > span { background: linear-gradient(90deg, #2dd4bf 0%, #60a5fa 50%, #a78bfa 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; }

/* Barre d'onglets en violet clair, comme les parties claires des pages (demande de Joe, 2026-10-18) */
.cx #main-nav, .cx #main-nav.scrolled { background: #ede9fe; border-color: #d9d0fb; box-shadow: 0 10px 30px -14px rgba(31, 32, 87, .45); }
.cx #main-nav .nav-legal-menu, .cx #main-nav .nav-links.open { background: #f5f3ff; border-color: #d9d0fb; }

/* Pied de page resserré (demande de Joe, 2026-10-18) : moins de vide, Légal aussi sur deux colonnes */
.cx footer { padding-top: 36px; padding-bottom: 18px; }
.cx footer .footer-inner { margin-bottom: 22px; }
.cx footer .footer-copy { padding-top: 14px; }
.cx footer .footer-links-group > .footer-col:nth-child(2) { display: grid; grid-template-columns: repeat(2, auto); column-gap: 40px; row-gap: 10px; align-content: start; }
.cx footer .footer-links-group > .footer-col:nth-child(2) h4 { grid-column: 1 / -1; }

/* Boutons plus discrets sur tout le site (Joe, 2026-10-18 : « trop gros ») */
.cx-btn { min-height: 40px; padding: 0 20px; font-size: 14px; }
.cx-hero .cx-btn { min-height: 46px; padding: 0 28px; font-size: 15px; }
.cx-btn--grand { min-height: 46px; padding: 0 30px; font-size: 15px; gap: 10px; }
.cx-fleche-btn { font-size: 17px; }
.cx-tarifs-actions .cx-btn--grand { padding: 0 40px; }
.cx-final .cx-btn { min-height: 40px; }
.cx #main-nav .nav-cta { font-size: 13.5px; padding: 9px 16px; }
@media (max-width: 600px) {
  .cx-hero .cx-btn, .cx-btn--grand, .cx-tarifs-actions .cx-btn--grand { padding: 0 20px; }
  .cx #main-nav .nav-cta { font-size: 12px; padding: 8px 12px; }
}
/* Barre du haut en menthe claire (maquette de Joe, 2026-10-18) */
.cx #main-nav, .cx #main-nav.scrolled { background: #ccfbef; border-color: #99f0d9; box-shadow: 0 10px 30px -14px rgba(13, 148, 136, .45); }
.cx #main-nav .nav-legal-menu, .cx #main-nav .nav-links.open { background: #e6fdf6; border-color: #99f0d9; }
.cx #main-nav .nav-links a, .cx #main-nav .nav-legal-btn { color: #1f2057; }
.cx #main-nav .nav-links a:hover, .cx #main-nav .nav-legal-btn:hover { color: #0f766e; }
.cx #main-nav .nav-links a.active { position: relative; color: #0f766e; font-weight: 700; }
.cx #main-nav .nav-links a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2.5px; border-radius: 2px; background: #0f766e; }
.cx #main-nav .nav-cta { background: #1f2057; color: #fff; box-shadow: none; }
.cx #main-nav .nav-cta:hover { background: #2c2d75; }
@media (max-width: 1180px) { .cx #main-nav .nav-links a.active::after { display: none; } }
/* « Se connecter » : un bonhomme dans le rond blanc ; au survol, il sort et la flèche actuelle entre (Joe, 2026-10-18) */
.cx #main-nav .nav-cta__icon { color: #1f2057; background-color: #fff; }
.cx #main-nav .nav-cta__icon svg:first-child { opacity: 0; }
.cx #main-nav .nav-cta__icon::before { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8.5' r='4' fill='%231f2057'/%3E%3Cpath d='M4.5 21a7.5 7.5 0 0 1 15 0z' fill='%231f2057'/%3E%3C/svg%3E") center / 72% no-repeat; transition: transform .3s ease-in-out; }
.cx #main-nav .nav-cta:hover .nav-cta__icon { color: #fff; background-color: #6d4aff; }
.cx #main-nav .nav-cta:hover .nav-cta__icon::before { transform: translate(150%, -150%); }
/* Barre du haut repassée en blanc (Joe, 2026-10-18) ; « Se connecter » garde son bleu nuit.
   Au survol : le rond reste blanc, la flèche prend le bleu nuit du bouton. Onglet actif en violet. */
.cx #main-nav, .cx #main-nav.scrolled { background: #fff; border-color: #e6e3f5; box-shadow: 0 10px 30px -14px rgba(31, 32, 87, .45); }
.cx #main-nav .nav-legal-menu, .cx #main-nav .nav-links.open { background: #fff; border-color: #e6e3f5; }
.cx #main-nav .nav-links a:hover, .cx #main-nav .nav-legal-btn:hover { color: #6d4aff; }
.cx #main-nav .nav-links a.active { color: #6d4aff; }
.cx #main-nav .nav-links a.active::after { background: #6d4aff; }
.cx #main-nav .nav-cta:hover .nav-cta__icon { color: #1f2057; background-color: #fff; }
/* Accueil : la massif de branches autour de la capture est remplacé par une seule branche (PNG de Joe, 2026-10-18),
   dressée à droite de la capture, sa base passe dessous */
.cx-hero-branche { position: absolute; z-index: 0; pointer-events: none; right: -150px; bottom: 10px; width: 300px; height: auto; rotate: 10deg; transform-origin: 50% 100%; animation: cx-pousse 1.1s cubic-bezier(.2, .8, .2, 1) .3s both; }
@media (max-width: 1024px) { .cx-hero-branche { width: 220px; right: -90px; } }
@media (max-width: 600px) { .cx-hero-branche { width: 150px; right: -40px; bottom: 0; } }
@media (prefers-reduced-motion: reduce) { .cx-hero-branche { animation: none; } }
/* La branche de l'accueil ondule en continu après sa pousse, comme les anciennes branches */
@keyframes cx-branche-ondule { 0%, 100% { rotate: 10deg; } 50% { rotate: 14deg; } }
.cx-hero-branche { animation: cx-pousse 1.1s cubic-bezier(.2, .8, .2, 1) .3s both, cx-branche-ondule 6s ease-in-out 1.4s infinite; }
@media (prefers-reduced-motion: reduce) { .cx-hero-branche { animation: none; } }
/* « Pour tout le bureau » : une autre branche que la partie du dessus, qui portait la même (Joe, 2026-10-18) */
.cx-section--bureau::before { background-image: url('../images/illustrations/habillage/branche-retombante-ml.webp'); transform: none; opacity: .6; }
/* Barre à 360 px et moins : à 320 px, le bouton menu sortait de l'écran (D1, Joe, 2026-10-18) */
@media (max-width: 360px) {
  .cx #main-nav .nav-logo { font-size: 13px; }
  .cx #main-nav .nav-logo::before { width: 22px; height: 26px; margin-right: 3px; }
  .cx #main-nav .nav-cta { padding: 8px 9px; margin-right: 6px; }
}