/* =====================================================================
   Sarah Zimbris · editorial-pages.css
   « Peau » éditoriale des pages commerciales existantes (2026-09-25).
   Active UNIQUEMENT sur <body class="ed-page ed-skin"> : /vendre,
   /acheter, /a-propos, /equipe. Le HTML de ces pages n'est presque pas
   touché : on recompose leurs composants (site.css + styles en ligne)
   dans le langage de editorial.css. À charger APRÈS editorial.css.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1 · GRILLE : trois largeurs selon l'usage (harmonisation du 25/09)
   - composition (.wrap, grilles de cartes) : la grille de 1280 px ;
   - lecture (.narrow) : ~60 caractères, alignée sur le bord gauche de
     la grille (même ligne de départ que le menu et les titres) ;
   - formulaires : 820 px maximum (voir section 5).
   Le préfixe « body » passe devant les <style> propres à chaque page,
   sans recourir à !important.
   --------------------------------------------------------------------- */
body.ed-skin .wrap,
body.ed-skin .analyse-cards-outer,
body.ed-skin :is(.eq-how,.eq-people) .narrow{max-width:var(--ed-container);padding-left:var(--ed-gutter);padding-right:var(--ed-gutter);margin-left:auto;margin-right:auto}
body.ed-skin .narrow{
  max-width:calc(var(--ed-read) + 2 * var(--ed-gutter));padding-left:var(--ed-gutter);padding-right:var(--ed-gutter);
  margin-left:max(0px,calc((100% - var(--ed-container)) / 2));margin-right:auto;
}
.ed-skin .page-breadcrumb .breadcrumb{max-width:var(--ed-container);padding-left:var(--ed-gutter);padding-right:var(--ed-gutter)}
.ed-skin .eq-hero,.ed-skin .eq-final,.ed-skin .charte{padding-left:0;padding-right:0}

/* Fonds : l'ivoire de la charte éditoriale remplace le crème */
.ed-skin [style*="#FAF6F2"]{background-color:var(--ivoire)!important}
.ed-skin .no-estim,.ed-skin .demande-form-section,.ed-skin .testimonials-section,
.ed-skin .buy-cta-section,.ed-skin .eq-people{background:var(--ivoire)}
.ed-skin .testimonials-section{border:0}
.ed-skin .alt{background:var(--ivoire)}
.ed-skin .no-estim{background:#fff}
/* Aplat anthracite à la place des dégradés sombres */
.ed-skin [style*="linear-gradient(135deg"]{background:var(--anthracite)!important;box-shadow:none!important}

/* Décor retiré : halos, liserés verticaux des heros */
.ed-skin [style*="radial-gradient"]{display:none!important}

/* ---------------------------------------------------------------------
   2 · HEROS : ivoire, très grande typographie, rien dans des boîtes
   --------------------------------------------------------------------- */
.ed-skin :is(.vendre-hero,.buy-hero,.eq-hero){
  background:var(--ivoire);color:var(--ed-ink);--rouge-txt:var(--rouge-deep);
  padding:clamp(48px,6vw,96px) 0 clamp(48px,5.6vw,88px);border-bottom:1px solid var(--ed-line);
}
.ed-skin :is(.vendre-hero,.buy-hero,.eq-hero)::before,
.ed-skin :is(.vendre-hero,.buy-hero,.eq-hero)::after{display:none}
.ed-skin :is(.vendre-hero,.buy-hero,.eq-hero) .eyebrow{
  display:flex;align-items:center;gap:14px;color:var(--ed-ink);
  font-size:var(--ed-fs-label);letter-spacing:.14em;margin-bottom:var(--ed-s5);
}
.ed-skin :is(.vendre-hero,.buy-hero,.eq-hero) .eyebrow::before{content:"";flex:0 0 28px;height:2px;background:var(--rouge)}
.ed-skin :is(.vendre-hero,.buy-hero,.eq-hero) h1{
  color:var(--ed-ink);font-size:var(--ed-h1);line-height:1.04;letter-spacing:-.035em;
  max-width:16ch;margin-bottom:var(--ed-s5);text-wrap:balance;
}
.ed-skin :is(.vendre-hero,.buy-hero,.eq-hero) :is(.lead,p){
  font-family:var(--display);font-weight:500;font-size:var(--ed-fs-lead);line-height:1.5;
  color:var(--ed-ink-2);max-width:52ch;
}
.ed-skin :is(.vendre-hero,.buy-hero,.eq-hero) p strong{color:var(--ed-ink)}
.ed-skin :is(.vendre-hero,.buy-hero) .hero-cta{margin-top:var(--ed-s5)}
.ed-skin :is(.vendre-hero,.buy-hero) .hero-cta .btn-3{color:var(--ed-ink)!important;border-color:var(--ed-ink)!important;background:transparent}
.ed-skin :is(.vendre-hero,.buy-hero) .hero-cta .btn-3:hover{background:var(--ed-ink)!important;color:#fff!important}
@media(min-width:1000px){
  /* Titre à gauche, texte et boutons décalés à droite : composition asymétrique */
  .ed-skin :is(.vendre-hero,.buy-hero) .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--ed-s8);align-items:end}
  .ed-skin :is(.vendre-hero,.buy-hero) .eyebrow{grid-column:1/-1}
  .ed-skin :is(.vendre-hero,.buy-hero) h1{grid-column:1;grid-row:2/4;margin-bottom:0;max-width:14ch}
  .ed-skin :is(.vendre-hero,.buy-hero) .lead{grid-column:2;grid-row:2;margin-bottom:0}
  .ed-skin :is(.vendre-hero,.buy-hero) .hero-cta{grid-column:2;grid-row:3}
}

