:root {
  --turquoise: #50DDC4;
  --turquoise-dark: #26BCA1;
  --marine: #233048;
  --violet-500: #815EE5;
  --violet-700: #5022D3;
  --green-100: #E9FBF8;
  --green-300: #D3F7F0;
  --violet-100: #F8F6FE;
  --violet-300: #E7E0FA;
  --slate: #5b6b82;
  --white: #ffffff;
  --shadow-card: 0 8px 24px rgba(35,48,72,0.07);
  --shadow-card-hover: 0 20px 40px rgba(35,48,72,0.12);
  --shadow-btn: 0 10px 24px rgba(35,48,72,0.12);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
.cb-icon-inline { width: 14px; height: 14px; vertical-align: -2px; flex-shrink: 0; }
body { font-family: 'Poppins', sans-serif; background: #fff; color: var(--marine); overflow-x: hidden; }
/* Empêche un <input>/<textarea> sans width explicite de garder sa taille
   intrinsèque du navigateur (~176px) dans une grille à colonnes égales —
   bug réel trouvé sur plusieurs formulaires (contact, programme-affiliation,
   entreprises) : deux inputs de 176px + gap dépassaient un conteneur de
   335px sur mobile, provoquant un débordement horizontal invisible (masqué
   par overflow-x:hidden sur body, mais qui décalait quand même la nav en
   position fixed). min-width:0 est indispensable : une grille ne réduit pas
   un enfant sous sa taille de contenu par défaut, seulement en dessous. */
form input:not([type=checkbox]):not([type=radio]), form textarea, form select { width: 100%; min-width: 0; }

/* Visibilité des champs de formulaire à l'échelle du site : les bordures
   d'origine (rgba(35,48,72,0.15), 1px) sont trop discrètes sur fond blanc
   pour qu'un champ se distingue du fond au premier coup d'œil. On renforce
   la bordure au repos et on ajoute un état focus net, en !important sur les
   propriétés déjà fixées en style inline sur la plupart des formulaires du
   site (contact, entreprises, affiliation, inscriptions...) — impossible de
   surclasser un style inline autrement qu'avec !important ou en éditant
   chaque balise une à une. */
form input:not([type=checkbox]):not([type=radio]):not([type=hidden]), form textarea, form select {
  background: #fcfcfd !important;
  border-color: rgba(35,48,72,0.4) !important;
}
form input:not([type=checkbox]):not([type=radio]):not([type=hidden]):focus,
form textarea:focus,
form select:focus {
  border-color: var(--turquoise-dark) !important;
  box-shadow: 0 0 0 3px rgba(80,221,196,0.25);
  outline: none;
}
/* Révélation douce au scroll (voir assets/js/colybry.js) — ajoutée en
   modernisation visuelle légère (24/09/2026). Dégradation propre si JS est
   coupé ou prefers-reduced-motion actif : le JS ajoute .in-view dans ces cas
   plutôt que de dépendre de l'observation réelle du scroll. */
/* Masqué seulement quand JS tourne (classe .cb-js posée dans le <head> par
   partials/header.php, revue SEO du 02/10/2026) : sans JS, robots compris,
   le contenu reste visible. */
.cb-js .cb-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; }
.cb-js .cb-reveal.in-view { opacity: 1; transform: none; }
/* Filet si colybry.js ne se charge pas : tout redevient visible après 4 s
   (le script révèle déjà tout à 3 s quand il tourne). */
.cb-js .cb-reveal:not(.in-view) { animation: cb-reveal-failsafe 0.3s ease 4s forwards; }
@keyframes cb-reveal-failsafe { to { opacity: 1; transform: none; } }
/* Déjà à l'écran au chargement : affiché d'emblée, sans fondu (LCP). */
.cb-js .cb-reveal.cb-reveal-instant { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .cb-js .cb-reveal { opacity: 1; transform: none; transition: none; }
}
/* Focus clavier visible partout (liens, boutons, résumés de FAQ) : aucun
   style de focus n'était défini, l'outline natif disparaissait sur les
   boutons arrondis et les fonds turquoise. */
a:focus-visible, button:focus-visible, summary:focus-visible, [role="button"]:focus-visible, input[type=checkbox]:focus-visible, input[type=radio]:focus-visible {
  outline: 3px solid var(--turquoise-dark); outline-offset: 3px; border-radius: 6px;
}
.cb-hero-cta:focus-visible, .cb-band-cta:focus-visible, .cb-nav-cta:focus-visible, .cb-mobile-cta:focus-visible { outline-color: var(--marine); border-radius: 50px; }
a { text-decoration: none; color: inherit; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease, transform 0.2s ease, opacity 0.2s ease; }
button { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease, transform 0.2s ease, opacity 0.2s ease; }
img { max-width: 100%; display: block; }

/* --- Nav --- */
nav.cb-nav {
  position: fixed; top: 28px; left: 16px; right: 16px; margin: 0 auto; max-width: 1240px;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: 50px; padding: 16px 36px; box-shadow: 0 10px 30px rgba(35,48,72,0.12);
  display: flex; align-items: center; justify-content: space-between; z-index: 1000; gap: 20px;
  transition: box-shadow 0.25s ease, background-color 0.25s ease;
}
/* Léger surcroît de profondeur une fois la page défilée (classe .cb-scrolled
   posée sur <nav> par colybry.js) — signal discret que la nav "flotte"
   au-dessus du contenu, sans changer sa forme ni sa couleur. */
nav.cb-nav.cb-scrolled { background: rgba(255,255,255,0.98); box-shadow: 0 14px 36px rgba(35,48,72,0.16); }
.cb-nav-logo-img { height: 38px; width: auto; display: block; }
.cb-nav-center { display: flex; align-items: center; gap: 28px; }
.cb-nav-link { font-weight: 500; font-size: 1rem; color: var(--marine); white-space: nowrap; }
.cb-nav-link:hover, .cb-nav-link.active { color: var(--turquoise-dark); }
.cb-nav-link.active { font-weight: 700; }
.cb-nav-right { display: flex; align-items: center; gap: 18px; }
.cb-nav-entreprises { font-weight: 600; font-size: 0.9rem; color: var(--marine); border: 1.5px solid rgba(35,48,72,0.25); padding: 9px 20px; border-radius: 50px; white-space: nowrap; }
.cb-nav-entreprises:hover { background: rgba(35,48,72,0.06); }
.cb-nav-cta { background: var(--turquoise); color: var(--marine); font-weight: 700; font-size: 0.95rem; padding: 12px 24px; border-radius: 50px; white-space: nowrap; }
.cb-nav-cta:hover { background: var(--turquoise-dark); transform: translateY(-2px); box-shadow: var(--shadow-btn); }
/* Burger en <button> (accessible au clavier) : zone tactile de 44px autour
   des trois traits de 24x17px, sans changer le rendu visuel. */
.cb-burger { display: none; flex-direction: column; justify-content: space-between; width: 44px; height: 44px; padding: 13.5px 10px; margin-right: -10px; box-sizing: border-box; background: none; border: 0; cursor: pointer; font: inherit; }
.cb-burger span { display: block; height: 2.5px; width: 100%; background: var(--marine); border-radius: 2px; }

.cb-mobile-overlay {
  display: none; position: fixed; inset: 0; background: var(--white); z-index: 1100;
  flex-direction: column; align-items: center; justify-content: center; gap: 24px;
}
/* Sur un petit écran (375x667), la liste centrée dépassait en haut et en bas
   sans pouvoir défiler : défilement interne + « safe center ». */
.cb-mobile-overlay.open { display: flex; overflow-y: auto; justify-content: safe center; padding: 72px 20px 32px; }
html.cb-menu-open, html.cb-menu-open body { overflow: hidden; }
.cb-mobile-close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; font-size: 1.6rem; cursor: pointer; color: var(--marine); }
.cb-mobile-close svg { width: 26px; height: 26px; display: block; }
.cb-mobile-link { font-size: 1.4rem; font-weight: 700; color: var(--marine); }
.cb-mobile-entreprises { font-size: 0.95rem; font-weight: 600; color: var(--marine); border: 1.5px solid rgba(35,48,72,0.25); border-radius: 50px; padding: 10px 24px; margin-top: 4px; }
.cb-mobile-cta { background: var(--turquoise); color: var(--marine); font-weight: 700; padding: 14px 32px; border-radius: 50px; font-size: 1.05rem; margin-top: 8px; }
.cb-mobile-sublinks { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: -14px; }
.cb-mobile-sublinks a { font-size: 0.9rem; font-weight: 500; color: var(--slate); }
.cb-mobile-sublinks a:hover { color: var(--turquoise-dark); }

/* --- Nav dropdown (desktop) --- */
.cb-nav-dropdown { position: relative; }
.cb-nav-dropdown-panel {
  display: block; position: absolute; top: 100%; left: 50%; transform: translate(-50%, 6px);
  padding-top: 18px; z-index: 1001; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.cb-nav-dropdown:hover .cb-nav-dropdown-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); pointer-events: auto; }
.cb-nav-dropdown-card {
  display: flex; flex-direction: column; background: var(--white); border-radius: 24px;
  box-shadow: 0 24px 60px rgba(35,48,72,0.14), 0 2px 8px rgba(35,48,72,0.06);
  border: 1px solid rgba(35,48,72,0.06);
  min-width: 420px; overflow: hidden;
}
.cb-nav-dropdown-body { display: flex; gap: 0; padding: 22px 26px 16px 26px; }
.cb-nav-dropdown-col { display: flex; flex-direction: column; gap: 2px; min-width: 170px; }
.cb-nav-dropdown-col + .cb-nav-dropdown-col { border-left: 1px solid rgba(35,48,72,0.08); margin-left: 24px; padding-left: 24px; }
.cb-nav-dropdown-heading {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--slate); margin-bottom: 8px;
}
.cb-nav-dropdown-heading .flag { font-size: 0.95rem; }
.cb-nav-dropdown-col a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 0.92rem; font-weight: 500; color: var(--marine);
  padding: 9px 12px; margin: 0 -12px; border-radius: 12px;
  transition: background 0.15s ease, color 0.15s ease;
}
.cb-nav-dropdown-col a::after { content: '→'; opacity: 0; transform: translateX(-4px); transition: opacity 0.15s ease, transform 0.15s ease; font-size: 0.85rem; }
.cb-nav-dropdown-col a:hover { background: var(--green-100); color: var(--turquoise-dark); }
.cb-nav-dropdown-col a:hover::after { opacity: 1; transform: translateX(0); }
.cb-nav-dropdown-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 14px 26px; background: var(--green-100); border-top: 1px solid rgba(35,48,72,0.06);
  font-weight: 700; font-size: 0.85rem; color: var(--turquoise-dark); transition: background 0.15s ease;
}
.cb-nav-dropdown-footer:hover { background: var(--green-300); }
.cb-nav-dropdown-footer span { display: inline-block; transition: transform 0.15s ease; }
.cb-nav-dropdown-footer:hover span { transform: translateX(4px); }

