/* ═══════════════════════════════════════════════════════════════════════════
   LA PRESENTATION « EPUREE » DE L ACCUEIL — 24/09/2026 (nuit), R227
   ═══════════════════════════════════════════════════════════════════════════
   Maquette : _maquettes/2026-09-24_accueil/accueil-nouvelle-proposition.html
   Ses valeurs sont RECOPIEES, pas choisies (CDC §10.1).

   ⚠️ TOUT EST PREFIXE PAR « .ep » : cette feuille n est chargee que par le
   gabarit de l Epuree, et meme chargee ailleurs elle ne toucherait rien.

   ⚠️ LES COULEURS VIENNENT DE LA CHARTE (« --ch-* »), jamais de la maquette :
   l Epuree accepte TOUTES les chartes. La correspondance est ecrite une fois,
   ci-dessous, et chaque repli est la valeur « citron » de la maquette.

   ⚠️ LES REGLAGES arrivent en « --sd-ep-* », publies par le gabarit.

   ⚠️⚠️ LES POLICES SONT SUR NOTRE SERVEUR (/assets/fonts, licence OFL), jamais
   chargees depuis Google : ce serait envoyer l adresse de chaque visiteur a un
   tiers.
   ═══════════════════════════════════════════════════════════════════════════ */
@font-face { font-family:"Instrument Serif"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Instrument Serif"; font-style:italic; font-weight:400; font-display:swap;
  src:url("../fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../fonts/inter-latin-700-normal.woff2") format("woff2"); }