/* À propos : le portrait en grand, sans cadre arrondi ni ombre */
.ed-skin .about-hero{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
@media(min-width:861px){.ed-skin .about-portrait{position:sticky;top:120px}}
.ed-skin .about-hero + *{margin-top:0}
.ed-skin .about-portrait{padding:0}
.ed-skin .about-portrait::before{background:var(--rouge);border-radius:0;left:auto;right:-14px;bottom:-14px;width:62%;height:48%}
.ed-skin .about-portrait img{border-radius:0;box-shadow:none;background:var(--ivoire);width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 12%}
/* height:auto indispensable : l'attribut height de l'image (1254) passait devant le ratio 4:5 et étirait le portrait */
.ed-skin .about-intro h1{font-size:var(--ed-h1);line-height:1.04;letter-spacing:-.035em;max-width:15ch;margin-bottom:var(--ed-s5);text-wrap:balance}
.ed-skin .about-intro .lead{font-family:var(--display);font-weight:500;font-size:var(--ed-fs-lead);line-height:1.5;color:var(--ed-ink-2)}
.ed-skin .about-intro p{max-width:60ch}
/* Mobile : portrait compact, la présentation arrive dans le premier écran */
@media(max-width:860px){.ed-skin .about-hero{grid-template-columns:1fr;gap:var(--ed-s5)}.ed-skin .about-portrait{max-width:220px}.ed-skin .about-portrait::before{right:-10px;bottom:-10px}}

/* ---------------------------------------------------------------------
   3 · TITRES ET ACCENTS
   Le surligneur, signature de Sarah, est gardé UNE fois par page : sur
   le titre principal (h1). Dans les titres de section, l'accent devient
   un italique rouge, plus discret.
   --------------------------------------------------------------------- */
.ed-skin h1 :is(.hl,.hl-draw){color:var(--ed-ink)!important;font-style:italic;font-weight:500}
.ed-skin h2 :is(.hl,.hl-draw){background:none!important;padding:0!important;font-style:italic;font-weight:500;color:var(--rouge-txt)!important}

.ed-skin :is(.no-estim,.analyse,.demande-form-section,.vendre-guides,.buy-intro,.testimonials-section,.eq-how,.eq-people,.eq-final,.charte,.sec) > :is(.wrap,.narrow) > h2:not(.sr-only),
.ed-skin section > :is(.wrap,.narrow) > h2[style*="font-size:clamp"]:not([style*="#fff"]){
  font-size:var(--ed-h2)!important;line-height:var(--ed-lh-title)!important;letter-spacing:-.028em!important;
  max-width:20ch;margin-bottom:var(--ed-s5)!important;text-wrap:balance;
}
/* Les h2 des encadrés sombres restent à taille d'encadré */
.ed-skin h2[style*="#fff"]{letter-spacing:-.025em!important}
.ed-skin .analyse .subtitle{font-size:var(--ed-h3);max-width:40ch}

/* Étiquettes : la pastille rose devient un label éditorial */
.ed-skin .tag{
  display:flex!important;align-items:center;gap:14px;background:none!important;padding:0!important;border-radius:0!important;
  font-family:var(--display);font-weight:700;font-size:var(--ed-fs-label)!important;letter-spacing:.14em!important;text-transform:uppercase;
  color:var(--ed-ink)!important;margin-bottom:var(--ed-s5)!important;
}
.ed-skin .tag::before{content:"";flex:0 0 28px;height:2px;background:var(--rouge)}
.ed-skin .tag[style*="center"]{justify-content:center}
.ed-skin :is(.charte,.dark,.cta-central,.eq-growing) .tag{color:var(--ed-on-dark)!important}

/* ---------------------------------------------------------------------
   4 · BOUTONS : angles droits, capitales, remplissage au survol
   --------------------------------------------------------------------- */
.ed-skin .btn{
  border-radius:var(--ed-radius);font-family:var(--display);font-weight:700;font-size:var(--ed-fs-btn);
  letter-spacing:.05em;text-transform:uppercase;padding:16px 24px;min-height:52px;line-height:1.3;
  transition:background .35s var(--ed-ease),color .35s var(--ed-ease),border-color .35s var(--ed-ease),transform .2s ease;
}
.ed-skin .btn-1:hover{background:var(--ed-ink);filter:none}
.ed-skin .btn-2:hover{background:var(--rouge)}
.ed-skin .btn-3{border-width:1.5px}
.ed-skin .btn:focus-visible{outline:3px solid var(--rouge);outline-offset:3px}
.ed-skin .cta-arrow{border-radius:var(--ed-radius)}

/* ---------------------------------------------------------------------
   5 · CARTES : moins de boîtes, angles droits, filets plutôt qu'ombres
   --------------------------------------------------------------------- */
.ed-skin :is(.analyse-card,.demande-form,.eq-how-card,.eq-growing,.callout,.callout-noir,.saviez-vous,.pf-item,.faq-item,.ask,.cta-central)
,.ed-skin [style*="border-radius:16px"],.ed-skin [style*="border-radius:14px"],.ed-skin [style*="border-radius:18px"],.ed-skin [style*="border-radius:20px"],.ed-skin [style*="border-radius:12px"]{border-radius:var(--ed-radius)!important}

/* Les 5 volets de l'analyse : un registre numéroté, sans cartes */
body.ed-skin .analyse-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--ed-s6);border-top:0}
@media(max-width:900px){body.ed-skin .analyse-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){body.ed-skin .analyse-cards{grid-template-columns:1fr}}
.ed-skin .analyse-card{background:none;border:0;border-top:1px solid var(--ed-line);box-shadow:none;padding:24px 0 32px;margin:0}
.ed-skin .analyse-card::before{top:-1px;bottom:auto;left:0;height:2px;width:0;transition:width .8s var(--ed-ease)}
.ed-skin .analyse-card:hover{transform:none;box-shadow:none}
.ed-skin .analyse-card:hover::before{width:100%}
.ed-skin .analyse-card .num{position:static;display:block;font-size:var(--ed-num-s);color:var(--rouge-txt);line-height:1;margin-bottom:14px;letter-spacing:-.02em}
.ed-skin .analyse-card h4{font-size:clamp(20px,1.5vw,22px);line-height:1.2;margin-bottom:10px}
.ed-skin .analyse-card p{font-size:16px;line-height:1.6}