/* --- Related links band --- */
.cb-related { background: var(--violet-100); padding: 56px 32px; position: relative; overflow: hidden; }
.cb-related::before { content: ''; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: rgba(129,94,229,0.14); filter: blur(70px); top: -120px; right: -90px; pointer-events: none; z-index: 0; }
.cb-related-inner { max-width: 1100px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.cb-related h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: 20px; color: var(--marine); }
.cb-related-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.cb-related-link { background: #fff; border-radius: 50px; padding: 10px 20px; font-size: 0.88rem; font-weight: 600; color: var(--violet-700); border: 1px solid rgba(129,94,229,0.25); }
.cb-related-link:hover { background: var(--violet-700); color: #fff; }

/* --- Generic page hero --- */
.cb-hero { background: var(--marine); padding: 150px 32px 80px 32px; text-align: center; position: relative; overflow: hidden; }
.cb-hero.cb-hero-no-crumb { padding-top: 150px; }
.cb-hero h1 { color: #fff; font-size: 2.6rem; font-weight: 800; max-width: 780px; margin: 0 auto 18px auto; line-height: 1.2; position: relative; z-index: 2; }
.cb-hero p { color: rgba(255,255,255,0.85); max-width: 620px; margin: 0 auto 32px auto; font-size: 1.1rem; line-height: 1.7; position: relative; z-index: 2; }
.cb-hero p.cb-annuaire-intro { font-size: 0.95rem; color: rgba(255,255,255,0.65); margin-top: -18px; }
.cb-hero-cta { display: inline-block; background: var(--turquoise); color: var(--marine); font-weight: 700; padding: 14px 30px; border-radius: 50px; position: relative; z-index: 2; box-shadow: 0 12px 28px rgba(80,221,196,0.3); }
.cb-hero-cta:hover { background: var(--turquoise-dark); transform: translateY(-2px); box-shadow: 0 16px 34px rgba(80,221,196,0.4); }
.cb-hero-mascot {
  position: absolute; z-index: 1; pointer-events: none; filter: drop-shadow(0 15px 25px rgba(0,0,0,0.35));
}

/* --- Sélecteur de langue (pages publiques traduites, demande du 11/09/2026) :
   posé dans le hero (position:relative), sous la nav fixe, jamais en
   compétition avec elle. Vrais <a href>, pas de JS, pour rester crawlable. */
.cb-lang-switch { position: absolute; top: 100px; right: 24px; z-index: 3; display: flex; gap: 2px; background: rgba(255,255,255,0.12); border-radius: 999px; padding: 3px; }
.cb-lang-switch a { display: flex; align-items: center; justify-content: center; width: 32px; height: 28px; border-radius: 999px; font-size: 1.05rem; line-height: 1; opacity: 0.55; filter: grayscale(0.5); transition: opacity 0.15s, filter 0.15s, background 0.15s; }
.cb-lang-switch a:hover { opacity: 0.85; }
.cb-lang-switch a.active { opacity: 1; filter: none; background: rgba(255,255,255,0.9); }
@media (max-width: 640px) {
  .cb-lang-switch { top: 84px; right: 12px; }
}

/* --- Mascot accent (reusable on any page) --- */
.cb-mascot-float { position: absolute; pointer-events: none; z-index: 1; }
.cb-mascot-inline { max-width: 220px; margin: 0 auto; }

/* --- Pillars / content blocks --- */
.cb-pillars { max-width: 1100px; margin: 0 auto; padding: 88px 32px; display: flex; flex-direction: column; gap: 64px; }

/* --- Aperçu produit CVthèque (page entreprises) --- section brève,
   volontairement légère : juste montrer que l'outil existe et donne envie,
   pas une démo détaillée. Une seule capture, recadrée serrée sur le
   composant (jamais la page entière ni le chrome navigateur). Fond
   violet-100 déjà dans la charte. */
.cb-showcase { position: relative; background: linear-gradient(135deg, var(--green-300), var(--green-100)); padding: 64px 32px 90px 32px; overflow: hidden; }
.cb-showcase::before, .cb-showcase::after { content: ''; position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; }
.cb-showcase::before { width: 280px; height: 280px; background: var(--turquoise); opacity: 0.25; top: -80px; left: -60px; }
.cb-showcase::after { width: 320px; height: 320px; background: var(--violet-500); opacity: 0.16; bottom: -100px; right: 4%; }
.cb-showcase-inner { position: relative; z-index: 1; max-width: 1000px; margin: 0 auto; display: flex; align-items: center; gap: 48px; }
.cb-showcase-text { flex: 0 0 300px; }
.cb-showcase-tag { display: inline-block; background: rgba(80,221,196,0.16); color: var(--turquoise-dark); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 12px; border-radius: 50px; margin-bottom: 14px; }
.cb-showcase-text h2 { font-size: 1.5rem; font-weight: 800; line-height: 1.25; margin-bottom: 10px; }
.cb-showcase-text p { color: var(--slate); font-size: 0.98rem; line-height: 1.65; }
.cb-showcase-visual { flex: 1; position: relative; }
.cb-showcase-visual img { width: 100%; border-radius: 22px; display: block; transform: rotate(-1.5deg); box-shadow: 0 30px 60px -12px rgba(35,48,72,0.28), 0 12px 24px -8px rgba(35,48,72,0.18); }
.cb-showcase-visual img.cb-showcase-mascot { position: absolute; bottom: -34px; right: -28px; width: 130px; transform: none; z-index: 2; filter: drop-shadow(0 12px 16px rgba(35,48,72,0.2)); box-shadow: none; }
@media (max-width: 900px) {
  .cb-showcase { padding: 40px 20px; }
  .cb-showcase-inner { flex-direction: column; gap: 24px; text-align: center; }
  .cb-showcase-text { flex: none; }
  .cb-showcase-visual img.cb-showcase-mascot { width: 90px; bottom: -18px; right: -6px; }
}

/* --- Photo destination (Unsplash) --- */
.cb-destination-photo { max-width: 1100px; margin: -40px auto 0 auto; padding: 0 32px; position: relative; z-index: 3; }
.cb-destination-photo img { width: 100%; height: 380px; object-fit: cover; border-radius: 32px; display: block; }
/* Variante sans chevauchement négatif : le -40px sert à mordre sur le hero
   marine sombre juste au-dessus (transition foncé → clair). Quand la photo
   suit un bloc déjà clair (ex. .cb-showcase), ce chevauchement n'a plus de
   sens et colle les deux blocs l'un à l'autre sans respiration. */
.cb-destination-photo.cb-destination-photo-flat { margin-top: 0; }
@media (max-width: 1080px) {
  .cb-destination-photo { margin-top: -24px; padding: 0 20px; }
  .cb-destination-photo img { height: 220px; border-radius: 24px; }
}
.cb-pillar { display: flex; gap: 48px; align-items: center; }
.cb-pillar.reverse { flex-direction: row-reverse; }
.cb-pillar-visual {
  flex: 1 1 380px; height: 280px; border-radius: 28px; overflow: hidden; position: relative;
  background: var(--green-100); display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-card); transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cb-pillar:hover .cb-pillar-visual { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.cb-pillar-visual.violet { background: var(--violet-100); }
.cb-pillar-visual img.cb-pillar-mascot { max-height: 220px; width: auto; }
.cb-pillar-content { flex: 1 1 420px; }
.cb-pillar-tag { display: inline-block; background: var(--green-100); color: var(--turquoise-dark); font-weight: 700; font-size: 0.8rem; padding: 6px 16px; border-radius: 50px; margin-bottom: 14px; }
.cb-pillar-tag.violet { background: var(--violet-100); color: var(--violet-700); }
.cb-pillar-content h2 { font-size: 1.8rem; font-weight: 800; margin-bottom: 14px; }
.cb-pillar-content p { color: var(--slate); line-height: 1.7; margin-bottom: 18px; }
.cb-pillar-list { list-style: none; margin-bottom: 22px; }
.cb-pillar-list li { position: relative; padding-left: 26px; margin-bottom: 10px; color: var(--marine); font-size: 0.95rem; line-height: 1.5; }
.cb-pillar-list li::before { content: '✓'; position: absolute; left: 0; color: var(--turquoise-dark); font-weight: 800; }
.cb-pillar-list li a { color: var(--marine); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.cb-pillar-list li a:hover { color: var(--turquoise-dark); }
.cb-pillar-link { display: inline-flex; gap: 8px; font-weight: 700; color: var(--marine); }
.cb-pillar-link:hover { gap: 12px; }

/* --- Formulaire "être rappelé" (page entreprises) --- */
.cb-recruter { background: var(--green-100); padding: 72px 32px; }
.cb-recruter-inner { max-width: 1000px; margin: 0 auto; display: flex; gap: 56px; align-items: flex-start; }
.cb-recruter-text { flex: 0 0 300px; padding-top: 6px; }
.cb-recruter-text h3 { font-size: 1.6rem; font-weight: 800; margin-bottom: 10px; }
.cb-recruter-text p { color: var(--slate); line-height: 1.7; margin-bottom: 22px; }
.cb-recruter-points { display: flex; flex-direction: column; gap: 12px; }
.cb-recruter-point { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 0.92rem; }
.cb-recruter-point .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--turquoise-dark); flex-shrink: 0; }
.cb-recruter-card { flex: 1; min-width: 0; background: #fff; border-radius: 24px; padding: 36px; box-shadow: var(--shadow-card); }
.cb-recruter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.cb-recruter-field label { display: block; font-size: 0.78rem; font-weight: 700; color: var(--marine); margin-bottom: 6px; }
.cb-recruter-card input, .cb-recruter-card textarea { width: 100%; padding: 13px 16px; border-radius: 12px; border: 1.5px solid rgba(35,48,72,0.18); font-family: inherit; font-size: 0.95rem; background: #fff; }
.cb-recruter-card input:focus, .cb-recruter-card textarea:focus { outline: none; border-color: var(--turquoise-dark); box-shadow: 0 0 0 3px rgba(80,221,196,0.2); }
.cb-recruter-card textarea { margin-bottom: 24px; resize: vertical; }
.cb-recruter-submit { background: var(--marine); color: #fff; font-weight: 700; padding: 14px 32px; border-radius: 50px; border: none; font-family: inherit; font-size: 1rem; cursor: pointer; }
.cb-recruter-submit:hover { background: #1a2436; transform: translateY(-2px); box-shadow: var(--shadow-btn); }
@media (max-width: 900px) {
  .cb-recruter { padding: 48px 20px; }
  .cb-recruter-inner { flex-direction: column; gap: 28px; }
  .cb-recruter-row { grid-template-columns: minmax(0, 1fr); }
}

/* --- CTA band --- */
.cb-band {
  background: var(--green-100); border-radius: 40px; max-width: 1100px; margin: 0 auto 88px auto;
  padding: 48px; text-align: center; position: relative; overflow: hidden;
}
.cb-band h3 { font-size: 1.5rem; font-weight: 800; margin-bottom: 10px; position: relative; z-index: 2; }
.cb-band p { color: var(--slate); margin-bottom: 22px; position: relative; z-index: 2; }
.cb-band a.cb-band-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--marine); color: #fff; font-weight: 700; padding: 14px 30px; border-radius: 50px; position: relative; z-index: 2; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; }
.cb-band a.cb-band-cta:hover { background: #1a2437; transform: translateY(-2px); box-shadow: var(--shadow-btn); }
.cb-band a.cb-band-cta .cb-band-cta-arrow { display: inline-block; transition: transform 0.15s ease; }
.cb-band a.cb-band-cta:hover .cb-band-cta-arrow { transform: translateX(4px); }
/* Variante turquoise dégradée — bande de fin des articles de blog, pour ne pas se confondre avec la bande marine générique réutilisée sur le reste du site (demande explicite du 22/09/2026). */
.cb-band a.cb-band-cta.turquoise { background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark)); color: var(--marine); }
.cb-band a.cb-band-cta.turquoise:hover { background: linear-gradient(135deg, var(--turquoise-dark), var(--turquoise-dark)); }

/* --- Simple content section (legal-style pages) --- */
.cb-content { max-width: 800px; margin: 0 auto; padding: 150px 32px 88px 32px; }
.cb-content.cb-content-no-crumb { padding-top: 150px; }
.cb-content h1 { font-size: 2.2rem; font-weight: 800; margin-bottom: 24px; }
.cb-content h2 { font-size: 1.3rem; font-weight: 700; margin: 32px 0 12px 0; }
.cb-content h3 { font-size: 1.1rem; font-weight: 700; margin: 24px 0 10px 0; color: var(--marine); }
.cb-content blockquote { border-left: 3px solid var(--turquoise); padding: 4px 0 4px 18px; color: var(--marine); font-style: italic; margin: 20px 0; }
.cb-content strong { color: var(--marine); }
.cb-content p, .cb-content li { color: var(--slate); line-height: 1.75; margin-bottom: 14px; }
.cb-content ul { padding-left: 22px; margin-bottom: 14px; }
.cb-content .cb-legal-note { background: var(--green-100); border-radius: 16px; padding: 18px 22px; font-size: 0.9rem; color: var(--marine); margin-bottom: 32px; }

/* --- FAQ (accordéon) --- */
.cb-faq { margin-top: 8px; }
.cb-faq details { border: 1px solid rgba(35,48,72,0.1); border-radius: 16px; padding: 16px 22px; margin-bottom: 12px; }
.cb-faq details[open] { border-color: rgba(80,221,196,0.4); background: var(--green-100); }
.cb-faq summary { font-weight: 700; cursor: pointer; color: var(--marine); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cb-faq summary::-webkit-details-marker { display: none; }
.cb-faq summary::after { content: '+'; font-size: 1.3rem; font-weight: 400; color: var(--turquoise-dark); flex-shrink: 0; }
.cb-faq details[open] summary::after { content: '−'; }
.cb-faq details p { margin: 12px 0 0 0; }

/* --- Page Tarifs --- */
.cb-price-table { max-width: 900px; margin: 0 auto 24px auto; background: #fff; border-radius: 24px; border: 1px solid rgba(35,48,72,0.08); overflow: hidden; }
.cb-price-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 28px; border-bottom: 1px solid rgba(35,48,72,0.06); }
.cb-price-row:last-child { border-bottom: none; }
.cb-price-name { font-weight: 700; font-size: 0.98rem; }
.cb-price-desc { font-size: 0.85rem; color: var(--slate); margin-top: 2px; }
.cb-price-amount { font-weight: 800; font-size: 1.1rem; color: var(--marine); white-space: nowrap; }
.cb-price-amount.free { color: var(--turquoise-dark); }
.cb-price-section-label { max-width: 900px; margin: 56px auto 20px auto; padding: 0 8px; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--turquoise-dark); }

.cb-packs-grid { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; }
.cb-pack-card { flex: 1 1 300px; max-width: 340px; background: #fff; border: 1.5px solid rgba(35,48,72,0.08); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; box-shadow: var(--shadow-card); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.cb-pack-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.cb-pack-card.featured { border-color: var(--turquoise-dark); box-shadow: 0 12px 28px rgba(80,221,196,0.18); }
.cb-pack-card.featured:hover { box-shadow: 0 20px 40px rgba(80,221,196,0.28); }
.cb-pack-badge { display: inline-block; background: var(--green-100); color: var(--turquoise-dark); font-size: 0.72rem; font-weight: 800; padding: 5px 14px; border-radius: 50px; margin-bottom: 14px; align-self: flex-start; }
.cb-pack-badge.violet { background: var(--violet-100); color: var(--violet-700); }
.cb-pack-card h3 { font-size: 1.15rem; font-weight: 800; margin-bottom: 8px; }
.cb-pack-price-row { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.cb-pack-price { font-size: 1.8rem; font-weight: 800; }
.cb-pack-savings-badge {
  display: inline-flex; align-items: center; background: var(--turquoise); color: var(--marine);
  font-size: 0.78rem; font-weight: 800; padding: 4px 10px; border-radius: 999px;
  box-shadow: 0 4px 10px rgba(80,221,196,0.35);
}
.cb-pack-price-note { font-size: 0.8rem; color: var(--slate); margin-bottom: 18px; }
.cb-pack-list { list-style: none; margin-bottom: 22px; flex-grow: 1; }
.cb-pack-list li { position: relative; padding-left: 24px; margin-bottom: 8px; font-size: 0.9rem; color: var(--marine); }
.cb-pack-list li::before { content: '✓'; position: absolute; left: 0; color: var(--turquoise-dark); font-weight: 800; }
.cb-pack-cta { display: block; text-align: center; background: var(--marine); color: #fff; font-weight: 700; padding: 13px; border-radius: 50px; font-size: 0.92rem; }
.cb-pack-card.featured .cb-pack-cta { background: var(--turquoise-dark); }
.cb-pack-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-btn); }

.cb-family-band { max-width: 1000px; margin: 56px auto 0 auto; background: var(--marine); border-radius: 32px; padding: 40px; display: flex; gap: 32px; align-items: center; position: relative; overflow: hidden; }
.cb-family-mascot { width: 130px; flex-shrink: 0; filter: drop-shadow(0 12px 18px rgba(0,0,0,0.3)); }
.cb-family-content h3 { color: #fff; font-size: 1.3rem; font-weight: 800; margin-bottom: 10px; }
.cb-family-content p { color: rgba(255,255,255,0.82); font-size: 0.95rem; line-height: 1.6; margin-bottom: 16px; }
.cb-family-content a { display: inline-block; background: var(--turquoise); color: var(--marine); font-weight: 700; padding: 12px 26px; border-radius: 50px; font-size: 0.9rem; }
.cb-family-content a:hover { background: var(--turquoise-dark); transform: translateY(-2px); box-shadow: var(--shadow-btn); }

@media (max-width: 700px) {
  .cb-price-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .cb-family-band { flex-direction: column; text-align: center; padding: 32px 24px; }
}

/* --- Footer --- */
footer.cb-footer { background: var(--marine); color: #fff; padding: 72px 32px 32px 32px; }
.cb-footer-main { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }
.cb-footer-logo-img { height: 30px; width: auto; margin-bottom: 14px; }
.cb-footer-about { color: rgba(255,255,255,0.7); max-width: 280px; line-height: 1.6; margin-bottom: 18px; }
.cb-footer-socials { display: flex; gap: 10px; }
.cb-footer-socials a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; }
.cb-footer-socials a:hover { background: var(--turquoise); color: var(--marine); }
.cb-footer-col h4 { font-size: 0.95rem; font-weight: 700; margin-bottom: 16px; }
.cb-footer-col a { display: block; color: rgba(255,255,255,0.75); font-size: 0.92rem; margin-bottom: 10px; }
.cb-footer-col a:hover { color: var(--turquoise); }
.cb-footer-bottom { max-width: 1200px; margin: 0 auto; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 24px; color: rgba(255,255,255,0.6); font-size: 0.85rem; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; }
.cb-footer-legal { display: flex; gap: 16px; flex-wrap: wrap; }
.cb-footer-legal a { color: rgba(255,255,255,0.6); }
.cb-footer-legal a:hover { color: var(--turquoise); }

@media (max-width: 1080px) {
  .cb-nav-center, .cb-nav-right { display: none; }
  .cb-burger { display: flex; }
  .cb-hero { padding: 110px 20px 56px 20px; }
  .cb-hero.cb-hero-no-crumb { padding-top: 110px; }
  .cb-hero h1 { font-size: 2rem; }
  .cb-hero-mascot, .cb-mascot-float { display: none; }
  .cb-pillar, .cb-pillar.reverse { flex-direction: column; }
  .cb-pillars { padding: 52px 20px; gap: 48px; }
  .cb-footer-main { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .cb-footer-about { margin: 0 auto 18px auto; }
  .cb-footer-socials { justify-content: center; }
  .cb-footer-bottom { flex-direction: column; text-align: center; align-items: center; }
  .cb-footer-legal { justify-content: center; }
  .cb-content { padding: 110px 20px 56px 20px; }
  .cb-content.cb-content-no-crumb { padding-top: 110px; }
  .cb-jobs-stats { flex-wrap: wrap; }
  .cb-jobs-toolbar { align-items: stretch; }
  .cb-jobs-filters { flex-direction: column; align-items: stretch; width: 100%; }
  .cb-jobs-toolbar .count { margin-left: 0; }
  .cb-job-card { flex-direction: column; align-items: flex-start; }
  .cb-job-main { padding-right: 0; }
  .cb-job-save { top: 20px; right: 20px; }
  .cb-job-apply { width: 100%; text-align: center; }
}

/* --- Jobboard dashboard (/emplois/, données Teamtailor API) --- */
.cb-jobs-stats { max-width: 1000px; margin: -40px auto 48px auto; padding: 0 32px; position: relative; z-index: 3; display: flex; gap: 20px; }
.cb-jobs-stat { flex: 1; background: #fff; border-radius: 24px; border: 1px solid rgba(35,48,72,0.08); box-shadow: 0 12px 28px rgba(35,48,72,0.08); padding: 24px 20px; text-align: center; }
.cb-jobs-stat .n { font-size: 2rem; font-weight: 800; color: var(--turquoise-dark); line-height: 1; margin-bottom: 6px; }
.cb-jobs-stat .l { font-size: 0.85rem; color: var(--slate); font-weight: 600; }

.cb-jobs-explainer { max-width: 900px; margin: 0 auto 56px auto; padding: 0 32px; }
.cb-jobs-explainer h2 { font-size: 1.5rem; font-weight: 800; margin: 40px 0 14px 0; }
.cb-jobs-explainer h2:first-child { margin-top: 0; }
.cb-jobs-explainer p { color: var(--slate); line-height: 1.75; margin-bottom: 14px; }

/* --- Cartes de fonctionnalités compactes (réutilisable) --- */
.cb-feature-grid { max-width: 1000px; margin: 0 auto 56px auto; padding: 0 32px; display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.cb-feature-card { flex: 1 1 260px; max-width: 320px; background: #fff; border: 1.5px solid rgba(35,48,72,0.08); border-radius: 24px; padding: 26px; box-shadow: var(--shadow-card); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.cb-feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.cb-feature-card.featured { border-color: var(--turquoise-dark); box-shadow: 0 12px 28px rgba(80,221,196,0.18); }
.cb-feature-card.featured:hover { box-shadow: 0 20px 40px rgba(80,221,196,0.28); }
.cb-feature-card .icon { font-size: 1.6rem; width: 48px; height: 48px; border-radius: 14px; background: var(--green-100); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.cb-feature-card h3 { font-size: 1.02rem; font-weight: 800; margin-bottom: 8px; }
.cb-feature-card p { color: var(--slate); font-size: 0.9rem; line-height: 1.6; margin: 0; }

.cb-jobs-toolbar { max-width: 1000px; margin: 0 auto 28px auto; padding: 0 32px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cb-jobs-search { position: relative; flex: 1 1 240px; }
.cb-jobs-search-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-size: 0.85rem; opacity: 0.6; }
.cb-jobs-empty { max-width: 640px; margin: 8px auto 32px; padding: 24px; text-align: center; border: 1.5px dashed rgba(35,48,72,0.2); border-radius: 18px; color: var(--marine); }
.cb-jobs-empty p { margin: 0 0 8px 0; }
.cb-jobs-empty-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.cb-jobs-empty-reset { background: none; border: 1.5px solid rgba(35,48,72,0.25); border-radius: 50px; padding: 10px 20px; font: inherit; font-weight: 700; color: var(--marine); cursor: pointer; }
.cb-jobs-empty-cta { background: var(--turquoise); color: var(--marine); font-weight: 700; padding: 10px 20px; border-radius: 50px; }
.cb-jobs-search input { width: 100%; padding: 12px 18px 12px 42px; border-radius: 50px; border: 1.5px solid rgba(35,48,72,0.15); font-family: inherit; font-size: 0.9rem; color: var(--marine); background: #fff; -webkit-appearance: none; appearance: none; }
.cb-jobs-search input:focus { outline: none; border-color: var(--turquoise-dark); }
.cb-jobs-filters { display: flex; gap: 12px; flex-wrap: wrap; }
.cb-jobs-filters select { padding: 12px 18px; border-radius: 50px; border: 1.5px solid rgba(35,48,72,0.15); font-family: inherit; font-size: 0.9rem; color: var(--marine); background: #fff; }
.cb-jobs-toolbar .count { font-size: 0.85rem; color: var(--slate); margin-left: auto; white-space: nowrap; }
.cb-jobs-chips { flex-basis: 100%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cb-jobs-chips-label { font-size: 0.8rem; color: var(--slate); font-weight: 600; }
.cb-jobs-chip { font-size: 0.8rem; font-weight: 600; padding: 6px 16px; border-radius: 50px; border: 1.5px solid rgba(35,48,72,0.12); background: #fff; color: var(--marine); }
.cb-jobs-chip:hover { border-color: var(--turquoise-dark); }
.cb-jobs-chip.active { background: var(--turquoise-dark); border-color: var(--turquoise-dark); color: #fff; }

.cb-jobs-grid { max-width: 1000px; margin: 0 auto; padding: 0 32px 56px 32px; display: flex; flex-direction: column; gap: 16px; }
.cb-job-card { position: relative; background: #fff; border: 1.5px solid rgba(35,48,72,0.08); border-radius: 24px; padding: 26px 30px; display: flex; align-items: center; justify-content: space-between; gap: 24px; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.cb-job-card:hover { border-color: var(--turquoise-dark); box-shadow: 0 14px 30px rgba(80,221,196,0.16); transform: translateY(-2px); }
.cb-job-save { position: absolute; top: 20px; right: 24px; width: 32px; height: 32px; border-radius: 50%; border: none; background: transparent; font-size: 1.2rem; color: rgba(35,48,72,0.35); cursor: pointer; line-height: 1; }
.cb-job-save:hover { color: var(--violet-500); }
.cb-job-save.active { color: var(--turquoise-dark); }
.cb-job-main { padding-right: 30px; }
.cb-job-company { font-size: 0.78rem; font-weight: 700; color: var(--violet-700); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 6px; }
.cb-job-title { font-weight: 700; font-size: 1.1rem; margin-bottom: 8px; }
.cb-job-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.cb-job-tag { font-size: 0.75rem; font-weight: 700; padding: 5px 14px; border-radius: 50px; background: var(--green-100); color: var(--turquoise-dark); }
.cb-job-tag.violet { background: var(--violet-100); color: var(--violet-700); }
.cb-job-pitch { font-size: 0.9rem; color: var(--slate); line-height: 1.6; max-width: 560px; }
.cb-job-posted { font-size: 0.78rem; color: var(--slate); opacity: 0.75; margin-top: 8px; }
.cb-job-apply { flex-shrink: 0; background: var(--marine); color: #fff; font-weight: 700; font-size: 0.9rem; padding: 13px 28px; border-radius: 50px; white-space: nowrap; }
.cb-job-apply:hover { background: #1a2437; transform: translateY(-2px); box-shadow: var(--shadow-btn); }
.cb-jobs-empty { max-width: 560px; margin: 0 auto 56px auto; text-align: center; background: var(--green-100); border-radius: 24px; padding: 40px 32px; }
.cb-jobs-empty p { color: var(--marine); }

.cb-jobs-timeline { max-width: 1100px; margin: 0 auto 64px auto; padding: 0 32px; display: flex; gap: 20px; flex-wrap: wrap; counter-reset: cb-step; }
.cb-jobs-timeline-step { flex: 1 1 220px; position: relative; padding: 28px 22px; background: #fff; border: 1.5px solid rgba(35,48,72,0.08); border-radius: 24px; }
.cb-jobs-timeline-step .n { width: 36px; height: 36px; border-radius: 50%; background: var(--turquoise); color: var(--marine); font-weight: 800; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.cb-jobs-timeline-step h3 { font-size: 1.02rem; font-weight: 800; margin-bottom: 8px; }
.cb-jobs-timeline-step p { font-size: 0.88rem; color: var(--slate); line-height: 1.6; margin: 0; }
.cb-jobs-timeline-step:not(:last-child)::after { content: '→'; position: absolute; top: 42px; right: -24px; color: rgba(35,48,72,0.2); font-size: 1.2rem; display: none; }
@media (min-width: 900px) { .cb-jobs-timeline-step:not(:last-child)::after { display: block; } }
@media (max-width: 640px) { .cb-jobs-timeline { padding: 0 20px; } }

/* ============================================================
   Homepage — reconstruction fidèle de la maquette fournie
   ============================================================ */

@keyframes cb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes cb-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .cb-home-hero-mascot, .cb-testi-track { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

.cb-section-h2 { font-size: 2.4rem; font-weight: 800; color: var(--marine); text-align: center; margin: 0 0 10px 0; }
.cb-section-sub { font-size: 1.1rem; color: var(--slate); text-align: center; max-width: 560px; margin: 0 auto 40px auto; line-height: 1.6; }

/* --- Hero plein écran avec photo --- */
.cb-home-hero-section { position: relative; overflow: hidden; min-height: 92vh; display: flex; align-items: center; padding: 150px 24px 64px 24px; }
.cb-home-hero-bg { position: absolute; inset: 0; z-index: 0; }
.cb-home-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
/* Mascotte calée dans le ciel, à droite du titre : sous le menu, au-dessus de la tête de la photo (02/10/2026). Trop serrée sous 1200px. */
@media (max-width: 1199px) { .cb-home-hero-mascot { display: none; } }
.cb-home-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24,32,48,0.80) 0%, rgba(24,32,48,0.73) 45%, rgba(24,32,48,0.87) 100%); }
/* top en pixels fixes (pas en %) : la nav est en position:fixed donc sa
   hauteur ne suit jamais la vh du hero — un % ici repasse sous la nav dès que
   l'écran est moins haut ou plus large (cf. capture du 23/09/2026). 150px
   correspond au padding-top du hero (juste sous la nav), +20px de marge. */
.cb-home-hero-mascot { position: absolute; top: 128px; left: calc(50% + 380px); width: 130px; height: auto; z-index: 2; filter: drop-shadow(0 15px 25px rgba(0,0,0,0.35)); animation: cb-float 5s ease-in-out infinite; pointer-events: none; }
.cb-home-hero-content { position: relative; z-index: 3; max-width: 760px; margin: 0 auto; padding: 0 24px; text-align: center; }
.cb-home-hero-content h1 { font-size: 3.4rem; font-weight: 800; line-height: 1.15; color: #fff; margin: 0 0 20px 0; }
.cb-home-hero-content p { font-size: 1.2rem; line-height: 1.7; color: rgba(255,255,255,0.92); max-width: 620px; margin: 0 auto 28px auto; }
.cb-home-cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; }
.cb-home-btn-primary { background: var(--turquoise); color: var(--marine); font-weight: 700; font-size: 1.02rem; padding: 15px 32px; border-radius: 50px; box-shadow: 0 12px 28px rgba(80,221,196,0.35); display: inline-block; }
.cb-home-btn-primary:hover { background: var(--turquoise-dark); }
.cb-home-btn-secondary { background: transparent; color: #fff; font-weight: 600; font-size: 1.02rem; padding: 15px 32px; border-radius: 50px; border: 1.5px solid rgba(255,255,255,0.6); display: inline-block; }
.cb-home-btn-secondary:hover { background: rgba(255,255,255,0.15); }
.cb-home-trust-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.35); backdrop-filter: blur(8px); color: #fff; padding: 9px 20px; border-radius: 50px; font-size: 0.88rem; }
.cb-home-trust-badge strong { font-weight: 700; }
.cb-home-trust-badge .stars { color: var(--turquoise); letter-spacing: 1px; }

/* --- Vidéo --- */
.cb-video-section { background: var(--violet-100); padding: 96px 32px; position: relative; overflow: hidden; }
.cb-video-section::before, .cb-video-section::after { content: ''; position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; }
.cb-video-section::before { width: 380px; height: 380px; background: rgba(80,221,196,0.28); top: -140px; left: -110px; }
.cb-video-section::after { width: 320px; height: 320px; background: rgba(129,94,229,0.2); bottom: -110px; right: -90px; }
.cb-video-container { max-width: 900px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.cb-video-card { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 32px; overflow: hidden; box-shadow: 0 30px 60px rgba(35,48,72,0.25); background: var(--marine); }
.cb-video-card video { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--marine); }
.cb-video-play-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(35,48,72,0.15); cursor: pointer; }
.cb-video-play-overlay.hidden { display: none; }
.cb-video-play-btn { width: 84px; height: 84px; border-radius: 50%; background: var(--turquoise); display: flex; align-items: center; justify-content: center; box-shadow: 0 15px 35px rgba(0,0,0,0.35); }
.cb-video-play-triangle { width: 0; height: 0; border-top: 13px solid transparent; border-bottom: 13px solid transparent; border-left: 20px solid var(--marine); margin-left: 4px; }
.cb-video-cta { display: inline-block; margin-top: 28px; background: var(--turquoise); color: var(--marine); font-weight: 700; font-size: 1.02rem; padding: 15px 32px; border-radius: 50px; box-shadow: 0 12px 28px rgba(80,221,196,0.35); }
.cb-video-cta:hover { background: var(--turquoise-dark); transform: translateY(-2px); box-shadow: 0 16px 34px rgba(80,221,196,0.42); }

/* --- Stats --- */
.cb-home-stats-section { background: #fff; padding: 56px 32px; }
.cb-home-stats-grid { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: center; }
.cb-home-stats-grid .n { font-size: 2.6rem; font-weight: 900; color: var(--turquoise-dark); line-height: 1; }
.cb-home-stats-grid .l { font-size: 0.95rem; font-weight: 600; color: var(--marine); margin-top: 6px; }
.cb-home-stats-grid.cb-stats-3col { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .cb-home-stats-grid.cb-stats-3col { grid-template-columns: minmax(0, 1fr); gap: 20px; } }

/* --- Destinations --- */
.cb-home-dest-section { background: var(--green-100); padding: 88px 32px; position: relative; overflow: hidden; }
.cb-home-dest-section::before { content: ''; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: rgba(80,221,196,0.22); filter: blur(80px); top: -160px; right: -130px; pointer-events: none; z-index: 0; }
.cb-home-dest-container { max-width: 1000px; margin: 0 auto; position: relative; z-index: 1; }
.cb-home-dest-grid { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; }
.cb-home-dest-card { background: #fff; border-radius: 32px; overflow: hidden; flex: 1 1 320px; min-width: 260px; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.cb-home-dest-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.cb-home-dest-photo { height: 180px; overflow: hidden; }
.cb-home-dest-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.cb-home-dest-card:hover .cb-home-dest-photo img { transform: scale(1.06); }
.cb-home-dest-body { padding: 32px 40px 40px; }
/* Pastilles drapeau (02/10/2026) : vrais drapeaux simplifiés dans un rond
   cerclé de blanc, à cheval sur la photo — remplacent les ronds « ES/PT ». */
.cb-home-dest-body { position: relative; }
.cb-home-dest-flag { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; margin: -74px 0 18px 0; border: 4px solid #fff; background: #fff; box-shadow: 0 10px 24px rgba(35,48,72,0.22); position: relative; transition: transform 0.25s ease; }
.cb-home-dest-flag svg { display: block; width: 100%; height: 100%; }
.cb-home-dest-flag::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(35,48,72,0.08), inset 0 -10px 18px rgba(0,0,0,0.10); pointer-events: none; }
.cb-home-dest-card:hover .cb-home-dest-flag { transform: translateY(-3px) rotate(-4deg); }
.cb-home-dest-card h3 { font-size: 1.5rem; font-weight: 800; color: var(--marine); margin: 0 0 10px 0; }
.cb-home-dest-card p { color: var(--slate); line-height: 1.6; margin: 0 0 16px 0; }
.cb-home-dest-card a { display: inline-flex; gap: 8px; color: var(--marine); font-weight: 700; }

/* --- Services --- */
.cb-home-services-section { background: #fff; padding: 88px 32px; }
.cb-home-services-container { max-width: 1100px; margin: 0 auto; }
.cb-home-services-grid { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; margin-bottom: 40px; }
.cb-home-svc-card { background: #f8fafc; border-radius: 32px; padding: 32px 28px; flex: 1 1 300px; min-width: 260px; border: 1.5px solid transparent; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.cb-home-svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.cb-home-svc-card.featured { border-color: var(--turquoise-dark); background: #fff; box-shadow: 0 12px 28px rgba(80,221,196,0.18); }
.cb-home-svc-card.featured:hover { box-shadow: 0 20px 40px rgba(80,221,196,0.28); }
.cb-home-svc-visual { position: relative; border-radius: 22px; height: 150px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; overflow: visible; }
.cb-home-svc-visual.green { background: var(--green-100); }
.cb-home-svc-visual.violet { background: var(--violet-300); }
.cb-home-svc-visual.green2 { background: var(--green-300); }
.cb-home-svc-visual img.mascot { position: absolute; right: 2px; bottom: -18px; height: 128px; width: auto; object-fit: contain; z-index: 2; filter: drop-shadow(0 10px 16px rgba(35,48,72,0.25)); }
.cb-home-svc-card h3 { font-size: 1.3rem; font-weight: 800; color: var(--marine); margin: 0 0 10px 0; }
.cb-home-svc-card p { color: var(--slate); line-height: 1.65; font-size: 0.95rem; margin: 0 0 14px 0; }
.cb-home-svc-card a { display: inline-flex; gap: 8px; color: var(--marine); font-weight: 700; font-size: 0.95rem; }
.cb-home-offer-block { background: var(--marine); border-radius: 40px; display: flex; align-items: center; gap: 32px; padding: 48px; overflow: hidden; }
.cb-home-offer-text { flex: 1 1 320px; }
.cb-home-offer-block h3 { color: #fff; font-size: 2rem; font-weight: 800; margin: 0 0 12px 0; }
.cb-home-offer-block p { color: rgba(255,255,255,0.8); line-height: 1.6; margin: 0 0 22px 0; }
.cb-home-offer-block a { display: inline-block; background: var(--turquoise); color: var(--marine); font-weight: 700; padding: 14px 28px; border-radius: 50px; }
.cb-home-offer-block a:hover { background: var(--turquoise-dark); transform: translateY(-2px); box-shadow: var(--shadow-btn); }
.cb-home-offer-visual { flex: 1 1 320px; min-height: 220px; border-radius: 20px; overflow: hidden; }
.cb-home-offer-visual img { width: 100%; height: 100%; object-fit: cover; }
/* Variante "aperçu produit" (capture d'écran du flow) : contrairement à une
   photo, une capture d'interface a besoin de respirer sur un fond clair
   plutôt que de remplir le cadre en object-fit:cover (texte coupé,
   proportions faussées). */
.cb-home-offer-visual.cb-home-offer-visual-screenshot {
  position: relative; background: linear-gradient(135deg, var(--green-300), var(--green-100));
  display: flex; align-items: center; justify-content: center; padding: 28px; overflow: visible;
}
.cb-home-offer-visual-screenshot::before, .cb-home-offer-visual-screenshot::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(50px); pointer-events: none;
}
.cb-home-offer-visual-screenshot::before { width: 200px; height: 200px; background: var(--turquoise); opacity: 0.3; top: -50px; left: -40px; }
.cb-home-offer-visual-screenshot::after { width: 220px; height: 220px; background: var(--violet-500); opacity: 0.2; bottom: -60px; right: -30px; }
.cb-home-offer-visual-screenshot img {
  /* Même traitement que .cb-showcase-visual img (pages/entreprises.php,
     agents-immobiliers.php, programme-affiliation.php) — homogénéisé le
     11/09/2026 (audit design) : ce bloc utilisait jusque-là une rotation
     opposée (+1.5deg) et une ombre noire pure, ce qui créait un motif
     visuel "à l'envers" en scrollant de la home vers ces pages. */
  position: relative; z-index: 1; width: 100%; height: auto; object-fit: contain; border-radius: 18px;
  transform: rotate(-1.5deg); box-shadow: 0 30px 60px -12px rgba(35,48,72,0.28), 0 12px 24px -8px rgba(35,48,72,0.18);
}
.cb-home-offer-visual img.cb-home-offer-mascot { position: absolute; bottom: -22px; right: -20px; width: 84px; height: auto; transform: none; object-fit: contain; z-index: 2; filter: drop-shadow(0 12px 16px rgba(35,48,72,0.2)); box-shadow: none; }

/* --- Comment ça marche --- */
.cb-home-process-section { background: var(--green-100); padding: 88px 32px; }
.cb-home-process-container { max-width: 1100px; margin: 0 auto; }
.cb-home-process-grid { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
.cb-process-card { position: relative; background: rgba(255,255,255,0.75); border: 1px solid rgba(80,221,196,0.25); border-radius: 28px; padding: 36px 28px; flex: 1 1 300px; min-width: 260px; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; }
.cb-process-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); background: #fff; }
.cb-process-num { position: absolute; top: 10px; right: 20px; font-size: 4.5rem; font-weight: 900; color: rgba(80,221,196,0.18); line-height: 1; }
.cb-process-icon { width: 64px; height: 64px; border-radius: 18px; background: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; position: relative; z-index: 1; box-shadow: 0 8px 20px rgba(35,48,72,0.08); }
.cb-process-card h3 { font-size: 1.4rem; font-weight: 800; color: var(--marine); margin: 0 0 10px 0; position: relative; z-index: 1; }
.cb-process-card p { color: var(--slate); line-height: 1.65; font-size: 0.95rem; position: relative; z-index: 1; margin: 0; }
.cb-home-process-cta-wrap { text-align: center; margin-top: 36px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.cb-home-process-cta-wrap img { height: 90px; width: auto; object-fit: contain; filter: drop-shadow(0 14px 20px rgba(35,48,72,0.2)); }

/* --- Tarifs teaser --- */
.cb-home-pricing-section { background: #fff; padding: 88px 32px; }
.cb-home-pricing-container { max-width: 1000px; margin: 0 auto; }
.cb-home-pricing-grid { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
.cb-home-price-card { background: #fff; border-radius: 28px; padding: 32px 28px; flex: 1 1 280px; min-width: 240px; text-align: center; border: 1px solid rgba(35,48,72,0.08); box-shadow: var(--shadow-card); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.cb-home-price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.cb-home-price-tag { display: inline-block; background: var(--green-100); color: var(--turquoise-dark); font-weight: 800; font-size: 0.95rem; padding: 8px 18px; border-radius: 50px; margin-bottom: 16px; }
.cb-home-price-card h3 { font-size: 1.25rem; font-weight: 800; color: var(--marine); margin: 0 0 10px 0; }
.cb-home-price-card p { color: var(--slate); line-height: 1.6; font-size: 0.92rem; margin: 0; }
.cb-home-pricing-cta-wrap { text-align: center; margin-top: 32px; }
.cb-home-pricing-cta-wrap a { display: inline-block; background: transparent; color: var(--marine); font-weight: 700; padding: 13px 28px; border-radius: 50px; border: 2px solid var(--marine); }
.cb-home-pricing-cta-wrap a:hover { background: var(--marine); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-btn); }

/* --- Pourquoi nous choisir --- */
.cb-home-why-section { background: var(--violet-100); padding: 88px 32px; }
.cb-home-why-container { max-width: 1100px; margin: 0 auto; }
.cb-why2-list { display: flex; flex-direction: column; gap: 28px; margin-top: 40px; }
.cb-why2-card { position: sticky; top: 100px; }
.cb-why2-list .cb-why2-card:nth-child(1) { z-index: 1; }
.cb-why2-list .cb-why2-card:nth-child(2) { z-index: 2; }
.cb-why2-list .cb-why2-card:nth-child(3) { z-index: 3; }
.cb-why2-list .cb-why2-card:nth-child(4) { z-index: 4; }
.cb-why2-list .cb-why2-card:nth-child(5) { z-index: 5; }
.cb-why2-list .cb-why2-card:nth-child(6) { z-index: 6; }
.cb-why2-card { display: flex; align-items: stretch; border-radius: 40px; overflow: hidden; min-height: 340px; }
.cb-why2-card.reverse { flex-direction: row-reverse; }
.cb-why2-image { flex: 1 1 45%; background-size: cover; background-position: center; }
.cb-why2-content { flex: 1 1 55%; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 48px; }
.cb-why2-icon { width: 64px; height: 64px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; box-shadow: 0 10px 20px rgba(35,48,72,0.1); }
.cb-why2-content h3 { font-size: 1.4rem; font-weight: 800; color: var(--marine); margin: 0; }
.cb-why2-content p { color: var(--slate); line-height: 1.6; font-size: 0.98rem; margin: 0; }
.cb-why2-blue { background: #E0F2FE; }
.cb-why2-mint { background: #F0FDF4; }
.cb-why2-peach { background: #FFF7ED; }
.cb-why2-orchid { background: #FDF4FF; }
.cb-why2-rose { background: #FFF1F2; }
.cb-why2-lilac { background: #F5F3FF; }
@media (max-width: 760px) {
  .cb-why2-card, .cb-why2-card.reverse { flex-direction: column; min-height: 0; position: static; }
  .cb-why2-image { min-height: 220px; }
  .cb-why2-content { padding: 32px 28px; }
}

/* --- Avis clients (marquee) --- */
.cb-testi-section { background: #fff; padding: 88px 0; }
.cb-testi-container { max-width: 1000px; margin: 0 auto; padding: 0 20px; }
.cb-testi-scroller { max-width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.cb-testi-track { display: flex; gap: 20px; width: max-content; animation: cb-scroll 70s linear infinite; }
.cb-testi-card { width: 320px; flex-shrink: 0; background: var(--green-100); border-radius: 24px; padding: 26px; box-shadow: var(--shadow-card); }
.cb-testi-card .stars { color: #ffc94a; font-size: 1.1rem; margin-bottom: 10px; }
.cb-testi-card p { color: var(--marine); line-height: 1.65; font-size: 0.92rem; margin: 0 0 14px 0; }
.cb-testi-card .author { font-weight: 700; color: var(--turquoise-dark); }

/* --- Experts disponibles --- */
.cb-expert-section { background: #fff; padding: 60px 32px; }
.cb-expert-card { max-width: 1100px; margin: 0 auto; background: var(--marine); border-radius: 64px; padding: 56px 64px; display: flex; align-items: center; gap: 48px; position: relative; overflow: hidden; }
.cb-expert-mascot-wrap { position: relative; flex: 0 0 auto; width: 280px; height: 280px; }
.cb-expert-mascot-wrap img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 20px 30px rgba(0,0,0,0.35)); }
.cb-expert-tag { position: absolute; font-weight: 700; font-size: 0.8rem; padding: 8px 16px; border-radius: 50px; box-shadow: 0 8px 18px rgba(0,0,0,0.2); white-space: nowrap; }
.cb-expert-tag.t1 { top: 4%; left: -8%; background: var(--turquoise); color: var(--marine); }
.cb-expert-tag.t2 { top: 20%; right: -14%; background: var(--violet-300); color: var(--marine); }
.cb-expert-tag.t3 { bottom: 18%; left: -14%; background: var(--green-300); color: var(--marine); }
.cb-expert-tag.t4 { bottom: 2%; right: -6%; background: #fff; color: var(--marine); }
.cb-expert-text { flex: 1 1 320px; }
.cb-expert-text h2 { color: #fff; font-size: 2.1rem; font-weight: 800; margin: 0 0 16px 0; }
.cb-expert-text p { color: rgba(255,255,255,0.85); line-height: 1.7; font-size: 1.02rem; margin: 0 0 8px 0; }

/* --- Espace recruteur --- */
.cb-recruiter-section { background: linear-gradient(135deg, var(--violet-700) 0%, var(--violet-500) 100%); padding: 88px 32px; }
.cb-recruiter-container { max-width: 760px; margin: 0 auto; text-align: center; }
.cb-recruiter-container h2 { color: #fff; font-size: 2.2rem; font-weight: 800; margin: 0 0 16px 0; }
.cb-recruiter-container p { color: rgba(255,255,255,0.88); line-height: 1.7; margin: 0 0 28px 0; font-size: 1.05rem; }
.cb-recruiter-container a { display: inline-block; background: rgba(255,255,255,0.15); border: 1.5px solid rgba(255,255,255,0.5); color: #fff; font-weight: 700; padding: 14px 30px; border-radius: 50px; }
.cb-recruiter-container a:hover { background: #fff; color: var(--violet-700); transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0,0,0,0.25); }

/* --- FAQ homepage --- */
.cb-home-faq-section { background: var(--green-100); padding: 88px 32px; position: relative; overflow: hidden; }
.cb-home-faq-section::before { content: ''; position: absolute; width: 360px; height: 360px; border-radius: 50%; background: rgba(129,94,229,0.14); filter: blur(70px); bottom: -130px; left: -110px; pointer-events: none; z-index: 0; }
.cb-home-faq-container { max-width: 760px; margin: 0 auto; position: relative; z-index: 1; }
.cb-home-faq-heading { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 32px; }
.cb-home-faq-accent { width: 76px; height: 76px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 50%; }
.cb-home-faq-accent img { height: 64px; width: auto; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(35,48,72,0.2)); }
.cb-home-faq-text h2 { font-size: 2.4rem; font-weight: 800; color: var(--marine); margin: 0 0 6px 0; text-align: right; }
.cb-home-faq-text p { font-size: 1.1rem; color: var(--slate); margin: 0; text-align: right; }
.cb-home-faq-container .cb-faq details { background: #fff; border-radius: 20px; border: 1px solid rgba(35,48,72,0.06); padding: 22px 26px; }
.cb-home-faq-container .cb-faq summary { font-size: 1.05rem; }

/* --- CTA finale --- */
.cb-home-final-cta { background: var(--marine); padding: 88px 32px; }
.cb-home-final-cta-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 40px; }
.cb-home-final-cta-text { flex: 1 1 400px; }
.cb-home-final-cta-text h2 { color: #fff; font-size: 2.4rem; font-weight: 800; margin: 0 0 14px 0; }
.cb-home-final-cta-text p { color: rgba(255,255,255,0.82); line-height: 1.6; font-size: 1.05rem; margin: 0 0 26px 0; }
.cb-home-final-cta-text a { display: inline-block; background: #fff; color: var(--marine); font-weight: 700; padding: 15px 32px; border-radius: 50px; }
.cb-home-final-cta-text a:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0,0,0,0.3); }
.cb-home-final-cta-visual { flex: 1 1 320px; min-height: 240px; border-radius: 24px; overflow: hidden; }
.cb-home-final-cta-visual img { width: 100%; height: 100%; object-fit: cover; }

/* --- Contact form (homepage) --- */
.cb-home-contact-section { background: #fff; padding: 88px 32px; }
.cb-home-contact-container { max-width: 700px; margin: 0 auto; }
.cb-home-form { margin-top: 20px; display: flex; flex-direction: column; gap: 18px; }
.cb-home-form-row { display: flex; gap: 16px; flex-wrap: wrap; }
.cb-home-form-group { flex: 1 1 220px; display: flex; flex-direction: column; gap: 6px; }
.cb-home-form-group label { font-size: 0.9rem; font-weight: 600; color: var(--marine); }
.cb-home-form input, .cb-home-form textarea { padding: 13px 16px; border-radius: 14px; border: 1.5px solid rgba(35,48,72,0.15); font-size: 0.98rem; font-family: inherit; width: 100%; }
.cb-home-form-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 0.85rem; color: var(--slate); line-height: 1.5; }
.cb-home-form-consent input { margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; }
.cb-home-form-consent a { color: var(--turquoise-dark); font-weight: 600; }
.cb-home-form button { background: var(--turquoise); color: var(--marine); font-weight: 700; padding: 16px; border-radius: 50px; border: none; font-size: 1.02rem; cursor: pointer; font-family: inherit; box-shadow: 0 10px 24px rgba(80,221,196,0.28); }
.cb-home-form button:hover { background: var(--turquoise-dark); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(80,221,196,0.36); }

@media (max-width: 1080px) {
  .cb-home-hero-section { padding: 110px 20px 48px 20px; min-height: auto; }
  .cb-home-hero-mascot { display: none; }
  .cb-home-hero-content h1 { font-size: 2.1rem; }
  .cb-home-hero-content p { font-size: 1.02rem; }
  .cb-section-h2 { font-size: 1.7rem; }
  .cb-video-section, .cb-home-dest-section, .cb-home-services-section, .cb-home-process-section,
  .cb-home-pricing-section, .cb-home-why-section, .cb-expert-section, .cb-recruiter-section,
  .cb-home-faq-section, .cb-home-final-cta, .cb-home-contact-section { padding: 52px 20px; }
  .cb-home-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .cb-home-offer-block, .cb-home-final-cta-inner { flex-direction: column; }
  .cb-expert-card { flex-direction: column; padding: 40px 24px; border-radius: 32px; text-align: center; }
  .cb-expert-mascot-wrap { width: 200px; height: 200px; }
  .cb-expert-tag { display: none; }
  .cb-home-faq-heading { flex-direction: column; }
  .cb-home-faq-accent { order: -1; }
  .cb-home-faq-text h2, .cb-home-faq-text p { text-align: center; }
}

/* --- Blog : liste et article --- */
.cb-blog-filters { display: flex; flex-direction: column; gap: 14px; margin-bottom: 36px; padding: 20px 24px; background: var(--green-100); border-radius: 20px; }
.cb-blog-filter-group { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cb-blog-filter-label { font-size: 0.8rem; font-weight: 700; color: var(--marine); flex-shrink: 0; width: 60px; }
.cb-blog-filter-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.cb-blog-filter-pill { background: #fff; border: 1.5px solid transparent; border-radius: 50px; padding: 7px 16px; font-size: 0.82rem; font-weight: 600; color: var(--slate); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.cb-blog-filter-pill:hover { border-color: var(--turquoise); }
.cb-blog-filter-pill.active { background: var(--turquoise-dark); color: #fff; }
.cb-blog-filter-empty { text-align: center; color: var(--slate); padding: 40px 20px; }
@media (max-width: 640px) {
  .cb-blog-filter-group { flex-direction: column; align-items: flex-start; gap: 8px; }
  .cb-blog-filter-label { width: auto; }
}

.cb-blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px; }
.cb-blog-card { display: block; background: #fff; border: 1px solid rgba(35,48,72,0.08); border-radius: 24px; overflow: hidden; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.cb-blog-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(35,48,72,0.1); }
.cb-blog-card-photo { height: 180px; overflow: hidden; }
.cb-blog-card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.cb-blog-card:hover .cb-blog-card-photo img { transform: scale(1.06); }
.cb-blog-card-body { padding: 20px 22px 24px; }
.cb-blog-card-cat { display: inline-block; background: var(--green-100); color: var(--turquoise-dark); font-weight: 700; font-size: 0.72rem; padding: 4px 12px; border-radius: 50px; margin: 0 4px 10px 0; }
.cb-blog-card-body h2, .cb-blog-card-body h3 { font-size: 1.1rem; font-weight: 800; color: var(--marine); margin: 0 0 8px 0; }
.cb-blog-card-body p { color: var(--slate); font-size: 0.9rem; line-height: 1.6; margin: 0; }
.cb-blog-card-meta { font-size: 0.78rem !important; color: var(--slate); opacity: 0.75; margin-top: 10px !important; }

.cb-blog-article-cat { display: inline-block; background: rgba(255,255,255,0.12); color: #fff; font-weight: 700; font-size: 0.75rem; padding: 5px 14px; border-radius: 50px; margin: 0 6px 16px 0; }
.cb-blog-article-meta { color: rgba(255,255,255,0.7); font-size: 0.9rem; }

/* --- Annuaire des professionnels --- */
.cb-annuaire-toolbar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 32px;
  background: var(--green-100); padding: 14px; border-radius: 24px;
}
.cb-annuaire-search-wrap { position: relative; flex: 2 1 260px; }
.cb-annuaire-search-icon { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); font-size: 0.95rem; opacity: 0.6; pointer-events: none; display: flex; align-items: center; }
.cb-annuaire-search-icon svg { width: 16px; height: 16px; color: var(--marine); }
.cb-annuaire-search-input {
  width: 100%; padding: 14px 20px 14px 46px; border: none; border-radius: 50px;
  font-size: 0.95rem; font-family: inherit; background: #fff; box-shadow: 0 1px 2px rgba(35,48,72,0.06);
}
.cb-annuaire-search-input:focus { outline: none; box-shadow: 0 0 0 2px var(--turquoise); }
.cb-annuaire-select-wrap { flex: 1 1 180px; }
.cb-annuaire-select {
  width: 100%; padding: 14px 20px; border: none; border-radius: 50px; background: #fff;
  font-size: 0.9rem; font-weight: 600; color: var(--marine); font-family: inherit; cursor: pointer;
  box-shadow: 0 1px 2px rgba(35,48,72,0.06); appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23233048' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center;
}
.cb-annuaire-select:focus { outline: none; box-shadow: 0 0 0 2px var(--turquoise); }

/* Habillage JS (colybry.js) du <select> ci-dessus en menu déroulant stylé
   Colybry plutôt que le menu natif du système — le <select> réel reste
   présent (masqué) pour garder intact le JS de filtrage existant. */
.cb-custom-select { position: relative; width: 100%; }
.cb-custom-select-native { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.cb-custom-select-trigger {
  width: 100%; padding: 14px 20px; border: none; border-radius: 50px; background: #fff;
  font-size: 0.9rem; font-weight: 600; color: var(--marine); font-family: inherit; cursor: pointer;
  box-shadow: 0 1px 2px rgba(35,48,72,0.06); display: flex; align-items: center; justify-content: space-between; gap: 10px;
  text-align: left;
}
.cb-custom-select-trigger svg { flex-shrink: 0; color: var(--marine); transition: transform 0.15s ease; }
.cb-custom-select.open .cb-custom-select-trigger svg { transform: rotate(180deg); }
.cb-custom-select.open .cb-custom-select-trigger { box-shadow: 0 0 0 2px var(--turquoise); }
.cb-custom-select-panel {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40;
  background: #fff; border-radius: 20px; box-shadow: 0 18px 40px rgba(35,48,72,0.16);
  padding: 8px; display: flex; flex-direction: column; gap: 2px; max-height: 280px; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.cb-custom-select.open .cb-custom-select-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.cb-custom-select-option {
  border: none; background: none; text-align: left; padding: 10px 14px; border-radius: 12px;
  font-size: 0.9rem; font-weight: 600; color: var(--marine); cursor: pointer; font-family: inherit;
}
.cb-custom-select-option:hover { background: var(--green-100); color: var(--turquoise-dark); }
.cb-custom-select-option.selected { background: var(--green-100); color: var(--turquoise-dark); }
.cb-annuaire-reset {
  flex: 0 0 auto; background: #fff; border: none; border-radius: 50px; padding: 12px 18px;
  font-size: 0.85rem; font-weight: 700; color: var(--danger, #e0455a); cursor: pointer;
  display: inline-flex; align-items: center; box-shadow: 0 1px 2px rgba(35,48,72,0.06);
}
.cb-annuaire-reset:hover { background: var(--danger, #e0455a); color: #fff; }
@media (max-width: 640px) {
  .cb-annuaire-toolbar { border-radius: 20px; }
  .cb-annuaire-search-wrap, .cb-annuaire-select-wrap, .cb-annuaire-reset { flex: 1 1 100%; }
}
.cb-annuaire-empty { text-align: center; color: var(--slate); padding: 48px 20px; line-height: 1.7; }
.cb-annuaire-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.cb-annuaire-card { display: block; background: #fff; border: 1px solid rgba(35,48,72,0.08); border-radius: 24px; overflow: hidden; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.cb-annuaire-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(35,48,72,0.1); }
.cb-annuaire-card-logo { width: 100%; height: 140px; object-fit: cover; background: var(--bg, #f6f8fb); }
.cb-annuaire-card-logo-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--green-100), var(--violet-100));
  color: var(--turquoise-dark); font-size: 2.4rem; font-weight: 800;
}
.cb-annuaire-card-body { padding: 20px 22px 24px; }
.cb-annuaire-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cb-annuaire-card-tag { display: inline-block; background: var(--green-100); color: var(--turquoise-dark); font-weight: 700; font-size: 0.7rem; padding: 4px 12px; border-radius: 50px; }
.cb-annuaire-card-tag.ville { background: var(--violet-100); color: var(--violet-700); }
.cb-annuaire-card-tag.francophone { background: var(--marine); color: #fff; }
.cb-annuaire-card-body h3 { font-size: 1.1rem; font-weight: 800; color: var(--marine); margin: 0 0 6px 0; }
.cb-annuaire-card-desc { color: var(--slate); font-size: 0.88rem; line-height: 1.6; margin: 0; }
.cb-annuaire-card-date { color: var(--slate); font-size: 0.76rem; opacity: 0.75; margin: 10px 0 0 0; }

/* --- Fiche détail d'un professionnel --- */
.cb-annuaire-detail-wrap { padding-bottom: 40px; }
.cb-annuaire-detail-body p { color: #384456; font-size: 1.02rem; line-height: 1.8; margin-bottom: 20px; }
.cb-annuaire-detail-info { background: var(--green-100); border-radius: 20px; padding: 24px 28px; margin: 24px 0; display: flex; flex-direction: column; gap: 12px; }
.cb-annuaire-detail-row { display: flex; gap: 8px; flex-wrap: wrap; font-size: 0.95rem; }
.cb-annuaire-detail-row strong { color: var(--marine); min-width: 140px; flex-shrink: 0; }
.cb-annuaire-detail-row span { color: var(--slate); }
.cb-annuaire-detail-contact { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.cb-annuaire-detail-contact .cb-blog-cta-btn { margin: 0; }

/* --- Fond de la page article : dégradé pastel qui s'efface vers le blanc,
   plus frais qu'un simple aplat blanc derrière un long article --- */
.cb-blog-article-wrap { background: linear-gradient(180deg, var(--green-100) 0%, rgba(233,251,248,0) 480px); padding-bottom: 8px; }

/* --- Corps de l'article : carte blanche flottante avec ombre douce,
   typographie éditoriale (chapô, sous-titres accentués, listes à puces
   colorées, citations en encart) plutôt qu'un mur de texte gris uniforme --- */
.cb-blog-article-body {
  background: #fff; border-radius: 28px; box-shadow: 0 24px 60px -20px rgba(35,48,72,0.12);
  padding: 44px 48px !important;
}
.cb-blog-article-body h2 {
  font-size: 1.5rem; font-weight: 800; color: var(--marine); margin: 40px 0 16px 0;
  padding-left: 16px; border-left: 4px solid var(--turquoise); line-height: 1.3;
}
.cb-blog-article-body h2:first-child { margin-top: 0; }
.cb-blog-article-body h3 { font-size: 1.15rem; font-weight: 700; color: var(--violet-500); margin: 26px 0 10px 0; }
.cb-blog-article-body p, .cb-blog-article-body li { color: #384456; font-size: 1.02rem; line-height: 1.85; }
.cb-blog-article-body > p:first-of-type { font-size: 1.18rem; font-weight: 500; color: var(--marine); }
.cb-blog-article-body strong { color: var(--marine); font-weight: 800; }
.cb-blog-article-body ul, .cb-blog-article-body ol { margin: 4px 0 20px 0; padding-left: 4px; }
.cb-blog-article-body ul { list-style: none; }
.cb-blog-article-body ul li { position: relative; padding-left: 26px; margin-bottom: 10px; }
.cb-blog-article-body ul li::before {
  content: ''; position: absolute; left: 2px; top: 0.65em; width: 8px; height: 8px;
  border-radius: 50%; background: var(--turquoise);
}
.cb-blog-article-body ol { padding-left: 22px; }
.cb-blog-article-body ol li { margin-bottom: 10px; }
.cb-blog-article-body blockquote {
  background: var(--violet-100); border: none; border-radius: 20px; color: var(--marine);
  font-style: normal; font-weight: 600; font-size: 1.08rem; line-height: 1.6;
  padding: 24px 28px 24px 60px; margin: 28px 0; position: relative;
}
.cb-blog-article-body blockquote::before {
  content: '“'; position: absolute; left: 20px; top: 6px; font-size: 2.6rem; font-weight: 800;
  color: var(--violet-500); line-height: 1; font-family: Georgia, serif;
}
.cb-blog-article-body img { border-radius: 20px; margin: 28px 0; box-shadow: 0 16px 40px -16px rgba(35,48,72,0.2); }
@media (max-width: 640px) {
  .cb-blog-article-body { padding: 28px 22px !important; border-radius: 20px; }
  .cb-blog-article-body h2 { font-size: 1.25rem; }
}

/* --- Sommaire sticky à côté de l'article (guides longs, >= 3 sections) --- */
.cb-blog-article-layout { display: flex; align-items: flex-start; gap: 40px; max-width: 1020px; margin: 0 auto; padding: 32px 32px 0 32px; }
.cb-blog-article-layout .cb-blog-article-body { flex: 1; min-width: 0; max-width: 760px; }
.cb-blog-toc { position: sticky; top: 110px; width: 220px; flex-shrink: 0; background: #fff; border-radius: 20px; padding: 22px; box-shadow: 0 12px 32px -18px rgba(35,48,72,0.15); }
.cb-blog-toc-title { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--turquoise-dark); margin: 0 0 12px 0; }
.cb-blog-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.cb-blog-toc li { counter-increment: toc; margin-bottom: 10px; }
.cb-blog-toc a { display: flex; gap: 8px; font-size: 0.86rem; line-height: 1.4; color: var(--slate); }
.cb-blog-toc a::before { content: counter(toc); flex-shrink: 0; color: var(--turquoise-dark); font-weight: 800; }
.cb-blog-toc a:hover { color: var(--marine); }

/* Maillage interne contextuel (cb_blog_liens_contextuels) — encart avant "À lire aussi", demande explicite du 22/09/2026. */
.cb-blog-liens-contextuels { background: var(--green-100); border-radius: 20px; padding: 22px 26px; margin: 40px 0; }
.cb-blog-liens-contextuels p { margin: 0 0 10px 0; font-weight: 700; color: var(--marine); font-size: 0.95rem; }
.cb-blog-liens-contextuels ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.cb-blog-liens-contextuels a { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--turquoise-dark); font-weight: 700; font-size: 0.88rem; padding: 9px 18px; border-radius: 50px; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.cb-blog-liens-contextuels a:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -10px rgba(35,48,72,0.25); }
@media (max-width: 1100px) {
  .cb-blog-toc { display: none; }
  .cb-blog-article-layout { padding: 0 20px; }
}
@media (max-width: 640px) {
  .cb-blog-article-layout { padding: 0; }
}

/* --- Articles liés en fin de page, à la place d'un simple CTA générique --- */
.cb-blog-related-title { font-size: 1.5rem; font-weight: 800; color: var(--marine); margin: 0 0 24px 0; text-align: center; }

.cb-blog-cta-btn {
  display: block; width: fit-content; max-width: 100%; margin: 28px auto; padding: 14px 32px;
  background: var(--turquoise); color: var(--marine); font-weight: 700; font-size: 0.95rem;
  border-radius: 50px; text-align: center; transition: background 0.15s ease, transform 0.15s ease;
}
.cb-blog-cta-btn:hover { background: var(--turquoise-dark); transform: translateY(-2px); }

/* Revue mobile du 24/09/2026 — Safari iOS zoome automatiquement sur tout
   champ de saisie dont le texte fait moins de 16px, et ne dézoome pas
   ensuite : la page reste agrandie et déborde. 16px minimum sur mobile. */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="color"]):not([type="hidden"]),
  select,
  textarea { font-size: 16px !important; }
}

/* Deux champs côte à côte (Prénom / Nom…) — empilés sur téléphone, où deux
   colonnes de ~150px rendent la saisie pénible (revue mobile du 24/09/2026). */
/* Formulaires publics (contact) : libellés visibles au-dessus des champs
   plutôt que des placeholders qui disparaissent à la saisie, messages
   d'état lisibles (succès / erreur). */
.cb-form .cb-form-2col { margin-bottom: 0; }
.cb-form-hint { font-size: 0.85rem; color: var(--slate); margin: 0 0 16px 0; }
.cb-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; min-width: 0; }
.cb-field label { font-size: 0.9rem; font-weight: 600; color: var(--marine); }
.cb-field-opt { font-weight: 400; color: var(--slate); }
.cb-field input, .cb-field textarea { padding: 14px 18px; border-radius: 14px; border: 1px solid rgba(35,48,72,0.15); font-family: inherit; font-size: 1rem; color: var(--marine); }
.cb-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 0.85rem; color: var(--slate); margin-bottom: 24px; cursor: pointer; }
.cb-consent input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--turquoise-dark); }
.cb-consent a { text-decoration: underline; }
.cb-form-submit { background: var(--marine); color: #fff; font-weight: 700; padding: 14px 32px; border-radius: 50px; border: none; font-family: inherit; font-size: 1rem; cursor: pointer; }
.cb-form-submit:hover { background: #1a2436; transform: translateY(-1px); }
@media (max-width: 560px) { .cb-form-submit { width: 100%; } }
.cb-notice { border-radius: 16px; padding: 18px 20px; margin-bottom: 20px; }
.cb-notice p { margin: 0; }
.cb-notice-ok { background: rgba(80,221,196,0.12); border: 1px solid rgba(38,188,161,0.35); color: var(--marine); }
.cb-notice-title { font-weight: 700; margin-bottom: 6px !important; }
.cb-notice-link { display: inline-block; margin-top: 12px; font-weight: 700; text-decoration: underline; }
.cb-notice-err { background: #FDF0F1; border: 1px solid rgba(224,69,90,0.35); color: #b3263a; font-weight: 600; }
.cb-404-secondary { display: inline-block; border: 1.5px solid rgba(35,48,72,0.25); padding: 14px 30px; border-radius: 50px; font-weight: 700; color: var(--marine); }
.cb-404-secondary:hover { border-color: var(--marine); }
.cb-form-2col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
@media (max-width: 560px) { .cb-form-2col { grid-template-columns: minmax(0, 1fr); } }

/* CTA collant mobile (partials/footer.php) — bloc perdu lors du revert de
   l'identité visuelle 2026 (7c3aebc), restauré le 02/10/2026 : sans lui, la
   barre s'affichait en texte brut sous le footer sur ordinateur. */
.cb-sticky-cta { display: none; }
@media (max-width: 768px) {
  .cb-sticky-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 900;
    background: rgba(35,48,72,0.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff;
    border-radius: 18px; padding: 10px 12px 10px 16px; box-shadow: 0 14px 34px rgba(35,48,72,0.35);
  }
  .cb-sticky-cta-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
  .cb-sticky-cta-text strong { font-size: 0.9rem; }
  .cb-sticky-cta-text span { font-size: 0.72rem; opacity: 0.75; }
  .cb-sticky-cta-btn { flex-shrink: 0; background: var(--turquoise); color: var(--marine); font-weight: 800; font-size: 0.88rem; padding: 11px 16px; border-radius: 50px; white-space: nowrap; text-decoration: none; }
  body.cb-has-sticky-cta { padding-bottom: 84px; }
  body.cb-has-sticky-cta #cb-chat-bubble { bottom: 86px; }
  body.cb-has-sticky-cta #cb-chat-panel { bottom: 156px; }
  body.cb-has-sticky-cta .cb-cookie-banner { bottom: 80px; }
}

/* Annuaire « bientôt disponible » (pages/annuaire.php, 02/10/2026) */
.cb-annuaire-bientot { max-width: 640px; margin: 8px auto 40px auto; text-align: center; background: #fff; border-radius: 24px; padding: 40px 28px; box-shadow: var(--shadow-card); }
.cb-annuaire-bientot-badge { display: inline-block; background: rgba(80,221,196,0.18); color: var(--marine); font-weight: 700; font-size: 0.8rem; padding: 6px 14px; border-radius: 50px; letter-spacing: 0.02em; }
.cb-annuaire-bientot h2 { font-size: 1.6rem; color: var(--marine); margin: 16px 0 10px 0; }
.cb-annuaire-bientot p { color: var(--slate); line-height: 1.7; margin: 0 0 24px 0; }
.cb-annuaire-bientot-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cb-annuaire-bientot-btn { display: inline-flex; align-items: center; padding: 12px 22px; border-radius: 50px; background: var(--turquoise); color: var(--marine); font-weight: 700; text-decoration: none; }
.cb-annuaire-bientot-btn-alt { background: transparent; border: 1.5px solid rgba(35,48,72,0.2); }

/* Villes d'Espagne sur une seule ligne (nos-destinations/espagne/, 02/10/2026).
   Tablette : 3 + 2 ; téléphone : défilement horizontal, toujours une ligne. */
.cb-villes-ligne { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.cb-ville-carte { height: auto; padding: 24px 22px; text-align: left; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; }
.cb-ville-carte h3 { font-size: 1.1rem; font-weight: 800; margin: 0 0 8px 0; }
.cb-ville-carte p { color: var(--slate); font-size: 0.88rem; line-height: 1.5; margin: 0 0 14px 0; }
.cb-ville-carte .cb-pillar-link { margin-top: auto; font-size: 0.86rem; }
@media (max-width: 1060px) { .cb-villes-ligne { grid-template-columns: repeat(6, minmax(0, 1fr)); } .cb-ville-carte { grid-column: span 2; } .cb-ville-carte:nth-child(4) { grid-column: 2 / span 2; } }
@media (max-width: 700px) {
  .cb-villes-ligne { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -20px; padding: 4px 20px 16px; -webkit-overflow-scrolling: touch; }
  .cb-ville-carte { flex: 0 0 72%; scroll-snap-align: start; }
}