/* =====================================================================
   Sarah Zimbris · editorial-outils.css  (lot 3 de la refonte, 26/09)
   Pages données, outils et pages de service :
     observatoire, prix par commune, simulateurs et outils, louer,
     nos services, devenir agent, pages conseillers, poser une question,
     profil, pages légales, merci, 404.
   Actif sur <body class="ed-page ed-skin ed-outils">, chargé APRÈS
   editorial.css et editorial-pages.css. Le préfixe body.ed-outils passe
   devant les <style> propres à chaque page, sans !important.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1 · EN-TÊTES : tous en ivoire, même famille que le reste du site
   (les heros noirs à halo rouge disparaissent)
   --------------------------------------------------------------------- */
body.ed-outils :is(.obs-hero,.prix-hero,.commune-hero,.sim-hero,.pv-hero,.fm-hero,.ce-hero,.rent-hero,.agent-hero,.ag-hero,.profil-hero,.art-hero){
  background:var(--ivoire);color:var(--ed-ink);--rouge-txt:var(--rouge-deep);
  padding:clamp(48px,6vw,96px) 0 clamp(44px,5vw,80px);border-bottom:1px solid var(--ed-line);
}
body.ed-outils :is(.obs-hero,.prix-hero,.commune-hero,.sim-hero,.pv-hero,.fm-hero,.ce-hero,.rent-hero,.agent-hero,.ag-hero,.profil-hero,.art-hero)::before,
body.ed-outils :is(.obs-hero,.prix-hero,.commune-hero,.sim-hero,.pv-hero,.fm-hero,.ce-hero,.rent-hero,.agent-hero,.ag-hero,.profil-hero,.art-hero)::after{display:none}
body.ed-outils :is(.obs-hero,.prix-hero,.commune-hero,.sim-hero,.pv-hero,.fm-hero,.ce-hero,.rent-hero,.agent-hero,.ag-hero,.profil-hero,.art-hero) .wrap{
  max-width:var(--ed-container);padding:0 var(--ed-gutter);margin:0 auto;
}
body.ed-outils :is(.obs-hero,.prix-hero,.commune-hero,.sim-hero,.pv-hero,.fm-hero,.ce-hero,.rent-hero,.agent-hero,.ag-hero,.profil-hero,.art-hero) h1{
  font-family:var(--display);font-weight:700;font-size:var(--ed-h1);line-height:1.04;letter-spacing:-.035em;
  color:var(--ed-ink);max-width:16ch;margin:0 0 var(--ed-s5);text-wrap:balance;
}
body.ed-outils :is(.obs-hero,.prix-hero,.commune-hero,.sim-hero,.pv-hero,.fm-hero,.ce-hero,.rent-hero,.agent-hero,.ag-hero,.profil-hero,.art-hero) h1 :is(.hl,.hl-draw){
  color:var(--ed-ink);font-style:italic;font-weight:500;
}
body.ed-outils :is(.obs-hero,.prix-hero,.commune-hero,.sim-hero,.pv-hero,.fm-hero,.ce-hero,.rent-hero,.agent-hero,.ag-hero,.profil-hero,.art-hero) :is(.lead,.subtitle,.ag-role){
  font-family:var(--display);font-weight:500;font-size:var(--ed-fs-lead);line-height:1.5;color:var(--ed-ink-2);max-width:54ch;
}
body.ed-outils :is(.obs-hero,.prix-hero,.commune-hero,.sim-hero,.pv-hero,.fm-hero,.ce-hero,.rent-hero,.agent-hero,.ag-hero,.profil-hero,.art-hero) .eyebrow{
  display:flex;align-items:center;gap:12px;color:var(--ed-ink);background:none;padding:0;
  font-family:var(--display);font-weight:700;font-size:var(--ed-fs-label);letter-spacing:.14em;text-transform:uppercase;margin:0 0 var(--ed-s5);
}
body.ed-outils :is(.sim-hero,.pv-hero,.fm-hero,.ce-hero,.rent-hero,.agent-hero,.ag-hero,.profil-hero) .eyebrow::before{content:"";flex:0 0 28px;height:2px;background:var(--rouge)}
body.ed-outils :is(.rent-hero,.agent-hero,.ag-hero) :is(.hero-cta,.cta-row) .btn-3{color:var(--ed-ink);border-color:var(--ed-ink);background:transparent}
body.ed-outils :is(.rent-hero,.agent-hero,.ag-hero) :is(.hero-cta,.cta-row) .btn-3:hover{background:var(--ed-ink);color:#fff}
body.ed-outils .article-meta{font-family:var(--display);font-weight:600;font-size:14px;color:var(--ed-ink-2)}
body.ed-outils .article-meta a{color:var(--ed-ink);border-bottom:1px solid var(--rouge);text-decoration:none}

/* Fiche conseiller (/lani, /stephane) : portrait en polaroïd sur fond ivoire */
body.ed-outils .ag-hero .wrap{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,5vw,72px)}
body.ed-outils .ag-hero .ag-portrait{border-radius:0;background:#fff;padding:10px 10px 12px;transform:rotate(-1.5deg);
  box-shadow:0 1px 2px rgba(22,22,22,.08),0 30px 54px -26px rgba(22,22,22,.45);max-width:360px}