/* Les trois engagements de l'équipe : colonnes à filet */
.ed-skin .eq-how-cards{gap:0 var(--ed-s6)}
.ed-skin .eq-how-card{background:none;border:0;border-top:2px solid var(--ed-ink);padding:24px 0 0}
.ed-skin .eq-how-card::before{display:none}
.ed-skin .eq-how-card h3{font-size:var(--ed-h3);margin-bottom:var(--ed-s3)}
.ed-skin .eq-how-card p{font-size:16px;line-height:1.6}

/* Formulaires : cadre net, champs à angles droits */
.ed-skin .demande-form{border:1px solid var(--ed-line);box-shadow:none;max-width:820px}
.ed-skin :is(input,select,textarea){border-radius:var(--ed-radius)}

/* ---------------------------------------------------------------------
   6 · TÉMOIGNAGES : colonnes éditoriales, grande typographie
   --------------------------------------------------------------------- */
.ed-skin .testimonial{background:none;border:0;border-top:2px solid var(--ed-ink);border-radius:0;padding:26px 0 0;box-shadow:none}
.ed-skin .testimonial:hover{transform:none;box-shadow:none}
.ed-skin .testimonial::before{position:static;display:block;height:30px;font-size:64px;line-height:.9;color:var(--rouge);opacity:1}
.ed-skin .testimonial-body{font-family:var(--display);font-weight:500;font-size:18px;line-height:1.55;color:var(--ed-ink)}
.ed-skin .testimonial-body em{background:none;font-style:italic;font-weight:500;color:var(--rouge-txt);padding:0}
.ed-skin .testimonial-sign{border-top:0;padding-top:0}
.ed-skin .testimonial-sign-role{font-family:var(--display);font-weight:600;font-size:var(--ed-fs-caption);letter-spacing:0;color:var(--ed-ink-3)}

