/**
 * Cogestim theme — cogestim-courtier.css
 * Gabarit PROFIL COURTIER (single-cogestim_membre.php, route /courtiers/{slug}/).
 *
 * PORTAGE VERBATIM du bloc <style> de design/pages/Profil-courtier.html (planche
 * certifiée a99dfa8, amendements A12–A27 du 06/10), chaque sélecteur rescopé sous
 * `.courtier-page` (classe posée sur <body> par cogestim_courtier_body_class()).
 * Règle de cloisonnement : AUCUNE règle de ce fichier ne vit dans components/base —
 * le gabarit ne peut pas altérer le reste du site. Composants bibliothèque
 * (.btn, .card, .card-badge, .crumb, .field--boxed, .consent, .circle-cta, .tel-block,
 * .team-filter/.tf-chip) consommés sans restylage depuis cogestim-components.css.
 *
 * Écarts au portage (tous déclarés dans l'en-tête de single-cogestim_membre.php) :
 *  - @keyframes `fade` renommé `courtier-fade` (nom global, évite toute collision) ;
 *  - `.profil-annexe` : espacement + filet haut seulement quand elle SUIT les valeurs
 *    (citation sans valeurs = pas de filet orphelin) ;
 */
/* ═══ Page profil Hervé Ruffieux — positionnement de page + 2 anatomies nouvelles (.exergue, .hobby-list)
     + 1 transposition (.pillars fond clair). Composants bibliothèque consommés sans restylage. ═══ */
  .courtier-page main.courtier .sec-head{gap:var(--space-4);margin-bottom:var(--space-6)}
/* verbatim main.agence .sec-head (Agence-Lausanne) */
  

  /* ═══ 1 — EN-TÊTE (06/10, A12) — anatomie hero 5.Estimation l.16-20 + l.49-64, VERBATIM (sélecteurs et valeurs).
     Retirés : .hero-est (mini-barre adresse/type), .hero2-proof (note Google — réseau, pas la personne),
     .hvc-count (pager), JS carrousel. .hv-carousel porte UNE seule .hvc-slide.on = carte portrait.
     Crumb intégré : .est-hero.has-crumb REMONTÉ en LIBRARY (cogestim-components.css §L17,
     lot fil d'Ariane 20/10 — partagé avec le hero-estimation de /estimer/), valeurs inchangées. ═══ */
  .courtier-page .est-hero{background:var(--paper-warm);padding:clamp(56px,6.5vw,96px) 0 clamp(48px,5.5vw,76px);border-bottom:1px solid var(--rule-soft);overflow:hidden}

  .courtier-page .hero2-grid{display:grid;grid-template-columns:1fr .88fr;gap:clamp(40px,6vw,88px);align-items:center}

  .courtier-page .hero2-content{display:flex;flex-direction:column;min-width:0}

  .courtier-page .hero2-content h1{font-family:var(--sans);font-weight:300;font-size:clamp(34px,4.2vw,58px);line-height:1.06;letter-spacing:-.015em;color:var(--ink);margin:14px 0 0;max-width:16ch;text-wrap:balance}

  .courtier-page .hero2-content .sub{margin:16px 0 0;font-family:var(--sans);font-weight:400;font-size:clamp(15.5px,1.2vw,17.5px);line-height:1.6;color:var(--ink-soft);max-width:46ch}

  .courtier-page .hero2-grid{align-items:start}

  .courtier-page .hero2-visual{display:flex;flex-direction:column;gap:22px}

  .courtier-page .hv-carousel{position:relative;height:clamp(440px,44vw,560px);border-radius:2px;overflow:hidden}

  .courtier-page .hvc-slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .7s ease}

  .courtier-page .hvc-slide.on{opacity:1}

  .courtier-page .hvc-slide img{width:100%;height:100%;object-fit:cover;display:block}

  /* 09/10 : 14% (08/10) ajusté à 8% — cadrage portraits carrousel, validation œil Luis (compromis assumé, aucune valeur unique parfaite sur tous les portraits) */
  .courtier-page .hvc-slide img{object-position:center 8%}