body.ed-outils .ag-hero .ag-portrait img{aspect-ratio:4/5;height:auto}
body.ed-outils .ag-hero .ag-zone{color:var(--ed-ink-3);font-size:15px}
body.ed-outils .ag-hero .ag-badge{border-radius:var(--ed-radius)}
body.ed-outils .ag-hero .ag-contacts a{color:var(--ed-ink)}
@media(max-width:760px){body.ed-outils .ag-hero .wrap{grid-template-columns:1fr}body.ed-outils .ag-hero .ag-portrait{max-width:240px}}

/* Pages simples (question, merci, légales, 404, profil) : titre éditorial */
body.ed-outils main h1,
body.ed-outils .sec > :is(.wrap,.narrow) > h1{
  font-family:var(--display);font-weight:700;font-size:clamp(34px,4.4vw,64px);line-height:1.05;letter-spacing:-.03em;color:var(--ed-ink);max-width:18ch;text-wrap:balance;
}
body.ed-outils .sec > :is(.wrap,.narrow) > h1 :is(.hl,.hl-draw){font-style:italic;font-weight:500}

/* Entrée des en-têtes au chargement (même contrat que les autres pages) */
.js body.ed-outils :is(.obs-hero,.prix-hero,.commune-hero,.sim-hero,.pv-hero,.fm-hero,.ce-hero,.rent-hero,.agent-hero,.ag-hero,.profil-hero,.art-hero) :is(h1,.lead,.subtitle,.ag-role){animation:edHeroIn .75s var(--ed-ease) both}
.js body.ed-outils :is(.obs-hero,.prix-hero,.commune-hero,.sim-hero,.pv-hero,.fm-hero,.ce-hero,.rent-hero,.agent-hero,.ag-hero,.profil-hero,.art-hero) :is(.lead,.subtitle,.ag-role){animation-delay:150ms}
.ed-safe body.ed-outils [class*="-hero"] *{animation:none!important}
@media(prefers-reduced-motion:reduce){.js body.ed-outils [class*="-hero"] *{animation:none!important}}

/* ---------------------------------------------------------------------
   2 · DONNÉES : chiffres mis en scène, tableaux à filets, sources nettes
   --------------------------------------------------------------------- */