/* ---------------------------------------------------------------------
   7 · BLOCS SOMBRES : anthracite de la charte, filet rouge net
   --------------------------------------------------------------------- */
.ed-skin .charte{background:var(--anthracite)}
.ed-skin .charte h2{font-size:var(--ed-h2)!important}
.ed-skin .charte blockquote{border-radius:0}
.ed-skin .signature-band{background:var(--anthracite);text-align:left;padding:clamp(48px,6vw,88px) 0}
.ed-skin .signature-band::before{left:max(var(--ed-gutter),calc((100% - var(--ed-container)) / 2 + var(--ed-gutter)));transform:none;width:36px;height:2px;top:clamp(40px,5vw,68px)}
.ed-skin .signature-band blockquote,.ed-skin .signature-band cite{
  max-width:var(--ed-container);padding:0 var(--ed-gutter);margin-left:auto;margin-right:auto;box-sizing:border-box;
}
.ed-skin .signature-band blockquote{font-size:clamp(24px,2.8vw,40px);line-height:1.15;letter-spacing:-.025em}
.ed-skin .signature-band cite{color:#fff;font-size:12px;letter-spacing:.14em}
.ed-skin .fenua-band{background:var(--anthracite)}

/* Frise du parcours (/a-propos) */
.ed-skin .timeline-step .ts-title{font-size:19px;letter-spacing:-.015em}
.ed-skin .timeline-step p{font-size:15px}

/* ---------------------------------------------------------------------
   8 · ÉQUIPE : portraits en grand, pas de fiche RH
   --------------------------------------------------------------------- */
.ed-skin .eq-card{background:none;border:0;border-radius:0;box-shadow:none;padding:0;overflow:visible}
.ed-skin .eq-card:hover{transform:none;box-shadow:none}
.ed-skin .eq-card .eq-photo{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--ivoire-2);border-radius:0;margin:0}
.ed-skin .eq-card .eq-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;border-radius:0;transition:transform 1.2s var(--ed-ease)}
.ed-skin .eq-card:hover .eq-photo img{transform:scale(1.04)}
.ed-skin .eq-card .eq-nom{font-size:var(--ed-h3);letter-spacing:-.02em;margin:18px 0 0;padding:0}
.ed-skin .eq-card .eq-titre{font-size:var(--ed-fs-caption);letter-spacing:0;text-transform:none;line-height:1.4;margin:8px 0 12px;padding:0;background:none!important;border-radius:0}
.ed-skin .eq-card .eq-accroche{padding:0;margin:0 0 14px;font-size:16px;line-height:1.6;color:var(--ed-ink-2)}
.ed-skin .eq-card .eq-cta{margin:0;padding:6px 0 2px;text-transform:none;letter-spacing:.02em;font-size:var(--ed-fs-btn);color:var(--ed-ink);border-bottom:1px solid currentColor;display:inline-block}
.ed-skin .eq-card .eq-cta:hover{color:var(--rouge-txt)}
.ed-skin .eq-grid{gap:var(--ed-s7) var(--ed-s6)}
@media(min-width:901px){.ed-skin .eq-grid>.eq-card:nth-child(3n+2){margin-top:32px}}
.ed-skin .eq-chip{border-radius:var(--ed-radius)}
.ed-skin .eq-growing{background:var(--anthracite)}
.ed-skin .eq-final{text-align:left}
.ed-skin .eq-final :is(h2,p){margin-left:0!important}
.ed-skin .eq-final .row{justify-content:flex-start}
.ed-skin .buy-cta-section{background:#fff}

/* ---------------------------------------------------------------------
   9 · ÉQUIPE (lot 1, 26/09) : en-tête à mosaïque, Sarah en tête
   --------------------------------------------------------------------- */
body.ed-skin .eq-hero .narrow{max-width:var(--ed-container);margin-left:auto;margin-right:auto}
.ed-skin .eq-hero__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--ed-s7) var(--ed-s8);align-items:center}
.ed-skin .eq-hero__mosaic{position:relative;height:clamp(340px,34vw,480px)}
.ed-skin .eq-mosaic{position:absolute;padding:9px 9px 10px}
.ed-skin .eq-mosaic img{aspect-ratio:4/5;object-position:50% 14%}
.ed-skin .eq-mosaic figcaption{margin-top:8px;font-family:var(--display);font-weight:600;font-size:13px;color:var(--ed-ink-2);padding:0 2px}
.ed-skin .eq-mosaic--sarah{left:4%;top:0;width:46%;z-index:2}
.ed-skin .eq-mosaic--lani{right:6%;top:6%;width:34%;z-index:1}
.ed-skin .eq-mosaic--stephane{right:22%;bottom:0;width:31%;z-index:3}
@media(max-width:900px){
  .ed-skin .eq-hero__grid{grid-template-columns:1fr}
  .ed-skin .eq-hero__mosaic{height:clamp(300px,82vw,420px);max-width:520px}
}

