/* =====================================================================
   Sarah Zimbris · editorial.css
   Direction artistique « éditorial premium » (refonte du 2026-09-25).
   Couche posée PAR-DESSUS site.css : elle n'écrase aucune classe
   existante, tout est préfixé .ed-. Une page n'en hérite que si elle
   charge ce fichier ET utilise ces classes.

   Sommaire
     1. Tokens (couleurs, typo, espaces, mouvements)
     2. Primitives (conteneur, sections, labels, titres, textes)
     3. Boutons et liens
     4. Couvertures de guides (collection)
     5. Système d'apparition (reveal, compteurs, images)
     6. Accessibilité et mouvement réduit
   ===================================================================== */

/* ---------------------------------------------------------------------
   1 · TOKENS
   Les couleurs de marque viennent de site.css (--noir, --rouge,
   --rouge-deep, --rouge-clair) : on ne les redéfinit pas.
   --------------------------------------------------------------------- */
:root{
  --ivoire:#F5EFE6;
  --ivoire-2:#ECE4D7;
  --anthracite:#1F1F1F;
  --anthracite-2:#2B2B2B;
  --ed-ink:#161616;
  --ed-ink-2:#3A3A3F;          /* texte courant sur clair : 11:1 sur ivoire */
  --ed-ink-3:#5C5C62;          /* texte secondaire : 6,2:1 sur ivoire */
  --ed-on-dark:#F3EFE9;
  --ed-on-dark-2:#BDBDC2;      /* 9:1 sur anthracite */
  --ed-line:rgba(22,22,22,.14);
  --ed-line-dark:rgba(255,255,255,.16);

  /* Typographie : la charte (Familjen Grotesk + Mulish), poussée en
     grands écarts de taille plutôt qu'en nouvelles polices. */
  /* Échelle par RÔLE (harmonisation du 25/09, revue Codex) :
     un rôle = une taille, sur toutes les pages. */
  --ed-h1:clamp(38px,5.2vw,78px);        /* 1440 px : 75 · mobile : 38 */
  --ed-h2:clamp(28px,3.2vw,48px);        /* 1440 px : 46 · mobile : 28 */
  --ed-h3:clamp(20px,1.7vw,26px);
  --ed-num:clamp(44px,5vw,76px);         /* preuve chiffrée principale */
  --ed-num-s:clamp(24px,2.2vw,32px);     /* numéros d'étape, repères */
  --ed-fs-lead:clamp(18px,1.45vw,21px);
  --ed-fs-body:17px;
  --ed-fs-caption:15px;                  /* rôles, légendes informatives */
  --ed-fs-btn:15px;
  --ed-fs-label:12px;                    /* repères décoratifs */
  --ed-lh-title:1.07;
  /* Alias conservés pour les composants existants */
  --ed-fs-mega:var(--ed-num);
  --ed-fs-xl:var(--ed-h1);
  --ed-fs-l:var(--ed-h2);
  --ed-fs-m:var(--ed-h2);
  --ed-fs-s:var(--ed-h3);
  --ed-fs-small:14px;

  /* Espaces : échelle unique, utilisée partout */
  --ed-s1:4px;--ed-s2:8px;--ed-s3:12px;--ed-s4:16px;--ed-s5:24px;
  --ed-s6:32px;--ed-s7:48px;--ed-s8:64px;--ed-s9:96px;--ed-s10:136px;
  --ed-section:clamp(56px,7.2vw,104px);   /* 104 desktop, 56 mobile */

  --ed-container:1280px;
  --ed-read:760px;                       /* colonne de lecture, ~60 caractères */
  --ed-gutter:clamp(16px,4.2vw,56px);
  --ed-radius:2px;

  --ed-ease:cubic-bezier(.16,1,.3,1);
  --ed-ease-in-out:cubic-bezier(.65,0,.35,1);
  --ed-dur:.9s;
}

/* ---------------------------------------------------------------------
   2 · PRIMITIVES
   --------------------------------------------------------------------- */