/* ─── LA CORRESPONDANCE CHARTE -> MAQUETTE ─────────────────────────────── */
body.ep {
  --ep-fond:        var(--ch-page, #FAFAF8);
  --ep-carte:       var(--ch-tuile, #FFFFFF);
  --ep-encre:       var(--ch-encre, #101214);
  --ep-doux:        var(--ch-encre2, #5B6168);
  --ep-trait:       var(--ch-trait, #E7E7E3);
  --ep-accent:      var(--ch-accent, #D9F21C);
  --ep-sur-accent:  var(--ch-accent_texte, var(--ch-vert-encre, #101214));
  --ep-accent-vif:  var(--ch-accent_vif, var(--ep-accent));
  --ep-sur-accent-vif: var(--ch-accent_vif_texte, var(--ep-sur-accent));
  --ep-teinte:      color-mix(in srgb, var(--ep-accent) 16%, var(--ep-fond));
  --ep-sombre:      var(--ch-bande_sombre, var(--ch-fr-fond, #101214));
  --ep-sur-sombre:  var(--ch-fr-encre, #FAFAF8);
  /*  la couleur des petits dessins : la teinte de l accent la plus coloree
      qui tienne sur les fonds (« titre_barre », CDC §65.4)  */
  --ep-marque:      var(--ch-titre_barre, var(--ch-lien, var(--ep-encre)));
  --ep-int:         var(--sd-ep-survol-mouvement-f, .5);
  --ep-menu-h:      var(--sd-ep-menu-hauteur, 72px);
  --ep-serif:       "Instrument Serif", Georgia, serif;
  --ep-sans:        Inter, "Helvetica Neue", Arial, sans-serif;
  /*  la couleur des deux dessins clairs : LES MEMES reglages que les deux
      tuiles de la Classique (« Les trois tuiles de l accueil »)  */
  /*  ⚠️ MELANGEES A 65 % AVEC L ENCRE : la couleur fixe d un dessin ne peut
      pas tenir 3 pour 1 sur les 25 chartes (mesure du 25/09 : 1,95 sur
      « Papier & anthracite »). Tirer vers l encre la rapproche de ce qui se
      lit sur CE fond, clair ou sombre : pire cas 3,60 sur les 25, repos
      comme survol. La teinte reste reconnaissable.  */
  --ep-picto-devis:   color-mix(in srgb, var(--sd-porte-devis-couleur, #2E9A57) 65%, var(--ep-encre));
  --ep-picto-solaire: color-mix(in srgb, var(--sd-porte-solaire-couleur, #C16C1B) 65%, var(--ep-encre));
  margin:0; padding:0; background:var(--ep-fond); color:var(--ep-encre);
  font-family:var(--ep-sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
body.ep[data-police="georgia"] { --ep-serif: Georgia, "Times New Roman", serif; }
body.ep[data-police="inter"]   { --ep-serif: Inter, "Helvetica Neue", Arial, sans-serif; }
/*  25/09 — LE MENU MENE PILE AU DEBUT DE CHAQUE SECTION : la marge de
    defilement vaut EXACTEMENT la hauteur du menu fige (et la zone de l encoche
    d un telephone), rien de plus. Le menu non fige ne cache rien : 0.  */
html:has(body.ep) { scroll-behavior:smooth; scroll-padding-top:calc(var(--sd-ep-menu-hauteur, 72px) + env(safe-area-inset-top, 0px)); }
html:has(body.ep[data-fige="non"]) { scroll-padding-top:0; }
.ep *, .ep *::before, .ep *::after { box-sizing:border-box; }
.ep h1, .ep h2, .ep h3, .ep h4 { font-family:var(--ep-sans); text-wrap:balance; color:inherit; }
.ep p { text-wrap:pretty; }
/*  25/09 — « :where(.ep) a » pese (0,0,1) : il ne bat plus une classe. Ecrit « .ep a » (0,1,1), il repeignait l encre du bouton plein de la fenetre « bientot » de Chloe (un <a>) : 4,08 au lieu de sa paire de charte. */
:where(.ep) a { color:inherit; }
.ep .ep-serif { font-family:var(--ep-serif); font-weight:400; font-style:italic; }
.ep .ep-largeur { max-width:1200px; margin:0 auto; padding:0 32px; }
.ep svg.cp-ph { display:inline-block; }

/* ─── LE MENU FIGE ─────────────────────────────────────────────────────── */
.ep .ep-menu { position:sticky; top:0; z-index:50; padding-top:env(safe-area-inset-top, 0px);
  transition:background .3s, box-shadow .3s; }
body.ep[data-fige="non"] .ep-menu { position:relative; }
.ep .ep-menu .ep-largeur { display:flex; align-items:center; gap:28px; height:var(--ep-menu-h); }
.ep .ep-menu.colle { background:color-mix(in srgb, var(--ep-fond) 84%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--ep-trait); }
.ep .ep-logo { display:flex; align-items:center; gap:11px; text-decoration:none; white-space:nowrap; color:var(--ep-encre); }
.ep .ep-logo .cp-logo { width:30px; height:30px; flex:none; }
.ep .ep-logo img.cp-logo { width:auto; max-width:160px; }
.ep .ep-logo b { display:block; font-weight:700; letter-spacing:.08em; font-size:15px; line-height:1.1; }
.ep .ep-logo small { display:block; font-size:9.5px; letter-spacing:.16em; color:var(--ep-doux); }
.ep .ep-liens { display:flex; gap:4px; margin-left:auto; }
.ep .ep-liens a { position:relative; text-decoration:none; font-size:14.5px; font-weight:500; padding:9px 14px;
  border-radius:999px; white-space:nowrap; transition:background .2s, color .2s; color:var(--ep-encre); }
.ep .ep-liens a:hover, .ep .ep-liens a:focus-visible { background:var(--ep-accent); color:var(--ep-sur-accent); outline:none; }
/*  25/09 — R229 : le trait sous l entree de la section en cours (la maquette,
    « .liens a.ici »). Pose par le script au defilement ; eteint par
    « ep_menu_ici ». Sa couleur est calculee par charte (« --ep-ici »).  */
.ep[data-ici="oui"] .ep-liens a.ici::after { content:""; position:absolute; left:14px; right:14px; bottom:3px; height:2px; border-radius:2px; background:var(--ep-ici, var(--ep-accent)); }
.ep[data-ici="oui"] .ep-liens a.ici:hover::after, .ep[data-ici="oui"] .ep-liens a.ici:focus-visible::after { background:var(--ep-sur-accent); }
/*  27/09 — LE TRAIT AU SURVOL DE N IMPORTE QUEL LIEN (reglage « ep_menu_trait_survol »,
    allume par defaut) : la pastille ET le trait fin dessous, dans la pastille, a l encre
    qui se lit sur elle. Il ne pose rien hors du survol : le trait « ici » reste le sien.  */
.ep[data-trait-survol="oui"] .ep-liens a:hover::after, .ep[data-trait-survol="oui"] .ep-liens a:focus-visible::after {
  content:""; position:absolute; left:14px; right:14px; bottom:3px; height:2px; border-radius:2px; background:var(--ep-sur-accent); }
@media (max-width:1080px) { .ep[data-trait-survol="oui"] .ep-liens a:hover::after { left:10px; right:10px; } }
.ep .ep-partenaire { text-decoration:none; font-size:14px; font-weight:600; padding:10px 18px; border-radius:999px;
  border:1px solid var(--ep-encre); white-space:nowrap; color:var(--ep-encre); transition:background .2s, color .2s; }
.ep .ep-partenaire:hover { background:var(--ep-encre); color:var(--ep-fond); }
.ep .ep-burger { display:none; margin-left:auto; background:none; border:0; padding:8px; cursor:pointer; color:var(--ep-encre); }
.ep .ep-burger svg { width:26px; height:26px; }

/* ─── L OUVERTURE — VERSION FINALE DE LA MAQUETTE (25/09) ──────────────────
   Recopie de la variante « Les cartes a droite » (« body[data-hd="6"] » dans
   la maquette) et de ses « retouches du 25/09 » : c est la seule gardee, le
   prefixe disparait. Les valeurs sont celles de la maquette ; les couleurs,
   celles de la charte.  */
.ep .ep-une { padding:48px 0 36px; position:relative; }
.ep .ep-une .ep-largeur { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:56px; row-gap:24px; align-items:center; }
.ep .ep-pastille { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; white-space:nowrap; color:var(--ep-doux); margin:0 0 20px; }
.ep .ep-pastille svg { width:18px; height:18px; color:var(--ep-marque); }
.ep h1 { font-size:clamp(44px, 5.6vw, 78px); line-height:1; letter-spacing:-.035em; font-weight:600; margin:0 0 18px; }
.ep h1 .ep-serif { letter-spacing:-.01em; font-size:1.08em; white-space:nowrap; }
/*  ⚠️ LE MOT EN ITALIQUE : en couleur d accent si elle se lit a 3 pour 1
    (gros texte), sinon souligne d un aplat — le choix de la maquette pour le
    citron. C est le serveur qui mesure (« epuree_css() ») : CSS ne sait pas.  */
body.ep[data-souligne="trait"] h1 .ep-souligne {
  background:linear-gradient(transparent 68%, var(--ep-accent) 68%, var(--ep-accent) 92%, transparent 92%); }
body.ep[data-souligne="couleur"] h1 .ep-souligne { color:var(--ep-souligne-c, var(--ep-accent)); }   /* 30/09 : la teinte lue d une charte harmonisee */
/*  27/09 — LE LARGE TRAIT SOUS « qualifies. » REVIENT PARTOUT (reglage « ep_titre_souligne »,
    allume par defaut). Sur une charte ou le mot est ecrit en couleur d action, le trait est
    une TEINTE CLAIRE de cette couleur (« --ep-souligne-fond », calculee par le serveur pour
    que le mot se lise dessus a 3 pour 1) ; sinon, la couleur pleine, comme avant.  */
body.ep[data-souligne="couleur"][data-titre-souligne="oui"] h1 .ep-souligne {
  background:linear-gradient(transparent 68%, var(--ep-souligne-fond, transparent) 68%, var(--ep-souligne-fond, transparent) 92%, transparent 92%); }
body.ep[data-souligne="trait"][data-titre-souligne="non"] h1 .ep-souligne { background:none; }
.ep .ep-chapo { font-size:19px; color:var(--ep-doux); max-width:500px; margin:0 0 32px; }
.ep .ep-btn { display:inline-flex; align-items:center; gap:12px; text-decoration:none; font:inherit; font-weight:600; font-size:15.5px;
  padding:16px 26px; border-radius:999px; white-space:nowrap; border:0; cursor:pointer;
  transition:transform .2s, box-shadow .2s, background .2s; }
.ep .ep-btn.ep-plein { background:var(--ep-encre); color:var(--ep-fond); }
.ep .ep-btn.ep-plein:hover { transform:translateY(-2px); box-shadow:0 10px 24px -10px color-mix(in srgb, var(--ep-encre) 60%, transparent); }
.ep .ep-btn .ep-fleche { transition:transform .2s; color:var(--ep-fleche, var(--ep-accent)); }
.ep .ep-btn:hover .ep-fleche { transform:translateX(4px); }
/*  la ligne des chiffres : sur une ligne, separes de fins traits, l horloge
    devant le premier  */
.ep .ep-preuves { display:flex; flex-wrap:nowrap; gap:0; margin-top:4px; font-size:14px; color:var(--ep-doux); }
.ep .ep-preuves > div { padding:0 26px; border-left:1px solid var(--ep-trait); font-size:13.5px; line-height:1.35; }
.ep .ep-preuves > div:first-child { padding-left:0; border-left:0; }
.ep .ep-preuves b { display:flex; align-items:center; gap:8px; color:var(--ep-encre); font-size:24px; font-weight:600; letter-spacing:-.02em;
  white-space:nowrap; margin-bottom:2px; }
.ep .ep-preuves .ep-horloge { width:22px; height:22px; color:var(--ep-marque); flex:none; }

/*  LES TROIS CARTES A DROITE  */
.ep .ep-cartes { display:flex; flex-direction:column; gap:12px; align-self:start; margin-top:var(--sd-ep-cartes-decal, 48px); perspective:1100px; }
.ep .ep-ch-tete { display:flex; align-items:center; flex-wrap:wrap; gap:6px 16px; margin:0 0 4px 4px; }
.ep .ep-ch-tete b { font-size:17px; font-weight:600; letter-spacing:-.01em; }
.ep .ep-duree { display:inline-flex; align-items:center; gap:8px; font-size:15px; color:var(--ep-doux); white-space:nowrap; }
.ep .ep-duree svg { width:19px; height:19px; flex:none; color:var(--ep-marque); }
.ep .ep-ch { position:relative; overflow:hidden; display:grid; grid-template-columns:var(--gauche, 108px) minmax(0,1fr) auto; align-items:stretch;
  min-height:var(--sd-ep-cartes-taille, 104px); border-radius:22px; background:var(--ep-carte); border:1px solid var(--ep-trait);
  text-decoration:none; color:var(--ep-encre); font:inherit; text-align:left; padding:0; width:100%; cursor:pointer;
  transform:perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, background .35s, border-color .35s; }
.ep .ep-ch:hover { transform:perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(0, calc(-6px * var(--ep-int)), calc(50px * var(--ep-int)));
  box-shadow:0 24px 44px -30px rgba(0,0,0,.35); }
/*  27/09 — LES CARTES BLANCHES SE DISTINGUENT DU FOND : une teinte tres claire de la
    couleur de la charte, melee au fond de page (« ep_cartes_teinte », 8 % par defaut).
    Mesure : 25 chartes, ecart de couleur avec la page de 4,3 au moins (1,8 avant sur
    « Nuit & corail »). Au survol, 8 points de plus : toujours plus marquee qu au repos.  */
.ep .ep-ch:not(.ep-ch-chloe) { background:color-mix(in srgb, var(--ep-accent) var(--sd-ep-cartes-teinte, 8%), var(--ep-fond)); }
body.ep[data-survol="teinte"] .ep-ch:not(.ep-ch-chloe):hover { background:color-mix(in srgb, var(--ep-accent) calc(var(--sd-ep-cartes-teinte, 8%) + 8%), var(--ep-fond)); border-color:var(--ep-accent); }
body.ep[data-survol="contour"] .ep-ch:not(.ep-ch-chloe):hover { border-color:var(--ep-accent); box-shadow:0 0 0 1px var(--ep-accent), 0 24px 44px -30px rgba(0,0,0,.35); }
.ep .ep-ch-chloe { background:var(--ep-accent); border-color:var(--ep-accent); color:var(--ep-sur-accent); }
.ep .ep-t { align-self:center; padding:16px 8px 16px 18px; }
.ep .ep-ch-h { display:block; margin:0 0 3px; font-size:18px; font-weight:600; letter-spacing:-.01em; line-height:1.25; }
.ep .ep-ch-p { display:block; margin:0; font-size:14px; color:var(--ep-doux); line-height:1.45; }
/*  ⚠️ LA MAQUETTE ECRIT « opacity:.8 » SUR LA PHRASE DE LA CARTE PLEINE : sur
    plusieurs chartes elle tombait sous 4,5. L encre pleine de la charte se lit
    partout (le meme choix que pour la tuile Chloe du 24/09).  */
.ep .ep-ch-chloe .ep-ch-p { color:var(--ep-sur-accent); }
/*  AU SURVOL « TEINTE », LA PHRASE PASSE A L ENCRE (CDC §102 : 4,01 sur « Schiste »).  */
body.ep[data-survol="teinte"] .ep-ch:not(.ep-ch-chloe):hover .ep-ch-p { color:var(--ep-encre); }
.ep .ep-ch .ep-fl { align-self:end; padding:0 22px 16px 8px; font-size:20px; transition:transform .3s; }
.ep .ep-ch:hover .ep-fl { transform:translateX(5px); }
.ep .ep-nouveau { position:absolute; top:12px; right:16px; font-size:10.5px; font-weight:700; letter-spacing:.04em; padding:3px 9px;
  border-radius:999px; background:var(--ep-sur-accent); color:var(--ep-accent); }
/*  le visuel a gauche : il epouse l arrondi (la carte rogne), coupe net a la
    verticale ou fondu (« ep_cartes_bord »)  */
.ep .ep-media { position:relative; display:grid; place-items:center; overflow:hidden; }
.ep .ep-ph { position:absolute; inset:0; background-size:cover; background-repeat:no-repeat; }
.ep .ep-ch-chloe .ep-ph { background-image:var(--sd-ep-carte-chloe-fichier, none);
  background-position:var(--sd-ep-carte-chloe-x, 50%) var(--sd-ep-carte-chloe-y, 50%);
  transform:scale(var(--sd-ep-carte-chloe-zoom-f, 1)); transform-origin:var(--sd-ep-carte-chloe-x, 50%) var(--sd-ep-carte-chloe-y, 50%); }
.ep .ep-ch-devis .ep-ph { background-image:var(--sd-ep-carte-devis-fichier, none);
  background-position:var(--sd-ep-carte-devis-x, 50%) var(--sd-ep-carte-devis-y, 50%);
  transform:scale(var(--sd-ep-carte-devis-zoom-f, 1)); transform-origin:var(--sd-ep-carte-devis-x, 50%) var(--sd-ep-carte-devis-y, 50%); }
/*  sans photo propre, « Mes devis » reprend la photo principale (maquette)  */
.ep .ep-ch-devis .ep-ph.ep-ph-principale { background-image:var(--sd-ep-photo-une-fichier, none); }
.ep .ep-ch-solaire .ep-ph { background-image:var(--sd-ep-carte-solaire-fichier, none);
  background-position:var(--sd-ep-carte-solaire-x, 50%) var(--sd-ep-carte-solaire-y, 50%);
  transform:scale(var(--sd-ep-carte-solaire-zoom-f, 1)); transform-origin:var(--sd-ep-carte-solaire-x, 50%) var(--sd-ep-carte-solaire-y, 50%); }
.ep .ep-ph.ep-ph-toit { background:none; transform:none; }
.ep .ep-ph.ep-ph-toit svg { width:100%; height:100%; display:block; }
body.ep[data-bord="fondu"] .ep-ph { -webkit-mask-image:linear-gradient(90deg, #000 55%, transparent); mask-image:linear-gradient(90deg, #000 55%, transparent); }
/*  ⚠️ LE DESSIN SANS ROND, SANS CARRE, SANS HALO : le trait Phosphor seul.  */
.ep .ep-ic { width:34px; height:34px; }
.ep .ep-ch-chloe .ep-ic { color:var(--ep-sur-accent); }
.ep .ep-ch-devis .ep-ic { color:var(--ep-picto-devis); }
.ep .ep-ch-solaire .ep-ic { color:var(--ep-picto-solaire); }
.ep .ep-ch--dessin { --gauche:78px; }

/*  LE DRAPEAU ET LES SOURCES, sous les chiffres, aligne a gauche, sans trait  */
.ep .ep-sources { grid-column:1 / -1; order:10; display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap; gap:8px 16px;
  margin-top:30px; font-size:13.5px; color:var(--ep-doux); }
.ep .ep-drapeau { display:inline-flex; width:22px; height:15px; border-radius:2px; overflow:hidden; box-shadow:0 0 0 1px var(--ep-trait); flex:none; }
.ep .ep-drapeau i { flex:1; }
.ep .ep-drapeau i:nth-child(1) { background:#1F3A8A; }
.ep .ep-drapeau i:nth-child(2) { background:#FFFFFF; }
.ep .ep-drapeau i:nth-child(3) { background:#D62828; }
.ep .ep-sources nav { display:flex; flex-wrap:wrap; gap:4px 14px; }
.ep .ep-sources nav a, .ep .ep-sources nav span { color:var(--ep-encre); text-decoration:none; font-weight:500; }
.ep .ep-sources nav a:hover { text-decoration:underline; text-underline-offset:3px; }

/*  LES PHOTOS — il ne reste que celle de l equipe (et l avis, qui s y pose)  */
.ep .ep-vitrine { position:relative; aspect-ratio:4/4.4; border-radius:28px; background:var(--ep-sombre); overflow:hidden; }
.ep .ep-vitrine.ep-large { aspect-ratio:16/11; }
.ep .ep-photo { position:absolute; inset:0; background-size:cover; background-repeat:no-repeat; transition:filter .4s; }
.ep .ep-vit-equipe .ep-photo { background-image:var(--sd-ep-photo-equipe-fichier, none);
  background-position:var(--sd-ep-photo-equipe-x, 50%) var(--sd-ep-photo-equipe-y, 50%);
  transform:scale(var(--sd-ep-photo-equipe-zoom-f, 1));
  transform-origin:var(--sd-ep-photo-equipe-x, 50%) var(--sd-ep-photo-equipe-y, 50%); }
.ep .ep-teinte { position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .4s; }
.ep .ep-scene { position:absolute; inset:0; display:grid; place-items:center; }
.ep .ep-scene svg { width:66%; color:var(--ep-sur-sombre); opacity:.85; }
.ep .ep-vitrine.a-photo .ep-scene { display:none; }
.ep .ep-vitrine:not(.a-photo) .ep-photo { display:none; }
body.ep[data-t="douce"] .a-photo .ep-photo { filter:saturate(.7) contrast(.94) brightness(1.03); }
body.ep[data-t="douce"] .a-photo .ep-teinte { opacity:1; background:linear-gradient(160deg,
  color-mix(in srgb, var(--ep-accent) 20%, transparent) 0%, transparent 45%, color-mix(in srgb, var(--ep-sombre) 45%, transparent) 100%); }
body.ep[data-t="nb"] .a-photo .ep-photo { filter:grayscale(1) contrast(1.06) brightness(1.02); }
body.ep[data-t="nb"] .a-photo .ep-teinte { opacity:1; background:linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--ep-sombre) 50%, transparent) 100%); }
body.ep[data-t="duo"] .a-photo .ep-photo { filter:grayscale(1) contrast(1.12) brightness(1.08); }
body.ep[data-t="duo"] .a-photo .ep-teinte { opacity:1; background:var(--ep-accent); mix-blend-mode:multiply; }

/*  L AVIS SUR LA PHOTO DE L EQUIPE — sa place est un pourcentage de la place
    LIBRE : 0 le colle a gauche (ou en haut), 100 a droite (ou en bas).  */
.ep .ep-flotte { position:absolute; z-index:1; background:var(--ep-carte); color:var(--ep-encre); border-radius:16px;
  padding:13px 16px; box-shadow:0 18px 40px -18px rgba(0,0,0,.45); font-size:13.5px; line-height:1.35;
  width:max-content; max-width:calc(100% - 44px);
  left:calc(22px + (100% - 44px) * var(--sd-ep-avis-x-f, 1));
  top:calc(22px + (100% - 44px) * var(--sd-ep-avis-y-f, .14));
  translate:calc(var(--sd-ep-avis-x-f, 1) * -100%) calc(var(--sd-ep-avis-y-f, .14) * -100%);
  animation:ep-flotte 6s ease-in-out infinite; }
.ep .ep-flotte b { display:block; font-size:15px; }
.ep .ep-etoiles { color:var(--ep-etoiles, #8A6400); letter-spacing:2px; font-size:13px; }
@keyframes ep-flotte { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }

/* ─── LES BLOCS ────────────────────────────────────────────────────────── */
.ep .ep-bloc { padding:84px 0; }
.ep .ep-bloc.ep-clair { background:var(--ep-carte); border-top:1px solid var(--ep-trait); border-bottom:1px solid var(--ep-trait); }
.ep .ep-surtitre { font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ep-doux); margin:0 0 14px; }
.ep h2.ep-grand { font-size:clamp(32px, 3.8vw, 48px); line-height:1.06; letter-spacing:-.03em; font-weight:600; margin:0 0 18px; max-width:760px; }
.ep .ep-intro { color:var(--ep-doux); font-size:17.5px; max-width:640px; margin:0 0 44px; }
.ep .ep-etapes { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:40px; margin-top:40px; }
.ep .ep-etape { border-top:1px solid var(--ep-encre); padding-top:22px; }
.ep .ep-etape .ep-num { font-family:var(--ep-serif); font-size:44px; line-height:1; display:block; margin-bottom:18px; }
.ep .ep-etape h3 { font-size:19px; margin:0 0 8px; font-weight:600; }
.ep .ep-etape p { margin:0; color:var(--ep-doux); }

.ep .ep-puces { display:flex; flex-wrap:wrap; gap:10px; margin-top:36px; }
.ep .ep-puce { display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:500; padding:12px 20px 12px 16px;
  border-radius:999px; border:1px solid var(--ep-trait); background:var(--ep-fond); color:var(--ep-encre); white-space:nowrap;
  transition:background .2s, border-color .2s, color .2s; }
.ep .ep-puce svg { width:20px; height:20px; flex:none; color:var(--ep-marque); transition:color .2s; }
.ep .ep-puce:hover { background:var(--ep-accent); border-color:var(--ep-accent); color:var(--ep-sur-accent); }
.ep .ep-puce:hover svg { color:inherit; }

.ep .ep-deux { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:64px; align-items:center; }
.ep .ep-texte p { color:var(--ep-doux); font-size:17px; margin:0 0 16px; }
.ep .ep-texte p.ep-surtitre { font-size:13px; margin:0 0 14px; }

.ep .ep-atouts { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:44px 40px; margin-top:8px; }
.ep .ep-atout svg { width:30px; height:30px; color:var(--ep-marque); margin-bottom:16px; display:block; }
.ep .ep-atout h3 { font-size:18px; font-weight:600; margin:0 0 6px; }
.ep .ep-atout p { margin:0; color:var(--ep-doux); font-size:15px; }

.ep .ep-aides { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 56px; }
.ep .ep-aide { display:grid; grid-template-columns:34px minmax(0, 1fr) auto; gap:6px 18px; align-items:start; padding:26px 0; border-top:1px solid var(--ep-trait); }
.ep .ep-aide svg { width:28px; height:28px; color:var(--ep-marque); grid-row:span 2; }
.ep .ep-aide h3 { font-size:18px; font-weight:600; margin:0; }
.ep .ep-aide p { grid-column:2; margin:0; color:var(--ep-doux); font-size:15px; }
.ep .ep-aide b { grid-column:3; grid-row:1 / span 2; align-self:center; font-family:var(--ep-serif); font-weight:400; font-size:30px;
  line-height:1.05; text-align:right; white-space:nowrap; }
.ep .ep-aide.ep-sans-montant { grid-template-columns:34px minmax(0, 1fr); }

.ep .ep-faq { max-width:780px; }
.ep .ep-faq details { border-top:1px solid var(--ep-trait); padding:20px 0; }
.ep .ep-faq details:last-of-type { border-bottom:1px solid var(--ep-trait); }
.ep .ep-faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px; font-size:18px; font-weight:600; }
.ep .ep-faq summary::-webkit-details-marker { display:none; }
.ep .ep-faq summary svg { width:20px; height:20px; flex:none; transition:transform .25s; }
.ep .ep-faq details[open] summary svg { transform:rotate(45deg); }
.ep .ep-faq details p { margin:12px 0 0; color:var(--ep-doux); }
.ep .ep-faq .ep-btn { margin-top:36px; }

/*  FRANCE RENOV — UN BLOC CLAIR, SANS BANDE NOIRE (maquette).  */
.ep .ep-frenov { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; gap:22px 30px; align-items:center; padding:40px 0; border-top:1px solid var(--ep-trait); }
.ep .ep-frenov > svg { width:34px; height:34px; color:var(--ep-marque); }
.ep .ep-frenov h3 { margin:0 0 6px; font-size:19px; font-weight:600; }
.ep .ep-frenov p { margin:0; color:var(--ep-doux); font-size:15px; max-width:680px; }
.ep .ep-frenov-contact { text-align:right; white-space:nowrap; }
.ep .ep-frenov-contact a { display:block; font-weight:600; text-underline-offset:4px; color:var(--ep-encre); }
.ep .ep-frenov-contact .ep-frenov-tel { font-family:var(--ep-serif); font-size:28px; font-weight:400; margin-top:4px; text-decoration:none; }

.ep .ep-pied-bloc { border-top:1px solid var(--ep-trait); }
.ep .ep-pied { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding:52px 0 40px; }
.ep .ep-pied h4 { font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ep-doux); font-weight:600; margin:0 0 14px; }
.ep .ep-pied p { margin:0; color:var(--ep-doux); font-size:14.5px; max-width:320px; }
.ep .ep-pied a { display:block; text-decoration:none; font-size:14.5px; padding:3px 0; color:var(--ep-encre); }
/*  27/09 — au survol, l ecriture GARDE son encre et un souligne de la couleur de marque le dit :
    la couleur de marque seule tombait sous 4,5 sur 13 chartes (3,50 a 4,12).  */
.ep .ep-pied a:hover { color:var(--ep-encre); text-decoration:underline; text-decoration-color:var(--ep-marque); text-decoration-thickness:2px; text-underline-offset:4px; }
.ep .ep-bas { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px 24px; padding:22px 0 44px; border-top:1px solid var(--ep-trait); font-size:13px; color:var(--ep-doux); }
.ep .ep-bas nav { display:flex; gap:20px; }
.ep .ep-bas a { text-decoration:none; color:var(--ep-doux); }

/*  LES BLOCS MONTENT A LEUR ARRIVEE — rien ne bouge si le visiteur a demande
    moins d animations (plus bas).  */
.ep .ep-monte { opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease; transition-delay:var(--ep-delai, 0ms); }
.ep .ep-monte.vu { opacity:1; transform:none; }
.ep a:focus-visible, .ep button:focus-visible, .ep summary:focus-visible { outline:2px solid var(--ep-encre); outline-offset:3px; }

@media (max-width:1080px) { .ep .ep-liens a { padding:9px 10px; font-size:14px; } }
@media (max-width:980px) {
  .ep .ep-deux { grid-template-columns:1fr; gap:36px; }
  .ep .ep-vitrine { aspect-ratio:4/3; }
  .ep .ep-etapes { grid-template-columns:1fr; gap:28px; }
  .ep .ep-atouts { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .ep .ep-aides { grid-template-columns:1fr; }
  .ep .ep-frenov { grid-template-columns:auto minmax(0, 1fr); }
  .ep .ep-frenov-contact { grid-column:1 / -1; text-align:left; }
  .ep .ep-pied { grid-template-columns:1fr 1fr; }

  /*  LE PREMIER ECRAN DU TELEPHONE (maquette, « retouches du 25/09 ») : le
      titre, la coche, le texte, l horloge, les trois cartes, puis le drapeau
      et les sources — les chiffres ensuite. Aucune photo seule.  */
  .ep .ep-une { padding-top:2px; padding-bottom:10px; }
  .ep .ep-une .ep-largeur { display:flex; flex-direction:column; gap:0; }
  .ep .ep-une-g { display:contents; }
  .ep .ep-une h1 { order:1; font-size:36px; line-height:1.02; margin:4px 0 8px; }
  .ep .ep-une .ep-pastille { order:2; align-self:flex-start; font-size:12.5px; margin-bottom:8px; }
  .ep .ep-une .ep-chapo { order:3; font-size:14.5px; line-height:1.45; margin:0 0 12px; }
  .ep .ep-cartes { order:4; gap:9px; margin-top:0; }
  .ep .ep-ch-tete { order:-1; margin:0 0 2px 0; }
  .ep .ep-ch-tete b { display:none; }
  .ep .ep-ch-tete .ep-duree { font-size:13.5px; }
  .ep .ep-sources { order:5; margin-top:12px; padding-top:0; justify-content:flex-start; font-size:12px; gap:6px 10px; display:block; line-height:1.6; }
  .ep .ep-sources .ep-drapeau { display:inline-flex; vertical-align:-2px; margin-right:8px; }
  .ep .ep-sources nav { display:flex; gap:2px 10px; margin-top:4px; }
  .ep .ep-une .ep-preuves { order:7; margin-top:26px; }
  .ep .ep-une .ep-preuves > div { padding:0 16px; }
  .ep .ep-une .ep-preuves > div:first-child { padding-left:0; }
  .ep .ep-une .ep-preuves b { font-size:20px; }
  /*  les cartes en lignes fines  */
  .ep .ep-ch { min-height:60px; border-radius:18px; transform:none !important; --gauche:72px; grid-template-rows:auto auto; }
  .ep .ep-ch--dessin { --gauche:56px; }
  .ep .ep-media { grid-row:1 / span 2; }
  .ep .ep-t { grid-row:1; padding:12px 6px 4px 14px; }
  .ep .ep-ch:not(.ep-ch-chloe) .ep-t { grid-row:1 / span 2; padding-bottom:12px; }
  .ep .ep-ch-h { font-size:16px; }
  .ep .ep-ch-p { display:none; }
  .ep .ep-ic { width:26px; height:26px; }
  .ep .ep-nouveau { position:static; grid-column:2; grid-row:2; justify-self:start; align-self:start; margin:0 0 10px 14px;
    font-size:9.5px; padding:2px 7px; }
  .ep .ep-ch .ep-fl { grid-column:3; grid-row:1 / span 2; padding-right:16px; padding-bottom:12px; }
  /*  cote a cote (« ep_cartes_tel »)  */
  body.ep[data-mob="cote"] .ep-cartes { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
  body.ep[data-mob="cote"] .ep-ch-tete { display:none; }
  body.ep[data-mob="cote"] .ep-ch { grid-template-columns:1fr; grid-template-rows:74px auto; min-height:0; }
  body.ep[data-mob="cote"] .ep-media { grid-row:1; }
  body.ep[data-mob="cote"] .ep-t, body.ep[data-mob="cote"] .ep-ch:not(.ep-ch-chloe) .ep-t { grid-row:2; padding:10px 10px 12px; }
  body.ep[data-mob="cote"] .ep-ch-h { font-size:13.5px; line-height:1.25; }
  body.ep[data-mob="cote"] .ep-ch .ep-fl { display:none; }
  body.ep[data-mob="cote"] .ep-nouveau { position:absolute; top:6px; right:6px; margin:0; }
}
@media (max-width:900px) {
  .ep .ep-liens, .ep .ep-menu .ep-partenaire { display:none; }
  .ep .ep-burger { display:block; }
  .ep .ep-menu.ouvert .ep-liens { display:flex; flex-direction:column; position:absolute; left:12px; right:12px; top:100%;
    background:var(--ep-carte); border:1px solid var(--ep-trait); border-radius:20px; padding:10px; box-shadow:0 20px 40px -20px rgba(0,0,0,.3); }
  .ep .ep-menu.ouvert .ep-liens a { padding:13px 16px; }
}
@media (max-width:560px) {
  .ep .ep-largeur { padding:0 18px; }
  .ep .ep-une { padding-top:24px; }
  .ep .ep-puce { white-space:normal; }
  .ep h1 .ep-serif { white-space:normal; }
  /*  ⚠️⚠️ LA REGLE DE GERARD (25/09) : SUR TELEPHONE, TOUT CE QUI PEUT TENIR
      COTE A COTE Y VA — les etapes (le numero a cote du texte), les atouts,
      les aides, le pied de page, les liens legaux — pour moins faire defiler.
      Recopie de la maquette, « TELEPHONE : COTE A COTE DES QUE POSSIBLE ».  */
  .ep .ep-bloc { padding:48px 0; }
  .ep h2.ep-grand { font-size:30px; margin-bottom:12px; }
  .ep .ep-intro { font-size:15.5px; margin-bottom:24px; }
  .ep .ep-etapes { grid-template-columns:1fr; gap:18px; margin-top:22px; }
  .ep .ep-etape { display:grid; grid-template-columns:44px minmax(0, 1fr); gap:0 12px; padding-top:14px; }
  .ep .ep-etape .ep-num { grid-row:1 / span 2; font-size:32px; margin:0; }
  .ep .ep-etape h3 { font-size:16.5px; margin:0 0 2px; }
  .ep .ep-etape p { font-size:14px; }
  .ep .ep-atouts { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:22px 16px; }
  .ep .ep-atout svg { width:24px; height:24px; margin-bottom:8px; }
  .ep .ep-atout h3 { font-size:15px; }
  .ep .ep-atout p { font-size:13px; }
  .ep .ep-aides { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 14px; }
  .ep .ep-aide, .ep .ep-aide.ep-sans-montant { grid-template-columns:1fr; gap:4px; padding:16px 0; }
  .ep .ep-aide svg { grid-row:auto; width:22px; height:22px; }
  .ep .ep-aide h3 { font-size:15px; }
  .ep .ep-aide p { grid-column:1; font-size:13px; }
  .ep .ep-aide b { grid-column:1; grid-row:auto; text-align:left; font-size:22px; margin-top:4px; }
  .ep .ep-faq summary { font-size:16px; }
  .ep .ep-frenov { grid-template-columns:auto minmax(0, 1fr); gap:10px 14px; padding:28px 0; }
  .ep .ep-frenov-contact { display:flex; gap:16px; align-items:baseline; flex-wrap:wrap; }
  .ep .ep-frenov-contact .ep-frenov-tel { margin:0; font-size:22px; }
  .ep .ep-pied { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:26px 18px; padding:36px 0 26px; }
  .ep .ep-pied > div:first-child { grid-column:1 / -1; }
  .ep .ep-pied a, .ep .ep-pied .ep-pied-chloe { font-size:14px; padding:4px 0; }
  .ep .ep-bas { flex-direction:column; gap:8px; padding:16px 0 26px; }
  .ep .ep-bas nav { gap:16px; }
}
/*  ⚠️ RIEN NE BOUGE sur un appareil sans survol (le telephone) : l inclinaison
    ne suit que la souris, et le decalage du survol n a pas de sens au doigt. */
@media (hover:none) { .ep .ep-ch:hover { transform:none; box-shadow:none; } }
@media (prefers-reduced-motion:reduce) {
  .ep *, .ep *::before, .ep *::after { animation:none !important; transition:none !important; }
  .ep .ep-monte { opacity:1; transform:none; }
  .ep .ep-ch:hover { transform:none; }
}
/*  « Discuter avec Chloe » dans le pied : un bouton qui a l air d un lien, comme
    ses voisins (maquette, colonne « Votre projet »).  */
.ep .ep-pied .ep-pied-chloe { display:block; font:inherit; font-size:14.5px; padding:3px 0; background:none; border:0; color:var(--ep-encre); cursor:pointer; text-align:left; }
.ep .ep-pied .ep-pied-chloe:hover { color:var(--ep-encre); text-decoration:underline; text-decoration-color:var(--ep-marque); text-decoration-thickness:2px; text-underline-offset:4px; }

/* ─── LE MENU SUR TELEPHONE : « barre » — 25/09 (midi) ───────────────────────
   Une barre sur toute la largeur, en bas, comme dans une application : un petit
   dessin et son nom par entree (les MEMES que la barre du bas de la Classique).
   « haut » (par defaut) garde le bouton a deux traits en haut a droite.  */
.ep .ep-barre { display:none; }
@media (max-width:900px) {
  body.ep[data-menu-tel="barre"] .ep-burger { display:none; }
  body.ep[data-menu-tel="barre"] .ep-barre { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:var(--ep-carte); border-top:1px solid var(--ep-trait); padding:6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow:0 -8px 24px -18px rgba(0,0,0,.35); }
  body.ep[data-menu-tel="barre"] .ep-barre a { display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 0; text-decoration:none;
    color:var(--ep-encre); font-size:10.5px; font-weight:600; letter-spacing:-.01em; line-height:1.15; text-align:center; border-radius:12px; min-width:0; }
  body.ep[data-menu-tel="barre"] .ep-barre a svg { width:22px; height:22px; color:var(--ep-marque); }
  body.ep[data-menu-tel="barre"] .ep-barre a span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  body.ep[data-menu-tel="barre"] .ep-barre a:active { background:var(--ep-teinte); }
  /*  la barre reserve sa place : le bas de la page n est jamais cache  */
  body.ep[data-menu-tel="barre"] { padding-bottom:calc(64px + env(safe-area-inset-bottom, 0px)); }
}

/* ─── LE PREMIER ECRAN DU TELEPHONE, VALIDE PAR GERARD — 25/09 (midi) ─────────
   Recopie du bloc « TELEPHONE : PREMIER ECRAN AERE » de la maquette
   (premier-ecran-telephone.png, 360 x 660). Chaque espace et la hauteur des
   cartes sont des reglages (« ep_tel_* ») ; leurs replis sont les valeurs de la
   maquette : la page est juste avant meme que leur migration soit jouee.
   ⚠️ « cote a cote » (ep_cartes_tel) garde son propre dessin : ces regles ne
   visent que les cartes en lignes.  */
@media (max-width:560px) {
  .ep .ep-menu .ep-burger { margin-left:auto; padding:6px; margin-right:-6px; }
  .ep .ep-une { padding-top:var(--sd-ep-tel-air-titre, 0px); }
  .ep .ep-une h1 { font-size:34px; margin:2px 0 6px; }
  .ep .ep-une .ep-pastille { margin:0 0 var(--sd-ep-tel-air-coche, 20px); }
  .ep .ep-une .ep-chapo { font-size:14.5px; line-height:1.45; margin:0 0 var(--sd-ep-tel-air-cartes, 12px); }
  .ep .ep-cartes .ep-ch-tete { display:none; }
  .ep .ep-cartes { gap:10px; }
  body.ep:not([data-mob="cote"]) .ep-ch { height:var(--ep-carte-h, var(--sd-ep-tel-carte-hauteur, 84px)); min-height:0; grid-template-rows:1fr; align-items:center; }
  body.ep:not([data-mob="cote"]) .ep-ch .ep-media { grid-row:1; height:100%; }
  body.ep:not([data-mob="cote"]) .ep-ch .ep-t,
  body.ep:not([data-mob="cote"]) .ep-ch:not(.ep-ch-chloe) .ep-t { grid-row:1; padding:0 6px 0 14px; align-self:center; }
  body.ep:not([data-mob="cote"]) .ep-ch .ep-nouveau { display:none; }
  body.ep:not([data-mob="cote"]) .ep-ch .ep-fl { grid-row:1; align-self:end; padding-bottom:12px; }
  .ep .ep-sources { margin-top:var(--sd-ep-tel-air-sources, 16px); font-size:12px; line-height:1.5; }
  .ep .ep-sources nav { margin-top:2px; }
  .ep .ep-une .ep-preuves { margin-top:var(--sd-ep-tel-air-chiffres, 16px); }
  .ep .ep-une .ep-preuves > div { padding:0 14px; font-size:12px; }
  .ep .ep-une .ep-preuves > div:first-child { padding-left:0; }
  .ep .ep-une .ep-preuves b { font-size:19px; }
  .ep .ep-une .ep-preuves .ep-horloge { width:18px; height:18px; }
}
/*  « Nouveau » juste apres le titre de Chloe : au telephone seulement, en lignes  */
.ep .ep-nouveau-tel { display:none; }
@media (max-width:560px) {
  body.ep:not([data-mob="cote"]) .ep-nouveau-tel { display:inline-block; margin-left:8px; vertical-align:3px; font-size:10px; font-weight:700;
    letter-spacing:.04em; padding:2px 7px; border-radius:999px; background:var(--ep-sur-accent); color:var(--ep-accent); line-height:1.3; }
}

/*  le dernier mot du titre de Chloe et sa pastille « Nouveau » passent a la ligne ENSEMBLE  */
.ep .ep-colle { white-space:nowrap; }
/*  ⚠️ LES LEGENDES DES CHIFFRES SUR UNE LIGNE, AU TELEPHONE : notre Inter est un
    peu plus large que la police de la capture de reference, et « pour decrire
    vos travaux » passait sur deux lignes — les chiffres sortaient de l ecran de
    9 px a 360 x 660. Mesure : sans debordement a 360 px.  */
@media (max-width:560px) { .ep .ep-une .ep-preuves > div { white-space:nowrap; } }
/*  la barre du bas a 360 px : six entrees de 59 px ; « Ca marche ? » en demande
    62 a 10,5 px (mesure). A 10 px, les six tiennent.  */
@media (max-width:380px) { body.ep[data-menu-tel="barre"] .ep-barre a { font-size:10px; } }
/*  ⚠️ LA RANGEE DES CHIFFRES DOIT TENIR DANS LA LARGEUR DU TEXTE. Legendes sur une
    ligne, elle faisait 341 px pour 324 a 360 px ; le bloc parent (aligne au
    centre) la centrait, et elle debordait de 9 px des DEUX cotes — la page, elle,
    ne debordait pas : seule l image l a montre. Espaces de 12 px, aucun au bord
    droit, calee a gauche : 317 px.  */
@media (max-width:560px) {
  .ep .ep-une .ep-preuves { align-self:flex-start; max-width:100%; }
  .ep .ep-une .ep-preuves > div { padding:0 12px; }
  .ep .ep-une .ep-preuves > div:first-child { padding-left:0; }
  .ep .ep-une .ep-preuves > div:last-child { padding-right:0; }
}

/* ─── LE PREMIER ECRAN DU TELEPHONE A LA HAUTEUR DE L ECRAN — 27/09 ──────────
   Gerard (25/09 et 27/09) : le haut de page occupe TOUT l ecran visible, les
   chiffres « 2 min · 3 · 0 € » tombent au ras du bas, « Comment ca marche »
   n apparait pas sans defiler, et l AIR SE REPARTIT entre les blocs.
   - La colonne prend la hauteur de l ecran PETIT (« svh » : les barres du
     navigateur deduites), moins le menu du haut et, en mode barre, la barre.
   - Cinq ESPACEURS (« .ep-air-1 » a « -5 ») portent l air : chacun part de son
     MINIMUM (les reglages « ep_tel_air_* », qui existaient) et recoit sa PART
     de l air libre (« ep_tel_poids_* ») ; celui des chiffres en recoit deux.
   - Un ecran trop petit : il n y a plus d air libre, chaque espace retombe a
     son minimum, et rien ne se chevauche — la colonne s allonge.  */
.ep .ep-air { display:none; }
@media (max-width:560px) {
  .ep .ep-une { padding:0 0 var(--sd-ep-tel-air-bas, 18px); }
  /*  ⚠️ MESURE DU 27/09 : « height » + « min-height:min-content » ne fait PAS
      retrecir l air — le « min-content » d une colonne de flex compte la base
      des espaceurs, a 360 x 560 ils gardaient tous leur minimum. La colonne
      prend donc la hauteur de l ecran AU MOINS : l air libre se repartit, et
      sur un ecran trop petit chaque espace tombe a son minimum reglable, la
      colonne s allonge — jamais de chevauchement.  */
  .ep .ep-une .ep-largeur { min-height:calc(100svh - var(--ep-menu-h, 64px) - env(safe-area-inset-top, 0px) - var(--sd-ep-tel-air-bas, 18px)); }
  body.ep[data-menu-tel="barre"] .ep-une .ep-largeur { min-height:calc(100svh - var(--ep-menu-h, 64px) - env(safe-area-inset-top, 0px) - var(--sd-ep-tel-air-bas, 18px) - 64px - env(safe-area-inset-bottom, 0px)); }
  .ep .ep-air { display:block; flex-shrink:0; }
  .ep .ep-air-1 { order:1;  flex-basis:max(calc(var(--sd-ep-tel-air-titre, 12px) - var(--ep-air-cede, 0px)), 4px);    flex-grow:var(--sd-ep-tel-poids-titre, 1); }
  .ep .ep-une h1 { order:2; margin:0 0 6px; }
  .ep .ep-une .ep-pastille { order:3; margin:0; }
  .ep .ep-air-2 { order:4;  flex-basis:max(calc(var(--sd-ep-tel-air-coche, 14px) - var(--ep-air-cede, 0px)), 0px);   flex-grow:var(--sd-ep-tel-poids-coche, 1); }
  .ep .ep-une .ep-chapo { order:5; margin:0; }
  .ep .ep-air-3 { order:6;  flex-basis:max(calc(var(--sd-ep-tel-air-cartes, 12px) - var(--ep-air-cede, 0px)), 0px);  flex-grow:var(--sd-ep-tel-poids-cartes, 1); }
  .ep .ep-cartes { order:7; margin:0; }
  .ep .ep-air-4 { order:8;  flex-basis:var(--sd-ep-tel-air-sources, 20px); /* 27/09 : un MINIMUM GARANTI, il ne cede jamais */ flex-grow:var(--sd-ep-tel-poids-sources, 1); }
  .ep .ep-sources { order:9; margin:0; }
  .ep .ep-air-5 { order:10; flex-basis:var(--sd-ep-tel-air-chiffres, 16px); /* 27/09 : un MINIMUM GARANTI, il ne cede jamais */ flex-grow:var(--sd-ep-tel-poids-chiffres, 2); }
  .ep .ep-une .ep-preuves { order:11; margin:0; }
  /*  « Nouveau » EN HAUT A DROITE de la carte de Chloe (25/09, soir) — plus
      colle au titre. Le titre lui laisse la place, la fleche reste en bas.  */
  body.ep:not([data-mob="cote"]) .ep-ch { position:relative; }
  /*  ⚠️ un enfant en absolu DANS UNE GRILLE prend sa ZONE DE GRILLE pour cadre :
      la regle du 25/09 le posait en « grid-row:2 », sous la carte (mesure : 81 px
      du haut d une carte de 74). On lui rend la carte entiere.  */
  body.ep:not([data-mob="cote"]) .ep-ch .ep-nouveau { display:block; position:absolute; top:8px; right:10px; bottom:auto; margin:0; grid-area:auto;
    font-size:10px; padding:2px 8px; line-height:1.3; }
  body.ep:not([data-mob="cote"]) .ep-ch-chloe:has(.ep-nouveau) .ep-t { padding-right:76px; }
  body.ep:not([data-mob="cote"]) .ep-nouveau-tel { display:none; }
}

/* ─── LE PIED DE PAGE ET LES CARTES DU BAS DE PAGE — 27/09 ───────────────────
   1. Les titres des colonnes, un cran plus fonces : la moitie du chemin entre
      l encre douce et l encre (lisibilite mesuree sur toutes les chartes).
   2. Au telephone, « Legal » prend toute la largeur et range ses quatre liens
      sur DEUX colonnes (Mentions legales | Consentement, CGV | Contact).
   3. Les cartes du bas : les MEMES que celles du haut. Cote a cote sur
      ordinateur ; l une sous l autre au telephone (les regles du haut s y
      appliquent deja).  */
.ep .ep-pied h4 { color:color-mix(in srgb, var(--ep-doux) 45%, var(--ep-encre)); }
@media (max-width:560px) {
  .ep .ep-pied > div:last-child { grid-column:1 / -1; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:18px; }
  .ep .ep-pied > div:last-child h4 { grid-column:1 / -1; }
}
.ep .ep-bloc.ep-fin { padding:64px 0; }
.ep .ep-fin h2 { margin:0 0 22px; }
.ep .ep-cartes.ep-cartes-bas { margin-top:0; }
@media (min-width:561px) {
  .ep .ep-cartes.ep-cartes-bas { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:16px; align-items:stretch; }
}

/*  27/09 — « qualifies. » SEUL SUR SA LIGNE AU TELEPHONE (reglage « ep_tel_qualifies_ligne »,
    allume par defaut) : « Recevez vos devis / d artisans / qualifies. », comme sur
    ordinateur. La ligne de plus se paie sur les ESPACES, jamais sur les cartes
    (« --ep-air-cede », pose par le script de la page).  */
@media (max-width:560px) {
  body.ep[data-qualif="oui"] .ep-une h1 .ep-serif { display:block; width:fit-content; } /* sa boite epouse le mot : le souligne ne court pas sur toute la largeur */
  /*  « Recevez vos devis / d artisans / qualifies. » : la repartition EQUILIBREE des lignes
      coupait « Recevez vos / devis d artisans ». Au telephone, le titre se coupe au plus loin.  */
  body.ep[data-qualif="oui"] .ep-une h1 { text-wrap:wrap; }
  /*  quand les espaces sont deja a zero (script de la page) : les ecarts entre les cartes
      se resserrent, puis la taille du titre descend. Jamais la hauteur des cartes.  */
  .ep .ep-une .ep-largeur.ep-serre .ep-cartes { gap:var(--ep-cartes-gap-serre, 10px); }
  .ep .ep-une .ep-largeur.ep-serre h1 { margin-bottom:2px; font-size:var(--ep-titre-serre, 34px); }
}

/* ─── LES SOUS-TITRES DES CARTES AU TELEPHONE — 27/09 (soir) ─────────────────
   Reglage « ep_tel_cartes_soustitres », allume par defaut : chaque carte montre,
   sous son titre, le meme sous-titre qu a l ordinateur, plus petit, deux lignes au
   plus. Les trois cartes restent EXACTEMENT de la meme hauteur : la grille donne a
   chaque rangee la hauteur de la plus haute (« grid-auto-rows:1fr »), et la hauteur
   reglee reste un MINIMUM. On ne retire jamais un sous-titre pour gagner de la place.  */
@media (max-width:560px) {
  body.ep[data-soustitres="oui"]:not([data-mob="cote"]) .ep-cartes { display:grid; grid-template-columns:minmax(0, 1fr); grid-auto-rows:1fr; }
  body.ep[data-soustitres="oui"]:not([data-mob="cote"]) .ep-ch {
    height:auto; min-height:var(--ep-carte-h, var(--sd-ep-tel-carte-hauteur, 84px)); }
  body.ep[data-soustitres="oui"]:not([data-mob="cote"]) .ep-ch .ep-t,
  body.ep[data-soustitres="oui"]:not([data-mob="cote"]) .ep-ch:not(.ep-ch-chloe) .ep-t { padding:12px 6px 12px 14px; }
  body.ep[data-soustitres="oui"] .ep-ch-p { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
    font-size:12.5px; line-height:1.35; margin-top:3px; }
  body.ep[data-soustitres="oui"] .ep-ch-h { line-height:1.2; }
}
@media (max-width:560px) {
  /*  « Nouveau » est en haut a droite de la carte de Chloe : avec le sous-titre, le titre
      remonte ; on lui garde la bande du haut (mesure a 360 : il le chevauchait).  */
  body.ep[data-soustitres="oui"]:not([data-mob="cote"]) .ep-ch-chloe:has(.ep-nouveau) .ep-t { padding-top:28px; }
}

/* ─── LE HAUT DE PAGE DE L ORDINATEUR REMPLIT L ECRAN — 27/09 (soir) ───────────
   Le bloc prend la hauteur de l ecran visible, sous le menu : le drapeau et ses
   sources POSES EN BAS, juste au-dessus du bord (« ep_ordi_air_bas ») ;
   « 2 min · 3 · 0 € » juste au-dessus du drapeau (« ep_ordi_air_sources ») ; le BAS
   de la derniere carte EN FACE du bas des chiffres (les deux touchent le bas de la
   meme rangee) ; l espace libre ENTRE le texte et les chiffres.
   ⚠️ La hauteur est un MINIMUM : un ecran trop bas pour le contenu le laisse
   grandir, rien ne se chevauche. « ep_cartes_decal » n agit plus ici.  */
@media (min-width:981px) {
  .ep .ep-une { padding:var(--sd-ep-ordi-air-haut, 40px) 0 var(--sd-ep-ordi-air-bas, 24px); }
  .ep .ep-une .ep-largeur { grid-template-rows:minmax(0, 1fr) auto; align-items:stretch;
    min-height:calc(100svh - var(--ep-menu-h, 72px) - var(--sd-ep-ordi-air-haut, 40px) - var(--sd-ep-ordi-air-bas, 24px)); }
  body.ep[data-fige="non"] .ep-une .ep-largeur { min-height:calc(100svh - var(--ep-menu-h, 72px) - var(--sd-ep-ordi-air-haut, 40px) - var(--sd-ep-ordi-air-bas, 24px)); }
  .ep .ep-une-g { display:flex; flex-direction:column; min-height:0; }
  .ep .ep-une-g .ep-preuves { margin-top:auto; margin-bottom:0; padding-top:24px; }
  .ep .ep-une .ep-cartes { align-self:end; margin-top:0; }
  .ep .ep-une .ep-sources { margin-top:calc(var(--sd-ep-ordi-air-sources, 20px) - 24px); align-self:end; }
}

/*  27/09 (soir) — LE VISUEL SOLAIRE PAR DEFAUT : le soleil a la couleur du dessin solaire,
    la courbe et « € » en vert — la 3e teinte de la palette de la charte (celle des
    economies), le trait de base a l encre douce. Pose sur la teinte de la carte.  */
.ep .ep-ph.ep-ph-eco { background:none; transform:none; display:grid; place-items:center; }
.ep .ep-ph.ep-ph-eco svg { width:78%; height:78%; display:block;
  /*  tiree vers l encre, comme les dessins des cartes (§102.4) : sur une charte sombre, le vert
      de la palette tombait a 2,86 au survol (« Sombre »).  */
  color:color-mix(in srgb, var(--ch-teinte_3, #2F7D52) 65%, var(--ep-encre)); }
.ep .ep-ph-eco .ep-eco-soleil { stroke:var(--ep-picto-solaire, #C16C1B); }
.ep .ep-ph-eco .ep-eco-courbe { stroke:currentColor; }
.ep .ep-ph-eco .ep-eco-axe { stroke:var(--ep-doux); opacity:.55; }
.ep .ep-ph-eco .ep-eco-euro { fill:currentColor; font-family:inherit; }

/* ─── LE MENU DU TELEPHONE — 27/09 (soir) ──────────────────────────────────────
   Le bouton : un petit carre aux coins arrondis, contour fin, TROIS traits.
   « Espace partenaire » en bas du menu ouvert, en bouton plein bien visible.  */
.ep .ep-liens .ep-liens-partenaire { display:none; }
@media (max-width:900px) {
  .ep .ep-burger { width:40px; height:40px; padding:0; border:1px solid var(--ep-trait); border-radius:11px; display:grid; place-items:center; }
  .ep .ep-burger svg { width:24px; height:24px; }
  .ep .ep-menu .ep-burger { padding:0; margin-right:0; }
  .ep .ep-menu.ouvert .ep-liens .ep-liens-partenaire { display:block; margin-top:8px; text-align:center; font-weight:600;
    background:var(--ep-accent); color:var(--ep-sur-accent); border-radius:999px; padding:13px 16px; }
  .ep .ep-menu.ouvert .ep-liens .ep-liens-partenaire:hover { background:var(--ep-accent-vif, var(--ep-accent)); color:var(--ep-sur-accent-vif, var(--ep-sur-accent)); }
  .ep .ep-menu.ouvert .ep-liens .ep-liens-partenaire::after { display:none; }
}

/* ─── LE PREMIER ECRAN ET LE MENU DU TELEPHONE, VALIDES PAR GERARD — 28/09 ─────
   Recopie des deux captures « _maquettes/2026-09-28_telephone/ » (360 x 660).
   - Les TEXTES COURTS du telephone (« epuree.tel.* ») : sous 560 px seulement,
     l ordinateur garde les phrases completes. « .ep-ordi / .ep-tel ».
   - Les aplats tres clairs (bouton du menu, « Espace partenaire », bandeau des
     chiffres) et l ecriture posee dessus sont CALCULES par charte
     (« epuree_css() » : --ep-teinte-claire, --ep-accent-texte, 4,5 pour 1).  */
.ep .ep-tel { display:none; }
@media (max-width:560px) {
  .ep .ep-ordi { display:none; }
  .ep .ep-tel { display:inline; }
}
@media (max-width:900px) {
  /*  le bouton aux trois traits : teinte tres claire, contour fin  */
  .ep .ep-burger { background:var(--ep-teinte-claire, transparent); border-color:var(--ep-burger-bord, var(--ep-trait)); color:var(--ep-encre); }
  /*  « Espace partenaire » : la derniere ligne du menu ouvert, MEME TAILLE que les
      autres liens, a la couleur de la charte sur un leger fond teinte.  */
  .ep .ep-menu.ouvert .ep-liens .ep-liens-partenaire { text-align:left; font-size:14px; background:var(--ep-teinte-claire-carte, var(--ep-teinte));
    color:var(--ep-accent-texte, var(--ep-encre)); border-radius:14px; padding:13px 16px; margin-top:8px; }
  .ep .ep-menu.ouvert .ep-liens .ep-liens-partenaire:hover,
  .ep .ep-menu.ouvert .ep-liens .ep-liens-partenaire:focus-visible { background:var(--ep-teinte-claire-carte, var(--ep-teinte)); color:var(--ep-accent-texte, var(--ep-encre));
    text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; }
}
@media (max-width:560px) {
  /*  « qualifies. » A LA SUITE de « d artisans » sur un ecran de moins de 740 px de
      haut ; sur sa ligne au-dela (reglage « ep_tel_qualifies_ligne »).  */
  body.ep[data-qualif="oui"] .ep-une h1 .ep-serif { display:block; width:fit-content; }
}
@media (max-width:560px) and (max-height:739.98px) {
  body.ep[data-qualif="oui"] .ep-une h1 .ep-serif { display:inline; width:auto; }
}
@media (max-width:560px) {
  /*  LES TROIS CARTES : 84 px (« ep_tel_carte_hauteur »), toutes egales ; titre puis
      sous-titre court, JAMAIS COUPE (plus de limite de lignes : si un texte en
      demande plus, les trois cartes grandissent ensemble).  */
  .ep .ep-une .ep-cartes { gap:8px; }
  body.ep:not([data-mob="cote"]) .ep-ch { --gauche:108px; }
  body.ep:not([data-mob="cote"]) .ep-ch-chloe { --gauche:66px; }
  body.ep[data-soustitres="oui"]:not([data-mob="cote"]) .ep-ch .ep-t,
  body.ep[data-soustitres="oui"]:not([data-mob="cote"]) .ep-ch:not(.ep-ch-chloe) .ep-t { padding:8px 4px 8px 14px; align-self:center; }
  body.ep[data-soustitres="oui"] .ep-ch-h { font-size:15px; line-height:1.18; margin:0; }
  body.ep[data-soustitres="oui"] .ep-ch-p { display:block; -webkit-line-clamp:unset; overflow:visible; font-size:12px; line-height:1.28; margin-top:3px; }
  /*  Chloe : le titre et son texte centres dans la hauteur LAISSEE LIBRE sous
      « Nouveau » (en haut a droite), qui ne touche jamais le titre.  */
  body.ep[data-soustitres="oui"]:not([data-mob="cote"]) .ep-ch-chloe:has(.ep-nouveau) .ep-t { padding:24px 4px 6px 14px; align-self:center; }
  body.ep:not([data-mob="cote"]) .ep-ch .ep-fl { padding:0 14px 10px 4px; font-size:18px; }
  /*  les sources : « Aides : sources officielles », puis les cinq liens, chacun
      sur UNE ligne  */
  .ep .ep-sources nav { display:flex; flex-wrap:wrap; gap:2px 14px; }
  .ep .ep-sources nav > * { white-space:nowrap; }
  /*  LES CHIFFRES DANS UN BANDEAU arrondi tres clair, teinte de la charte, sur
      toute la largeur ; chiffres a la couleur de la charte, fin trait entre eux.  */
  .ep .ep-une .ep-preuves { align-self:stretch; max-width:none; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
    background:var(--ep-teinte-claire, var(--ep-teinte)); border-radius:22px; padding:9px 4px; text-align:center; }
  .ep .ep-une .ep-preuves > div,
  .ep .ep-une .ep-preuves > div:first-child,
  .ep .ep-une .ep-preuves > div:last-child { padding:0 4px; border-left:1px solid color-mix(in srgb, var(--ep-accent) 30%, var(--ep-teinte-claire, var(--ep-fond)));
    font-size:12px; line-height:1.25; white-space:nowrap; min-width:0; }
  .ep .ep-une .ep-preuves > div:first-child { border-left:0; }
  .ep .ep-une .ep-preuves b { justify-content:center; gap:6px; font-size:18px; font-weight:700; color:var(--ep-accent-texte, var(--ep-encre)); margin-bottom:1px; }
  .ep .ep-une .ep-preuves .ep-horloge { width:17px; height:17px; color:var(--ep-accent-texte, var(--ep-marque)); }
  .ep .ep-une { padding-bottom:var(--sd-ep-tel-air-bas, 18px); }
}
@media (max-width:560px) {
  /*  28/09 — mesure a 360 px : notre Inter est plus large que la police des captures,
      et « Quelques questions, jusqu a 3 artisans pres de chez moi. » passait sur TROIS
      lignes (cartes a 102,5 px au lieu de 84). La fleche rend 10 px a la colonne du
      texte, et le sous-titre se resserre d un demi-point : deux lignes.  */
  body.ep:not([data-mob="cote"]) .ep-ch .ep-fl { padding:0 12px 10px 0; }
  body.ep[data-soustitres="oui"] .ep-ch-p { font-size:11.5px; letter-spacing:-.005em; }
}
@media (max-width:560px) {
  /*  deux lignes de titre et deux de sous-titre tiennent dans 84 px (mesure : 85,8
      avec 8 px d air et un interligne de 1,18)  */
  body.ep[data-soustitres="oui"]:not([data-mob="cote"]) .ep-ch .ep-t,
  body.ep[data-soustitres="oui"]:not([data-mob="cote"]) .ep-ch:not(.ep-ch-chloe) .ep-t { padding-top:6px; padding-bottom:6px; }
  body.ep[data-soustitres="oui"] .ep-ch-h { line-height:1.15; }
  body.ep[data-soustitres="oui"]:not([data-mob="cote"]) .ep-ch-chloe:has(.ep-nouveau) .ep-t { padding:27px 4px 4px 14px; }
}

/* ─── LE HAUT DE PAGE DE L ORDINATEUR, REEQUILIBRE — 28/09 ─────────────────────
   ⚠️ ANNULE LA REGLE DU 27/09 « le bas de la derniere carte aligne sur le bas de
   pour vous » (decision de Gerard, vue sur son ecran : les cartes trop bas, et un
   grand vide a gauche entre le paragraphe et les chiffres).
   - A DROITE : le bloc « Decrivez vos travaux » + les trois cartes est CENTRE en
     hauteur entre le haut du titre et le drapeau ; « ep_ordi_cartes_decal » le
     decale (0 = centre ; negatif = plus haut).
   - A GAUCHE : le paragraphe un peu plus bas sous la coche (« ep_ordi_air_para »),
     les chiffres JUSTE SOUS le paragraphe (« ep_ordi_air_chiffres »).
   - Le drapeau et ses sources restent en bas de l ecran (inchange).  */
@media (min-width:981px) {
  .ep .ep-une .ep-pastille { margin-bottom:0; }
  .ep .ep-une .ep-chapo { margin-top:var(--sd-ep-ordi-air-para, 28px); margin-bottom:0; }
  .ep .ep-une-g .ep-preuves { margin-top:var(--sd-ep-ordi-air-chiffres, 32px); padding-top:0; }
  /*  la rangee des cartes s arrete « ep_ordi_air_sources » au-dessus du drapeau : on
      rend la moitie de cet air pour centrer sur l espace titre-drapeau (mesure : -10 px).  */
  .ep .ep-une .ep-cartes { align-self:center; position:relative; top:calc(var(--sd-ep-ordi-cartes-decal, 0px) + var(--sd-ep-ordi-air-sources, 20px) / 2); }
}

/* ─── LA CARTE DE CHLOE SANS « NOUVEAU » — 28/09 ──────────────────────────────
   L etiquette est retiree (interrupteur « ep_carte_chloe_nouveau », eteint). Les
   quatre reserves posees pour elle (haut 24 a 28 px, droite 76 px) ne s appliquent
   plus que si elle est LA (« :has(.ep-nouveau) ») : sans elle, le titre et son
   texte prennent l air des deux autres cartes, au centre de la hauteur.  */

/* ─── LES TROIS CARTES DE MEME HAUTEUR, SUR ORDINATEUR — 28/09 ──────────────────
   En haut de page, les cartes vivaient dans une colonne de flex : chacune prenait la
   hauteur de SON texte (Chloe 104 px, les deux autres 120). En grille, la premiere
   rangee (« Decrivez vos travaux ») garde sa hauteur, et les trois rangees suivantes
   sont egales (« 1fr ») : la plus haute donne la mesure. Titre et texte restent
   centres (« .ep-t », align-self:center), la fleche en bas a droite. Le bloc garde
   sa hauteur totale utile : son centrage entre titre et drapeau ne bouge pas.
   En bas de page, la grille de trois colonnes etire deja ses cartes a la meme
   hauteur (align-items:stretch) — mesure r253.  */
@media (min-width:981px) {
  .ep .ep-une .ep-cartes { display:grid; grid-template-columns:minmax(0, 1fr); grid-template-rows:auto; grid-auto-rows:1fr; }
  .ep .ep-une .ep-cartes > .ep-ch { height:auto; }
}

/* ─── « LA GRANDE CARTE » — LE SECOND PREMIER ECRAN DU TELEPHONE — 28/09/2026 ─
   Maquette validee : _maquettes/2026-09-28_telephone/accueil-telephone-version-2.png
   (360 x 660). Choisie dans « La presentation du site public » ; la page pose
   body[data-tel-une="grande"]. L ORDINATEUR NE CHANGE PAS, ni le bas de page :
   tout est sous 560 px et dans « .ep-une ».
   Couleurs : la carte de Chloe prend la COULEUR D ACTION et son ECRITURE
   (--ep-accent / --ep-sur-accent, la paire que le garde-fou mesure) ; le bouton
   blanc est la MEME paire inversee, donc lisible par construction ; les
   pastilles des chiffres reprennent la teinte claire et l ecriture calculees
   par epuree_css() (--ep-teinte-claire / --ep-accent-texte).  */
.ep .ep-accroche, .ep .ep-t2, .ep .ep-g-cercle, .ep .ep-p2 { display:none; }
@media (max-width:560px) {
  body.ep[data-tel-une="grande"] .ep-une { padding-bottom:25px; }
  /*  la colonne prend la hauteur de l ecran MOINS ces 25 px (le premier ecran actuel
      en garde « ep_tel_air_bas », 18 px) : l air sous les liens vaut 25 px.  */
  body.ep[data-tel-une="grande"] .ep-une .ep-largeur { min-height:calc(100svh - var(--ep-menu-h, 64px) - env(safe-area-inset-top, 0px) - 25px); }
  body.ep[data-tel-une="grande"][data-menu-tel="barre"] .ep-une .ep-largeur { min-height:calc(100svh - var(--ep-menu-h, 64px) - env(safe-area-inset-top, 0px) - 25px - 64px - env(safe-area-inset-bottom, 0px)); }
  body.ep[data-tel-une="grande"] .ep-une .ep-chapo { display:none; }
  body.ep[data-tel-une="grande"] .ep-une .ep-accroche { display:block; order:5; margin:0; font-size:13.5px; line-height:1.5; color:var(--ep-doux); }
  body.ep[data-tel-une="grande"] .ep-une .ep-accroche b { color:var(--ep-encre); font-weight:700; }
  /*  les cartes : Chloe sur toute la largeur, puis deux carres  */
  body.ep[data-tel-une="grande"] .ep-une .ep-cartes { order:7; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; align-content:start; flex-grow:0; grid-auto-rows:auto; grid-template-rows:none; }
  body.ep[data-tel-une="grande"] .ep-une .ep-ch-tete { display:none; }
  body.ep[data-tel-une="grande"] .ep-une .ep-ch { position:relative; min-height:0; height:auto; transform:none !important; }
  body.ep[data-tel-une="grande"] .ep-une .ep-ch > .ep-t { display:none; }
  body.ep[data-tel-une="grande"] .ep-une .ep-ch .ep-t2 { display:flex; flex-direction:column; min-width:0; }
  /*  LA GRANDE CARTE DE CHLOE  */
  body.ep[data-tel-une="grande"] .ep-une .ep-ch-chloe { grid-column:1 / -1; display:flex; flex-direction:row;
    align-items:flex-start; gap:12px; padding:12px 14px 14px 12px; border:0; border-radius:22px; overflow:hidden;
    background:var(--ep-accent); color:var(--ep-sur-accent); text-align:left; }
  body.ep[data-tel-une="grande"] .ep-une .ep-ch-chloe .ep-media { flex:0 0 40px; width:40px; height:40px; margin-top:0; border-radius:50%;
    display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--ep-sur-accent) 16%, transparent); }
  body.ep[data-tel-une="grande"] .ep-une .ep-ch-chloe .ep-media .ep-ic { width:20px; height:20px; color:var(--ep-sur-accent); }
  body.ep[data-tel-une="grande"] .ep-une .ep-ch-chloe .ep-t2 { flex:1 1 auto; position:relative; z-index:1; }
  body.ep[data-tel-une="grande"] .ep-une .ep-ch-chloe .ep-t2 strong { font-size:17px; line-height:1.2; font-weight:700; color:var(--ep-sur-accent); }
  body.ep[data-tel-une="grande"] .ep-une .ep-ch-chloe .ep-t2 > span:not(.ep-g-bouton) { margin-top:4px; font-size:13px; line-height:1.35; color:var(--ep-sur-accent); }
  body.ep[data-tel-une="grande"] .ep-une .ep-ch-chloe .ep-g-bouton { display:inline-flex; align-self:flex-start; align-items:center; gap:5px; margin-top:10px;
    padding:6px 13px; border-radius:999px; font-size:12.5px; font-weight:700; background:var(--ep-sur-accent); color:var(--ep-accent); }
  body.ep[data-tel-une="grande"] .ep-une .ep-ch-chloe .ep-g-cercle { display:block; position:absolute; right:-46px; top:-8px; width:130px; height:130px;
    border-radius:50%; border:18px solid color-mix(in srgb, var(--ep-sur-accent) 12%, transparent); pointer-events:none; }
  body.ep[data-tel-une="grande"] .ep-une .ep-ch-chloe .ep-fl, body.ep[data-tel-une="grande"] .ep-une .ep-ch-chloe .ep-nouveau { display:none; }
  /*  LES DEUX CARRES — visuel en haut, titre, phrase, fleche en bas a droite  */
  body.ep[data-tel-une="grande"] .ep-une .ep-ch-devis, body.ep[data-tel-une="grande"] .ep-une .ep-ch-solaire {
    display:flex; flex-direction:column; padding:0; border-radius:18px; overflow:hidden; }
  body.ep[data-tel-une="grande"] .ep-une .ep-ch-devis .ep-media, body.ep[data-tel-une="grande"] .ep-une .ep-ch-solaire .ep-media {
    position:relative; width:100%; height:var(--sd-ep-tel-carre-visuel, 52px); flex:0 0 auto; margin:0; border-radius:0; }
  body.ep[data-tel-une="grande"] .ep-une .ep-ch-devis .ep-media > *, body.ep[data-tel-une="grande"] .ep-une .ep-ch-solaire .ep-media > * { width:100%; height:100%; }
  body.ep[data-tel-une="grande"] .ep-une .ep-ch-devis .ep-t2, body.ep[data-tel-une="grande"] .ep-une .ep-ch-solaire .ep-t2 { flex:1 1 auto; padding:7px 10px 22px; }
  body.ep[data-tel-une="grande"] .ep-une .ep-ch-devis .ep-t2 strong, body.ep[data-tel-une="grande"] .ep-une .ep-ch-solaire .ep-t2 strong {
    font-size:13.5px; line-height:1.25; font-weight:700; color:var(--ep-encre); }
  body.ep[data-tel-une="grande"] .ep-une .ep-ch-devis .ep-t2 > span, body.ep[data-tel-une="grande"] .ep-une .ep-ch-solaire .ep-t2 > span {
    margin-top:3px; font-size:11.5px; line-height:1.35; color:var(--ep-doux); }
  body.ep[data-tel-une="grande"] .ep-une .ep-ch-devis .ep-fl, body.ep[data-tel-une="grande"] .ep-une .ep-ch-solaire .ep-fl {
    display:block; position:absolute; right:10px; bottom:6px; padding:0; margin:0; font-size:15px; line-height:1; color:var(--ep-accent-texte); }
  /*  LES CHIFFRES DANS TROIS PASTILLES, sous les cartes ; le drapeau en dernier  */
  body.ep[data-tel-une="grande"] .ep-une .ep-air-4 { order:8; flex-basis:8px; }
  body.ep[data-tel-une="grande"] .ep-une .ep-preuves { order:9; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin:0; padding:0; border:0; background:none; border-radius:0; box-shadow:none; }
  body.ep[data-tel-une="grande"] .ep-une .ep-preuves > div { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
    padding:6px 4px; border:0; border-radius:12px; background:var(--ep-teinte-claire); text-align:center; }
  body.ep[data-tel-une="grande"] .ep-une .ep-preuves > div:first-child { padding-left:4px; }
  body.ep[data-tel-une="grande"] .ep-une .ep-preuves b { display:inline-flex; align-items:center; gap:4px; font-size:17px; line-height:1.15; color:var(--ep-accent-texte); }
  body.ep[data-tel-une="grande"] .ep-une .ep-preuves b .ep-horloge { width:14px; height:14px; }
  body.ep[data-tel-une="grande"] .ep-une .ep-preuves .ep-p1 { display:none; }
  body.ep[data-tel-une="grande"] .ep-une .ep-preuves .ep-p2 { display:block; font-size:11.5px; color:var(--ep-doux); }
  body.ep[data-tel-une="grande"] .ep-une .ep-air-5 { order:10; flex-basis:10px; }
  body.ep[data-tel-une="grande"] .ep-une .ep-sources { order:11; font-size:11px; line-height:1.45; }
  body.ep[data-tel-une="grande"] .ep-une .ep-sources nav { margin-top:2px; gap:2px 9px; }
}

/* ─── « LA GRANDE CARTE » SUR ORDINATEUR, LA CONFIANCE, LE DECOR — 28/09/2026 (soir)
   Maquette validee : _maquettes/2026-09-28_accueil-vivant/accueil-plus-vivant.html
   (1600 x 900 et 360 x 660 ; filigrane allume, confiance « A », photos eteintes).
   La page pose body[data-ordi-une] (choix de l ordinateur), [data-tel-une]
   (choix du telephone), [data-confiance], [data-filigrane], [data-chantiers].
   ⚠️ RIEN NE PARAIT HORS DE « LA GRANDE CARTE » : la page actuelle ne change pas.
   Couleurs : la carte de Chloe prend la paire --ep-accent / --ep-sur-accent (que
   le garde-fou mesure) ; les dessins de la confiance, la couleur de marque deja
   calibree pour les dessins (--ep-marque, celle de l horloge).  */
.ep .ep-filigrane, .ep .ep-confiance, .ep .ep-confiance-g, .ep .ep-chantiers { display:none; }

/*  LA MAISON EN FILIGRANE — tres pale, a la couleur de la charte, derriere le titre.
    L intensite est une OPACITE en pourcentage ; deux replis, un par appareil (§22.2).  */
.ep .ep-filigrane { position:absolute; left:-60px; top:10px; width:720px; height:auto; color:var(--ep-accent);
  opacity:var(--sd-ep-filigrane-intensite, 7%); pointer-events:none; z-index:0; }
.ep .ep-une > .ep-largeur { position:relative; z-index:1; }
@media (min-width:981px) {
  body.ep[data-ordi-une="grande"][data-filigrane="oui"] .ep-une .ep-filigrane { display:block; }
  body.ep[data-ordi-une="grande"] .ep-une { overflow:clip; overflow-clip-margin:24px; }
}
@media (max-width:560px) {
  .ep .ep-filigrane { width:420px; left:auto; right:-120px; top:-10px; opacity:var(--sd-ep-filigrane-intensite, 6%); }
  body.ep[data-tel-une="grande"][data-filigrane="oui"] .ep-une .ep-filigrane { display:block; }
  body.ep[data-tel-une="grande"] .ep-une { overflow-x:clip; }
}

/*  LA LIGNE DE CONFIANCE — le dessin commun des quatre gages  */
.ep .ep-gage { display:flex; align-items:center; gap:12px; font-size:13.5px; line-height:1.3; min-width:0; }
.ep .ep-gage > svg { width:28px; height:28px; flex:none; color:var(--ep-marque); }
.ep .ep-gage b { display:block; font-size:14.5px; font-weight:600; color:var(--ep-encre); }
.ep .ep-gage span { display:block; color:var(--ep-doux); font-size:12.5px; }
.ep .ep-confiance-g { margin:18px 0 0; padding:0; list-style:none; grid-template-columns:1fr 1fr; gap:8px 20px; }
.ep .ep-confiance-g li { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ep-encre); }
.ep .ep-confiance-g svg { width:16px; height:16px; color:var(--ep-marque); flex:none; }

@media (min-width:981px) {
  /*  ── LE HAUT DE PAGE, « LA GRANDE CARTE » ──  */
  body.ep[data-ordi-une="grande"] .ep-une .ep-largeur { grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); column-gap:56px; row-gap:0; }
  body.ep[data-ordi-une="grande"] .ep-une-g { justify-content:center; }
  body.ep[data-ordi-une="grande"] .ep-une-g .ep-preuves { margin-top:26px; padding-top:0; }
  body.ep[data-ordi-une="grande"] .ep-une .ep-chapo { display:none; }
  body.ep[data-ordi-une="grande"] .ep-une .ep-accroche { display:block; font-size:17.5px; line-height:1.6; color:var(--ep-doux); max-width:520px; margin:22px 0 0; }
  body.ep[data-ordi-une="grande"] .ep-une .ep-accroche b { color:var(--ep-encre); font-weight:600; }
  /*  les cartes : Chloe sur toute la largeur, puis deux carres  */
  body.ep[data-ordi-une="grande"] .ep-une .ep-cartes { align-self:center; margin-top:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
  body.ep[data-ordi-une="grande"] .ep-une .ep-ch-tete { grid-column:1 / -1; margin:0 0 -2px 4px; gap:10px; }
  body.ep[data-ordi-une="grande"] .ep-une .ep-ch > .ep-t { display:none; }
  body.ep[data-ordi-une="grande"] .ep-une .ep-ch .ep-t2 { display:flex; flex-direction:column; min-width:0; }
  body.ep[data-ordi-une="grande"] .ep-une .ep-ch-chloe { grid-column:1 / -1; display:grid; grid-template-columns:54px minmax(0,1fr); column-gap:18px; align-items:center;
    min-height:0; padding:26px 28px; border:0; border-radius:26px; background:var(--ep-accent); color:var(--ep-sur-accent); }
  body.ep[data-ordi-une="grande"] .ep-une .ep-ch-chloe .ep-media { width:54px; height:54px; border-radius:50%; align-self:start;
    background:color-mix(in srgb, var(--ep-sur-accent) 16%, transparent); }
  body.ep[data-ordi-une="grande"] .ep-une .ep-ch-chloe .ep-media .ep-ic { width:26px; height:26px; color:var(--ep-sur-accent); }
  body.ep[data-ordi-une="grande"] .ep-une .ep-ch-chloe .ep-t2 { position:relative; z-index:1; }
  body.ep[data-ordi-une="grande"] .ep-une .ep-ch-chloe .ep-t2 strong { font-size:24px; letter-spacing:-.015em; line-height:1.15; font-weight:700; color:var(--ep-sur-accent); }
  body.ep[data-ordi-une="grande"] .ep-une .ep-ch-chloe .ep-t2 > span:not(.ep-g-bouton) { margin-top:6px; font-size:15px; line-height:1.45; color:var(--ep-sur-accent); }
  body.ep[data-ordi-une="grande"] .ep-une .ep-ch-chloe .ep-g-bouton { display:inline-flex; align-self:flex-start; align-items:center; gap:6px; margin-top:12px;
    padding:11px 20px; border-radius:999px; font-size:14.5px; font-weight:700; background:var(--ep-sur-accent); color:var(--ep-accent); }
  body.ep[data-ordi-une="grande"] .ep-une .ep-ch-chloe .ep-g-cercle { display:block; position:absolute; right:-52px; top:-52px; width:190px; height:190px;
    border-radius:50%; border:30px solid color-mix(in srgb, var(--ep-sur-accent) 8%, transparent); pointer-events:none; }
  body.ep[data-ordi-une="grande"] .ep-une .ep-ch-chloe .ep-fl, body.ep[data-ordi-une="grande"] .ep-une .ep-ch-chloe .ep-nouveau { display:none; }
  body.ep[data-ordi-une="grande"] .ep-une .ep-ch-devis, body.ep[data-ordi-une="grande"] .ep-une .ep-ch-solaire {
    display:flex; flex-direction:column; min-height:0; padding:0; border-radius:22px; }
  body.ep[data-ordi-une="grande"] .ep-une .ep-ch-devis .ep-media, body.ep[data-ordi-une="grande"] .ep-une .ep-ch-solaire .ep-media {
    position:relative; width:100%; height:var(--ep-carre-media, 96px); flex:0 0 auto; }
  body.ep[data-ordi-une="grande"] .ep-une .ep-ch-devis .ep-media > span, body.ep[data-ordi-une="grande"] .ep-une .ep-ch-solaire .ep-media > span { width:100%; height:100%; }
  body.ep[data-ordi-une="grande"] .ep-une .ep-ch-devis .ep-t2, body.ep[data-ordi-une="grande"] .ep-une .ep-ch-solaire .ep-t2 { flex:1 1 auto; padding:14px 18px 36px; }
  body.ep[data-ordi-une="grande"] .ep-une .ep-ch-devis .ep-t2 strong, body.ep[data-ordi-une="grande"] .ep-une .ep-ch-solaire .ep-t2 strong {
    font-size:17px; line-height:1.25; letter-spacing:-.01em; font-weight:600; color:var(--ep-encre); }
  body.ep[data-ordi-une="grande"] .ep-une .ep-ch-devis .ep-t2 > span, body.ep[data-ordi-une="grande"] .ep-une .ep-ch-solaire .ep-t2 > span {
    margin-top:5px; font-size:13.5px; line-height:1.4; color:var(--ep-doux); }
  body.ep[data-survol="teinte"][data-ordi-une="grande"] .ep-une .ep-ch:not(.ep-ch-chloe):hover .ep-t2 > span { color:var(--ep-encre); }
  body.ep[data-ordi-une="grande"] .ep-une .ep-ch-devis .ep-fl, body.ep[data-ordi-une="grande"] .ep-une .ep-ch-solaire .ep-fl {
    position:absolute; right:16px; bottom:12px; padding:0; font-size:18px; line-height:1; color:var(--ep-accent-texte, var(--ep-encre)); }
  /*  la confiance, juste au-dessus du drapeau, sur toute la largeur  */
  body.ep[data-ordi-une="grande"] .ep-une .ep-confiance-ordi { grid-column:1 / -1; order:9; padding-top:22px; }
  body.ep[data-ordi-une="grande"] .ep-une .ep-sources { margin-top:16px; }
  body.ep[data-ordi-une="grande"][data-chantiers="oui"] .ep-une .ep-chantiers { display:flex; gap:10px; margin-top:26px; }
  body.ep[data-ordi-une="grande"] .ep-une .ep-chantiers img { flex:1 1 0; min-width:0; height:78px; border-radius:14px; object-fit:cover; display:block; }
  /*  les versions de la ligne  */
  body.ep[data-ordi-une="grande"][data-confiance="a"] .ep-confiance-ordi { display:grid; grid-template-columns:repeat(var(--ep-nb-gages, 4), minmax(0,1fr)); gap:0; }
  body.ep[data-ordi-une="grande"][data-confiance="a"] .ep-confiance-ordi .ep-gage { padding:0 18px; border-left:1px solid var(--ep-trait); }
  body.ep[data-ordi-une="grande"][data-confiance="a"] .ep-confiance-ordi .ep-gage:first-child { padding-left:0; border-left:0; }
  body.ep[data-ordi-une="grande"][data-confiance="coches"] .ep-confiance-ordi { display:flex; flex-wrap:wrap; gap:6px 22px; }
  body.ep[data-ordi-une="grande"][data-confiance="pastilles"] .ep-confiance-ordi { display:flex; flex-wrap:wrap; gap:10px; }
  body.ep[data-ordi-une="grande"][data-confiance="chiffres"] .ep-une .ep-confiance-g { display:grid; }
}
@media (max-width:560px) {
  body.ep[data-tel-une="grande"] .ep-une .ep-confiance-tel { margin:22px 16px 0; }
  body.ep[data-tel-une="grande"][data-confiance="a"] .ep-confiance-tel { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px 0; }
  body.ep[data-tel-une="grande"][data-confiance="a"] .ep-confiance-tel .ep-gage { padding:0 12px; border-left:1px solid var(--ep-trait); }
  body.ep[data-tel-une="grande"][data-confiance="a"] .ep-confiance-tel .ep-gage:nth-child(odd) { padding-left:0; border-left:0; }
  body.ep[data-tel-une="grande"][data-confiance="coches"] .ep-confiance-tel,
  body.ep[data-tel-une="grande"][data-confiance="pastilles"] .ep-confiance-tel,
  body.ep[data-tel-une="grande"][data-confiance="chiffres"] .ep-confiance-tel { display:flex; flex-wrap:wrap; gap:8px 16px; }
  body.ep[data-tel-une="grande"] .ep-confiance-tel .ep-gage > svg { width:24px; height:24px; }
  body.ep[data-tel-une="grande"] .ep-confiance-tel .ep-gage b { font-size:13px; }
  body.ep[data-tel-une="grande"] .ep-confiance-tel .ep-gage span { font-size:11.5px; }
}
/*  « coches » (et « chiffres » au telephone) : une ligne de coches, sans dessin ni phrase  */
body.ep[data-confiance="coches"] .ep-confiance .ep-gage > svg, body.ep[data-confiance="coches"] .ep-confiance .ep-gage span,
body.ep[data-confiance="chiffres"] .ep-confiance .ep-gage > svg, body.ep[data-confiance="chiffres"] .ep-confiance .ep-gage span { display:none; }
body.ep[data-confiance="coches"] .ep-confiance .ep-gage b, body.ep[data-confiance="chiffres"] .ep-confiance .ep-gage b { display:inline; font-size:14px; }
body.ep[data-confiance="coches"] .ep-confiance .ep-gage b::before, body.ep[data-confiance="chiffres"] .ep-confiance .ep-gage b::before { content:"\2713\00a0"; color:var(--ep-marque); }
/*  « pastilles » : des pastilles legeres, sans phrase  */
body.ep[data-confiance="pastilles"] .ep-confiance .ep-gage { background:var(--ep-teinte-claire, var(--ep-teinte)); border-radius:999px; padding:8px 16px 8px 10px; gap:8px; }
body.ep[data-confiance="pastilles"] .ep-confiance .ep-gage > svg { width:20px; height:20px; }
body.ep[data-confiance="pastilles"] .ep-confiance .ep-gage span { display:none; }
body.ep[data-confiance="pastilles"] .ep-confiance .ep-gage b { font-size:13.5px; }

/* ─── « LA GRANDE CARTE » : LE TITRE PLUS HAUT, LE BAS DU TELEPHONE COMME SUR
   L ORDINATEUR — 28/09/2026 (nuit) ─────────────────────────────────────────────
   ORDINATEUR — le titre ne se centre plus dans la hauteur : il part d un air
   reglable sous le menu (« ep_ordi_grande_air_titre ») ; « Decrivez vos travaux »
   part du MEME haut (le haut des capitales aligne, mesure r258) ; l espace libre
   va ENTRE le texte et les chiffres ; la confiance et le drapeau restent en bas.
   ⚠️ la correction d alignement suit la taille du titre : ses capitales commencent
   a 0,136 de sa taille sous sa boite (Inter, interligne 1) ; celles de
   « Decrivez vos travaux », a --ep-tete-cap sous la sienne (mesure).  */
@media (min-width:981px) {
  body.ep[data-ordi-une="grande"] .ep-une-g { justify-content:flex-start; padding-top:var(--sd-ep-ordi-grande-air-titre, 10px); }
  body.ep[data-ordi-une="grande"] .ep-une-g .ep-preuves { margin-top:auto; padding-top:var(--sd-ep-ordi-air-chiffres, 32px); }
  body.ep[data-ordi-une="grande"] .ep-une .ep-cartes { align-self:start; top:auto;
    margin-top:calc(var(--sd-ep-ordi-grande-air-titre, 10px) + .136 * var(--ep-h1-serre, clamp(44px, 5.6vw, 78px)) - var(--ep-tete-cap, 7.9px)); }
}
/* TELEPHONE — le titre a « ep_tel_grande_air_titre » sous le menu (fixe, il ne
   grandit plus avec l ecran) ; les chiffres SANS pastilles, comme sur l ordinateur
   (l horloge devant « 2 min », un fin trait entre eux, aucun fond) ; puis la ligne
   de confiance (DANS la colonne, sans cadre, deux colonnes, sans les petites
   phrases) ; puis le drapeau et les sources, tout en bas.
   PRIORITE : les chiffres sont toujours dans le premier ecran (ils suivent les
   cartes) ; la confiance et le drapeau y tiennent si la place le permet, sinon ils
   viennent juste en dessous, dans cet ordre. L air libre se loge ENTRE les
   chiffres et la confiance (« ep_tel_poids_chiffres »).  */
@media (max-width:560px) {
  body.ep[data-tel-une="grande"] .ep-une .ep-air-1 { flex-grow:0; flex-basis:var(--sd-ep-tel-grande-air-titre, 10px); }
  body.ep[data-tel-une="grande"] .ep-une .ep-air-4 { order:8; flex-grow:0; flex-basis:var(--sd-ep-tel-grande-air-chiffres, 14px); }
  /*  29/09 — LE BAS, REFAIT D APRES « accueil-telephone-v3.png » (valide par Gerard) :
      les chiffres CENTRES, en grand, a la couleur de la charte, leur legende courte
      dessous, sans cadre ni trait entre eux ; un fin trait court ; puis les quatre
      gages sur UNE ligne, le dessin au-dessus, le nom centre sur deux lignes, sans
      les petites phrases.  */
  body.ep[data-tel-une="grande"] .ep-une .ep-preuves { order:9; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0 6px; align-self:stretch; }
  body.ep[data-tel-une="grande"] .ep-une .ep-preuves > div,
  body.ep[data-tel-une="grande"] .ep-une .ep-preuves > div:first-child,
  body.ep[data-tel-une="grande"] .ep-une .ep-preuves > div:last-child { display:flex; flex-direction:column; align-items:center; gap:1px; min-width:0;
    padding:0; border:0; border-radius:0; background:none; text-align:center; white-space:nowrap; }
  body.ep[data-tel-une="grande"] .ep-une .ep-preuves b { display:flex; align-items:center; justify-content:center; gap:5px; font-size:22px; line-height:1.15;
    font-weight:700; color:var(--ep-accent-texte); }
  body.ep[data-tel-une="grande"] .ep-une .ep-preuves b .ep-horloge { width:15px; height:15px; color:var(--ep-accent-texte); }
  body.ep[data-tel-une="grande"] .ep-une .ep-preuves .ep-p1 { display:none; }
  body.ep[data-tel-une="grande"] .ep-une .ep-preuves .ep-p2 { display:block; font-size:12.5px; line-height:1.3; color:var(--ep-doux); }
  body.ep[data-tel-une="grande"] .ep-une .ep-air-5 { order:10; flex-basis:var(--sd-ep-tel-grande-air-confiance, 14px); flex-grow:var(--sd-ep-tel-poids-chiffres, 2); }
  body.ep[data-tel-une="grande"] .ep-une .ep-confiance-tel.ep-confiance { order:11; margin:0; padding:14px 0 0; position:relative;
    display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:0; align-self:stretch; }
  /*  29/09 (matin) — ⚠️ « align-self:stretch » : la colonne du haut CENTRE ses enfants (« align-items:center »),
      la grille se retrecissait autour de ses gages (246 px au centre, mesure). Etiree, elle prend la largeur
      utile, les memes bords que les deux carres ; quatre colonnes egales, sans ecart entre elles.  */
  body.ep[data-tel-une="grande"] .ep-une .ep-confiance-tel.ep-confiance::before { content:""; position:absolute; top:0; left:13%; right:13%;
    border-top:1px solid var(--ep-trait); }
  body.ep[data-tel-une="grande"] .ep-une .ep-confiance-tel.ep-confiance .ep-gage { display:flex; flex-direction:column; align-items:center; gap:8px;
    min-width:0; padding:0; border:0; background:none; text-align:center; }   /*  8 px du dessin au nom, comme la maquette v3  */
  body.ep[data-tel-une="grande"] .ep-une .ep-confiance-tel.ep-confiance .ep-gage > svg { width:21px; height:21px; margin:0; }
  body.ep[data-tel-une="grande"] .ep-une .ep-confiance-tel.ep-confiance .ep-gage > div { display:block; }
  body.ep[data-tel-une="grande"] .ep-une .ep-confiance-tel.ep-confiance .ep-gage b { display:block; font-size:12px; line-height:1.25; font-weight:500;
    color:var(--ep-doux); text-wrap:balance; }
  body.ep[data-tel-une="grande"] .ep-une .ep-confiance-tel.ep-confiance .ep-gage span { display:none; }}

/* ─── LES SOURCES OFFICIELLES DANS « AIDES & CONSEILS » — 28/09/2026 (nuit) ──
   Gerard : le drapeau, la phrase et les cinq liens QUITTENT le haut de page, sur
   ordinateur et au telephone, dans les deux presentations. Ils vivent sous les
   quatre aides, alignes a gauche avec elles, un peu d air au-dessus.
   ⚠️ L IDENTIFIANT DE LA SECTION PORTE LA REGLE : une douzaine de regles du haut
   de page posent encore « order », « grid-column » et des marges sur
   « .ep .ep-sources » — ecrites pour la colonne du premier ecran, elles ne
   doivent plus rien decider ici.  */
.ep #ac-aides .ep-sources { order:0; grid-column:auto; align-self:auto; display:flex; align-items:center;
  justify-content:flex-start; flex-wrap:wrap; gap:8px 16px; padding:0;
  margin:var(--sd-ep-aides-air-sources, 36px) 0 0; font-size:13.5px; line-height:1.5; }
.ep #ac-aides .ep-sources nav { display:flex; flex-wrap:wrap; gap:4px 14px; margin:0; }
@media (max-width:560px) {
  .ep #ac-aides .ep-sources { display:block; margin-top:var(--sd-ep-aides-air-sources, 24px); font-size:12.5px; line-height:1.6; }
  .ep #ac-aides .ep-sources .ep-drapeau { display:inline-flex; vertical-align:-2px; margin-right:8px; }
  .ep #ac-aides .ep-sources nav { gap:2px 12px; margin-top:4px; }
}

/* ─── LE VISAGE DE CHLOE — « La grande carte », 28/09/2026 (nuit) ─────────────
   La conseillere de la version A (« carte-chloe-conseillere.png »), redessinee
   au trait et en aplats. ⚠️ LE CASQUE, LE ROND ET LE VETEMENT LISENT LA CHARTE :
     le rond ...... un voile de l encre posee sur l accent — comme le rond du micro ;
     le vetement .. cette meme encre, un peu teintee d accent : clair sur un
                    accent fonce, fonce sur un accent clair — il se detache toujours ;
     le casque .... un blanc teinte d accent, TOUJOURS clair : il passe sur des
                    cheveux bruns, et un casque fonce y disparaitrait.
   La peau, les cheveux et la bouche sont fixes : ce sont les siens.
   Choix par appareil sur <body> (data-chloe-ordi / data-chloe-tel) : le serveur
   ne connait pas la largeur, il ecrit les deux ; la feuille tranche.  */
.ep .ep-g-chloe, .ep .ep-g-photo, .ep .ep-g-rond-tete, .ep .ep-g-rond-photo { display:none; }
.ep .ep-conseillere { display:block; width:100%; height:100%; }
.ep .ep-cs-rond   { fill:color-mix(in srgb, var(--ep-sur-accent) 14%, transparent); }
.ep .ep-cs-habit  { fill:color-mix(in srgb, var(--ep-sur-accent) 86%, var(--ep-accent)); }
.ep .ep-cs-col    { stroke:color-mix(in srgb, var(--ep-accent) 55%, transparent); }
.ep .ep-cs-casque { fill:color-mix(in srgb, var(--ep-accent) 12%, #FFFFFF); }
.ep .ep-cs-arceau { stroke:color-mix(in srgb, var(--ep-accent) 12%, #FFFFFF); }
.ep .ep-cs-peau   { fill:#F0C8AD; }
.ep .ep-cs-cou    { fill:#E3B193; }
.ep .ep-cs-cheveux, .ep .ep-cs-yeux { fill:#3A2420; }
.ep .ep-cs-bouche { stroke:#B24E36; }
/*  la photo : un rond cerne de l encre de l accent, et « en ligne »  */
.ep .ep-g-photo i, .ep .ep-g-rond-photo { background:var(--sd-ep-carte-chloe-fichier, none) center / cover no-repeat; }

@media (min-width:981px) {
  /*  ⚠️ LA RESERVE DE DROITE EST LE GARDE : le texte et le bouton vivent dans
      une colonne qui s arrete AVANT le dessin, ils ne peuvent pas passer dessous.  */
  body.ep[data-ordi-une="grande"]:not([data-chloe-ordi="micro"]) .ep-une .ep-ch-chloe .ep-g-cercle { display:none; }
  body.ep[data-ordi-une="grande"]:not([data-chloe-ordi="micro"]) .ep-une .ep-ch-chloe .ep-t2 {
    padding-right:calc(var(--ep-chloe-l, var(--sd-ep-chloe-dessin-largeur, 180px)) + 14px); }
  body.ep[data-ordi-une="grande"][data-chloe-ordi="conseillere"] .ep-une .ep-ch-chloe .ep-g-chloe {
    display:block; position:absolute; right:22px; bottom:0; width:var(--ep-chloe-l, var(--sd-ep-chloe-dessin-largeur, 180px));
    height:min(calc(100% - 10px), var(--ep-chloe-l, var(--sd-ep-chloe-dessin-largeur, 180px))); pointer-events:none; }   /*  29/09 : un cadre au plus CARRE — « slice » y rend le meme dessin que « meet »  */
  body.ep[data-ordi-une="grande"][data-chloe-ordi="photo"] .ep-une .ep-ch-chloe .ep-g-photo {
    display:block; position:absolute; right:28px; top:50%; transform:translateY(-50%);
    width:min(150px, calc(100% - 60px)); aspect-ratio:1; pointer-events:none; }
  body.ep[data-ordi-une="grande"][data-chloe-ordi="photo"] .ep-une .ep-ch-chloe .ep-g-photo i {
    display:block; width:100%; height:100%; border-radius:50%; box-shadow:0 0 0 5px color-mix(in srgb, var(--ep-sur-accent) 85%, transparent); }
  body.ep[data-ordi-une="grande"][data-chloe-ordi="photo"] .ep-une .ep-ch-chloe .ep-g-photo b {
    position:absolute; right:-6px; bottom:10px; display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:999px;
    font-size:12.5px; font-weight:700; background:var(--ep-sur-accent); color:var(--ep-accent); }
  body.ep[data-ordi-une="grande"][data-chloe-ordi="photo"] .ep-une .ep-ch-chloe .ep-g-photo b::before {
    content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
}
@media (max-width:560px) {
  /*  le rond du micro garde sa taille : le premier ecran n en tient pas moins  */
  body.ep[data-tel-une="grande"]:not([data-chloe-tel="micro"]) .ep-une .ep-ch-chloe .ep-media { overflow:hidden; }
  body.ep[data-tel-une="grande"]:not([data-chloe-tel="micro"]) .ep-une .ep-ch-chloe .ep-media .ep-ic { display:none; }
  body.ep[data-tel-une="grande"][data-chloe-tel="conseillere"] .ep-une .ep-ch-chloe .ep-g-rond-tete { display:block; width:100%; height:100%; }
  body.ep[data-tel-une="grande"][data-chloe-tel="photo"] .ep-une .ep-ch-chloe .ep-g-rond-photo { display:block; width:100%; height:100%; }
}
@media (max-width:560px) {
  /*  28/09 (nuit) — la place liberee par les sources sert D ABORD a faire tenir la
      ligne de confiance (Gerard). Sur un ecran trop court, les deux espaces du bas
      cedent a leur tour, avec ceux du haut, jusqu a 8 px — jamais a zero : les
      chiffres ne touchent ni les cartes ni la confiance.  */
  body.ep[data-tel-une="grande"] .ep-une .ep-air-4 { flex-basis:max(calc(var(--sd-ep-tel-grande-air-chiffres, 14px) - var(--ep-air-cede, 0px)), 8px); }
  body.ep[data-tel-une="grande"] .ep-une .ep-air-5 { flex-basis:max(calc(var(--sd-ep-tel-grande-air-confiance, 18px) - var(--ep-air-cede, 0px)), 8px); }
}

/* ─── LE HAUT DE PAGE SE CALE A LA HAUTEUR DE LA FENETRE — 28/09/2026 (nuit) ──
   Gerard, a 1600 x 900 : avec le visage de Chloe tout etait descendu et la ligne de
   confiance passait sous le bord. Mesure : c est la HAUTEUR UTILE de la fenetre (un
   ecran de 900 donne une fenetre de 720 a 780 une fois le navigateur ouvert).
   Le script du haut de page (home-epuree.php) cede, dans l ordre de Gerard :
     1. la carte de Chloe moins haute — la conseillere plus petite (« --ep-chloe-l »),
        la colonne de texte s elargit, la carte perd des lignes ;
     2. la taille du titre (« --ep-h1-serre »), jamais sous 44 px.
   Jamais la ligne de confiance sous le bord. Le haut de « Decrivez vos travaux »
   suit le titre : la regle d alignement lit le MEME jeton.  */
@media (min-width:981px) {
  body.ep[data-ordi-une="grande"] .ep-une h1 { font-size:var(--ep-h1-serre, clamp(44px, 5.6vw, 78px)); }
}

/* ─── LES SOURCES, JUSTE SOUS LES AIDES — 28/09/2026 (nuit) ────────────────────
   Gerard : 62 px mesures entre le texte de la derniere aide et le drapeau. Le
   reglage « ep_aides_air_sources » compte desormais DEPUIS LE TEXTE (22 px) : la
   boite d une aide porte son propre air sous son texte (26 px ordinateur, 16 px
   telephone), on le retranche.  */
.ep #ac-aides .ep-sources { margin-top:calc(var(--sd-ep-aides-air-sources, 22px) - 26px); }
@media (max-width:560px) {
  .ep #ac-aides .ep-sources { margin-top:calc(var(--sd-ep-aides-air-sources, 22px) - 13px); }
}

/* ─── CHLOE EN BUSTE AU TELEPHONE — 28/09/2026 (nuit) ────────────────────────
   Gerard : la conseillere EN BUSTE, a droite de la grande carte, comme sur
   l ordinateur ; le rond garde le micro. La carte grandit autant qu il faut ; le
   texte et le bouton s arretent avant elle. La priorite du premier ecran devient
   la carte de Chloe ENTIERE ; les chiffres et la confiance suivent.  */
@media (max-width:560px) {
  body.ep[data-tel-une="grande"][data-chloe-tel="conseillere"] .ep-une .ep-ch-chloe .ep-g-rond-tete { display:none; }
  body.ep[data-tel-une="grande"][data-chloe-tel="conseillere"] .ep-une .ep-ch-chloe .ep-media .ep-ic { display:block; }
  body.ep[data-tel-une="grande"][data-chloe-tel="conseillere"] .ep-une .ep-ch-chloe .ep-g-cercle { display:none; }
  body.ep[data-tel-une="grande"][data-chloe-tel="conseillere"] .ep-une .ep-ch-chloe {
    position:relative; min-height:calc(var(--sd-ep-chloe-tel-largeur, 112px) + 24px); }
  body.ep[data-tel-une="grande"][data-chloe-tel="conseillere"] .ep-une .ep-ch-chloe .ep-t2 {
    padding-right:calc(var(--sd-ep-chloe-tel-largeur, 112px) - 6px); }
  body.ep[data-tel-une="grande"][data-chloe-tel="conseillere"] .ep-une .ep-ch-chloe .ep-g-chloe {
    display:block; position:absolute; right:2px; bottom:0; width:var(--sd-ep-chloe-tel-largeur, 112px);
    height:calc(var(--sd-ep-chloe-tel-largeur, 112px) + 10px); pointer-events:none; }
}
@media (min-width:981px) {
  /*  1er cran du calage (ordinateur) : la carte de Chloe COMPACTE — moins d air, un
      titre et un bouton un peu plus petits — avec la conseillere plus petite.  */
  body.ep[data-ordi-une="grande"] .ep-une.ep-chloe-serre .ep-ch-chloe { padding:16px 22px; }
  body.ep[data-ordi-une="grande"] .ep-une.ep-chloe-serre .ep-ch-chloe .ep-t2 strong { font-size:20px; }
  body.ep[data-ordi-une="grande"] .ep-une.ep-chloe-serre .ep-ch-chloe .ep-t2 > span:not(.ep-g-bouton) { margin-top:4px; font-size:14px; line-height:1.4; }
  body.ep[data-ordi-une="grande"] .ep-une.ep-chloe-serre .ep-ch-chloe .ep-g-bouton { margin-top:8px; padding:8px 16px; font-size:13.5px; }
  /*  dernier cran, seulement s il le faut : le visuel des deux carres moins haut
      (« --ep-carre-media »), jamais sous 56 px. Jamais la confiance sous le bord.  */
}

/* ─── LE PREMIER ECRAN DU TELEPHONE, VALIDE — 29/09/2026 ──────────────────────
   Reference : « _maquettes/2026-09-28_telephone/accueil-telephone-v3.png ».  */
.ep .ep-ph.ep-ph-eco.ep-ph-bloc { display:none; }   /*  plus lourde que « .ep .ep-ph.ep-ph-eco » (display:grid)  */
@media (max-width:560px) {
  /*  a. « Partenaires engages qualite » est RETIRE au telephone ; de l air sous « qualifies. »  */
  body.ep[data-tel-une="grande"] .ep-une .ep-pastille { display:none; }
  body.ep[data-tel-une="grande"] .ep-une .ep-air-2 { flex-basis:var(--sd-ep-tel-grande-air-texte, 14px); }
  /*  b. la carte de Chloe : le rond du micro RETIRE, la conseillere en buste a droite  */
  body.ep[data-tel-une="grande"][data-chloe-tel="conseillere"] .ep-une .ep-ch-chloe .ep-media { display:none; }
  body.ep[data-tel-une="grande"] .ep-une .ep-ch-chloe { padding:16px 16px 16px 16px; }
  /*  c. « Mes devis » : le bloc-notes (dessin) ou la photo, reglage « ep_grande_devis_visuel »  */
  body.ep[data-tel-une="grande"][data-devis-tel="dessin"] .ep-une .ep-ch-devis .ep-media > :not(.ep-ph-bloc) { display:none; }
  body.ep[data-tel-une="grande"][data-devis-tel="dessin"] .ep-une .ep-ch-devis .ep-media > .ep-ph-bloc { display:grid; }
  body.ep[data-tel-une="grande"] .ep-une .ep-ch-devis .ep-media,
  body.ep[data-tel-une="grande"] .ep-une .ep-ch-solaire .ep-media { background:var(--ep-teinte-claire-carte, var(--ep-teinte)); }
}
@media (min-width:981px) {
  body.ep[data-ordi-une="grande"][data-devis-ordi="dessin"] .ep-une .ep-ch-devis .ep-media > :not(.ep-ph-bloc) { display:none; }
  body.ep[data-ordi-une="grande"][data-devis-ordi="dessin"] .ep-une .ep-ch-devis .ep-media > .ep-ph-bloc { display:grid; }
  /*  3. « Decrivez vos travaux · Moins de deux minutes suffisent » RETIREE (interrupteur
      « ep_ordi_grande_tete », eteint) ; le haut de la carte de Chloe s aligne alors sur le
      haut des CAPITALES du titre (la regle lit le MEME jeton de taille).  */
  body.ep[data-ordi-une="grande"][data-tete-ordi="non"] .ep-une .ep-ch-tete { display:none; }
  body.ep[data-ordi-une="grande"][data-tete-ordi="non"] .ep-une .ep-cartes {
    margin-top:calc(var(--sd-ep-ordi-grande-air-titre, 10px) + .136 * var(--ep-h1-serre, clamp(44px, 5.6vw, 78px))); }
}
@media (max-width:560px) {
  /*  29/09 — la reference garde des espaces FIXES : ils ne s etirent plus pour remplir
      l ecran (a 390 et 412, la place libre reste sous les gages, pas au milieu).  */
  body.ep[data-tel-une="grande"] .ep-une .ep-air { flex-grow:0; }
  body.ep[data-tel-une="grande"] .ep-une .ep-air-2 { flex-basis:max(calc(var(--sd-ep-tel-grande-air-texte, 16px) - var(--ep-air-cede, 0px)), 6px); }
  /*  29/09 (matin) — (a) l air entre l accroche et la carte de Chloe : 22 px mesures SUR L ENCRE (20 px d espace plus
      la descente de la derniere ligne). « La grande carte » seulement : « Cartes en lignes » garde « ep_tel_air_cartes ».
      Pas de reglage neuf (consigne) : la valeur est celle de la maquette, et elle cede comme les autres espaces du haut.  */
  body.ep[data-tel-une="grande"] .ep-une .ep-air-3 { flex-grow:0; flex-basis:max(calc(20px - var(--ep-air-cede, 0px)), 0px); }
  /*  (b) l air entre les carres et les chiffres : le reglage « ep_tel_grande_air_chiffres ». Repli 31 px (30 px sur
      l encre) — ⚠️ LES DEUX SITES PORTENT 14 EN BASE, qui bat ce repli : la cible demande que Gerard y pose 31.  */
  body.ep[data-tel-une="grande"] .ep-une .ep-air-4 { flex-basis:max(calc(var(--sd-ep-tel-grande-air-chiffres, 31px) - var(--ep-air-cede, 0px)), 8px); }
  /*  le buste de la reference : plus grand, cadre par le bas de la carte (« slice »)  */
  body.ep[data-tel-une="grande"][data-chloe-tel="conseillere"] .ep-une .ep-ch-chloe { min-height:calc(var(--sd-ep-chloe-tel-largeur, 124px) * 1.2 + 20px); }
  body.ep[data-tel-une="grande"][data-chloe-tel="conseillere"] .ep-une .ep-ch-chloe .ep-g-chloe {
    right:0; width:var(--sd-ep-chloe-tel-largeur, 124px); height:calc(var(--sd-ep-chloe-tel-largeur, 124px) * 1.2); }
  body.ep[data-tel-une="grande"][data-chloe-tel="conseillere"] .ep-une .ep-ch-chloe .ep-t2 { padding-right:calc(var(--sd-ep-chloe-tel-largeur, 124px) - 12px); }
  body.ep[data-tel-une="grande"] .ep-une .ep-ch-chloe .ep-t2 strong { font-size:18.5px; }
  body.ep[data-tel-une="grande"] .ep-une .ep-ch-chloe .ep-t2 > span:not(.ep-g-bouton) { font-size:13.5px; }
  /*  un mot par ligne, comme la reference : « Certifies / RGE »  */
  body.ep[data-tel-une="grande"] .ep-une .ep-confiance-tel.ep-confiance .ep-gage b { width:min-content; margin:0 auto; font-size:11.5px; }
}

/* ─── LE CHEMIN AU-DESSUS DE CHLOE, LES TUILES BLEU NUIT — 29/09/2026 ─────────
   Reference validee : « _maquettes/2026-09-29_telephone-chemin/chemin-au-dessus-de-chloe.html »,
   le telephone de DROITE. TELEPHONE SEULEMENT, « La grande carte » seulement : l ordinateur
   et « Cartes en lignes » ne changent pas. Trois temoins sur <body> (gabarit) :
     data-tel-chemin   oui | non        (« ep_tel_chemin », repli : oui)
     data-tel-chiffres oui | non        (« ep_tel_chiffres », repli : non — la ligne s eteint)
     data-tel-tuiles   bleu-nuit | claires  (« ep_tel_tuiles_teinte », repli : bleu-nuit)
   Les couleurs des tuiles et de la fleche sont calculees par « epuree_css() » contre leur
   fond, charte par charte (25 chartes mesurees).  */
.ep .ep-chemin, .ep .ep-g-pic { display:none; }
@media (max-width:560px) {
  /*  1. LE CHEMIN : trois etapes et deux petites fleches, entre l accroche et Chloe.
      ~20 px au-dessus (l espace « .ep-air-3 », 18 px de boite et la descente de la derniere
      ligne de l accroche), ~18 px dessous (sur l encre).  */
  body.ep[data-tel-une="grande"][data-tel-chemin="oui"] .ep-une .ep-air-3 { flex-basis:max(calc(18px - var(--ep-air-cede, 0px)), 0px); }
  body.ep[data-tel-une="grande"][data-tel-chemin="oui"] .ep-une .ep-chemin { display:grid; order:6; align-self:stretch; position:relative; z-index:1;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); align-items:start; text-align:center; margin:0 0 17.5px; }
  body.ep[data-tel-une="grande"][data-tel-chemin="oui"] .ep-une .ep-chemin[data-n="2"] { grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); }
  body.ep[data-tel-une="grande"][data-tel-chemin="oui"] .ep-une .ep-chemin[data-n="1"] { grid-template-columns:minmax(0,1fr); }
  .ep .ep-chemin-et { min-width:0; }
  .ep .ep-chemin-et svg { display:block; width:22px; height:22px; margin:0 auto 5px; color:var(--ep-marque); }
  .ep .ep-chemin-et > div { font-size:12px; line-height:1.3; color:var(--ep-doux); }
  .ep .ep-chemin-et b { display:block; font-size:13px; font-weight:700; color:var(--ep-encre); }
  .ep .ep-chemin-et em { font-style:normal; font-weight:600; color:var(--ep-accent-texte); }
  .ep .ep-chemin-fl { padding:0 2px; margin-top:3px; font-size:14px; line-height:1; color:var(--ep-chemin-fleche); }
  /*  5. LA MAISON EN FILIGRANE ne passe plus derriere le chemin : plus petite et plus haute,
      elle s arrete au-dessus de l accroche (mesure par le banc « r267 »).  */
  body.ep[data-tel-une="grande"][data-tel-chemin="oui"][data-filigrane="oui"] .ep-une .ep-filigrane { width:250px; right:-70px; top:-24px; }
  /*  2. LA LIGNE « 2 min · 3 · 0 € » ETEINTE (interrupteur), PAS SUPPRIMEE ; 4. sous les tuiles,
      directement le trait fin puis les gages, ~20 px sous les tuiles.  */
  body.ep[data-tel-une="grande"][data-tel-chiffres="non"] .ep-une .ep-preuves,
  body.ep[data-tel-une="grande"][data-tel-chiffres="non"] .ep-une .ep-air-5 { display:none; }
  body.ep[data-tel-une="grande"][data-tel-chiffres="non"] .ep-une .ep-air-4 { flex-basis:max(calc(20px - var(--ep-air-cede, 0px)), 8px); }
  /*  3. LES DEUX TUILES BLEU NUIT : le fond sombre de la charte, le dessin clair pose
      directement (sans bande, sans rond), le titre blanc, la phrase gris clair, la fleche
      dans un petit rond fin en haut a droite. Au survol et au toucher, elles gardent le
      meme dessin (un telephone garde « :hover » sur la tuile touchee, CDC §108.1).  */
  body.ep[data-tel-une="grande"][data-tel-tuiles="bleu-nuit"] .ep-une :is(.ep-ch-devis, .ep-ch-solaire),
  body.ep[data-tel-une="grande"][data-tel-tuiles="bleu-nuit"] .ep-une :is(.ep-ch-devis, .ep-ch-solaire):is(:hover, :focus, :active) {
    background:var(--ep-nuit); border:1px solid var(--ep-nuit-bord); box-shadow:none; color:var(--ep-nuit-titre);
    padding:12px 12px 13px; border-radius:16px; }
  body.ep[data-tel-une="grande"][data-tel-tuiles="bleu-nuit"] .ep-une :is(.ep-ch-devis, .ep-ch-solaire) .ep-media { display:none; }
  body.ep[data-tel-une="grande"][data-tel-tuiles="bleu-nuit"] .ep-une :is(.ep-ch-devis, .ep-ch-solaire) .ep-g-pic { display:block; width:32px; height:32px; align-self:flex-start; margin:0; }
  body.ep[data-tel-une="grande"][data-tel-tuiles="bleu-nuit"] .ep-une .ep-g-pic svg { display:block; width:32px; height:32px; }
  .ep .ep-g-pic .ep-np-trait { stroke:var(--ep-nuit-trait); }
  .ep .ep-g-pic .ep-np-plein { fill:var(--ep-nuit); }
  .ep .ep-g-pic .ep-np-vert { stroke:var(--ep-nuit-vert); }
  .ep .ep-g-pic .ep-np-soleil { stroke:var(--ep-nuit-soleil); }
  .ep .ep-g-pic .ep-np-euro { fill:var(--ep-nuit-vert); stroke:none; font-family:Arial, sans-serif; }
  body.ep[data-tel-une="grande"][data-tel-tuiles="bleu-nuit"] .ep-une :is(.ep-ch-devis, .ep-ch-solaire) .ep-t2 { padding:9px 0 0; }
  body.ep[data-tel-une="grande"][data-tel-tuiles="bleu-nuit"] .ep-une :is(.ep-ch-devis, .ep-ch-solaire) .ep-t2 strong,
  body.ep[data-tel-une="grande"][data-tel-tuiles="bleu-nuit"] .ep-une :is(.ep-ch-devis, .ep-ch-solaire):is(:hover, :focus, :active) .ep-t2 strong {
    font-size:14px; line-height:1.2; color:var(--ep-nuit-titre); }
  body.ep[data-tel-une="grande"][data-tel-tuiles="bleu-nuit"] .ep-une :is(.ep-ch-devis, .ep-ch-solaire) .ep-t2 > span,
  body.ep[data-tel-une="grande"][data-tel-tuiles="bleu-nuit"] .ep-une :is(.ep-ch-devis, .ep-ch-solaire):is(:hover, :focus, :active) .ep-t2 > span {
    margin-top:4px; font-size:11.5px; line-height:1.35; color:var(--ep-nuit-doux); }
  body.ep[data-tel-une="grande"][data-tel-tuiles="bleu-nuit"] .ep-une :is(.ep-ch-devis, .ep-ch-solaire) .ep-fl,
  body.ep[data-tel-une="grande"][data-tel-tuiles="bleu-nuit"] .ep-une :is(.ep-ch-devis, .ep-ch-solaire):is(:hover, :focus, :active) .ep-fl {
    top:12px; right:10px; bottom:auto; width:26px; height:26px; display:grid; place-items:center; border-radius:50%;
    border:1px solid var(--ep-nuit-rond); font-size:13px; color:var(--ep-nuit-titre); transform:none; }
}

/* ─── « LES ETAPES 1-2-3 » AU TELEPHONE, LE CHEMIN SUR L ORDINATEUR — 29/09/2026 (13 h) ──
   Reference validee : « _maquettes/2026-09-29_telephone-etapes/premier-ecran-telephone.png »
   (et sa page mesurable, etat a l ouverture). Un TROISIEME premier ecran du telephone, a cote
   de « Cartes en lignes » et « La grande carte » : body[data-tel-une="etapes"]. Les deux autres
   restent entiers. Reglages « ep_tel_etapes_* » (bloc « Le premier ecran du telephone »).
   Couleurs : le rond des numeros, son chiffre et le vert des dessins sont calcules par
   « epuree_css() » ; la carte de Chloe prend la paire --ep-accent / --ep-sur-accent (celle
   que le garde-fou mesure), comme la conseillere.
   ORDINATEUR (body[data-ordi-chemin="oui"], « La grande carte ») : le chemin horizontal
   remplace « 2 min · 3 · 0 € ». Rien d autre ne bouge.  */
.ep .ep-trois, .ep .ep-gage-mot, .ep h1 .ep-et-t { display:none; }
@media (max-width:560px) {
  /*  ce que « Les etapes 1-2-3 » ne montre pas (il reste aux deux autres choix)  */
  body.ep[data-tel-une="etapes"] .ep-une :is(.ep-air, .ep-pastille, .ep-chapo, .ep-cartes, .ep-preuves, .ep-chemin, .ep-confiance-g, .ep-chantiers, .ep-sources) { display:none; }
  /*  la section ROGNE ce qui depasse (la maison en filigrane, posee a -34 px) : sans cela le telephone
      dezoome toute la page (mesure : 394 px de large pour un ecran de 360). « clip », pas « hidden ». */
  body.ep[data-tel-une="etapes"] .ep-une { padding-bottom:22px; overflow-x:clip; }
  /*  1. le titre, puis la phrase courte seule  */
  /*  29/09 (soir) — le titre sur SES lignes (« .ep-et-l », posees par le code, jamais coupees), plus grand ;
      « --et-* » : ce que le script de la page ajuste (l etalement, puis ce qui cede sur un ecran bas).  */
  body.ep[data-tel-une="etapes"] .ep-une h1 { order:2; font-size:var(--et-titre, var(--sd-ep-tel-etapes-titre, 36px)); line-height:1.08; margin:0; align-self:stretch; }
  body.ep[data-tel-une="etapes"] .ep-une h1 > :not(.ep-et-t) { display:none; }
  body.ep[data-tel-une="etapes"] .ep-une h1 .ep-et-t { display:block; }
  body.ep[data-tel-une="etapes"] .ep-une h1 .ep-et-l { display:block; white-space:nowrap; }
  body.ep[data-tel-une="etapes"]:is([data-et-lignes="2"], [data-et-lignes-auto="2"]) .ep-une h1 .ep-et-l:nth-child(n+2) { display:inline; }
  /*  le trait sous « qualifies. » : un SURLIGNEUR, transparent, a la couleur de la charte ; sa hauteur est une
      part de celle du mot (reglages « ep_tel_etapes_trait_hauteur » et « _opacite »).  */
  body.ep[data-tel-une="etapes"] .ep-une h1 .ep-et-t .ep-souligne {
    background:linear-gradient(transparent calc(100% - var(--sd-ep-tel-etapes-trait-hauteur, 45%)),
      var(--ep-et-surl, color-mix(in srgb, var(--ep-accent) var(--sd-ep-tel-etapes-trait-opacite, 30%), transparent)) 0) no-repeat; }
  body.ep[data-tel-une="etapes"] .ep-une .ep-accroche { display:block; order:5; align-self:stretch; margin:calc(14px + var(--et-g1, 0px)) 0 0; font-size:14.5px; line-height:1.55; }
  body.ep[data-tel-une="etapes"] .ep-une .ep-accroche b { color:var(--ep-encre); font-weight:700; }
  body.ep[data-tel-une="etapes"] .ep-une .ep-accroche :is(.ep-ordi, .ep-tel) { display:none; }
  /*  la maison en filigrane, comme la maquette : a droite, derriere le texte, pale  */
  body.ep[data-tel-une="etapes"][data-filigrane="oui"] .ep-une .ep-filigrane { display:block; width:200px; left:auto; right:-34px; top:60px; }
  /*  2. les trois etapes, reliees par un trait fin et pale  */
  body.ep[data-tel-une="etapes"] .ep-une .ep-trois { display:block; order:6; align-self:stretch; position:relative; z-index:1;
    margin-top:calc(var(--sd-ep-tel-etapes-air-phrase, 15px) + var(--et-g2, 0px)); }
  .ep .ep-tr { position:relative; padding-left:40px; }
  /*  l espace entre les etapes : 26 px, plus sa part de l etalement ; le trait qui les relie suit (« bottom »)  */
  .ep .ep-tr + .ep-tr { margin-top:var(--et-pas, 26px); }
  .ep .ep-tr::before { content:attr(data-n); position:absolute; left:0; top:0; width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
    background:var(--ep-et-rond); color:var(--ep-et-num); font-size:14px; font-weight:700; line-height:1; z-index:1; }
  .ep .ep-tr:not(:last-child)::after { content:""; position:absolute; left:13.5px; top:30px; bottom:calc(2px - var(--et-pas, 26px)); width:1px;
    background:color-mix(in srgb, var(--ep-et-rond) 35%, var(--ep-fond)); }
  .ep .ep-tr-t { margin:4px 0 8px; font-size:15px; line-height:1.3; font-weight:700; color:var(--ep-encre); }
  .ep .ep-tr-t em { font-style:normal; color:var(--ep-accent-texte); }
  .ep .ep-tr-p { margin:-4px 0 0; font-size:12.5px; line-height:1.4; color:var(--ep-doux); }
  .ep .ep-tr[data-n="1"] .ep-tr-p { margin:-2px 0 0; }
  /*  les deux cartes : 10 px a droite du trait, de meme hauteur ; « ou » entre elles  */
  .ep .ep-dx { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; margin:30px 0 0 -16px; }
  .ep .ep-dx[data-vis="tete"] { margin-top:10px; }
  .ep .ep-dx-c { position:relative; display:grid; grid-template-rows:66px auto 34px; justify-items:center; align-items:center; text-align:center;
    min-height:178px; padding:14px 8px 13px; border-radius:20px; font:inherit; cursor:pointer; text-decoration:none; }
  /*  le MEME bord que la carte claire, transparent : sans lui les deux ronds du bas etaient a 1 px l un de l autre  */
  .ep .ep-dx-chloe { border:1px solid transparent; background-color:var(--ep-accent); color:var(--ep-sur-accent);
    background-image:linear-gradient(160deg, color-mix(in srgb, var(--ep-accent) 94%, #fff), var(--ep-accent) 55%, color-mix(in srgb, var(--ep-accent) 90%, #000)); }
  .ep .ep-dx-devis { background:var(--ep-teinte-claire); color:var(--ep-encre); border:1px solid color-mix(in srgb, var(--ep-encre) 8%, transparent);
    box-shadow:0 14px 28px -22px color-mix(in srgb, var(--ep-encre) 60%, transparent); }
  .ep .ep-dx-vis { width:100%; height:66px; display:flex; align-items:center; justify-content:center; overflow:visible; }
  .ep .ep-dx[data-vis="buste"] .ep-dx-chloe .ep-dx-vis { align-items:flex-end; }
  .ep .ep-dx-buste { display:block; width:96px; height:102px; position:relative; top:-6px; }
  .ep .ep-dx-buste svg { display:block; width:100%; height:100%; }
  .ep .ep-dx-tete { display:block; width:70px; height:70px; border-radius:50%; overflow:hidden; background:color-mix(in srgb, var(--ep-sur-accent) 20%, transparent); }
  .ep .ep-dx-tete svg { display:block; width:100%; height:100%; }
  .ep .ep-dx-grand { display:grid; place-items:center; width:74px; height:74px; border-radius:50%; background:var(--ep-carte);
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ep-encre) 6%, transparent); }
  .ep .ep-dx[data-vis="tete"] .ep-dx-grand { width:70px; height:70px; }
  .ep .ep-dx-grand svg { display:block; width:40px; height:40px; }
  /*  la PREMIERE ligne des deux titres sur la meme ligne, meme si l un passe sur deux lignes (320 px)  */
  .ep .ep-dx-t { display:flex; align-items:flex-start; justify-content:center; width:100%; min-height:2.44em; margin:10px 0 0; font-size:14px; line-height:1.22; font-weight:700; }
  .ep .ep-dx-chloe .ep-dx-t { color:var(--ep-sur-accent); }
  .ep .ep-dx-devis .ep-dx-t { color:var(--ep-encre); }
  .ep .ep-dx-rond { display:grid; place-items:center; width:34px; height:34px; margin-top:8px; border-radius:50%; }
  .ep .ep-dx-rond svg { display:block; width:20px; height:20px; }
  .ep .ep-dx-chloe .ep-dx-rond { background:color-mix(in srgb, var(--ep-sur-accent) 20%, transparent); color:var(--ep-sur-accent); }
  .ep .ep-dx-devis .ep-dx-rond { background:color-mix(in srgb, var(--ep-accent) 15%, var(--ep-teinte-claire)); color:var(--ep-accent-texte); }
  .ep .ep-dx-devis .ep-dx-mot { width:auto; padding:0 12px; border-radius:999px; font-size:12px; font-weight:700; }
  .ep .ep-dx-vide { visibility:hidden; }
  /*  le titre et sa petite phrase (ordinateur) dans une enveloppe : au telephone elle ne compte pas  */
  .ep .ep-dx-tt { display:contents; }
  .ep .ep-dx-sous { display:none; }
  .ep .ep-dx-ou { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:2; display:grid; place-items:center;
    width:30px; height:30px; border-radius:50%; background:var(--ep-fond); border:1px solid color-mix(in srgb, var(--ep-encre) 10%, transparent);
    box-shadow:0 0 0 4px var(--ep-fond); font-family:var(--ep-serif); font-style:italic; font-weight:400; font-size:14px; line-height:1; color:var(--ep-doux); }
  /*  les dessins de « Mes devis » et du soleil : la couleur de marque, le vert calcule  */
  .ep .ep-dv-f { stroke:var(--ep-marque); }
  .ep .ep-dv-v { stroke:var(--ep-et-vert); }
  .ep .ep-dv-plein { fill:var(--ep-carte); }
  .ep .ep-dv-pale { opacity:.55; }
  .ep .ep-dv-euro { fill:var(--ep-et-vert); stroke:none; font-family:Arial, sans-serif; }
  /*  le bouton de l etude solaire, sous les deux cartes, meme largeur ; jamais de retour a la ligne  */
  /*  29/09 (soir) — plus imposant : sa hauteur est un reglage (« ep_tel_etapes_solaire_hauteur ») ; les MEMES
      coins et le MEME bord leger que la carte « Mes devis ». Le libelle ne passe jamais a la ligne : si la
      largeur manque, le script de la page baisse sa taille (« --et-sol-b »).  */
  .ep .ep-sol { display:flex; align-items:center; gap:10px; min-height:var(--et-sol, var(--sd-ep-tel-etapes-solaire-hauteur, 72px)); box-sizing:border-box;
    margin:10px 0 0 -16px; padding:8px 14px 8px 12px; border-radius:20px; text-decoration:none;
    border:1px solid color-mix(in srgb, var(--ep-encre) 8%, transparent); background:color-mix(in srgb, var(--ep-accent) 5%, var(--ep-carte)); }
  .ep .ep-sol-pic { flex:0 0 36px; width:36px; height:36px; }
  .ep .ep-sol-pic svg { display:block; width:36px; height:36px; }
  .ep .ep-sol-tx { flex:1 1 auto; min-width:0; line-height:1.2; }
  .ep .ep-sol-tx small { display:block; font-size:13px; color:var(--ep-doux); white-space:nowrap; }
  .ep .ep-sol-tx b { display:block; margin-top:2px; font-size:var(--et-sol-b, 18px); font-weight:700; color:var(--ep-accent-texte); white-space:nowrap; }
  .ep .ep-sol i { flex:0 0 auto; font-style:normal; font-size:24px; line-height:1; color:var(--ep-accent-texte); }
  /*  3. la ligne de confiance : un mot sous chaque dessin, sans trait (reglables)  */
  body.ep[data-tel-une="etapes"] .ep-une .ep-confiance-tel.ep-confiance { order:11; display:grid; grid-template-columns:repeat(var(--ep-nb-gages, 4), minmax(0,1fr)); gap:0;
    align-self:stretch; position:relative; margin:calc(var(--sd-ep-tel-etapes-air, 10px) + var(--et-g4, 0px)) 0 0; padding:0; }
  body.ep[data-tel-une="etapes"][data-et-trait="oui"] .ep-une .ep-confiance-tel.ep-confiance { padding-top:14px; }
  body.ep[data-tel-une="etapes"][data-et-trait="oui"] .ep-une .ep-confiance-tel.ep-confiance::before { content:""; position:absolute; top:0; left:13%; right:13%; border-top:1px solid var(--ep-trait); }
  body.ep[data-tel-une="etapes"] .ep-une .ep-confiance-tel .ep-gage { display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; padding:0; border:0; background:none; text-align:center; }
  body.ep[data-tel-une="etapes"] .ep-une .ep-confiance-tel .ep-gage > svg { width:18px; height:18px; margin:0; }
  body.ep[data-tel-une="etapes"] .ep-une .ep-confiance-tel .ep-gage > div { display:block; }
  body.ep[data-tel-une="etapes"] .ep-une .ep-confiance-tel .ep-gage span { display:none; }
  body.ep[data-tel-une="etapes"][data-et-gages="mot"] .ep-une .ep-confiance-tel .ep-gage b { display:none; }
  body.ep[data-tel-une="etapes"][data-et-gages="mot"] .ep-une .ep-confiance-tel .ep-gage-mot { display:block; font-style:normal; font-size:11px; line-height:1.3; color:var(--ep-doux); }
  /*  29/09 (soir) — si la place manque, le script de la page repasse la confiance a « un mot »
      (« data-et-gages-auto »), en dernier recours : la regle « deux lignes » ci-dessous l exclut.  */
  body.ep[data-tel-une="etapes"][data-et-gages-auto="mot"] .ep-une .ep-confiance-tel .ep-gage b { display:none; }
  body.ep[data-tel-une="etapes"][data-et-gages-auto="mot"] .ep-une .ep-confiance-tel .ep-gage-mot { display:block; font-style:normal; font-size:11px; line-height:1.3; color:var(--ep-doux); }
  body.ep[data-tel-une="etapes"][data-et-gages="deux"]:not([data-et-gages-auto="mot"]) .ep-une .ep-confiance-tel .ep-gage b { display:block; width:min-content; margin:0 auto; font-size:11px; line-height:1.3; font-weight:500; color:var(--ep-doux); }
  body.ep[data-tel-une="etapes"][data-et-gages="deux"] .ep-une .ep-confiance-tel .ep-gage > svg { width:21px; height:21px; }
  body.ep[data-tel-une="etapes"][data-et-gages="dessins"] .ep-une .ep-confiance-tel .ep-gage > div { display:none; }
  body.ep[data-tel-une="etapes"][data-et-gages="dessins"] .ep-une .ep-confiance-tel .ep-gage > svg { width:24px; height:24px; }
}
@media (min-width:981px) {
  /*  B. L ORDINATEUR : le chemin a la place de « 2 min · 3 · 0 € », aligne a gauche avec le texte,
      centre en hauteur entre la fin de l accroche et la ligne de confiance (marges automatiques
      dans la colonne ; « padding-top » compense l ecart entre le bas de la colonne et la ligne
      de confiance, mesure par le banc « r268 »).  */
  body.ep[data-ordi-une="grande"][data-ordi-chemin="oui"] .ep-une-g .ep-preuves { display:none; }
  body.ep[data-ordi-une="grande"][data-ordi-chemin="oui"] .ep-une-g .ep-chemin { display:grid; grid-template-columns:repeat(5, auto); justify-content:start;
    align-items:start; column-gap:18px; text-align:center; margin:auto 0; padding-bottom:var(--ep-chemin-compense, 2.5px); }
  body.ep[data-ordi-une="grande"][data-ordi-chemin="oui"] .ep-une-g .ep-chemin[data-n="2"] { grid-template-columns:repeat(3, auto); }
  body.ep[data-ordi-une="grande"][data-ordi-chemin="oui"] .ep-chemin-et svg { display:block; width:28px; height:28px; margin:0 auto 6px; color:var(--ep-marque); }
  body.ep[data-ordi-une="grande"][data-ordi-chemin="oui"] .ep-chemin-et > div { font-size:14.5px; line-height:1.35; color:var(--ep-doux); }
  body.ep[data-ordi-une="grande"][data-ordi-chemin="oui"] .ep-chemin-et b { display:block; font-size:16px; font-weight:700; color:var(--ep-encre); }
  body.ep[data-ordi-une="grande"][data-ordi-chemin="oui"] .ep-chemin-et em { font-style:normal; font-weight:600; color:var(--ep-accent-texte); }
  body.ep[data-ordi-une="grande"][data-ordi-chemin="oui"] .ep-chemin-fl { margin-top:6px; font-size:16px; line-height:1; color:var(--ep-chemin-fleche); }
}

/* ─── LE HAUT DE PAGE DE L ORDINATEUR, PRESENTATIONS A a D — 29/09/2026 ──────────
   Reference validee : « _maquettes/2026-09-29_ordinateur-etapes/accueil-ordinateur.png »
   (1600 x 730, presentation A) et sa page mesurable (etat a l ouverture).
   body[data-oa="oui"] quand la presentation est « a », « b », « c » ou « d » (data-ordi-une) ;
   « Aujourd hui » (grande) et « Aujourd hui + le chemin » ne sont pas touches.
   AU-DESSUS DE 1024 px. Reglages « ep_ordi_* » (« Le haut de page de l ordinateur »).
   Les memes cartes qu au telephone, en grand ; le calage a la fenetre est fait par le script
   de la page (« caleOA ») : la ligne de confiance a 24 px du bas, jamais dessous.  */
.ep .ep-oa-droite, .ep .ep-oa-etapes, .ep .ep-oa-frise, .ep .ep-oa-t-ordi { display:none; }
@media (min-width:1025px) {
  /*  29/09 (nuit) — les 24 px sous la ligne de confiance sont un reglage (« ep_ordi_confiance_bas ») : ici ET dans caleOA.  */
  body.ep[data-oa="oui"] .ep-une { padding:var(--sd-ep-ordi-haut, 22px) 0 var(--sd-ep-ordi-confiance-bas, 24px); overflow:clip; overflow-clip-margin:24px; }
  body.ep[data-oa="oui"] .ep-une .ep-largeur { display:grid; grid-template-columns:minmax(0,1fr) 513px; column-gap:58px; row-gap:0;
    grid-template-rows:auto auto minmax(0,1fr); align-items:start;
    min-height:calc(100svh - var(--ep-menu-h, 72px) - var(--sd-ep-ordi-haut, 22px) - var(--sd-ep-ordi-confiance-bas, 24px)); }
  body.ep[data-oa="oui"] .ep-une :is(.ep-cartes, .ep-preuves, .ep-chemin, .ep-chapo, .ep-confiance-g, .ep-chantiers, .ep-sources, .ep-trois, .ep-sol-apart, .ep-air, .ep-confiance-tel) { display:none; }
  body.ep[data-oa="oui"] .ep-une-g { grid-column:1; grid-row:1; display:block; min-height:0; }
  body.ep[data-oa="oui"] .ep-oa-droite { display:block; grid-column:2; grid-row:1; padding-top:var(--oa-descente, var(--sd-ep-ordi-descente, 100px)); }
  body.ep[data-oa="oui"] .ep-confiance-ordi { grid-column:1 / -1; grid-row:3; align-self:end; margin-top:var(--oa-air, var(--sd-ep-ordi-air, 34px)); }
  /*  le titre, sur les lignes choisies (1, 2, 3), jamais coupe autrement : le script reduit la taille s il ne tient pas  */
  body.ep[data-oa="oui"] .ep-une h1 { margin:0; font-size:var(--oa-titre, var(--sd-ep-ordi-titre-taille, 62px)); font-weight:800; letter-spacing:-.04em; line-height:.98; }
  body.ep[data-oa="oui"] .ep-une h1 .ep-oa-t-tel { display:none; }
  body.ep[data-oa="oui"] .ep-une h1 .ep-oa-t-ordi { display:block; }
  body.ep[data-oa="oui"] .ep-une h1 .ep-oa-l { display:block; white-space:nowrap; }
  body.ep[data-oa="oui"] .ep-une h1 .ep-serif { display:inline; width:auto; }
  body.ep[data-oa="oui"] .ep-une .ep-pastille { display:none; }
  body.ep[data-oa="oui"][data-oa-engage="oui"] .ep-une .ep-pastille { display:flex; width:max-content; margin:22px 0 0; font-size:15px; }
  body.ep[data-oa="oui"] .ep-une .ep-accroche { display:block; margin:26px 0 0; max-width:540px; font-size:19px; line-height:1.5; color:var(--ep-doux); text-wrap:wrap; }  /* 540 : notre Inter est un peu plus large que celui de la maquette (520) */
  body.ep[data-oa="oui"] .ep-une .ep-accroche b { color:var(--ep-encre); font-weight:600; }
  /*  la maison en fond (le reglage de toujours, « ep_filigrane_visible »)  */
  body.ep[data-oa="oui"][data-filigrane="oui"] .ep-une .ep-filigrane { display:block; left:calc(50% - 640px); right:auto; top:158px; width:560px; }
  /*  LES ETAPES VERTICALES (A, C)  */
  body.ep[data-oa="oui"] .ep-oa-etapes { display:block; position:relative; margin-top:var(--oa-air, var(--sd-ep-ordi-air, 34px)); }
  .ep .ep-oa-etapes .ep-tr, .ep .ep-oa-frise .ep-tr { position:relative; padding-left:54px; }
  .ep .ep-oa-etapes .ep-tr + .ep-tr { margin-top:22px; }
  .ep :is(.ep-oa-etapes, .ep-oa-frise) .ep-tr::before { content:attr(data-n); position:absolute; left:0; top:-4px; width:36px; height:36px; border-radius:50%;
    display:grid; place-items:center; background:var(--ep-et-rond); color:var(--ep-et-num); font-size:16px; font-weight:700; line-height:1; z-index:1; }
  .ep .ep-oa-etapes .ep-tr:not(:last-child)::after { content:""; position:absolute; left:17.3px; top:34px; bottom:-22px; width:1.5px;
    background:color-mix(in srgb, var(--ep-et-rond) 30%, var(--ep-fond)); }
  .ep :is(.ep-oa-etapes, .ep-oa-frise) .ep-tr-t { margin:0; font-size:20px; line-height:1.3; font-weight:700; letter-spacing:-.01em; color:var(--ep-encre); }
  .ep :is(.ep-oa-etapes, .ep-oa-frise) .ep-tr-t em { font-style:normal; color:var(--ep-accent-texte); }
  .ep :is(.ep-oa-etapes, .ep-oa-frise) .ep-tr-p { margin:5px 0 0; font-size:15px; line-height:1.45; color:var(--ep-doux); }
  /*  LA FRISE HORIZONTALE (B, D)  */
  body.ep[data-oa="oui"] .ep-oa-frise { display:grid; grid-column:1 / -1; grid-row:2; grid-template-columns:repeat(3, minmax(0,1fr)); position:relative;
    margin-top:var(--oa-air, var(--sd-ep-ordi-air, 34px)); }
  body.ep[data-oa="oui"][data-oa-etapes-d="non"][data-ordi-une="d"] .ep-oa-frise { display:none; }
  .ep .ep-oa-frise::before { content:""; position:absolute; left:18px; right:calc(33.33% - 18px); top:18px; height:1.5px; background:color-mix(in srgb, var(--ep-et-rond) 30%, var(--ep-fond)); }
  .ep .ep-oa-frise .ep-tr { padding:50px 20px 0 0; }
  .ep .ep-oa-frise .ep-tr::before { top:0; }
  /*  LES DEUX CARTES, EN GRAND  */
  .ep .ep-oa .ep-dx { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; margin:0; }
  .ep .ep-oa .ep-dx[data-vis="buste"] { margin-top:32px; }
  .ep .ep-oa .ep-dx-c { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:space-between; text-align:center;
    min-height:var(--oa-hc, var(--sd-ep-ordi-cartes-hauteur, 290px)); padding:24px 16px 22px; border-radius:26px; font:inherit; cursor:pointer; text-decoration:none;
    border:1px solid color-mix(in srgb, var(--ep-encre) 7%, transparent); background:var(--ep-carte);
    box-shadow:0 1px 2px color-mix(in srgb, var(--ep-encre) 4%, transparent), 0 22px 40px -28px color-mix(in srgb, var(--ep-accent) 50%, transparent);
    transition:transform .18s ease-out, box-shadow .18s ease-out; }
  .ep .ep-oa .ep-dx-chloe { color:var(--ep-sur-accent); border-color:transparent; background-color:var(--sd-ep-ordi-chloe-couleur, var(--ep-accent));
    background-image:linear-gradient(160deg, color-mix(in srgb, var(--sd-ep-ordi-chloe-couleur, var(--ep-accent)) 94%, #fff), var(--sd-ep-ordi-chloe-couleur, var(--ep-accent)) 55%, color-mix(in srgb, var(--sd-ep-ordi-chloe-couleur, var(--ep-accent)) 88%, #000)); }
  .ep .ep-oa .ep-dx-devis { background:var(--sd-ep-ordi-cartes-couleur, var(--ep-teinte-claire)); color:var(--ep-encre); }
  .ep .ep-oa .ep-dx-vis { width:100%; height:128px; display:flex; align-items:center; justify-content:center; overflow:visible; }
  .ep .ep-oa .ep-dx[data-vis="buste"] .ep-dx-chloe .ep-dx-vis { align-items:flex-end; }
  .ep .ep-oa .ep-dx-buste { display:block; width:150px; height:160px; position:relative; top:-34px; }
  .ep .ep-oa .ep-dx-buste svg, .ep .ep-oa .ep-dx-tete svg { display:block; width:100%; height:100%; }
  .ep .ep-oa .ep-dx-tete { display:block; width:122px; height:122px; border-radius:50%; overflow:hidden; background:color-mix(in srgb, var(--ep-sur-accent) 20%, transparent); }
  .ep .ep-oa .ep-dx-grand { display:grid; place-items:center; width:122px; height:122px; border-radius:50%; background:var(--ep-carte);
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ep-encre) 5%, transparent); }
  .ep .ep-oa .ep-dx-grand svg { display:block; width:62px; height:62px; }
  .ep .ep-oa .ep-dx-tt { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:3.2em; margin-top:12px; width:100%; }
  .ep .ep-oa .ep-dx-t { display:block; margin:0; font-size:22px; line-height:1.2; font-weight:700; letter-spacing:-.015em; color:var(--ep-encre); }
  .ep .ep-oa .ep-dx-chloe .ep-dx-t { color:var(--ep-sur-accent); }
  .ep .ep-oa .ep-dx-sous { display:block; margin-top:5px; font-size:14px; line-height:1.3; color:var(--ep-doux); }
  .ep .ep-oa .ep-dx-chloe .ep-dx-sous { color:var(--ep-sur-accent); }
  .ep .ep-oa .ep-dx-rond { display:grid; place-items:center; width:48px; height:48px; margin-top:12px; border-radius:50%; }
  .ep .ep-oa .ep-dx-rond svg { display:block; width:26px; height:26px; }
  .ep .ep-oa .ep-dx-chloe .ep-dx-rond { background:color-mix(in srgb, var(--ep-sur-accent) 20%, transparent); color:var(--ep-sur-accent); }
  .ep .ep-oa .ep-dx-devis .ep-dx-rond { background:color-mix(in srgb, var(--ep-accent) 15%, var(--sd-ep-ordi-cartes-couleur, var(--ep-teinte-claire))); color:var(--ep-accent-texte); }
  .ep .ep-oa .ep-dx-mot { display:inline-flex; width:auto; height:auto; gap:6px; padding:7px 14px; border-radius:999px; font-size:14px; font-weight:600; }
  .ep .ep-oa .ep-dx-mot svg { width:16px; height:16px; }
  .ep .ep-oa .ep-dx-vide { visibility:hidden; }
  .ep .ep-oa .ep-dx-ou { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:2; display:grid; place-items:center;
    width:42px; height:42px; border-radius:50%; background:var(--ep-fond); border:1px solid color-mix(in srgb, var(--ep-encre) 10%, transparent);
    box-shadow:0 0 0 6px var(--ep-fond); font-family:var(--ep-serif); font-style:italic; font-size:18px; line-height:1; color:var(--ep-doux); }
  /*  le style des cartes : Chloe en corail (defaut) · cartes blanches · cartes teintees  */
  body.ep[data-oa-style="blanches"] .ep-oa .ep-dx-c { background:var(--ep-carte); background-image:none; color:var(--ep-encre); border-color:color-mix(in srgb, var(--ep-encre) 7%, transparent); }
  body.ep[data-oa-style="teintees"] .ep-oa .ep-dx-chloe { background:color-mix(in srgb, var(--ep-accent) 9%, var(--ep-carte)); background-image:none; color:var(--ep-encre); }
  body.ep[data-oa-style="teintees"] .ep-oa .ep-dx-devis { background:color-mix(in srgb, var(--sd-ep-ordi-cartes-couleur, var(--ep-teinte-claire)) 85%, var(--ep-carte)); }
  body.ep:is([data-oa-style="blanches"], [data-oa-style="teintees"]) .ep-oa .ep-dx-chloe :is(.ep-dx-t) { color:var(--ep-encre); }
  body.ep:is([data-oa-style="blanches"], [data-oa-style="teintees"]) .ep-oa .ep-dx-chloe .ep-dx-sous { color:var(--ep-doux); }
  body.ep:is([data-oa-style="blanches"], [data-oa-style="teintees"]) .ep-oa .ep-dx-chloe .ep-dx-rond { background:color-mix(in srgb, var(--ep-accent) 12%, var(--ep-carte)); color:var(--ep-accent-texte); }
  body.ep:is([data-oa-style="blanches"], [data-oa-style="teintees"]) .ep-oa .ep-dx-chloe .ep-dx-tete { background:color-mix(in srgb, var(--ep-accent) 16%, var(--ep-carte)); }
  /*  le bouton de l etude solaire  */
  .ep .ep-oa .ep-sol { display:flex; align-items:center; gap:14px; margin:16px 0 0; padding:14px 18px; border-radius:16px; text-decoration:none;
    border:1px solid color-mix(in srgb, var(--ep-accent) 22%, transparent); background:color-mix(in srgb, var(--ep-accent) 5%, var(--ep-carte));
    transition:transform .18s ease-out, box-shadow .18s ease-out; }
  .ep .ep-oa .ep-sol-pic { flex:0 0 36px; width:36px; height:36px; }
  .ep .ep-oa .ep-sol-pic svg { display:block; width:36px; height:36px; }
  .ep .ep-oa .ep-sol-tx { flex:1 1 auto; min-width:0; line-height:1.3; }
  .ep .ep-oa .ep-sol-tx small { display:block; font-size:14px; color:var(--ep-doux); white-space:nowrap; }
  .ep .ep-oa .ep-sol-tx b { display:block; font-size:17px; font-weight:700; color:var(--ep-accent-texte); white-space:nowrap; }
  .ep .ep-oa .ep-sol i { flex:0 0 auto; font-style:normal; font-size:20px; color:var(--ep-accent-texte); }
  /*  les dessins (memes couleurs calculees qu au telephone)  */
  .ep .ep-oa .ep-dv-f, .ep .ep-oa-droite .ep-dv-f { stroke:var(--ep-marque); }
  .ep .ep-oa .ep-dv-v { stroke:var(--ep-et-vert); }
  .ep .ep-oa .ep-dv-plein { fill:var(--ep-carte); }
  .ep .ep-oa .ep-dv-pale { opacity:.55; }
  .ep .ep-oa .ep-dv-euro { fill:var(--ep-et-vert); stroke:none; font-family:Arial, sans-serif; }
  /*  C : Chloe en grande carte horizontale, Mes devis et Mon etude solaire dessous  */
  .ep .ep-oa .ep-oa-cgr { position:relative; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; text-align:left; width:100%;
    height:236px; padding:30px; border:1px solid transparent; border-radius:26px; font:inherit; cursor:pointer; color:var(--ep-sur-accent);
    background-color:var(--sd-ep-ordi-chloe-couleur, var(--ep-accent));
    background-image:linear-gradient(160deg, color-mix(in srgb, var(--sd-ep-ordi-chloe-couleur, var(--ep-accent)) 94%, #fff), var(--sd-ep-ordi-chloe-couleur, var(--ep-accent)) 55%, color-mix(in srgb, var(--sd-ep-ordi-chloe-couleur, var(--ep-accent)) 88%, #000));
    transition:transform .18s ease-out, box-shadow .18s ease-out; }
  .ep .ep-oa .ep-oa-cgr .ep-dx-t { font-size:28px; max-width:250px; line-height:1.15; color:var(--ep-sur-accent); }
  .ep .ep-oa .ep-oa-cgr .ep-dx-sous { display:block; font-size:16px; margin-top:8px; max-width:240px; line-height:1.4; color:var(--ep-sur-accent); }
  .ep .ep-oa .ep-oa-cgr .ep-dx-rond { margin-top:18px; background:color-mix(in srgb, var(--ep-sur-accent) 20%, transparent); color:var(--ep-sur-accent); }
  .ep .ep-oa .ep-oa-cgr[data-vis="buste"] .ep-dx-buste { position:absolute; right:26px; bottom:0; top:auto; width:190px; height:204px; }
  .ep .ep-oa .ep-oa-cgr[data-vis="tete"] .ep-dx-tete { position:absolute; right:34px; top:50%; transform:translateY(-50%); width:150px; height:150px; }
  .ep .ep-oa .ep-oa-sous2 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; margin-top:14px; }
  .ep .ep-oa .ep-oa-sous2 .ep-dx-c { min-height:210px; padding:20px 14px 18px; }
  .ep .ep-oa .ep-oa-sous2 .ep-dx-vis { height:88px; }
  .ep .ep-oa .ep-oa-sous2 .ep-dx-grand { width:84px; height:84px; }
  .ep .ep-oa .ep-oa-sous2 .ep-dx-grand svg { width:46px; height:46px; }
  .ep .ep-oa .ep-oa-sous2 .ep-dx-t { font-size:19px; }
  .ep .ep-oa .ep-oa-sous2 .ep-dx-rond { width:40px; height:40px; margin-top:8px; }
  .ep .ep-oa .ep-oa-sous2 .ep-dx-rond svg { width:22px; height:22px; }
  /*  D : le titre en haut, trois cartes cote a cote, la frise dessous  */
  body.ep[data-ordi-une="d"] .ep-une .ep-largeur { grid-template-columns:minmax(0,1fr); }
  body.ep[data-ordi-une="d"] .ep-oa-droite { grid-column:1; grid-row:2; padding-top:0; margin-top:calc(var(--oa-air, var(--sd-ep-ordi-air, 34px)) + 8px); }
  body.ep[data-ordi-une="d"] .ep-oa-frise { grid-row:3; }
  body.ep[data-ordi-une="d"] .ep-confiance-ordi { grid-row:4; }
  body.ep[data-ordi-une="d"] .ep-une .ep-largeur { grid-template-rows:auto auto auto minmax(0,1fr); }
  .ep .ep-oa .ep-oa-d3 { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; position:relative; }
  .ep .ep-oa .ep-oa-d3 .ep-dx-chloe:has(.ep-dx-buste) { margin-top:34px; }
  .ep .ep-oa .ep-oa-d3:has(.ep-dx-buste) > :not(.ep-dx-chloe) { margin-top:34px; }
  .ep .ep-oa .ep-oa-d3 .ep-dx-ou { display:none; }
  /*  B : la frise sous les deux cartes, sur toute la largeur  */
  body.ep[data-ordi-une="b"] .ep-oa-frise { grid-row:2; }
  /*  LA LIGNE DE CONFIANCE : dessin + titre + phrase (defaut) · un mot · les dessins seuls ; un trait au-dessus en option  */
  body.ep[data-oa="oui"] .ep-confiance-ordi.ep-confiance { display:grid; grid-template-columns:repeat(var(--ep-nb-gages, 4), minmax(0,1fr)); gap:0; padding:0; }
  body.ep[data-oa="oui"][data-oa-trait="oui"] .ep-confiance-ordi.ep-confiance { border-top:1px solid color-mix(in srgb, var(--ep-accent) 14%, var(--ep-trait)); padding-top:20px; }
  body.ep[data-oa="oui"] .ep-confiance-ordi .ep-gage { display:flex; align-items:center; gap:14px; padding:0 22px; border-left:1px solid var(--ep-trait); }
  body.ep[data-oa="oui"] .ep-confiance-ordi .ep-gage:first-child { padding-left:0; border-left:0; }
  body.ep[data-oa="oui"] .ep-confiance-ordi .ep-gage > svg { width:28px; height:28px; flex:0 0 28px; }
  body.ep[data-oa="oui"] .ep-confiance-ordi .ep-gage b { font-size:16px; font-weight:600; }
  body.ep[data-oa="oui"] .ep-confiance-ordi .ep-gage span { font-size:13.5px; }
  body.ep[data-oa="oui"] .ep-confiance-ordi .ep-gage-mot { display:none; }
  body.ep[data-oa="oui"]:is([data-oa-conf="mot"], [data-oa-conf="dessins"]) .ep-confiance-ordi .ep-gage { justify-content:center; border-left:0; }
  body.ep[data-oa="oui"][data-oa-conf="mot"] .ep-confiance-ordi .ep-gage { flex-direction:column; gap:6px; }
  body.ep[data-oa="oui"][data-oa-conf="mot"] .ep-confiance-ordi .ep-gage :is(b, span) { display:none; }
  body.ep[data-oa="oui"][data-oa-conf="mot"] .ep-confiance-ordi .ep-gage-mot { display:block; font-style:normal; font-size:14px; font-weight:500; color:var(--ep-doux); }
  body.ep[data-oa="oui"][data-oa-conf="dessins"] .ep-confiance-ordi .ep-gage > div { display:none; }
  /*  L EFFET AU SURVOL : elles montent un peu (defaut) · s inclinent, fort ou leger (le script pose l angle) · aucun  */
  body.ep[data-oa-survol="monte"] .ep-oa :is(.ep-dx-c, .ep-sol, .ep-oa-cgr):hover { transform:translateY(-6px);
    box-shadow:0 2px 4px color-mix(in srgb, var(--ep-encre) 5%, transparent), 0 30px 50px -26px color-mix(in srgb, var(--ep-accent) 55%, transparent); }
  /*  30/09 — « fort » EST L EFFET D AVANT, RENDU A L IDENTIQUE : celui des cartes de l accueil du 25/09
      (commit e62abd1b, « .ep-tuile:hover ») — la carte s incline vers la souris (16 degres x le reglage
      « Mouvement ») et AVANCE vers l ecran (translate3d, 70 px x le reglage), perspective 1 100 px, retour
      en .45 s. « leger » garde l inclinaison courte du 29/09.  */
  body.ep[data-oa-survol="fort"] .ep-oa :is(.ep-dx-c, .ep-sol, .ep-oa-cgr) { transform-style:preserve-3d; will-change:transform;
    transform:perspective(1100px) rotateX(var(--oa-rx, 0deg)) rotateY(var(--oa-ry, 0deg)) translate3d(0, 0, 0);
    transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s, background .35s, border-color .35s; }
  body.ep[data-oa-survol="fort"] .ep-oa :is(.ep-dx-c, .ep-sol, .ep-oa-cgr):hover {
    transform:perspective(1100px) rotateX(var(--oa-rx, 0deg)) rotateY(var(--oa-ry, 0deg)) translate3d(0, calc(-12px * var(--ep-int)), calc(70px * var(--ep-int)));
    box-shadow:0 30px 50px -34px rgba(0,0,0,.35);
    transition:transform .2s ease-out, box-shadow .45s, background .35s, border-color .35s; }
  body.ep[data-oa-survol="leger"] .ep-oa :is(.ep-dx-c, .ep-sol, .ep-oa-cgr):hover {
    transform:perspective(900px) rotateX(var(--oa-rx, 0deg)) rotateY(var(--oa-ry, 0deg)) translateY(-4px);
    box-shadow:0 2px 4px color-mix(in srgb, var(--ep-encre) 5%, transparent), 0 30px 50px -26px color-mix(in srgb, var(--ep-accent) 55%, transparent); }
}
@media (min-width:1025px) and (prefers-reduced-motion:reduce) {
  body.ep[data-oa="oui"] .ep-oa :is(.ep-dx-c, .ep-sol, .ep-oa-cgr) { transition:none; }
}

/* ─── LE TELEPHONE, « LES ETAPES 1-2-3 » : LES REGLAGES DE SA MAQUETTE (29/09) ──────
   Le style des deux cartes, la largeur (le trait visible / toute la largeur), la place de
   l etude solaire (dans l etape 1 / en bandeau apres les etapes / sous les gages), le texte
   long ou court, les couleurs (vides : celles de la charte).  */
@media (max-width:560px) {
  .ep .ep-dx-chloe { background-color:var(--sd-ep-tel-etapes-chloe-couleur, var(--ep-accent)); }
  .ep .ep-dx-devis { background:var(--sd-ep-tel-etapes-cartes-couleur, var(--ep-teinte-claire)); }
  body.ep[data-et-style="blanches"] .ep-trois .ep-dx-c { background:var(--ep-carte); background-image:none; border-color:color-mix(in srgb, var(--ep-encre) 8%, transparent); }
  body.ep[data-et-style="teintees"] .ep-trois .ep-dx-chloe { background:color-mix(in srgb, var(--ep-accent) 9%, var(--ep-carte)); background-image:none; }
  body.ep[data-et-style="teintees"] .ep-trois .ep-dx-devis { background:color-mix(in srgb, var(--sd-ep-tel-etapes-cartes-couleur, var(--ep-teinte-claire)) 85%, var(--ep-carte)); }
  body.ep:is([data-et-style="blanches"], [data-et-style="teintees"]) .ep-trois .ep-dx-chloe .ep-dx-t { color:var(--ep-encre); }
  body.ep:is([data-et-style="blanches"], [data-et-style="teintees"]) .ep-trois .ep-dx-chloe .ep-dx-rond { background:color-mix(in srgb, var(--ep-accent) 12%, var(--ep-carte)); color:var(--ep-accent-texte); }
  body.ep:is([data-et-style="blanches"], [data-et-style="teintees"]) .ep-trois .ep-dx-chloe .ep-dx-tete { background:color-mix(in srgb, var(--ep-accent) 16%, var(--ep-carte)); }
  body.ep[data-et-largeur="pleine"] .ep-trois :is(.ep-dx, .ep-sol) { margin-left:-40px; }
  body.ep[data-tel-une="etapes"] .ep-une .ep-sol-apart { display:flex; margin:var(--sd-ep-tel-etapes-air, 10px) 0 0; align-self:stretch; order:10; }
  body.ep[data-tel-une="etapes"][data-et-sol="bas"] .ep-une .ep-sol-apart { order:12; }
  body.ep[data-tel-une="etapes"][data-et-texte="long"] .ep-une .ep-accroche .ep-tel { display:inline; font-weight:400; color:var(--ep-doux); }
}

/* ═══ 29/09/2026 (nuit) — LE BOUTON SOLAIRE « MARQUE » (reglages ep_tel_etapes_solaire_style et
   ep_ordi_solaire_style, « marque » par defaut) ═══
   Un fond pale a la couleur de la charte (10 %, calcule : « --ep-sol-fond »), un bord de 1,5 px a mi-teinte (50 %) — une OMBRE interieure, car une bordure de 1,5 px est arrondie a 1 px
   par le navigateur (CDC §58.2) —, le soleil dans un
   rond blanc, la fleche dans un rond PLEIN a la couleur d action (son trait est l encre calculee pour s y
   lire, « --ep-sur-accent »). Memes taille, coins et textes qu avant, une seule ligne (le script de la page
   baisse la taille du libelle si la largeur manque) ; il s enfonce d un pixel sous le doigt.
   « discret » garde le dessin d avant, sans une ligne a changer.  */
@media (max-width:560px) {
  body.ep[data-tel-une="etapes"][data-et-solstyle="marque"] .ep-une .ep-sol {
    background:var(--ep-sol-fond, color-mix(in srgb, var(--ep-accent) 10%, var(--ep-carte)));
    border-color:transparent; box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--ep-accent) 50%, var(--ep-carte));
    transition:transform .12s ease-out, box-shadow .12s ease-out; }
  body.ep[data-tel-une="etapes"][data-et-solstyle="marque"] .ep-une .ep-sol-pic {
    flex:0 0 42px; width:42px; height:42px; border-radius:50%; background:var(--ep-carte);
    display:grid; place-items:center; box-shadow:0 1px 3px rgba(20,23,26,.12); }
  body.ep[data-tel-une="etapes"][data-et-solstyle="marque"] .ep-une .ep-sol-pic svg { width:28px; height:28px; }
  body.ep[data-tel-une="etapes"][data-et-solstyle="marque"] .ep-une .ep-sol i {
    flex:0 0 32px; width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
    background:var(--ep-sol-rond, var(--ep-accent)); color:var(--ep-sol-fleche, var(--ep-sur-accent)); font-size:17px; font-weight:700; }
  body.ep[data-tel-une="etapes"][data-et-solstyle="marque"] .ep-une .ep-sol:active { transform:translateY(1px) scale(.99); }
}
@media (min-width:1025px) {
  body.ep[data-oa="oui"][data-oa-solstyle="marque"] .ep-oa .ep-sol {
    background:var(--ep-sol-fond, color-mix(in srgb, var(--ep-accent) 10%, var(--ep-carte)));
    border-color:transparent; box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--ep-accent) 50%, var(--ep-carte)); }
  body.ep[data-oa="oui"][data-oa-solstyle="marque"] .ep-oa .ep-sol-pic {
    flex:0 0 44px; width:44px; height:44px; border-radius:50%; background:var(--ep-carte);
    display:grid; place-items:center; box-shadow:0 1px 3px rgba(20,23,26,.12); }
  body.ep[data-oa="oui"][data-oa-solstyle="marque"] .ep-oa .ep-sol-pic svg { width:30px; height:30px; }
  body.ep[data-oa="oui"][data-oa-solstyle="marque"] .ep-oa .ep-sol i {
    flex:0 0 34px; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
    background:var(--ep-sol-rond, var(--ep-accent)); color:var(--ep-sol-fleche, var(--ep-sur-accent)); font-size:18px; font-weight:700; }
  body.ep[data-oa="oui"][data-oa-solstyle="marque"] .ep-oa .ep-sol:active { transform:translateY(1px) scale(.99); }
}

/*  la petite phrase du bouton marque : l encre douce calculee pour se lire sur son fond pale  */
@media (max-width:560px) { body.ep[data-tel-une="etapes"][data-et-solstyle="marque"] .ep-une .ep-sol-tx small { color:var(--ep-sol-doux, var(--ep-doux)); } }
@media (min-width:1025px) { body.ep[data-oa="oui"][data-oa-solstyle="marque"] .ep-oa .ep-sol-tx small { color:var(--ep-sol-doux, var(--ep-doux)); } }
/*  29/09 (nuit) — sur un telephone etroit (380 px et moins), le bouton marque serre son decor avant son texte :
    le vrai site porte « Votre etude en quelques clics », plus long que le texte d origine, et a 360 px il ne
    tenait plus sur une ligne meme a 13 px (mesure : 2 defauts). Le rond du soleil, le rond de la fleche et les
    espaces diminuent ; la taille du texte reste l affaire du script.  */
@media (max-width:380px) {
  body.ep[data-tel-une="etapes"][data-et-solstyle="marque"] .ep-une .ep-sol { gap:8px; padding-left:10px; padding-right:10px; }
  body.ep[data-tel-une="etapes"][data-et-solstyle="marque"] .ep-une .ep-sol-pic { flex:0 0 34px; width:34px; height:34px; }
  body.ep[data-tel-une="etapes"][data-et-solstyle="marque"] .ep-une .ep-sol-pic svg { width:24px; height:24px; }
  body.ep[data-tel-une="etapes"][data-et-solstyle="marque"] .ep-une .ep-sol i { flex:0 0 28px; width:28px; height:28px; font-size:15px; }
}

/*  30/09 — LE NOMBRE DE GAGES DECIDE DES COLONNES. Le gage « Decennale controlee » ne parait que si
    l interrupteur « partenaire_decennale_exigee » est allume (home-epuree.php) : eteint, les trois
    autres se repartissent sur toute la largeur, sans case vide ni trait de trop. La page pose la
    classe « ep-gages-N » ; les grilles lisent « --ep-nb-gages ».  */
.ep .ep-confiance.ep-gages-1 { --ep-nb-gages:1; }
.ep .ep-confiance.ep-gages-2 { --ep-nb-gages:2; }
.ep .ep-confiance.ep-gages-3 { --ep-nb-gages:3; }
/*  la grille a deux colonnes du telephone (« La grande carte ») : un gage seul sur sa rangee la prend
    entiere, sans trait a gauche  */
@media (max-width:560px) {
  body.ep[data-tel-une="grande"][data-confiance="a"] .ep-confiance-tel.ep-gages-3 .ep-gage:last-child,
  body.ep[data-tel-une="grande"][data-confiance="a"] .ep-confiance-tel.ep-gages-1 .ep-gage:last-child { grid-column:1 / -1; padding-left:0; border-left:0; }
}

/* ─── LES SECTIONS DE L ACCUEIL, COMME LA MAQUETTE — 30/09/2026 ─────────────────────────────────────────
   _maquettes/2026-09-30_sections-accueil/ (validee telle quelle par Gerard). Les quatre sections du menu
   portent « ep-sec » : Comment ca marche, Nos metiers, Qui sommes-nous, Aides & conseils.
   · UNE SECTION = UN ECRAN : au moins la hauteur de la fenetre moins le menu (le menu y amene le haut de la
     section juste dessous : « scroll-padding-top », plus haut). Sans menu fige, toute la fenetre.
   · LE TITRE A LA MEME PLACE PARTOUT : le meme air au-dessus, et plus aucune colonne qui le centre (le titre
     de « Qui sommes-nous » est sorti de ses deux colonnes).
   · LES ESPACES SE RESSERRENT sur une fenetre peu haute (« vh » bornes), comme la maquette.
   · LES COULEURS DE LA CHARTE, jamais fixees : « --ep-accent-texte » (la couleur d action qui se LIT, 4,5 sur
     la page et la carte, calculee par charte) pour le petit titre, la fin du titre, les numeros, les montants
     et les dessins ; « --ep-teinte-claire » (10 % d accent) pour les ronds pales.
   ⚠️ « .ep .ep-sec » pese une classe de plus que les regles d hier sur les memes elements : elles restent pour
      les sections qui ne sont pas du menu (« Pourquoi passer par nous », « Questions »).  */
.ep .ep-bloc.ep-sec { min-height:calc(100svh - var(--ep-menu-h, 72px) - env(safe-area-inset-top, 0px));
  padding:var(--ep-sec-haut, clamp(40px, 7vh, 120px)) 0 clamp(28px, 5vh, 56px); display:flex; flex-direction:column; box-sizing:border-box; }
body.ep[data-fige="non"] .ep-bloc.ep-sec { min-height:100svh; }
.ep .ep-sec > .ep-sec-in { display:flex; flex-direction:column; flex:1; width:100%; box-sizing:border-box; }
.ep .ep-sec .ep-surtitre { display:flex; align-items:center; gap:10px; margin:0; font-size:13px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ep-accent-texte, var(--ep-accent)); }
.ep .ep-sec .ep-surtitre::before { content:""; flex:none; width:26px; height:2px; border-radius:2px; background:currentColor; }
.ep .ep-sec h2.ep-grand { margin:14px 0 0; max-width:none; font-size:clamp(40px, 3.3vw, 58px); line-height:1.05; letter-spacing:-.025em; }
.ep .ep-sec h2.ep-grand .ep-serif { font-style:italic; color:var(--ep-accent-texte, var(--ep-accent)); letter-spacing:-.01em; }
.ep .ep-sec .ep-chapo { margin:18px 0 0; max-width:680px; font-size:clamp(17px, 1.1vw, 20px); line-height:1.6; color:var(--ep-doux); }
.ep .ep-sec .ep-corps { margin-top:clamp(22px, 4vh, 64px); flex:1; display:flex; flex-direction:column; justify-content:center; }
.ep .ep-sec .ep-rond { flex:none; display:grid; place-items:center; border-radius:50%; background:var(--ep-teinte-claire, color-mix(in srgb, var(--ep-accent) 12%, var(--ep-fond))); }
.ep .ep-sec .ep-rond svg { color:var(--ep-accent-texte, var(--ep-accent)); }
/*  — Comment ca marche : trois cartes, puis deux boutons  */
.ep .ep-sec .ep-etapes { margin:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(24px, 2.5vw, 44px); }
.ep .ep-sec .ep-etape { position:relative; display:block; padding:28px 26px 30px; border-radius:22px; background:var(--ep-carte);
  border:1px solid color-mix(in srgb, var(--ep-encre) 7%, transparent); box-shadow:0 22px 40px -32px color-mix(in srgb, var(--ep-accent) 55%, transparent); }
.ep .ep-sec.ep-clair .ep-etape { background:var(--ep-fond); }
.ep .ep-sec .ep-etape .ep-rond { position:absolute; right:24px; top:28px; width:46px; height:46px; }
.ep .ep-sec .ep-etape .ep-rond svg { width:22px; height:22px; }
.ep .ep-sec .ep-etape .ep-num { display:block; margin:0; font-family:var(--ep-serif); font-style:italic; font-size:54px; line-height:1; color:var(--ep-accent-texte, var(--ep-accent)); }
.ep .ep-sec .ep-etape h3 { margin:18px 0 8px; font-size:21px; letter-spacing:-.01em; }
.ep .ep-sec .ep-etape p { margin:0; font-size:16px; line-height:1.55; color:var(--ep-doux); }
.ep .ep-sec .ep-sec-actions { margin-top:36px; display:flex; gap:14px; flex-wrap:wrap; }
.ep .ep-sec .ep-sec-bt { display:inline-flex; align-items:center; gap:8px; border-radius:99px; padding:14px 22px; font:inherit; font-weight:700; font-size:15px;
  text-decoration:none; cursor:pointer; border:1.5px solid transparent; background:none; }
.ep .ep-sec .ep-sec-plein { background:var(--ep-accent); border-color:var(--ep-accent); color:var(--ep-sur-accent); }
.ep .ep-sec .ep-sec-plein:hover { background:var(--ep-accent-vif); border-color:var(--ep-accent-vif); color:var(--ep-sur-accent-vif); }
.ep .ep-sec .ep-sec-creux { border-color:color-mix(in srgb, var(--ep-accent-texte, var(--ep-accent)) 50%, transparent); color:var(--ep-accent-texte, var(--ep-accent)); }
.ep .ep-sec .ep-sec-creux:hover { border-color:var(--ep-accent-texte, var(--ep-accent)); }
/*  — Nos metiers : les familles en pastilles, un rond pale, la montee au survol  */
.ep .ep-sec .ep-puces { margin:0; display:flex; flex-wrap:wrap; gap:14px; }
.ep .ep-sec .ep-puce { gap:12px; padding:14px 22px 14px 14px; border-radius:99px; background:var(--ep-fond); border:1px solid var(--ep-trait); color:var(--ep-encre);
  font-size:17px; font-weight:500; transition:transform .15s, border-color .15s, box-shadow .15s; }
.ep .ep-sec:not(.ep-clair) .ep-puce { background:var(--ep-carte); }
.ep .ep-sec .ep-puce .ep-rond { width:36px; height:36px; }
.ep .ep-sec .ep-puce .ep-rond svg { width:18px; height:18px; }
.ep .ep-sec .ep-puce:hover { background:var(--ep-fond); color:var(--ep-encre); transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--ep-accent-texte, var(--ep-accent)) 50%, var(--ep-trait)); box-shadow:0 14px 24px -18px color-mix(in srgb, var(--ep-accent) 55%, transparent); }
.ep .ep-sec:not(.ep-clair) .ep-puce:hover { background:var(--ep-carte); }
.ep .ep-sec .ep-puce:hover svg { color:var(--ep-accent-texte, var(--ep-accent)); }
.ep .ep-sec .ep-note { margin:28px 0 0; font-size:15px; color:var(--ep-doux); }
.ep .ep-sec .ep-note-lien { padding:0; border:0; background:none; font:inherit; font-weight:600; color:var(--ep-accent-texte, var(--ep-accent)); cursor:pointer; }
.ep .ep-sec .ep-note-lien:hover { text-decoration:underline; text-underline-offset:3px; }
/*  — Qui sommes-nous : le texte, la vraie photo, trois reperes  */
.ep .ep-sec .ep-qui { grid-template-columns:minmax(0, 1fr) minmax(0, 1.05fr); gap:clamp(36px, 4vw, 72px); align-items:center; }
.ep .ep-sec .ep-qui .ep-texte p { margin:0 0 16px; font-size:clamp(16px, 1.05vw, 18.5px); line-height:1.65; color:var(--ep-doux); }
.ep .ep-sec .ep-qui .ep-texte p b { color:var(--ep-encre); font-weight:600; }
.ep .ep-sec .ep-qui .ep-vitrine { aspect-ratio:16/11; border-radius:26px; box-shadow:0 30px 50px -34px color-mix(in srgb, var(--ep-encre) 60%, transparent); }
.ep .ep-sec .ep-reperes { display:flex; gap:34px; margin-top:22px; }
.ep .ep-sec .ep-reperes > div { border-left:2px solid var(--ep-accent-texte, var(--ep-accent)); padding-left:14px; }
.ep .ep-sec .ep-reperes b { display:block; font-size:22px; font-weight:600; color:var(--ep-encre); }
.ep .ep-sec .ep-reperes span { font-size:14px; color:var(--ep-doux); }
/*  — Aides & conseils : deux colonnes, rond pale, montant a droite ; les sources alignees sur les ronds  */
.ep .ep-sec .ep-aides { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 clamp(36px, 4vw, 64px); }
.ep .ep-sec .ep-aide, .ep .ep-sec .ep-aide.ep-sans-montant { grid-template-columns:46px minmax(0, 1fr) auto; gap:18px; align-items:center;
  padding:clamp(14px, 2.4vh, 26px) 0; border-top:1px solid var(--ep-trait); }
.ep .ep-sec .ep-aide .ep-rond { width:46px; height:46px; grid-row:auto; }
.ep .ep-sec .ep-aide .ep-rond svg { width:22px; height:22px; grid-row:auto; }
.ep .ep-sec .ep-aide-tx { min-width:0; }
.ep .ep-sec .ep-aide h3 { margin:0 0 4px; font-size:19px; }
.ep .ep-sec .ep-aide p { margin:0; font-size:15px; line-height:1.5; color:var(--ep-doux); }
.ep .ep-sec .ep-aide b { grid-column:3; grid-row:auto; align-self:center; font-family:var(--ep-serif); font-style:italic; font-weight:400;
  font-size:clamp(24px, 1.8vw, 30px); color:var(--ep-accent-texte, var(--ep-accent)); white-space:nowrap; text-align:right; }
.ep #ac-aides.ep-sec .ep-sources { display:grid; grid-template-columns:46px minmax(0, 1fr); gap:18px; align-items:center;
  margin:var(--sd-ep-aides-air-sources, clamp(20px, 3.5vh, 40px)) 0 0; padding-top:clamp(14px, 2.4vh, 22px); border-top:1px solid var(--ep-trait);
  font-size:14.5px; line-height:1.5; color:var(--ep-doux); }
.ep #ac-aides.ep-sec .ep-drapeau-case { display:flex; justify-content:center; }
.ep #ac-aides.ep-sec .ep-sources-l { display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center; }
.ep #ac-aides.ep-sec .ep-sources nav { display:flex; flex-wrap:wrap; gap:6px 18px; margin:0; }
.ep #ac-aides.ep-sec .ep-sources nav a { color:var(--ep-accent-texte, var(--ep-accent)); font-weight:600; }
@media (max-width:900px) {
  .ep .ep-bloc.ep-sec { padding-top:48px; }
  .ep .ep-sec .ep-etapes, .ep .ep-sec .ep-qui, .ep .ep-sec .ep-aides { grid-template-columns:1fr; }
  .ep .ep-sec .ep-aide, .ep .ep-sec .ep-aide.ep-sans-montant { grid-template-columns:46px minmax(0, 1fr); }
  .ep .ep-sec .ep-aide b { grid-column:2; text-align:left; white-space:normal; }
  .ep .ep-sec .ep-reperes { flex-wrap:wrap; gap:18px; }
  .ep .ep-sec .ep-puce { font-size:15px; }
}
@media (max-width:560px) {
  .ep .ep-sec h2.ep-grand { font-size:34px; }
  .ep .ep-sec .ep-etape { padding:22px 20px 24px; }
  .ep .ep-sec .ep-etape .ep-num { font-size:44px; }
  .ep .ep-sec .ep-etape .ep-rond { top:22px; right:20px; }
  .ep #ac-aides.ep-sec .ep-sources { font-size:13px; }
}
.ep .ep-bloc.ep-sec.ep-clair { border-top:0; }

/* ─── LES GRANDS ECRANS — 30/09/2026 ─────────────────────────────────────────────────────────────────────
   Au-dessus de 1600 px SEULEMENT (en dessous, « --cp-z » vaut 1 et rien de ceci ne s applique) : le contenu
   grandit avec la fenetre, dans la meme proportion pour tout — titre, cartes, bouton solaire, etapes, espaces,
   sections — par « zoom » sur les boites de contenu. Le facteur est pose par le gabarit (layouts/epuree.php).
   · LE MENU N EST PAS ZOOME : sa hauteur reste celle que lisent « scroll-padding-top » et la hauteur des
     sections. Seule sa LARGEUR suit, pour rester aligne sur le contenu.
   · UNE HAUTEUR EN « svh » DANS UNE BOITE ZOOMEE est multipliee par le facteur : on la divise.
   · LE HAUT DE PAGE SE CENTRE entre le menu et la ligne de confiance (qui reste a son reglage du bas) :
     deux rangees souples, au-dessus et au-dessous du titre et des cartes, se partagent la place libre.  */
@media (min-width:1601px) {
  .ep .ep-largeur { zoom:var(--cp-z, 1); }
  .ep .ep-menu .ep-largeur { zoom:1; max-width:calc(1200px * var(--cp-z, 1)); padding:0 calc(32px * var(--cp-z, 1)); }
  body.ep[data-oa="oui"] .ep-une .ep-largeur {
    min-height:calc((100svh - var(--ep-menu-h, 72px) - var(--sd-ep-ordi-haut, 22px) - var(--sd-ep-ordi-confiance-bas, 24px)) / var(--cp-z, 1)); }
  /*  le centrage : le script (« caleOA ») mesure la place libre au-dessus de la ligne de confiance et en donne la
      moitie ici. Un deplacement, pas une rangee de plus : les presentations A a D rangent leurs blocs autrement.  */
  body.ep[data-oa="oui"] .ep-une .ep-largeur > :not(.ep-confiance-ordi) { translate:0 var(--oa-centre, 0px); }
}