/* Sarah en tête de la grille : carte large, portrait à gauche, texte à droite.
   Les conseillers suivent en colonnes. Même charte, hiérarchie claire. */
@media(min-width:901px){
  .ed-skin .eq-grid>.eq-card-sarah{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:var(--ed-s7);align-items:end;
    padding-bottom:var(--ed-s6);border-bottom:1px solid var(--ed-line);margin-top:0!important}
  .ed-skin .eq-card-sarah .eq-photo{grid-row:1/6;max-width:380px}
  .ed-skin .eq-card-sarah .eq-nom{font-size:var(--ed-h2);letter-spacing:-.028em}
  .ed-skin .eq-card-sarah .eq-accroche{font-family:var(--display);font-weight:500;font-size:var(--ed-fs-lead);line-height:1.5;color:var(--ed-ink);max-width:46ch}
  .ed-skin .eq-grid>.eq-card:not(.eq-card-sarah):nth-child(3n+2){margin-top:0}
  .ed-skin .eq-grid>.eq-card:not(.eq-card-sarah):nth-child(odd){margin-top:32px}
}
.ed-skin .eq-card .eq-photo{box-shadow:0 1px 2px rgba(22,22,22,.06),0 22px 40px -26px rgba(22,22,22,.4)}
.ed-skin .eq-card{transition:transform .6s var(--ed-ease)}
.ed-skin .eq-card:hover{transform:translateY(-4px)}
.ed-skin .eq-filters{margin-bottom:var(--ed-s6)}
.ed-skin .eq-filter-lab{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.08em}
.ed-skin .eq-chip{font-family:var(--display);font-weight:600;font-size:14px;min-height:40px}
.ed-skin .eq-how-card h3::before{content:"";display:block;width:28px;height:2px;background:var(--rouge);margin-bottom:14px}

/* Couvertures de guides : garder la levée au survol malgré le système d'apparition */
.js .cover-card[data-reveal].is-in:hover,.js .cover-card[data-reveal].is-in:focus-visible{transform:translateY(-6px)}
@media(prefers-reduced-motion:reduce){.js .cover-card[data-reveal].is-in:hover{transform:none}}

/* =====================================================================
   Étape 1 (27/09)
   ===================================================================== */
/* Portraits d'équipe : un seul format pour tous (Sarah, Lani, Stéphane),
   prêt pour les nouvelles photos : 4:5, cadrage haut, même fond. */
.eq-card .eq-photo,.hz-lead__photo{aspect-ratio:4/5;background:var(--ivoire-2);overflow:hidden}
.eq-card .eq-photo img,.hz-lead__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}

/* /vendre · L'analyse de ton marché : 5 volets + la case d'action = 3 + 3 */
.ed-skin .analyse-card--cta{display:flex;flex-direction:column;justify-content:space-between;gap:18px;text-decoration:none;color:#fff;background:var(--rouge);padding:24px 24px 28px;border-top:0}
.ed-skin .analyse-card--cta::before{display:none}
.ed-skin .analyse-card--cta .num{color:#fff}
.ed-skin .analyse-card--cta h4{color:#fff}
.ed-skin .analyse-card--cta span{font-family:var(--display);font-weight:700;font-size:var(--ed-fs-btn);letter-spacing:.05em;text-transform:uppercase;color:#fff}
.ed-skin .analyse-card--cta:hover{background:var(--ed-ink)}
.ed-skin .analyse-card--cta:focus-visible{outline:3px solid var(--rouge);outline-offset:3px}

/* /vendre · Notre posture : titre à gauche, texte à droite (plus de colonne vide) */
@media(min-width:1000px){
  body.ed-skin .no-estim .narrow{max-width:var(--ed-container);margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--ed-s8);align-items:start}
  body.ed-skin .no-estim .tag{grid-column:1;grid-row:1}
  body.ed-skin .no-estim h2{grid-column:1;grid-row:2 / span 6;position:sticky;top:120px}
  body.ed-skin .no-estim p{grid-column:2;max-width:62ch}
}