.ed-container{max-width:var(--ed-container);margin:0 auto;padding:0 var(--ed-gutter)}
.ed-section{padding:var(--ed-section) 0;position:relative}
.ed-bg-ivoire{background:var(--ivoire);color:var(--ed-ink)}
.ed-bg-blanc{background:#fff;color:var(--ed-ink)}
.ed-bg-dark{background:var(--anthracite);color:var(--ed-on-dark);--rouge-txt:var(--rouge-clair)}
.ed-bg-rouge{background:var(--rouge);color:#fff}

/* Label éditorial : petites capitales précédées d'un filet rouge */
.ed-label{
  display:flex;align-items:center;gap:14px;
  font-family:var(--display);font-weight:700;font-size:var(--ed-fs-label);
  letter-spacing:.14em;text-transform:uppercase;line-height:1.4;
  color:var(--ed-ink);margin:0 0 var(--ed-s5);max-width:none;
}
.ed-label::before{content:"";flex:0 0 28px;height:2px;background:var(--rouge)}
.ed-bg-dark .ed-label{color:var(--ed-on-dark)}
.ed-bg-rouge .ed-label{color:#fff}
.ed-bg-rouge .ed-label::before{background:#fff}
.ed-label .ed-label__num{color:var(--rouge-txt)}

/* Titres : ils font partie de la composition */
.ed-title{
  font-family:var(--display);font-weight:700;
  font-size:var(--ed-h2);line-height:var(--ed-lh-title);letter-spacing:-.028em;
  color:inherit;margin:0 0 var(--ed-s5);max-width:20ch;
  text-wrap:balance;
}
.ed-title--xl{font-size:var(--ed-h1);letter-spacing:-.035em}
.ed-title--m{max-width:24ch}
/* L'accent : italique léger + rouge, jamais un surligneur plein */
.ed-title em,.ed-accent{font-style:italic;font-weight:500;color:var(--rouge-txt)}
.ed-bg-rouge .ed-title em{color:#fff}

.ed-lead{
  font-family:var(--display);font-weight:500;font-size:var(--ed-fs-lead);
  line-height:1.45;color:var(--ed-ink-2);max-width:46ch;margin:0 0 var(--ed-s5);
}
.ed-bg-dark .ed-lead{color:var(--ed-on-dark)}
.ed-text{font-size:var(--ed-fs-body);line-height:1.65;color:var(--ed-ink-2);max-width:62ch}
.ed-text strong,.ed-lead strong{color:var(--ed-ink);font-family:var(--display);font-weight:700}
.ed-bg-dark .ed-text{color:var(--ed-on-dark-2)}
.ed-bg-dark .ed-text strong,.ed-bg-dark .ed-lead strong{color:#fff}

.ed-rule{height:1px;background:var(--ed-line);border:0;margin:0}
.ed-bg-dark .ed-rule{background:var(--ed-line-dark)}

/* En-tête de section en deux colonnes : titre à gauche, texte à droite */
.ed-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--ed-s5) var(--ed-s8);align-items:end;margin-bottom:40px}
.ed-head .ed-title{margin-bottom:0}
.ed-head .ed-text,.ed-head .ed-lead{margin-bottom:0}
@media(max-width:900px){.ed-head{grid-template-columns:1fr;gap:var(--ed-s5);margin-bottom:var(--ed-s7)}}

/* En-tête des pages éditoriales (<body class="ed-page">) : le menu et la
   barre de contact s'alignent sur la grille éditoriale, le bouton du menu
   prend les angles droits des nouveaux boutons. Le menu lui-même (partial)
   n'est pas modifié. */
.ed-page .topbar .tb-inner,.ed-page nav .inner{max-width:var(--ed-container);padding-left:var(--ed-gutter);padding-right:var(--ed-gutter)}
.ed-page nav{background:rgba(255,255,255,.96)}
.ed-page footer .wrap{max-width:var(--ed-container);padding-left:var(--ed-gutter);padding-right:var(--ed-gutter)}
.ed-page .nav-links a{font-family:var(--display);font-weight:600;letter-spacing:.01em;opacity:.8}
.ed-page .nav-links a.nav-cta{border-radius:var(--ed-radius);background:var(--rouge);color:#fff;border-color:var(--rouge);opacity:1}
.ed-page .nav-links a.nav-cta:hover{background:var(--ed-ink);border-color:var(--ed-ink);color:#fff}

/* ---------------------------------------------------------------------
   3 · BOUTONS ET LIENS
   Angles quasi droits, grande lisibilité, flèche qui glisse au survol,
   fond qui se remplit par le bas. Cible tactile >= 52 px.
   --------------------------------------------------------------------- */
.ed-btn{
  --bg:transparent;--fg:var(--ed-ink);--bd:var(--ed-ink);--fill:var(--ed-ink);--fg-h:#fff;
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:space-between;gap:22px;
  min-height:56px;padding:16px 24px 16px 26px;
  font-family:var(--display);font-weight:700;font-size:var(--ed-fs-btn);letter-spacing:.06em;text-transform:uppercase;
  color:var(--fg);background:var(--bg);border:1.5px solid var(--bd);border-radius:var(--ed-radius);
  text-decoration:none;cursor:pointer;
  transition:color .45s var(--ed-ease),border-color .45s var(--ed-ease);
}
.ed-btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--fill);
  transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ed-ease);
}
.ed-btn:hover,.ed-btn:focus-visible{color:var(--fg-h)}
.ed-btn:hover::before,.ed-btn:focus-visible::before{transform:scaleY(1)}
.ed-btn:active{transform:translateY(1px)}
.ed-btn__arrow{display:inline-block;font-size:18px;letter-spacing:0;transition:transform .45s var(--ed-ease)}
.ed-btn:hover .ed-btn__arrow,.ed-btn:focus-visible .ed-btn__arrow{transform:translateX(6px)}

.ed-btn--rouge{--bg:var(--rouge);--fg:#fff;--bd:var(--rouge);--fill:var(--ed-ink);--fg-h:#fff}
.ed-btn--rouge:hover,.ed-btn--rouge:focus-visible{border-color:var(--ed-ink)}
.ed-btn--noir{--bg:var(--ed-ink);--fg:#fff;--bd:var(--ed-ink);--fill:var(--rouge);--fg-h:#fff}
.ed-btn--noir:hover,.ed-btn--noir:focus-visible{border-color:var(--rouge)}
.ed-btn--contour{--bg:transparent;--fg:var(--ed-ink);--bd:var(--ed-ink);--fill:var(--ed-ink);--fg-h:#fff}
.ed-btn--clair{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.55);--fill:#fff;--fg-h:var(--ed-ink)}
.ed-btn--clair:hover,.ed-btn--clair:focus-visible{border-color:#fff}
.ed-btn--blanc{--bg:#fff;--fg:var(--ed-ink);--bd:#fff;--fill:var(--ed-ink);--fg-h:#fff}
.ed-btn--blanc:hover,.ed-btn--blanc:focus-visible{border-color:var(--ed-ink)}
.ed-btn--block{width:100%}

.ed-btns{display:flex;flex-wrap:wrap;gap:var(--ed-s3)}
@media(max-width:560px){.ed-btns .ed-btn{width:100%}.ed-btn{letter-spacing:.04em;padding-left:20px;padding-right:18px;gap:14px}}

/* Lien éditorial : souligné fin, le trait se retire puis revient */
.ed-link{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);font-weight:700;font-size:var(--ed-fs-btn);letter-spacing:.02em;
  color:inherit;text-decoration:none;padding:10px 0;
  background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/100% 1px;
  transition:background-size .5s var(--ed-ease),color .3s ease;
}
.ed-link:hover,.ed-link:focus-visible{background-size:0 1px;background-position:100% 100%;color:var(--rouge-txt)}
.ed-link span[aria-hidden]{transition:transform .45s var(--ed-ease)}
.ed-link:hover span[aria-hidden]{transform:translateX(5px)}

/* Focus clavier : toujours visible, jamais masqué par le design */
.ed-btn:focus-visible,.ed-link:focus-visible,.ed-focus:focus-visible{outline:3px solid var(--rouge);outline-offset:3px}
.ed-bg-rouge .ed-btn:focus-visible,.ed-bg-rouge .ed-link:focus-visible{outline-color:#fff}

/* ---------------------------------------------------------------------
   4 · COUVERTURES DE GUIDES · la collection
   Couvertures typographiques rendues en HTML : texte réel (indexable),
   zéro image à charger, identité commune. Trois teintes par famille :
     vendre = rouge · acheter = ivoire · louer = anthracite
     hériter = blanc cassé à bandeau noir
   Les PDF ne sont pas concernés.
   --------------------------------------------------------------------- */
.ed-cover{
  --c-bg:var(--ivoire-2);--c-fg:var(--ed-ink);--c-acc:var(--rouge-deep);--c-line:rgba(22,22,22,.22);
  container-type:inline-size;   /* les tailles suivent la COUVERTURE, pas la fenêtre */
  position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:10px;
  aspect-ratio:3/4;padding:clamp(14px,8cqi,26px);
  background:var(--c-bg);color:var(--c-fg);border-radius:var(--ed-radius);overflow:hidden;
  box-shadow:0 1px 0 rgba(22,22,22,.06),0 24px 48px -28px rgba(22,22,22,.45);
  transition:transform .6s var(--ed-ease),box-shadow .6s var(--ed-ease);
}
.ed-cover::after{ /* le dos du livre : un filet vertical, rien de plus */
  content:"";position:absolute;top:0;bottom:0;left:10px;width:1px;background:var(--c-line);
}
/* Hiérarchie : 1. le titre  2. le nom de Sarah  3. le repère de collection */
.ed-cover__top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-family:var(--display);font-weight:700;font-size:clamp(10px,4.4cqi,13px);letter-spacing:.14em;text-transform:uppercase;padding-left:8px}
.ed-cover__num{font-size:clamp(14px,8cqi,26px);letter-spacing:-.02em;line-height:1;color:var(--c-acc);font-weight:700}
.ed-cover__title{
  font-family:var(--display);font-weight:700;font-size:clamp(15px,11.5cqi,36px);line-height:1.06;letter-spacing:-.02em;
  margin:0;padding-left:8px;max-width:13ch;text-wrap:balance;hyphens:auto;
}
.ed-cover__title em{font-style:italic;font-weight:500;color:var(--c-acc)}
.ed-cover__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;padding:12px 0 0 8px;border-top:1px solid var(--c-line);
  font-family:var(--display);font-weight:600;font-size:clamp(9px,4cqi,12px);letter-spacing:.12em;text-transform:uppercase}
.ed-cover__foot b{font-weight:700;letter-spacing:.01em;text-transform:none;font-size:clamp(11px,5.6cqi,16px);white-space:nowrap;
  background:linear-gradient(transparent 60%,rgba(220,40,40,.55) 60%);padding:0 .08em}
.ed-cover__foot span{white-space:nowrap}
@container (max-width:150px){.ed-cover__foot span{display:none}}
.ed-cover--vendre{--c-bg:var(--rouge);--c-fg:#fff;--c-acc:#fff;--c-line:rgba(255,255,255,.4)}  /* noir sur rouge = 3,77:1, insuffisant en petite taille */
.ed-cover--vendre .ed-cover__foot b{background:linear-gradient(transparent 60%,rgba(22,22,22,.45) 60%)}
.ed-cover--acheter{--c-bg:var(--ivoire-2);--c-fg:var(--ed-ink);--c-acc:var(--rouge-deep)}
.ed-cover--louer{--c-bg:var(--anthracite);--c-fg:var(--ed-on-dark);--c-acc:var(--rouge-clair);--c-line:rgba(255,255,255,.2)}
.ed-cover--heriter{--c-bg:#FBF8F3;--c-fg:var(--ed-ink);--c-acc:var(--rouge-deep)}
.ed-cover--heriter::before{content:"";position:absolute;left:0;right:0;top:0;height:22%;background:var(--ed-ink);z-index:0}
.ed-cover--heriter .ed-cover__top{color:#fff;position:relative;z-index:1}
.ed-cover--heriter .ed-cover__num{color:var(--rouge-clair)}

/* Intégration dans les cartes existantes (.cover-card de site.css) sur
   /guides, /vendre, /acheter, /louer : même carte, nouvelle couverture. */
.cover-frame--ed{aspect-ratio:3/4;background:none;border-radius:var(--ed-radius)}
.cover-frame--ed .ed-cover{height:100%;aspect-ratio:auto;box-shadow:none;border-radius:0}

/* Carte cliquable qui porte la couverture */
.ed-book{display:block;text-decoration:none;color:inherit}
.ed-book:hover .ed-cover,.ed-book:focus-visible .ed-cover{transform:translateY(-8px) rotate(-.6deg);box-shadow:0 1px 0 rgba(22,22,22,.06),0 36px 60px -30px rgba(22,22,22,.6)}
.ed-book:focus-visible{outline:none}
.ed-book:focus-visible .ed-cover{outline:3px solid var(--rouge);outline-offset:4px}
.ed-book__meta{display:block;margin-top:16px;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:inherit}
.ed-book__meta span{display:block;margin-top:4px;font-weight:500;letter-spacing:0;text-transform:none;font-size:16px;color:var(--ed-ink-3)}
.ed-bg-dark .ed-book__meta span{color:var(--ed-on-dark-2)}

/* ---------------------------------------------------------------------
   5 · SYSTÈME D'APPARITION
   La classe .js est posée sur <html> par un script de 1 ligne dans le
   <head>, AVANT le premier affichage : les éléments démarrent donc déjà
   dans leur état initial, sans flash. Sans JavaScript, tout est visible.
   Un filet de sécurité (.ed-safe, posé au bout de 3 s si editorial.js
   n'a pas démarré) révèle tout.
   --------------------------------------------------------------------- */
.js [data-reveal]{opacity:0;transform:translate3d(0,28px,0);transition:opacity var(--ed-dur) var(--ed-ease),transform var(--ed-dur) var(--ed-ease)}
.js [data-reveal="fade"]{transform:none}
.js [data-reveal="clip"]{opacity:1;transform:none;clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--ed-ease-in-out)}
.js [data-reveal="img"]{opacity:1;transform:none;clip-path:inset(12% 0 12% 0);transition:clip-path 1.3s var(--ed-ease-in-out)}
.js [data-reveal="img"] img{transform:scale(1.12);transition:transform 1.6s var(--ed-ease)}
.js [data-reveal="line"]{opacity:1;transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ed-ease-in-out)}
.js [data-reveal].ed-now,.js [data-reveal].ed-now img{transition:none!important}
.js [data-reveal].is-in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
.js [data-reveal="img"].is-in img{transform:scale(1)}
/* Cascade : chaque enfant d'un groupe attend son tour (--i posé en JS) */
.js [data-reveal-group]>[data-reveal]{transition-delay:calc(var(--i,0) * 90ms)}

/* Compteurs : le chiffre réel reste dans le HTML (lisible sans JS et par
   les moteurs) ; il n'est masqué que le temps que le JS le remette à 0. */
.js [data-countup]{opacity:0}
.js [data-countup].is-counting{opacity:1;transition:opacity .3s ease}
[data-countup]{font-variant-numeric:tabular-nums}

/* Parallaxe douce (pilotée par editorial.js, desktop uniquement) */
[data-parallax]{will-change:transform}

.ed-safe [data-reveal],.ed-safe [data-countup]{opacity:1!important;transform:none!important;clip-path:none!important}
.ed-safe [data-reveal] img{transform:none!important}

/* ---------------------------------------------------------------------
   6 · MOUVEMENT RÉDUIT : tout est posé, rien ne bouge
   --------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .js [data-reveal],.js [data-countup]{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .js [data-reveal] img{transform:none!important;transition:none!important}
  [data-parallax]{transform:none!important}
  .ed-btn,.ed-btn::before,.ed-btn__arrow,.ed-link,.ed-cover{transition:none!important}
  .ed-book:hover .ed-cover{transform:none}
}

/* Mobile : carte de guide compacte, couverture et sujet côte à côte,
   au lieu d'une couverture qui occupe tout l'écran (revue du 25/09). */
@media(max-width:560px){
  .covers-grid:has(.cover-frame--ed){gap:22px}
  .cover-card:has(.cover-frame--ed){display:grid;grid-template-columns:140px minmax(0,1fr);gap:18px;align-items:center;transform:none}
  .cover-card:has(.cover-frame--ed) .cover-meta{margin-top:0}
  .cover-card:has(.cover-frame--ed) .cover-meta .verb{font-size:16px}
}

/* =====================================================================
   7 · ANIMATIONS DE MARQUE (lot 1 de la refonte, 26/09)
   Toutes suivent le contrat du §5 : état initial seulement sous .js,
   repli visible sans JavaScript, .ed-safe et mouvement réduit.
     card  : une carte qui glisse doucement vers sa place
     drop  : un polaroïd qui se pose de biais, avec un léger rebond
     label : le filet rouge d'un label qui se dessine
   ===================================================================== */
.js [data-reveal="card"]{transform:translate3d(0,44px,0);transition:opacity .9s var(--ed-ease),transform 1.1s var(--ed-ease)}
.js [data-reveal="drop"]{opacity:0;transform:translate3d(0,-34px,0) rotate(calc(var(--rot,0deg) + 7deg)) scale(1.05);
  transition:opacity .6s ease .12s,transform 1.15s cubic-bezier(.2,1.25,.35,1) .12s}
.js [data-reveal="drop"].is-in{opacity:1;transform:rotate(var(--rot,0deg))}
.js [data-reveal="label"]::before{transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ed-ease-in-out) .15s}
.js [data-reveal="label"].is-in::before{transform:scaleX(1)}
.ed-safe [data-reveal="drop"]{transform:rotate(var(--rot,0deg))!important}
.ed-safe [data-reveal="label"]::before{transform:none!important}
@media(prefers-reduced-motion:reduce){
  .js [data-reveal="drop"]{transform:rotate(var(--rot,0deg))!important}
  .js [data-reveal="label"]::before{transform:none!important}
}

/* =====================================================================
   8 · ÉTUDES DE CAS (composant généré par _cas_etudes.py)
   Trois formes : --grand (cas phare), --detail (récit complet),
   --simple (carte polaroïd). Le badge dit toujours ce que montre la photo.
   ===================================================================== */
.ed-case{position:relative;color:var(--ed-ink)}
.ed-case figure{margin:0}
.ed-case__photo{position:relative;overflow:hidden;background:var(--ivoire-2)}
.ed-case__photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s var(--ed-ease)}
.ed-case:hover .ed-case__photo img{transform:scale(1.035)}
.ed-case__badge{position:absolute;left:10px;bottom:10px;z-index:2;max-width:calc(100% - 20px);
  background:rgba(22,22,22,.8);color:#fff;font-family:var(--display);font-weight:600;font-size:12px;line-height:1.35;letter-spacing:.01em;padding:5px 9px;border-radius:var(--ed-radius)}
.ed-case__credit{font-weight:500;opacity:.85}
.ed-case__credit a{color:inherit}

.ed-case__polaroid{position:relative;background:#fff;padding:10px 10px 12px;transform:rotate(var(--rot,0deg));
  box-shadow:0 1px 2px rgba(22,22,22,.08),0 26px 44px -20px rgba(22,22,22,.42);transition:transform .6s var(--ed-ease),box-shadow .6s var(--ed-ease)}
.ed-case__polaroid img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.ed-case__polaroid .ed-case__badge{position:static;display:block;margin-top:9px;background:none;color:var(--ed-ink-3);padding:0 2px;font-size:12px}

.ed-case__meta{margin:0 0 10px;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--rouge-txt);max-width:none}
.ed-case__title{font-family:var(--display);font-weight:700;font-size:var(--ed-h3);line-height:1.18;letter-spacing:-.018em;margin:0 0 var(--ed-s4);max-width:26ch;color:var(--ed-ink)}
.ed-case__story{margin:0;display:grid;gap:14px}
.ed-case__step{margin:0}
.ed-case__step dt{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ed-ink);margin:0 0 4px}
.ed-case__step dd{margin:0;font-size:16px;line-height:1.6;color:var(--ed-ink-2);max-width:60ch}
.ed-case__figure{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:var(--ed-s5) 0 0;padding-top:var(--ed-s4);border-top:1px solid var(--ed-line);max-width:none}
.ed-case__figure b{font-family:var(--display);font-weight:700;font-size:var(--ed-num-s);line-height:1;letter-spacing:-.02em;color:var(--rouge-txt)}
.ed-case__figure span{font-family:var(--display);font-weight:600;font-size:var(--ed-fs-caption);color:var(--ed-ink-2)}
.ed-case__voice{margin:var(--ed-s5) 0 0;padding:4px 0 4px 18px;border-left:2px solid var(--rouge)}
.ed-case__voice p{margin:0 0 6px;font-family:var(--display);font-weight:500;font-style:italic;font-size:18px;line-height:1.45;color:var(--ed-ink);max-width:48ch}
.ed-case__voice cite{font-style:normal;font-family:var(--display);font-weight:700;font-size:14px;color:var(--ed-ink)}
.ed-case__voice cite span{font-weight:500;color:var(--ed-ink-3);margin-left:6px}
.ed-case__note{margin:12px 0 0;font-size:14px;color:var(--ed-ink-3)}

/* Cas phare : grande photo, polaroïd superposé, panneau de récit qui chevauche */
.ed-case--grand{margin-bottom:var(--ed-s8)}
.ed-case--grand .ed-case__media{position:relative}
.ed-case--grand .ed-case__photo{aspect-ratio:21/9}
.ed-case--grand .ed-case__photo .ed-case__badge{left:auto;right:12px;bottom:12px}
.ed-case--grand .ed-case__polaroid{position:absolute;left:clamp(12px,4vw,56px);bottom:clamp(-110px,-8vw,-40px);width:clamp(140px,17vw,240px);z-index:3}
.ed-case--grand .ed-case__panel{position:relative;z-index:2;background:#fff;width:min(100%,720px);margin:clamp(-160px,-11vw,-60px) 0 0 auto;
  padding:clamp(24px,3.4vw,48px);box-shadow:0 30px 60px -36px rgba(22,22,22,.35)}
.ed-case--grand .ed-case__story{grid-template-columns:1fr 1fr;gap:18px 32px}
.ed-case--grand .ed-case__figure b{font-size:var(--ed-num)}
@media(max-width:760px){
  .ed-case--grand .ed-case__photo{aspect-ratio:4/3}
  .ed-case--grand .ed-case__polaroid{left:auto;right:12px;top:-28px;bottom:auto;width:118px}
  .ed-case--grand .ed-case__panel{margin:-36px 12px 0;width:auto}
  .ed-case--grand .ed-case__story{grid-template-columns:1fr}
  .ed-case--grand .ed-case__photo .ed-case__badge{right:auto;left:10px}
}

/* Récit détaillé : photos empilées à gauche, récit à droite */
.ed-case--detail{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--ed-s7) clamp(32px,5vw,80px);align-items:start;margin-bottom:var(--ed-s8)}
.ed-case--detail .ed-case__media{position:relative;padding-bottom:clamp(40px,6vw,90px)}
.ed-case--detail .ed-case__photo{aspect-ratio:4/5}
.ed-case--detail .ed-case__polaroid{position:absolute;width:46%;right:-6%;bottom:0;z-index:3}
.ed-case--detail .ed-case__polaroid + .ed-case__polaroid{right:auto;left:-4%;bottom:-30px;width:38%}
.ed-case--detail .ed-case__story{counter-reset:etape}
.ed-case--detail .ed-case__step{counter-increment:etape;display:grid;grid-template-columns:40px minmax(0,1fr);padding-top:14px;border-top:1px solid var(--ed-line)}
.ed-case--detail .ed-case__step::before{content:counter(etape,decimal-leading-zero);grid-row:1/3;font-family:var(--display);font-weight:700;font-size:14px;color:var(--rouge-txt)}
.ed-case--detail .ed-case__step dt,.ed-case--detail .ed-case__step dd{grid-column:2}
@media(max-width:900px){
  .ed-case--detail{grid-template-columns:1fr}
  .ed-case--detail .ed-case__media{max-width:440px}
}

/* Cartes polaroïd : posées de biais, se redressent au survol */
.ed-cases__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(40px,5vw,64px) clamp(24px,3vw,44px);align-items:start}
.ed-case--simple .ed-case__polaroid{max-width:340px}
.ed-case--simple .ed-case__body{padding:22px 4px 0}
.ed-case--simple .ed-case__title{font-size:clamp(19px,1.5vw,22px)}
.ed-case--simple .ed-case__figure{margin:0 0 var(--ed-s4);padding-top:0;border-top:0}
.ed-case--simple .ed-case__story{gap:10px}
.ed-case--simple .ed-case__step dd{font-size:15px}
.ed-case--simple .ed-case__voice p{font-size:16px}
.ed-case--simple:hover .ed-case__polaroid{transform:rotate(0deg) translateY(-6px);transition-delay:0s;box-shadow:0 1px 2px rgba(22,22,22,.08),0 34px 56px -22px rgba(22,22,22,.5)}
@media(max-width:1000px){.ed-cases__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.ed-cases__grid{grid-template-columns:1fr}.ed-case--simple .ed-case__polaroid{max-width:300px}}
@media(prefers-reduced-motion:reduce){.ed-case--simple:hover .ed-case__polaroid{transform:rotate(var(--rot,0deg))}.ed-case:hover .ed-case__photo img{transform:none}}

/* Section qui porte des cas (pages en peau éditoriale) */
.ed-cases-section{background:var(--ivoire)}
.ed-cases-section .ed-cases__more{display:flex;flex-wrap:wrap;gap:12px 32px;align-items:center;margin-top:var(--ed-s7)}
.ed-cases-section .ed-cases__avertissement{font-size:14px;color:var(--ed-ink-3);max-width:62ch;margin:0}

/* =====================================================================
   9 · EN-TÊTE DE PAGE ÉDITORIAL (.ed-pagehero), réutilisable
   Label, grand titre avec UN surlignage, chapô à droite sur grand écran.
   Entrée au chargement (pas au défilement) : le titre et le chapô sont
   lisibles en moins d'une seconde, sans dépendre d'un observateur.
   ===================================================================== */
.ed-pagehero{background:var(--ivoire);border-bottom:1px solid var(--ed-line);padding:clamp(48px,6vw,96px) 0 clamp(48px,5.6vw,88px);--rouge-txt:var(--rouge-deep)}
.ed-pagehero__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--ed-s8);align-items:end}
.ed-pagehero__label{grid-column:1/-1}
.ed-pagehero__title{grid-column:1;grid-row:2/4;font-family:var(--display);font-weight:700;font-size:var(--ed-h1);line-height:1.04;letter-spacing:-.035em;color:var(--ed-ink);margin:0;max-width:15ch;text-wrap:balance}
.ed-pagehero__title .hl{font-style:italic;font-weight:500}
.ed-pagehero__lead{grid-column:2;grid-row:2;font-family:var(--display);font-weight:500;font-size:var(--ed-fs-lead);line-height:1.5;color:var(--ed-ink-2);margin:0;max-width:44ch}
.ed-pagehero__note{grid-column:2;grid-row:3;margin:var(--ed-s4) 0 0;font-size:14px;line-height:1.55;color:var(--ed-ink-3);max-width:48ch}
@media(max-width:999px){
  .ed-pagehero__grid{grid-template-columns:1fr}
  .ed-pagehero__title,.ed-pagehero__lead,.ed-pagehero__note{grid-column:1;grid-row:auto}
  .ed-pagehero__title{margin-bottom:var(--ed-s5)}
}