/* Bandeau de chiffres de l'observatoire : anthracite plein, sans halo */
body.ed-outils .obs-stats-wide{background:var(--anthracite);border-radius:var(--ed-radius);padding:clamp(40px,5vw,72px) 0}
body.ed-outils .obs-stats-wide::before{display:none}
body.ed-outils .obs-stats-wide h4{font-size:var(--ed-h3);max-width:34ch}
body.ed-outils .obs-stats-wide h4 .hl{background:none;font-style:italic;font-weight:500;color:var(--rouge-clair);padding:0}
body.ed-outils .obs-stat-card{background:none;border:0;border-top:1px solid var(--ed-line-dark);border-radius:0;padding:18px 0 0;text-align:left}
body.ed-outils .obs-stat-card .num{font-family:var(--display);font-weight:700;font-size:var(--ed-num);line-height:1;letter-spacing:-.04em;color:#fff}
body.ed-outils .obs-stat-card .lab{font-size:15px;line-height:1.45;color:var(--ed-on-dark-2);text-transform:none;letter-spacing:0;margin-top:10px}

/* Grands chiffres et cartes d'analyse (prix) */
body.ed-outils :is(.insight-card,.note-card,.mini-insight,.obs-mythe,.prix-note-source,.prix-avertissement,.sources-box,.cta-analyse,.obs-cta,.maj-strip,.prix-cta-inline){border-radius:var(--ed-radius)!important}
body.ed-outils .insight-card .big-num{font-family:var(--display);font-weight:700;font-size:var(--ed-num);line-height:1;letter-spacing:-.04em}
body.ed-outils .insight-card .ic-eyebrow,body.ed-outils .note-card .nc-tag,body.ed-outils .mini-insight .mi-eyebrow,body.ed-outils .pa-tag,body.ed-outils .pns-tag{font-size:13px;letter-spacing:.1em}
body.ed-outils :is(.insight-card,.note-card,.mini-insight) :is(p,.ic-body){font-size:16px;line-height:1.6}
body.ed-outils .maj-strip{border-radius:var(--ed-radius)}
body.ed-outils .maj-label{font-size:13px;letter-spacing:.08em}
body.ed-outils .maj-value{font-family:var(--display);font-weight:700;font-size:clamp(18px,1.6vw,22px)}

/* Tableaux : filets fins, en-têtes en petites capitales, chiffres alignés */
body.ed-outils :is(.obs-table-wrap,.prix-table-wrap,.table-scroll){border:0;border-radius:0;border-top:2px solid var(--ed-ink)}
body.ed-outils :is(.obs-table-wrap,.prix-table-wrap,.table-scroll) table{font-variant-numeric:tabular-nums}
body.ed-outils :is(.obs-table-wrap,.prix-table-wrap,.table-scroll) th{background:none!important;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ed-ink-2);border-bottom:1px solid var(--ed-line)}
body.ed-outils :is(.obs-table-wrap,.prix-table-wrap,.table-scroll) td{border-bottom:1px solid var(--ed-line);font-size:16px}
body.ed-outils :is(.obs-table-wrap,.prix-table-wrap,.table-scroll) tbody tr{transition:background .3s ease}
body.ed-outils :is(.obs-table-wrap,.prix-table-wrap,.table-scroll) tbody tr:hover{background:var(--ivoire)}
body.ed-outils :is(.source,.chart-source){font-size:14px;color:var(--ed-ink-3)}

/* Graphiques de l'observatoire : barres qui poussent à l'arrivée */
body.ed-outils .obs-chart{border-radius:var(--ed-radius)}
body.ed-outils .chart-caption{font-family:var(--display);font-weight:700;font-size:var(--ed-h3);letter-spacing:-.015em;color:var(--ed-ink)}
.js [data-reveal="chart"]{opacity:1;transform:none}
.js [data-reveal="chart"] svg rect{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);transition:transform 1.1s var(--ed-ease)}
.js [data-reveal="chart"][data-axe="x"] svg rect{transform-origin:0 50%;transform:scaleX(0)}
.js [data-reveal="chart"] svg text{opacity:0;transition:opacity .6s ease .7s}
.js [data-reveal="chart"].is-in svg rect{transform:none}
.js [data-reveal="chart"].is-in svg text{opacity:1}
.js [data-reveal="chart"] svg rect:nth-of-type(2){transition-delay:.08s}
.js [data-reveal="chart"] svg rect:nth-of-type(3){transition-delay:.16s}
.js [data-reveal="chart"] svg rect:nth-of-type(4){transition-delay:.24s}
.js [data-reveal="chart"] svg rect:nth-of-type(5){transition-delay:.32s}
.ed-safe [data-reveal="chart"] svg :is(rect,text){transform:none!important;opacity:1!important}
@media(prefers-reduced-motion:reduce){.js [data-reveal="chart"] svg :is(rect,text){transform:none!important;opacity:1!important;transition:none!important}}