/* écart déclaré (06/10) : cadrage portrait repris de .tc .portrait img §2.14 — carte paysage < 1100px */
  /* 06/10 (A17) : figcaption retirée — carte portrait = visuel pur ; règles .hvc-slide figcaption non reprises. */
  /* CTA hero (A17) : conteneur .hero-acts verbatim Agence-Lausanne l.34 ; margin-top = .hero-est (5.Estimation).
     ÉCART DÉCLARÉ : .btn en hero contrevient à components A2 (« jamais en CTA de hero ») — consigne Luis 06/10 ;
     variante conforme .link primaire visible via ?cta=link. */
  .courtier-page .hero2-content .hero-acts{display:flex;align-items:center;gap:34px;flex-wrap:wrap;margin-top:var(--space-6)}

  /* A21 (06/10) : ordre identité → parcours → accroche → CTA ; l'accroche (.sub verbatim) introduit le CTA. */
  .courtier-page .hero2-content .hero-bio + .sub{margin-top:var(--space-8)}

  @media (max-width:1100px){.courtier-page .hero2-grid{grid-template-columns:1fr}
.courtier-page .hero2-visual{margin-top:16px}

    /* A22 (06/10) : sur une colonne, le portrait suit le nom — .hero2-content en contents, order sur ses enfants */
    .courtier-page .hero2-content{display:contents}

    .courtier-page .hero2-grid{row-gap:0}

    .courtier-page .hero2-content>.lab{order:1}
.courtier-page .hero2-content>h1{order:2}
.courtier-page .hero2-visual{order:3;margin:clamp(20px,3vw,28px) 0 0}
.courtier-page .hero2-content>.hero-bio{order:4;margin-top:clamp(24px,3vw,32px)}
.courtier-page .hero2-content>.sub{order:5}
.courtier-page .hero2-content>.hero-acts{order:6}

  }

  /* ═══ PARCOURS intégré au hero (06/10, A20) — section #s-parcours et lien agence supprimés.
     Paragraphes au gabarit .aug-row .body p (§L6 : 15px / 1.65 / 52ch) sous .sub ; seul ajout : espacements --space-6 / --space-3 (tokens). ═══ */
  .courtier-page .hero2-content .hero-bio{margin-top:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3)}

  .courtier-page .hero2-content .hero-bio p{margin:0;font-size:15px;line-height:1.65;color:var(--ink-soft);max-width:52ch}
/* gabarit .aug-row .body p (components §L6), sous l'accroche .sub 15.5–17.5px — hiérarchie accroche > parcours */

  /* ═══ 3 — VALEURS — .pillars SANS numéro, anatomie Courtage (§2.18–2.19 / L7 « sans numéro, séparateurs
     border-left ») transposée fond clair : seules les 3 couleurs on-dark sont remplacées par leurs pendants
     clairs (--cog-on-dark-a10 → --rule, --paper-warm → --ink, --cog-on-dark-a70 → --ink-soft). Exactement 3 items. ═══ */
  .courtier-page .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(28px,3.4vw,44px)}

  .courtier-page .pillar{padding:0 clamp(24px,2.6vw,40px);border-left:1px solid var(--rule)}

  .courtier-page .pillar:first-child{padding-left:0;border-left:0}

  .courtier-page .p-ttl{font-family:var(--sans);font-weight:500;font-size:clamp(20px,1.7vw,24px);line-height:1.22;letter-spacing:-.008em;color:var(--ink);margin:0;max-width:22ch}

  .courtier-page .pillar p{margin:14px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-soft);max-width:32ch}

  @media (max-width:920px){
    .courtier-page .pillars{grid-template-columns:1fr;gap:0}

    .courtier-page .pillar{padding:clamp(20px,3vw,26px) 0;border-left:0;border-top:1px solid var(--rule)}

    .courtier-page .pillar:first-child{padding-top:0;border-top:0}

    .courtier-page .pillar p{max-width:none}

  }

  /* ═══ 4 — CITATION EN EXERGUE ★ ANATOMIE NOUVELLE .exergue (05/10) — registre exergue éditoriale.
     À nu sur --paper : aucun fond, aucune bordure, aucun filet gauche (≠ .note-a), aucun glyphe « " »,
     aucune étoile ni avatar (≠ .vt-card §2.23). Italique 300 (§1.2 « italique pour l'accent citation »)
     au gabarit .h3, --ink, guillemets français portés par le texte. Signature au patron .lab. ═══ */
  .courtier-page .exergue{margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:var(--space-6);text-align:center}