/* Entrée des en-têtes au chargement : pagehero + heros des pages en peau */
.js :is(.ed-pagehero__title,.ed-pagehero__lead,.ed-pagehero__note),
.js .ed-skin :is(.vendre-hero,.buy-hero,.eq-hero) :is(h1,.lead,p,.hero-cta),
.js .ed-skin .about-intro :is(h1,.lead){
  animation:edHeroIn .75s var(--ed-ease) both;
}
.js .ed-skin :is(.vendre-hero,.buy-hero,.eq-hero) h1,.js .ed-pagehero__title,.js .ed-skin .about-intro h1{animation-delay:40ms}
.js .ed-skin :is(.vendre-hero,.buy-hero,.eq-hero) :is(.lead,p),.js .ed-pagehero__lead,.js .ed-skin .about-intro .lead{animation-delay:160ms}
.js .ed-skin :is(.vendre-hero,.buy-hero) .hero-cta,.js .ed-pagehero__note{animation-delay:260ms}
@keyframes edHeroIn{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
.ed-safe :is(.ed-pagehero__title,.ed-pagehero__lead,.ed-pagehero__note),
.ed-safe .ed-skin :is(.vendre-hero,.buy-hero,.eq-hero) :is(h1,.lead,p,.hero-cta),
.ed-safe .ed-skin .about-intro :is(h1,.lead){animation:none!important}
@media(prefers-reduced-motion:reduce){
  .js :is(.ed-pagehero__title,.ed-pagehero__lead,.ed-pagehero__note),
  .js .ed-skin :is(.vendre-hero,.buy-hero,.eq-hero) :is(h1,.lead,p,.hero-cta),
  .js .ed-skin .about-intro :is(h1,.lead){animation:none!important}
}

/* Cas avec vraies photos : photo principale paysage dans un cadre polaroïd,
   rangée de vues secondaires qui se posent l'une après l'autre (pas de
   carrousel), résultat mis en avant avant le récit. */
.ed-case--detail.ed-case--paysage{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.ed-case--paysage .ed-case__media{padding-bottom:0}
.ed-case--paysage .ed-case__photo{aspect-ratio:3/2}
.ed-case__photo--cadre{background:#fff;padding:12px 12px 46px;box-shadow:0 1px 2px rgba(22,22,22,.08),0 30px 54px -26px rgba(22,22,22,.45)}
.ed-case__photo--cadre img{aspect-ratio:3/2;height:auto}
.ed-case__photo--cadre .ed-case__badge{left:14px;bottom:14px;background:none;color:var(--ed-ink-2);padding:0;font-size:13px}
.ed-case__strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,18px);margin-top:clamp(18px,2vw,26px)}
.ed-case__strip .ed-case__polaroid{padding:7px 7px 8px}
.ed-case__strip .ed-case__polaroid img{aspect-ratio:4/3}
.ed-case__strip .ed-case__badge{font-size:11px;margin-top:6px}
.ed-case__strip .ed-case__polaroid:hover{transform:rotate(0deg) translateY(-4px)}

.ed-case__result{margin:0 0 var(--ed-s5);padding:18px 0 20px;border-top:2px solid var(--ed-ink);border-bottom:1px solid var(--ed-line)}
.ed-case__result-head{margin:0 0 6px;font-family:var(--display);font-weight:700;font-size:clamp(22px,2vw,28px);line-height:1.15;letter-spacing:-.02em;color:var(--ed-ink);max-width:none}
.ed-case__result .ed-case__figure{margin:0;padding:0;border:0}
.ed-case__result .ed-case__figure b{font-size:clamp(32px,3.2vw,44px)}
.ed-case__reperes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px;margin:16px 0 0}
.ed-case__reperes div{margin:0}
.ed-case__reperes dt{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ed-ink-3);margin:0 0 2px}
.ed-case__reperes dd{margin:0;font-family:var(--display);font-weight:700;font-size:18px;color:var(--ed-ink-2)}
@media(max-width:900px){
  .ed-case--detail.ed-case--paysage{grid-template-columns:1fr}
  .ed-case--paysage .ed-case__media{max-width:none}
}
@media(max-width:480px){.ed-case__reperes{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.ed-case__strip .ed-case__polaroid:hover{transform:rotate(var(--rot,0deg))}}

/* Mobile : les polaroïds inclinés ne dépassent jamais du bord de l'écran */
.ed-cases-section{overflow-x:clip}
@media(max-width:900px){
  .ed-case--detail .ed-case__polaroid{right:0}
  .ed-case--detail .ed-case__polaroid + .ed-case__polaroid{left:0}
}

/* La rangée de vues secondaires n'hérite pas des polaroïds superposés */
.ed-case--detail .ed-case__strip .ed-case__polaroid,
.ed-case--detail .ed-case__strip .ed-case__polaroid + .ed-case__polaroid{position:relative;width:auto;left:auto;right:auto;bottom:auto;top:auto}
/* height:auto : l'attribut height des <img> passait devant aspect-ratio (piège déjà vu sur /a-propos) */
.ed-case__polaroid img{height:auto}

/* Rangée de vues : autant de colonnes que de photos (3 ou 4), 2 sur mobile au-delà de 3 */
.ed-case__strip{grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}
@media(max-width:620px){.ed-case__strip[style*="--n:4"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Récit inversé : photos à droite, pour alterner deux cas détaillés qui se suivent */
@media(min-width:901px){
  .ed-case--detail.ed-case--inverse{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .ed-case--inverse .ed-case__media{order:2}
}
/* Cadre polaroïd : la légende se place dans la bande blanche, pas sur la photo */
.ed-case .ed-case__photo--cadre{aspect-ratio:auto}
.ed-case__photo--cadre img{aspect-ratio:3/2;height:auto}

/* Cas phare : deuxième polaroïd, posé à côté du premier */
.ed-case--grand .ed-case__polaroid + .ed-case__polaroid{left:calc(clamp(12px,4vw,56px) + clamp(120px,14vw,200px));bottom:clamp(-70px,-5vw,-24px);width:clamp(120px,13vw,190px);z-index:4}
.ed-case--grand .ed-case__photo img{object-position:50% 58%}
@media(max-width:760px){.ed-case--grand .ed-case__polaroid + .ed-case__polaroid{display:none}}
.ed-case--grand .ed-case__photo .ed-case__badge{top:12px;bottom:auto}

/* Direction éditoriale : aucun halo dégradé décoratif, nulle part.
   (Pseudo-éléments hérités de l'ancien style, relevés le 26/09 sur tout le site) */
.ed-page :is(.cta-analyse,.cta-central,.callout-dark,.svc-cta,.stat-card,.pv-result,.fm-result,.ce-result,.prix-cta-inline,.join-team)::after,
.ed-page :is(.hero,.pdf-download,.prix-cta,.obs-cta,.obs-stats-wide)::before{background:none!important;box-shadow:none!important}
.ed-page [style*="radial-gradient"]{display:none!important}

/* =====================================================================
   10 · NETTOYAGE FINAL DE L'ANCIENNE DA (étape 2, 27/09)
   Relevé automatique sur les 78 pages : angles arrondis et dégradés
   hérités. Angles droits partout, aplats de la charte. Les ronds voulus
   (puces, pastilles de moins de 24 px, cases à cocher) ne sont pas visés.
   ===================================================================== */
.ed-page :is(section,header,article,aside,main) a:not(.hl-logo),
.ed-page :is(input:not([type=checkbox]):not([type=radio]),select,textarea,table,.table-scroll,label),
.ed-page :is(.retour-sommaire,.punch-stat,.big-number,.cta-mid,.callout-dark,.stat-block,.pdf-tools,.consent,.devenir-consent,.final-editorial,
  .ag-id-grid,.svc-table-wrap,.ms,.mg,.ce-tabs,.ce-add-loan,.ce-explainer,.fm-explainer,.pv-explainer,.panel,.link-commune,.qualif-cta,
  .pv-result,.fm-result,.ce-result,.prix-note-source,.obs-table-wrap,.prix-table-wrap){border-radius:var(--ed-radius)!important}
.ed-page :is(.pv-result,.fm-result,.ce-result,.qualif-cta){background:var(--anthracite)!important;box-shadow:0 30px 60px -40px rgba(22,22,22,.5)!important}
.ed-page .prix-note-source{background:var(--ivoire)!important}
.ed-page .timeline-line{background:var(--ed-line)!important}
.ed-page .ce-tabs button,.ed-page .ce-tabs a{border-radius:var(--ed-radius)!important}