/* Idées reçues (obs-mythe) : citation, puis réponse */
body.ed-outils .obs-mythe{background:#fff;border:0;border-top:2px solid var(--ed-ink);padding:22px 0 0;box-shadow:none}
body.ed-outils .mythe-quote{font-family:var(--display);font-style:italic;font-weight:500;font-size:19px;line-height:1.35;color:var(--ed-ink)}
body.ed-outils .mythe-answer{font-size:16px;line-height:1.6;color:var(--ed-ink-2)}

/* FAQ des pages prix (pf-item) */
body.ed-outils .pf-item{border-radius:0!important;border:0;border-top:1px solid var(--ed-line);background:none}
body.ed-outils .pf-item summary{font-family:var(--display);font-weight:700;font-size:18px}

/* ---------------------------------------------------------------------
   3 · SIMULATEURS ET OUTILS
   --------------------------------------------------------------------- */
body.ed-outils .sim-grid{gap:clamp(24px,3vw,40px)}
body.ed-outils .sim-card{border-radius:var(--ed-radius);border:0;border-top:2px solid var(--ed-ink);background:#fff;box-shadow:none;padding:24px 0 0;transition:transform .6s var(--ed-ease)}
body.ed-outils .sim-card:hover{transform:translateY(-4px);box-shadow:none}
body.ed-outils .sim-card .eyebrow{font-size:13px;letter-spacing:.1em;color:var(--rouge-txt)}
body.ed-outils .sim-card h2,body.ed-outils .sim-card h3{font-size:var(--ed-h3);line-height:1.18}
body.ed-outils .sim-card p{font-size:16px;line-height:1.6}
body.ed-outils :is(.pv-panel,.fm-panel,.ce-panel,.pv-result,.fm-result,.ce-result,.pv-block,.fm-block,.ce-block,.pv-hero-result,.fm-hero-result,.ce-hero-result,.fm-acq,.ce-scenario,.pv-callout-tip,.fm-callout-tip,.ce-callout-tip,.pv-lead-capture){border-radius:var(--ed-radius)!important}
body.ed-outils :is(.pv-result,.fm-result,.ce-result){box-shadow:0 30px 60px -40px rgba(22,22,22,.4)}
body.ed-outils :is(.pv-hero-result,.fm-hero-result,.ce-hero-result) .amount{font-size:var(--ed-num);letter-spacing:-.04em}
body.ed-outils :is(.pv-block-title,.fm-block-title,.ce-block-title,.fm-section-title){font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
body.ed-outils :is(.pv-field,.fm-field,.ce-field) .lab{font-size:15px}
body.ed-outils :is(.pv-field,.fm-field,.ce-field) .hint{font-size:14px}
body.ed-outils .ce-tabs button,body.ed-outils .ce-tabs a{border-radius:var(--ed-radius)}

/* ---------------------------------------------------------------------
   4 · PAGES DE SERVICE (louer, nos services, devenir agent, question)
   --------------------------------------------------------------------- */
body.ed-outils :is(.louer-form-card,.join-team,.join-test,.ag-garantie,.ag-identite,.cred,.metier,.real-list,.svc-phase,.svc-table,.svc-arg,.svc-box,.svc-cta,.qualif-cta,.form){border-radius:var(--ed-radius)!important}
body.ed-outils :is(.join-team,.ag-garantie,.svc-cta,.cta-analyse,.obs-cta){background:var(--anthracite)}
body.ed-outils .credentials-grid .cred{background:none;border:0;border-top:1px solid var(--ed-line);padding:18px 0 0;text-align:left}
body.ed-outils .credentials-grid .cred .num{font-family:var(--display);font-weight:700;font-size:var(--ed-num-s);color:var(--rouge-txt)}
body.ed-outils .credentials-grid .cred .lab{font-size:15px;text-transform:none;letter-spacing:0}
body.ed-outils .fantasme-said{font-family:var(--display);font-style:italic;font-weight:500;font-size:19px}
body.ed-outils .fantasme-reply{font-size:16px;line-height:1.65}
body.ed-outils .svc-table{border-top:2px solid var(--ed-ink)}
body.ed-outils .svc-table :is(th,td){font-size:15px}
body.ed-outils :is(input,select,textarea){border-radius:var(--ed-radius)}
body.ed-outils .photo-band::after{height:2px}
/* Garder la levée au survol une fois la carte apparue */
.js body.ed-outils .sim-card.is-in:hover{transform:translateY(-4px)}
@media(prefers-reduced-motion:reduce){.js body.ed-outils .sim-card.is-in:hover{transform:none}}
/* Chiffres de l'observatoire : le bandeau vit dans la colonne de lecture, donc 2 × 2 */
body.ed-outils .obs-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 40px}
body.ed-outils .obs-stats-wide .wrap{padding:0 clamp(24px,4vw,48px)}
body.ed-outils .obs-stat-card .num{font-size:clamp(40px,5vw,68px);white-space:nowrap}
@media(max-width:420px){body.ed-outils .obs-stat-card .num{font-size:38px}}

/* Heros passés en ivoire : neutraliser les couleurs blanches écrites en
   style en ligne pour l'ancien fond noir (texte et boutons invisibles sinon) */
body.ed-outils [class*="-hero"] [style*="color:#fff"]{color:var(--ed-ink)!important}
body.ed-outils [class*="-hero"] .btn-3[style*="border-color:rgba(255"]{border-color:var(--ed-ink)!important}
body.ed-outils [class*="-hero"] .btn-3[style*="color:#fff"]:hover{background:var(--ed-ink);color:#fff!important}
body.ed-outils .ag-hero .ag-badge{background:#fff;border:1px solid var(--ed-line);color:var(--ed-ink);font-size:14px}
body.ed-outils .ag-hero .ag-badge span{color:var(--rouge-deep)}
/* Cartes des simulateurs : filet rouge vertical supprimé (le filet noir du haut suffit) */
body.ed-outils .sim-card::before{display:none}
body.ed-outils [class*="-hero"] [style*="rgba(255,255,255"]{border-color:var(--rouge)!important}
body.ed-outils .profil-hero .breadcrumb,body.ed-outils .commune-hero .breadcrumb{color:var(--ed-ink-3)}
body.ed-outils .profil-hero .tag,body.ed-outils .profil-hero .tag{background:none;color:var(--ed-ink)}

/* Pages merci et 404 (étape 2, 27/09) : alignées à gauche comme le reste
   du site, liens « pendant que tu y es » en boutons carrés, encadrés à plat */
body.ed-outils .narrow.center{text-align:left}
body.ed-outils .narrow.center .lead{margin-left:0!important;margin-right:0!important}
body.ed-outils .narrow.center > div[style*="margin:30px auto"],body.ed-outils .narrow.center > .callout-noir{margin-left:0!important;margin-right:0!important}
body.ed-outils a[style*="border-radius:50px"]{border-radius:var(--ed-radius)!important;background:#fff!important;border:1.5px solid var(--ed-line)!important;min-height:44px;display:inline-flex!important;align-items:center;transition:border-color .3s ease,color .3s ease}
body.ed-outils a[style*="border-radius:50px"]:hover{border-color:var(--ed-ink)!important;color:var(--rouge-deep)!important}
body.ed-outils #dl-box,body.ed-outils .narrow.center > .callout-noir{background:var(--anthracite)!important}
body.ed-outils .narrow.center [style*="auto"]{margin-left:0!important;margin-right:0!important;text-align:left}
body.ed-outils #dl-box{border-radius:var(--ed-radius)!important}