/* A25 (06/10) : citation seule en annexe → centrée dans la page */
  .courtier-page .exergue blockquote{margin:0}

  .courtier-page .exergue blockquote p{margin:0 auto;font-family:var(--sans);font-style:italic;font-weight:300;font-size:clamp(24px,2.5vw,34px);line-height:1.3;letter-spacing:-.005em;color:var(--ink);max-width:34ch;text-wrap:balance}

  /* ═══ 5 — HOBBIES ★ ANATOMIE NOUVELLE .hobby-list (05/10) — liste discrète, transposition fond clair de
     .hero-chips (Agence-Lausanne) : capitales interlettrées .14em, séparateur point 4px --red. Écarts :
     11px → --cog-fs-xs (13px, plancher §1.2 du 04/08) ; couleur on-dark → --ink. Non interactif (§4.4). ═══ */
  .courtier-page .hobby-list{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-family:var(--sans);font-size:var(--cog-fs-xs);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}

  .courtier-page .hobby-list li{display:inline-flex;align-items:center;gap:12px;white-space:nowrap}

  .courtier-page .hobby-list li + li::before{content:"";width:4px;height:4px;background:var(--red);border-radius:var(--radius-full);display:inline-block;flex:0 0 auto}

  /* ═══ A21 (06/10) — SECTION PROFIL : valeurs + annexes (citation, hobbies) réunies sur --paper (respiration éditoriale),
     distinct du hero --paper-warm. Annexes posées sur la grille 3 colonnes des .pillars : citation = colonnes 1–2,
     hobbies = colonne 3, filet gauche --rule aligné sur le 3e pilier. Valeurs reprises : padding/filet .pillar,
     filet + espacement = .msg margin-top (même page). Annexe seule = pleine largeur ; aucune = rangée non rendue. ═══ */
  .courtier-page #s-profil{background:var(--paper)}

  /* A22 : avatar à initiales pour les avis fictifs du spécimen — verbatim 5.Estimation l.104 (pas de visage réel sur un avis fictif) */
  
  /* A26 (06/10) — AVIS EN SLIDER = section Home « 05 — Témoignages » VERBATIM (1.Home l.444-478 + JS l.1351) : scène portrait 4/5 + glyphe + citation 36px + nom/rôle, compteur + 2 .circle-cta.
     Seul écart : portrait en .ph-fill (variante placeholder de .testi-ph, Home l.449) — pas de visage réel sur un avis fictif. */
  .courtier-page .testi-stage{display:none;grid-template-columns:5fr 7fr;gap:clamp(40px,6vw,96px);align-items:center;min-height:480px;animation:courtier-fade .5s ease}

  .courtier-page .testi-stage.active{display:grid}

  @keyframes courtier-fade{from{opacity:0;transform:translateY(8px)}
to{opacity:1;transform:none}}

  .courtier-page .testi-ph{aspect-ratio:4/5;background:var(--paper-deep);overflow:hidden;position:relative}

  .courtier-page .testi-ph img{width:100%;height:100%;object-fit:cover}

  .courtier-page .testi-ph.ph-fill{background:repeating-linear-gradient(135deg, transparent 0 12px, var(--cog-ink-a05) 12px 13px),var(--paper-deep)}

  /* Glyphe de citation = .vt-glyph de cogestim-components.css (même guillemet que les cartes .vtesti). Seul l'espacement sous le glyphe est local (gap 16px des cartes). */
  .courtier-page .vt-glyph{margin-bottom:16px}

  .courtier-page .testi-quote{font-family:var(--sans);font-style:italic;font-weight:400;font-size:clamp(24px,2.6vw,36px);line-height:1.32;color:var(--ink);max-width:26ch;margin:0;text-wrap:pretty}

  .courtier-page .testi-meta{margin-top:36px;padding-top:24px;border-top:1px solid var(--rule);position:relative}

  .courtier-page .testi-meta .name{font-family:var(--sans);font-weight:500;font-size:var(--cog-fs-body-lg);letter-spacing:.005em;color:var(--ink)}

  .courtier-page .testi-meta .role{font-family:var(--sans);font-size:var(--cog-fs-sm);color:var(--ink-soft);letter-spacing:.02em;margin-top:4px}

  .courtier-page .testi-meta .role b{color:var(--ink);font-weight:500}

  .courtier-page .testi-ctrl{display:flex;justify-content:space-between;align-items:center;margin-top:56px}

  .courtier-page .testi-count{font-family:var(--sans);font-weight:300;color:var(--ink-soft);font-size:var(--cog-fs-body-lg);letter-spacing:.02em}

  .courtier-page .testi-count b{color:var(--ink);font-weight:400}

  .courtier-page .testi-arr{display:flex;gap:12px}

  @media (max-width:768px){.courtier-page .testi-stage.active{grid-template-columns:1fr}
.courtier-page .testi-ph{aspect-ratio:5/4}}

  .courtier-page .profil-annexe{display:grid;grid-template-columns:repeat(3,1fr)}

.courtier-page .pillars + .profil-annexe{margin-top:clamp(40px,4.5vw,56px);padding-top:clamp(40px,4.5vw,56px);border-top:1px solid var(--rule)}

  .courtier-page .profil-annexe .exergue{grid-column:1 / -1}
/* A25 : citation seule → pleine largeur, centrée par .exergue (margin auto) */
  /* A23 (06/10) : hobbies remontés sous le portrait du hero — .hero-hobbies = .hero2-visual (flex column, gap 22px) ; lab + .hobby-list verbatim, ligne à points. */
  .courtier-page .hero-hobbies{display:flex;flex-direction:column;gap:var(--space-3)}

  @media (max-width:920px){
    .courtier-page .profil-annexe{grid-template-columns:1fr}

  }

  /* ═══ 6 — MES OBJETS (§2.12 .card via components §L7, chips = famille Filtrer §4.5.8) — verbatim Agence-Lausanne §7 ═══ */
  .courtier-page .biens-tools{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin:0 0 clamp(24px,3vw,36px)}

  .courtier-page .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,2.6vw,36px)}

  @media (max-width:960px){.courtier-page .grid3{grid-template-columns:repeat(2,1fr)}}

  @media (max-width:560px){.courtier-page .grid3{grid-template-columns:1fr}}

  .courtier-page .biens-view{display:none}

  .courtier-page .biens-view.on{display:grid}

  .courtier-page .biens-ctas{display:flex;align-items:center;gap:34px;flex-wrap:wrap;margin-top:clamp(28px,3.4vw,44px)}

  /* ═══ 7 — CONTACT — .msg (§2.25 C) verbatim Agence-Lausanne §13, registre formulaires 02/10 (porté au markup 05/10,
     Estimation-Funnel) : 4 requis, consentement requis sans lien, optin séparé, lien politique près du CTA.
     .tel-block (§2.14bis, components §L15) = standard d'agence. ═══ */
  .courtier-page .msg{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,4vw,64px);border:1px solid var(--rule);background:var(--paper);padding:clamp(28px,3.4vw,48px);align-items:start;margin-top:clamp(40px,4.5vw,56px)}

  .courtier-page .msg-intro h3{margin:0;max-width:16ch}

  .courtier-page .msg-intro p{margin:14px 0 0;color:var(--ink-soft);font-size:14.5px;line-height:1.6;max-width:36ch}

  .courtier-page .msg-intro .tel-block{margin-top:var(--space-10)}

  .courtier-page .msg-form{display:flex;flex-direction:column}

  .courtier-page .msg-body{display:flex;flex-direction:column;gap:var(--space-6)}

  .courtier-page .msg-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6) 30px}

  .courtier-page .msg-form .field--boxed{gap:var(--space-5)}

  .courtier-page .msg-act{margin-top:var(--space-6);display:flex;align-items:center;gap:var(--space-3) 16px;flex-wrap:wrap}

  .courtier-page .msg-act .cap-it{margin-left:auto}

  .courtier-page .msg-done{display:none;align-items:center;gap:12px;font-family:var(--sans);font-weight:500;font-size:18px;color:var(--ink)}

  .courtier-page .msg-done svg{width:var(--icon-lg);height:var(--icon-lg);stroke:var(--icon-accent);fill:none;stroke-width:var(--icon-stroke);stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

  .courtier-page .msg-form.sent .msg-body{display:none}

  .courtier-page .msg-form.sent .msg-done{display:flex}

  @media (max-width:768px){.courtier-page .msg{grid-template-columns:1fr;gap:24px}
.courtier-page .msg-row{grid-template-columns:1fr}
.courtier-page .msg-act .cap-it{margin-left:0}}

  /* Copies bit-à-bit, scopées au formulaire (absentes de cogestim-components.css — manque n°4 de l'audit 05/10) :
     .wz-consent (estimation-funnel.css l.141) · .optin-sub (l.322) · .form-privacy (l.320-321).
     Seul écart : margin de .form-privacy 20px 0 0 → 0, l'espacement étant déjà porté par le gap --space-6 de .msg-body. */
  .courtier-page .msg-form .msg-consents{display:flex;flex-direction:column;gap:14px;margin-top:4px}

  .courtier-page .msg-form .consent .optin-sub{display:block;margin-top:4px;font-size:12px;color:var(--ink-mute)}

  .courtier-page .msg-form .form-privacy{margin:0;font-family:var(--sans);font-size:12.5px;color:var(--ink-soft)}

  .courtier-page .msg-form .form-privacy a{text-decoration:underline;text-underline-offset:2px}