/* ==========================================================================
   JustiComm · page « Cabinets comptables » (/professions/experts-comptables/)
   v2, 25/10/2026 · réalignée sur la page Syndics (Raoudha : « trop de paquets pour rien ») : une photo et quatre questions,
   une liste simple, Être trouvé en vrais écrans alternés, Convaincre et Automatiser en rangées avec une scène de supports
   (retour de Raoudha : bande de photos coupées retirée, photos entières), tableau des prix,
   étapes à filets, carte de France. v1 : texte v4 validé par Raoudha (« La v4 me va. Construis la page »).
   Même esprit que Réseaux sociaux, Identité visuelle et les autres pages des professions :
   bandeau photo bord à bord avec un téléphone animé, portraits, vrais écrans (Google, Maps, Aperçu IA, annonce),
   sections claires et sombres en alternance, titres modestes (H1 48 px, H2 40 px au plus).
   Le cabinet fictif « Cabinet Lisandre » a sa propre identité (bleu encre, corail, Spectral et Public Sans),
   jamais les couleurs ni les polices de JustiComm. Animations courtes, jouées une fois ; état final fixe
   avec « moins d'animations » ou sans JavaScript.
   Préfixe : ec-
   ========================================================================== */

@font-face { font-family: "Public Sans"; src: url("../polices/public-sans-variable.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("../polices/spectral-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("../polices/spectral-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

.ec {
  --rou-bleu: #1E3550;     /* cabinet fictif : bleu encre, 12,3:1 avec le blanc */
  --rou-corail: #B4472E;   /* cabinet fictif : corail, 5,3:1 avec le blanc */
  --rou-creme: #F7F4EF;
  --rou-gris: #56606B;     /* 6,2:1 sur blanc */
  --rou-ligne: #DDD8CF;
  --f-rou-titre: "Spectral", Georgia, serif;
  --f-rou: "Public Sans", "Segoe UI", system-ui, sans-serif;
  --g-bleu: #1A0DAB;       /* liens Google */
  --g-gris: #4D5156;
  --vert: #2C6C47;
  --orange: #965F14;
  --rouge: #A8372E;
}

/* --------------------------------------------------------------------------
   0. Communs à la page
   -------------------------------------------------------------------------- */
.ec.section { padding-block: clamp(2.5rem, 1.5rem + 2.8vw, 4rem); }
.ec .titre-section { max-width: none; font-size: clamp(1.875rem, 1.5rem + 1.1vw, 2.5rem); line-height: 1.1; color: var(--titre); text-wrap: pretty; }
.ec h3 { text-wrap: pretty; }
.ec-or { font-style: italic; color: var(--or-texte); }
.surface-sombre .ec-or, .surface-nuit .ec-or { color: var(--or-clair); }
.ec-tete { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.ec-tete .surtitre, .ec-audit__texte .surtitre { margin-bottom: var(--e-4); }
.ec-chapo { margin-top: var(--e-4); max-width: none; font: italic 500 clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem) / 1.45 var(--f-titre); color: var(--titre); text-wrap: pretty; }
.surface-nuit .ec-chapo, .surface-sombre .ec-chapo { color: var(--creme); }
.ec-texte { margin-top: var(--e-5); max-width: none; font-size: var(--t-corps); line-height: 1.65; color: var(--texte); text-wrap: pretty; }
.ec-fort { color: var(--titre); font-weight: 500; }
.ec-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: clamp(1.75rem, 3vw, 2.25rem); }
.ec-actions--centre { justify-content: center; }
.ec .btn-plaque.btn--grand { max-width: 100%; }
.ec-masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.ec .lien-suite.ec-lien { display: inline-flex; align-items: center; gap: 10px; margin-top: var(--e-4); padding: 0; font-size: 1rem; font-weight: 500; letter-spacing: 0.02em; color: var(--petrole); text-decoration: underline; text-decoration-color: var(--or-400); text-underline-offset: 5px; }
.ec .lien-suite.ec-lien:hover { color: var(--or-texte); }
.surface-nuit .lien-suite.ec-lien, .surface-sombre .lien-suite.ec-lien { color: var(--or-clair); text-decoration-color: rgba(224, 189, 142, 0.5); }
.surface-nuit .lien-suite.ec-lien:hover, .surface-sombre .lien-suite.ec-lien:hover { color: var(--creme); }

/* Encadré fort entre deux filets, centré, pleine largeur */
.ec-exergue { margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0; padding-block: var(--e-5); border-block: 1px solid var(--filet-couleur); text-align: center; font: 500 clamp(1.375rem, 1.2rem + 0.5vw, 1.625rem) / 1.35 var(--f-titre); color: var(--titre); text-wrap: pretty; }

/* Petite ligne bronze sous le titre (comme les pages de service) */
.ec-filet { display: block; width: 3.5rem; height: 2px; margin-top: var(--e-5); background: linear-gradient(90deg, var(--bronze), var(--or)); }

/* Listes cochées */
.ec-coches { display: grid; gap: var(--e-3); margin: var(--e-5) 0 0; padding: 0; list-style: none; font-size: var(--t-corps); line-height: 1.55; }
.ec-coches li { position: relative; padding-left: 2.1rem; text-wrap: pretty; }
.ec-coches li::before { content: "✓"; position: absolute; left: 0; top: 0.15em; display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--petrole); font-size: 0.75rem; color: var(--or); }
.ec-coches strong { font-weight: 500; color: var(--titre); }

/* Emplacements photo (en attendant les images ChatGPT) */
.ec-photo { position: relative; background:
  radial-gradient(120% 90% at 30% 35%, rgba(224, 189, 142, 0.28), transparent 60%),
  linear-gradient(150deg, #23494A 0%, #0C3132 55%, #062021 100%); }
.ec-photo:not(.a-image)::before { content: "Photo " attr(data-photo) " à venir"; position: absolute; left: 1rem; top: 1rem; padding: 0.3rem 0.7rem; border: 1px dashed rgba(224, 189, 142, 0.6); border-radius: 999px; font: 500 0.8125rem / 1.2 var(--f-texte); letter-spacing: 0.06em; color: var(--or-clair); }
.ec-photo.a-image { background: var(--petrole-900); }
.ec-photo > img.ec-photo__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

@keyframes ec-monte { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@keyframes ec-disparait { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
@keyframes ec-glisse { from { opacity: 0; translate: 0 100%; } to { opacity: 1; translate: 0 0; } }
@keyframes ec-pastille { from { opacity: 0; scale: 0.6; } to { opacity: 1; scale: 1; } }
@keyframes ec-frappe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ec-onde { 0%, 100% { scale: 1 0.35; } 50% { scale: 1 1; } }
@keyframes ec-tombe { from { opacity: 0; translate: 0 -24px; } to { opacity: 1; translate: 0 0; } }

/* --------------------------------------------------------------------------
   1. Premier écran : bandeau photo bord à bord, téléphone animé posé dessus
   -------------------------------------------------------------------------- */
body:has(.ec-haut) .entete__fond { opacity: 1; }
.ec-haut { position: relative; padding: var(--h-entete) 0 clamp(2rem, 4vw, 3rem); background: var(--papier); }
.ec-ariane { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; padding-block: 0.9rem; font-size: 0.875rem; color: var(--taupe); }
.ec-ariane a { color: inherit; text-underline-offset: 3px; }
.ec-ariane [aria-current] { color: var(--encre); }

.ec-haut__bandeau { position: relative; width: 100%; overflow: hidden; aspect-ratio: 1920 / 860; max-height: 46rem; background: var(--petrole-900); }
.ec-haut__photo { position: absolute; inset: 0; }
.ec-haut__photo > img.ec-photo__img { object-position: 30% 35%; }
.ec-haut__bandeau::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 50%, rgba(2, 24, 24, 0.32) 74%, rgba(2, 24, 24, 0.58) 100%); pointer-events: none; }
.ec-haut__tel { position: absolute; z-index: 1; top: 50%; right: max(var(--marge), calc((100vw - var(--conteneur)) / 2)); translate: 0 -50%; }

/* Téléphone : la photo entière en 3:2, puis le téléphone sous la photo, qui la chevauche à droite (aucun visage caché) */
@media (max-width: 47.99em) {
  .ec-haut__bandeau { display: flex; flex-direction: column; align-items: flex-end; aspect-ratio: auto; max-height: none; overflow: visible; background: none; }
  .ec-haut__photo { position: relative; inset: auto; width: 100%; aspect-ratio: 3 / 2; }
  .ec-haut__photo > img.ec-photo__img { object-position: 40% 40%; }
  .ec-haut__bandeau::after { display: none; }
  .ec-haut__tel { position: relative; top: auto; right: auto; translate: none; zoom: 0.6; margin: -9rem 1.25rem 0 0; }
}

/* Téléphone : la recherche → la page de la mission → le rendez-vous */
.ec-tel { width: 19rem; padding: 10px; border-radius: 34px; background: linear-gradient(160deg, #2B3838, #0E1818); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.ec-tel__ecran { position: relative; height: 27rem; overflow: hidden; border-radius: 26px; background: #fff; font-family: var(--f-rou); color: #202124; }
.ec-tel__encoche { position: absolute; top: 8px; left: 50%; width: 76px; height: 20px; margin: 0 0 0 -38px; border-radius: 12px; background: #0E1818; z-index: 3; }
.ec-tel__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ec-lecture { position: absolute; left: -18px; bottom: 28px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(224, 189, 142, 0.6); border-radius: 50%; background: rgba(6, 42, 43, 0.85); color: var(--or-clair); cursor: pointer; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35); }
.ec-lecture svg { width: 18px; height: 18px; fill: currentColor; }
.ec-lecture__lire { display: none; }
.ec-lecture.est-en-pause .ec-lecture__lire { display: block; }
.ec-lecture.est-en-pause .ec-lecture__pause { display: none; }
.ec-lecture:hover { background: var(--petrole); }
.ec-lecture:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }

.ec-haut__texte { margin-top: clamp(2rem, 4vw, 3rem); }
.ec-haut__sur { margin-bottom: var(--e-4); }
.ec-haut__titre { margin: 0; font: 500 clamp(2rem, 1.4rem + 1.9vw, 3rem) / 1.06 var(--f-titre); color: var(--petrole); text-wrap: balance; }
.ec-haut__accroche { margin-top: var(--e-5); font: italic 500 clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem) / 1.38 var(--f-titre); color: var(--petrole); text-wrap: pretty; }
.ec-haut__intro { margin-top: var(--e-3); font-size: var(--t-corps); line-height: 1.6; color: var(--encre); text-wrap: pretty; }
.ec-engagements { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: clamp(1.5rem, 3vw, 2rem) 0 0; padding: 0; list-style: none; font-size: 0.9375rem; color: var(--encre); }
.ec-engagements li { display: inline-flex; align-items: center; gap: 0.55rem; }
.ec-engagements li::before { content: "✓"; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--petrole); font-size: 0.6875rem; color: var(--or); }
@media (max-width: 29.99em) { .ec-haut .btn-plaque.btn--grand { width: 100%; white-space: normal; text-align: center; line-height: 1.35; } }

/* --------------------------------------------------------------------------
   2. Être choisi : la photo d'une dirigeante qui cherche, les quatre questions en cartes
   3. On part de votre objectif : une liste simple et la photo d'un artisan
   -------------------------------------------------------------------------- */
.ec-duo { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 60em) {
  .ec-duo { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; }
  .ec-duo--inverse { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
}
.ec-duo__texte .ec-texte:first-child { margin-top: 0; }
.ec-photo-cadre { position: relative; margin: 0; }
.ec-photo-cadre { width: 100%; max-width: 26rem; justify-self: center; }
.ec-photo-cadre img { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 2rem 3rem -1.75rem rgba(2, 24, 24, 0.55); }
.ec-recherche { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 14px; border-radius: 999px; background: #fff; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.5); font: 500 0.875rem / 1.2 var(--f-rou); color: #202124; }
.ec-recherche svg { flex: none; width: 15px; height: 15px; fill: none; stroke: #4285F4; stroke-width: 2.4; stroke-linecap: round; }
.js .ec-photo-cadre:not(.est-visible) .ec-recherche { opacity: 0; }
.js .ec-photo-cadre.est-visible .ec-recherche { animation: ec-monte 0.6s var(--ease-sortie) 0.4s both; }

.ec-questions { display: grid; gap: var(--e-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 40em) { .ec-questions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ec-question { display: flex; align-items: flex-start; gap: var(--e-4); padding: var(--e-5); border-top: 2px solid var(--or-400); border-radius: 0 0 8px 8px; background: #FBF8F2; box-shadow: 0 1rem 2rem -1.5rem rgba(2, 24, 24, 0.25); }
.ec-question__picto { flex: none; width: 32px; height: 32px; fill: none; stroke: var(--cuivre); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ec-question p { margin: 0; font: 500 1.3125rem / 1.3 var(--f-titre); color: var(--petrole); }
.js .ec-questions.est-visible .ec-question { animation: ec-monte 0.7s var(--ease-sortie) both; }
.js .ec-questions.est-visible .ec-question:nth-child(2) { animation-delay: 0.08s; }
.js .ec-questions.est-visible .ec-question:nth-child(3) { animation-delay: 0.16s; }
.js .ec-questions.est-visible .ec-question:nth-child(4) { animation-delay: 0.24s; }

.ec-liste { display: grid; margin: 0; padding: 0; list-style: none; }
.ec-liste li { padding: var(--e-4) 0; border-top: 1px solid var(--lin); }
.ec-liste li:last-child { border-bottom: 1px solid var(--lin); }
.ec-liste__titre { margin: 0; font: 500 clamp(1.375rem, 1.25rem + 0.4vw, 1.5625rem) / 1.2 var(--f-titre); color: var(--petrole); }
.ec-liste p { margin: var(--e-2) 0 0; font-size: 1.0625rem; line-height: 1.6; color: var(--encre); }


/* --------------------------------------------------------------------------
   4. L'audit offert : texte et extrait de rapport
   -------------------------------------------------------------------------- */
.ec-audit__grille { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
@media (min-width: 64em) { .ec-audit__grille { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.ec-rapport { margin: 0; }
.ec-rapport__feuille { position: relative; padding: 0 0 var(--e-5); border-radius: 6px; background: #fff; box-shadow: 0 2rem 3.5rem -1.75rem rgba(2, 24, 24, 0.35), 0 0 0 1px rgba(2, 24, 24, 0.06); overflow: hidden; }
.ec-rapport__feuille::after { content: ""; position: absolute; z-index: -1; inset: 14px -10px -12px 10px; border-radius: 6px; background: #EDE7DB; }
.ec-rapport__tete { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 22px; background: var(--petrole); font: 500 1.125rem / 1.2 var(--f-titre); letter-spacing: 0.02em; color: var(--creme); }
.ec-rapport__logo { width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFF1D8, var(--or) 55%, var(--bronze)); box-shadow: 0 0 10px rgba(224, 189, 142, 0.7); }
.ec-rapport__objet { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin: 0; padding: 14px 22px 12px; border-bottom: 1px solid var(--lin); font-size: 0.9375rem; color: var(--taupe); }
.ec-rapport__rubrique { font-weight: 500; color: var(--petrole); }
.ec-rapport__rubrique b { margin-right: 6px; font: 500 1rem / 1 var(--f-titre); color: var(--or-texte); }
.ec-rapport__constats { display: grid; margin: 0; padding: 0 22px; list-style: none; }
.ec-constat { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 14px 0; border-bottom: 1px solid #EFEAE0; }
.ec-constat p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--encre); }
.ec-constat strong { font-weight: 500; color: var(--petrole); }
.ec-constat__pastille { position: relative; width: 14px; height: 14px; margin-top: 4px; border-radius: 50%; }
.ec-constat--vert .ec-constat__pastille { background: var(--vert); box-shadow: 0 0 0 4px rgba(44, 108, 71, 0.15); }
.ec-constat--orange .ec-constat__pastille { background: var(--orange); box-shadow: 0 0 0 4px rgba(150, 95, 20, 0.15); }
.ec-constat--rouge .ec-constat__pastille { background: var(--rouge); box-shadow: 0 0 0 4px rgba(168, 55, 46, 0.15); }
.ec-rapport__priorite { margin: var(--e-4) 22px 0; padding: 12px 16px; border-left: 3px solid var(--or-400); border-radius: 0 6px 6px 0; background: #FBF6EC; font-size: 1rem; line-height: 1.5; color: var(--encre); }
.ec-rapport__priorite strong { font-weight: 500; color: var(--petrole); }
.ec-rapport__legende { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: var(--e-5); font-size: 0.9375rem; color: var(--encre); }
.ec-legende { display: inline-flex; align-items: center; gap: 8px; }
.ec-legende::before { content: ""; width: 10px; height: 10px; border-radius: 50%; }
.ec-legende--vert::before { background: var(--vert); } .ec-legende--orange::before { background: var(--orange); } .ec-legende--rouge::before { background: var(--rouge); }
.js .ec-rapport:not(.est-visible) .ec-constat, .js .ec-rapport:not(.est-visible) .ec-rapport__priorite { opacity: 0; }
.js .ec-rapport.est-visible .ec-constat, .js .ec-rapport.est-visible .ec-rapport__priorite { animation: ec-monte 0.55s var(--ease-sortie) both; }
.js .ec-rapport.est-visible .ec-constat:nth-child(1) { animation-delay: 0.35s; }
.js .ec-rapport.est-visible .ec-constat:nth-child(2) { animation-delay: 0.7s; }
.js .ec-rapport.est-visible .ec-constat:nth-child(3) { animation-delay: 1.05s; }
.js .ec-rapport.est-visible .ec-rapport__priorite { animation-delay: 1.5s; }

/* --------------------------------------------------------------------------
   5. Avant, après : deux écrans
   -------------------------------------------------------------------------- */
.ec-avap__duo { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
@media (min-width: 56em) { .ec-avap__duo { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; } }
.ec-ecran { position: relative; margin: 0; border-radius: 10px; background: #fff; box-shadow: 0 2.5rem 4rem -2rem rgba(0, 0, 0, 0.6); overflow: hidden; }
.ec-ecran__etiquette { position: absolute; z-index: 2; top: 54px; right: 14px; padding: 5px 12px; border-radius: 999px; background: #E9E6E1; font: 600 0.8125rem / 1.2 var(--f-texte); letter-spacing: 0.12em; text-transform: uppercase; color: #3C3C3C; }
.ec-ecran__etiquette--or { background: var(--or); color: var(--petrole-profond); }
.ec-navigateur { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #ECEAE6; border-bottom: 1px solid #DAD6CF; font: 400 0.75rem / 1.2 var(--f-rou); color: #5F6368; }
.ec-navigateur i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #CFCAC2; }
.ec-navigateur i:nth-child(1) { background: #E9877A; } .ec-navigateur i:nth-child(2) { background: #E8C46A; } .ec-navigateur i:nth-child(3) { background: #8CC48A; }
.ec-navigateur span { min-width: 0; margin-left: 10px; padding: 4px 12px; border-radius: 999px; background: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex: 1; }
.ec-ecran__page { padding: clamp(1.25rem, 3vw, 2rem); }
.ec-page-avant { font-family: "Times New Roman", Times, serif; color: #333; filter: saturate(0.6); }
.ec-page-avant__menu { display: flex; gap: 10px; margin: 0 0 20px; }
.ec-page-avant__menu span { width: 56px; height: 8px; background: #C9C9C9; }
.ec-page-avant__titre { margin: 0; font-size: 1.5rem; font-weight: 700; color: #333; }
.ec-page-avant__texte { margin: 12px 0 0; padding: 0; font-size: 1.125rem; line-height: 1.5; color: #333; }
.ec-page-avant__texte p { margin: 0; }
.ec-page-avant__gris { display: grid; gap: 8px; margin: 18px 0 0; }
.ec-page-avant__gris i { display: block; height: 8px; background: #E1E1E1; } .ec-page-avant__gris i:nth-child(2) { width: 80%; } .ec-page-avant__gris i:nth-child(3) { width: 55%; }
.ec-page-apres { background: var(--rou-creme); font-family: var(--f-rou); }
.ec-page-apres__marque { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font: 600 1rem / 1.2 var(--f-rou-titre); color: var(--rou-bleu); }
.ec-page-apres__marque span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--rou-bleu); font-size: 0.875rem; color: #fff; }
.ec-page-apres__texte { margin: 0; padding: 0; }
.ec-page-apres__texte p { margin: 0; font: 500 clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem) / 1.4 var(--f-rou-titre); color: var(--rou-bleu); text-wrap: pretty; }
.ec-page-apres__etapes { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: rou; }
.ec-page-apres__etapes li { counter-increment: rou; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--rou-ligne); border-radius: 999px; background: #fff; font-size: 0.875rem; font-weight: 500; color: var(--rou-bleu); }
.ec-page-apres__etapes li::before { content: counter(rou); display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--rou-corail); font-size: 0.6875rem; color: #fff; }
.ec-page-apres__bouton { display: inline-block; margin: 20px 0 0; padding: 11px 22px; border-radius: 999px; background: var(--rou-corail); font-size: 0.9375rem; font-weight: 600; color: #fff; }
.js .ec-avap__duo:not(.est-visible) .ec-ecran--apres { opacity: 0; translate: 0 20px; }
.js .ec-avap__duo.est-visible .ec-ecran--apres { transition: opacity 0.8s var(--ease-sortie) 0.35s, translate 0.8s var(--ease-sortie) 0.35s; }

/* --------------------------------------------------------------------------
   6. Ce que nous faisons : Être trouvé en quatre vrais écrans en alternance,
      puis Convaincre et Automatiser en deux listes ; bande photo
   -------------------------------------------------------------------------- */
.ec-famille { margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); }
.ec-levier { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
.ec-levier + .ec-levier { margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 60em) {
  .ec-levier { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .ec-levier--inverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
  .ec-levier--inverse .ec-levier__ecran { order: 2; }
}
.ec-levier__ecran { min-width: 0; }
.ec-vue { min-width: 0; border-radius: 10px; background: #fff; box-shadow: 0 2.5rem 4rem -2rem rgba(0, 0, 0, 0.6); overflow: hidden; }
.ec-levier__num { display: block; font: italic 300 2.5rem / 1 var(--f-titre); color: var(--or); }
.ec-levier__titre { margin: var(--e-3) 0 0; font: 500 clamp(1.5rem, 1.3rem + 0.6vw, 1.875rem) / 1.2 var(--f-titre); color: var(--creme); }
.ec-levier__texte p { margin: var(--e-3) 0 0; font-size: var(--t-corps); line-height: 1.65; color: var(--creme-doux); }
.ec-levier__texte .ec-levier__prix { font-weight: 500; color: var(--creme); }

/* Convaincre et Automatiser : deux rangées comme Être trouvé, une scène de supports et la liste des services */
.ec-levier--famille { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid rgba(224, 189, 142, 0.22); }
.ec-levier--famille + .ec-levier--famille { border-top: 0; padding-top: 0; }
.ec-levier--famille .ec-famille { margin-bottom: var(--e-3); }
.ec-offres { display: grid; margin: 0; padding: 0; list-style: none; }
.ec-offre { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e-4); padding: var(--e-4) 0; border-top: 1px solid rgba(224, 189, 142, 0.18); }
.ec-offre:first-child { border-top: 0; padding-top: var(--e-2); }
.ec-offre__ico { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(224, 189, 142, 0.45); border-radius: 50%; background: rgba(224, 189, 142, 0.06); }
.ec-offre__ico svg { width: 21px; height: 21px; fill: none; stroke: var(--or); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ec-offre__titre { margin: 0; font: 500 clamp(1.375rem, 1.25rem + 0.4vw, 1.5625rem) / 1.2 var(--f-titre); }
.ec-offre__titre a { color: var(--creme); text-decoration: none; background: linear-gradient(var(--or-400), var(--or-400)) 0 100% / 0 1px no-repeat; transition: background-size var(--d) var(--ease-sortie); }
.ec-offre__titre a::after { content: " →"; color: var(--or); }
.ec-offre__titre a:hover, .ec-offre__titre a:focus-visible { background-size: 100% 1px; }
.ec-offre p { margin: var(--e-2) 0 0; font-size: 1.0625rem; line-height: 1.6; color: var(--creme-doux); }
.ec-levier__texte .ec-offre p { margin-top: var(--e-2); font-size: 1.0625rem; }
.ec-levier__texte .ec-offre .ec-offre__prix { display: inline-block; margin-top: var(--e-3); padding: 3px 12px; border: 1px solid rgba(224, 189, 142, 0.4); border-radius: 999px; font-size: 0.9375rem; font-weight: 500; color: var(--or-clair); }

/* Scènes : les supports du Cabinet Lisandre posés comme sur une table */
.ec-scene { position: relative; height: clamp(24rem, 33vw, 29rem); font-family: var(--f-rou); color: #22303D; }
.ec-scene > * { position: absolute; box-shadow: 0 2rem 3rem -1.5rem rgba(0, 0, 0, 0.6); }
.ec-scene p { margin: 0; }
/* Portable et site */
.ec-portable { left: 0; top: 6%; width: 74%; box-shadow: none; }
.ec-portable__ecran { padding: 12px; border: 10px solid #1B2426; border-bottom-width: 14px; border-radius: 12px 12px 0 0; background: var(--rou-creme); aspect-ratio: 16 / 10; overflow: hidden; box-shadow: 0 2rem 3rem -1.5rem rgba(0, 0, 0, 0.6); }
.ec-portable__socle { height: 12px; margin: 0 -6%; border-radius: 0 0 14px 14px; background: linear-gradient(#C9CDCF, #8E9597); box-shadow: 0 1.5rem 2rem -1rem rgba(0, 0, 0, 0.6); }
.ec-site__nav { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--rou-ligne); font-size: 0.6875rem; }
.ec-site__nav b { font: 600 0.8125rem / 1 var(--f-rou-titre); color: var(--rou-bleu); margin-right: auto; }
.ec-site__nav i { width: 28px; height: 5px; border-radius: 3px; background: #D8D2C7; }
.ec-site__logo, .ec-charte__logo span, .ec-post__tete span { display: grid; place-items: center; flex: none; border-radius: 50%; background: var(--rou-bleu); font-family: var(--f-rou-titre); font-weight: 600; color: #fff; }
.ec-site__logo { width: 20px; height: 20px; font-size: 0.6875rem; }
.ec-site__rdv { padding: 4px 9px; border-radius: 999px; background: var(--rou-corail); font-size: 0.625rem; font-weight: 600; color: #fff; }
.ec-site__hero { padding: clamp(12px, 2vw, 22px) 4px 10px; }
.ec-site__sur { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rou-corail); }
.ec-site__titre { margin-top: 6px !important; font: 600 clamp(1.125rem, 0.9rem + 0.9vw, 1.625rem) / 1.15 var(--f-rou-titre); color: var(--rou-bleu); }
.ec-site__lignes { display: grid; gap: 5px; margin-top: 10px !important; }
.ec-site__lignes i { display: block; height: 5px; border-radius: 3px; background: #DCD6CB; width: 80%; } .ec-site__lignes i + i { width: 58%; }
.ec-site__bouton { display: inline-block; margin-top: 12px !important; padding: 6px 14px; border-radius: 999px; background: var(--rou-corail); font-size: 0.6875rem; font-weight: 600; color: #fff; }
.ec-site__missions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px !important; }
.ec-site__missions span { padding: 4px 9px; border: 1px solid var(--rou-ligne); border-radius: 6px; background: #fff; font-size: 0.625rem; font-weight: 500; color: var(--rou-bleu); }
/* Charte */
.ec-charte { left: 4%; bottom: 0; width: 38%; padding: 14px 16px; border-radius: 10px; background: #fff; }
.ec-charte__titre { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rou-gris); }
.ec-charte__logo { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; margin-top: 10px !important; font: 600 1rem / 1.1 var(--f-rou-titre); color: var(--rou-bleu); }
.ec-charte__logo span { grid-row: span 2; width: 36px; height: 36px; font-size: 1.125rem; }
.ec-charte__logo small { font: 500 0.6875rem / 1.3 var(--f-rou); color: var(--rou-gris); }
.ec-charte__nuancier { display: flex; gap: 6px; margin-top: 12px !important; }
.ec-charte__nuancier i { flex: 1; height: 26px; border-radius: 6px; }
.ec-charte__nuancier .bleu { background: var(--rou-bleu); } .ec-charte__nuancier .corail { background: var(--rou-corail); } .ec-charte__nuancier .creme { background: var(--rou-creme); box-shadow: inset 0 0 0 1px var(--rou-ligne); }
.ec-charte__polices { margin-top: 10px !important; font-size: 0.75rem; color: var(--rou-gris); }
/* Publication */
.ec-post { right: 0; bottom: 4%; width: 42%; padding: 14px; border-radius: 10px; background: #fff; }
.ec-post__tete { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; font-size: 0.8125rem; color: #1D2226; }
.ec-post__tete span { grid-row: span 2; width: 30px; height: 30px; font-size: 0.875rem; }
.ec-post__tete b { font-weight: 600; } .ec-post__tete small { font-size: 0.6875rem; color: #666; }
.ec-post__texte { margin-top: 10px !important; font-size: 0.8125rem; line-height: 1.45; color: #1D2226; }
.ec-post__visuel { display: grid; gap: 4px; margin-top: 10px !important; padding: 16px 14px; border-radius: 6px; background: linear-gradient(135deg, var(--rou-bleu), #2C4A6B); color: #fff; }
.ec-post__visuel b { font: 600 1.125rem / 1.1 var(--f-rou-titre); } .ec-post__visuel span { font-size: 0.6875rem; opacity: 0.9; }
.ec-post__actions { display: flex; justify-content: space-between; margin-top: 10px !important; padding-top: 8px; border-top: 1px solid #E6E6E6; font-size: 0.6875rem; font-weight: 600; color: #666; }
/* Article */
.ec-article { right: 3%; top: 0; width: 34%; padding: 12px 14px; border-radius: 10px; background: #fff; }
.ec-article__tag { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #F4E3DD; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rou-corail); }
.ec-article__titre { margin-top: 8px !important; font: 600 0.9375rem / 1.25 var(--f-rou-titre); color: var(--rou-bleu); }
.ec-article__lignes { display: grid; gap: 5px; margin-top: 8px !important; }
.ec-article__lignes i { display: block; height: 5px; border-radius: 3px; background: #E4DFD6; } .ec-article__lignes i:nth-child(2) { width: 85%; } .ec-article__lignes i:nth-child(3) { width: 60%; }
/* Relances */
.ec-relances { left: 6%; top: 10%; width: 78%; padding: 16px 18px; border-radius: 12px; background: #fff; }
.ec-relances__tete { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid #ECE8E1; font: 600 0.9375rem / 1.2 var(--f-rou-titre); color: var(--rou-bleu); }
.ec-relances__ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--rou-creme); }
.ec-relances__ico svg { width: 17px; height: 17px; fill: none; stroke: var(--rou-bleu); stroke-width: 1.6; stroke-linejoin: round; }
.ec-relance { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid #F0ECE6; }
.ec-relance b { font-size: 0.875rem; font-weight: 600; color: #22303D; }
.ec-relance span { grid-row: 2; font-size: 0.75rem; color: var(--rou-gris); }
.ec-relance em { grid-row: span 2; grid-column: 2; padding: 4px 10px; border-radius: 999px; font-size: 0.75rem; font-style: normal; font-weight: 600; }
.ec-relance em.ok { background: #E3F0E7; color: #1E5A35; } .ec-relance em.prevu { background: #F6EBD9; color: #7A4C0E; }
.ec-relances__pied { margin-top: 10px !important; font-size: 0.75rem; color: var(--rou-gris); }
/* Notification de l'assistant */
.ec-notif { left: 0; bottom: 12%; display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; width: 52%; padding: 12px 14px; border-radius: 14px; background: var(--rou-bleu); color: #fff; }
.ec-notif__ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
.ec-notif__ico svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.ec-notif p { display: grid; font-size: 0.75rem; line-height: 1.35; opacity: 0.95; }
.ec-notif b { font-size: 0.875rem; font-weight: 600; }
/* Atelier */
.ec-atelier { right: 0; bottom: 0; width: 44%; padding: 16px; border-radius: 12px; background: #fff; }
.ec-atelier__tag { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rou-corail); }
.ec-atelier__titre { margin-top: 6px !important; font: 600 1.0625rem / 1.2 var(--f-rou-titre); color: var(--rou-bleu); }
.ec-atelier__puces { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px !important; }
.ec-atelier__puces span { padding: 4px 10px; border-radius: 999px; background: var(--rou-creme); font-size: 0.75rem; font-weight: 500; color: var(--rou-bleu); }
.ec-atelier__pied { margin-top: 10px !important; font-size: 0.75rem; color: var(--rou-gris); }
/* Apparition des supports, un par un */
.js .ec-levier--famille:not(.est-visible) .ec-scene > * { opacity: 0; }
.js .ec-levier--famille.est-visible .ec-scene > * { animation: ec-monte 0.6s var(--ease-sortie) both; }
.js .ec-levier--famille.est-visible .ec-scene > :nth-child(2) { animation-delay: 0.25s; }
.js .ec-levier--famille.est-visible .ec-scene > :nth-child(3) { animation-delay: 0.5s; }
.js .ec-levier--famille.est-visible .ec-scene > :nth-child(4) { animation-delay: 0.75s; }
/* Téléphone : les supports à la suite, sans chevauchement */
@media (max-width: 47.99em) {
  .ec-scene { display: grid; gap: var(--e-4); height: auto; }
  .ec-scene > * { position: static; width: auto; }
  .ec-portable { margin-inline: 4%; }
  .ec-portable__ecran { aspect-ratio: auto; }
  .ec-site__nav i { display: none; }
  .ec-article { display: none; }
}

/* Résultats Google */
.ec-g { padding: 16px clamp(14px, 3vw, 26px) 18px; font-family: var(--f-rou); color: #202124; }
.ec-g__barre { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0; }
.ec-g__logo { font: 600 1.375rem / 1 var(--f-rou); letter-spacing: -0.03em; background: linear-gradient(90deg, #4285F4 0 20%, #EA4335 20% 36%, #FBBC05 36% 52%, #4285F4 52% 68%, #34A853 68% 82%, #EA4335 82%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ec-g__champ { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: 1; min-width: 0; padding: 9px 16px; border: 1px solid #DFE1E5; border-radius: 999px; box-shadow: 0 1px 6px rgba(32, 33, 36, 0.12); font-size: 0.9375rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ec-g__champ svg { flex: none; width: 16px; height: 16px; fill: none; stroke: #4285F4; stroke-width: 2.4; stroke-linecap: round; }
.ec-g__filtres { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 12px 0 0; padding-bottom: 8px; border-bottom: 1px solid #EBEBEB; font-size: 0.8125rem; color: #5F6368; }
.ec-g__filtres .est-actif { padding-bottom: 6px; border-bottom: 3px solid #1A73E8; color: #1A73E8; font-weight: 500; }
.ec-g__resultat { margin-top: 18px; }
.ec-g__resultat--cabinet { margin-inline: -12px; padding: 12px; border: 1.5px solid var(--or); border-radius: 12px; box-shadow: 0 0 0 4px rgba(224, 189, 142, 0.2); }
.ec-g__site { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 0.8125rem; line-height: 1.35; color: var(--g-gris); }
.ec-g__site b { font-weight: 500; color: #202124; }
.ec-g__favicon { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--rou-bleu); font: 600 0.8125rem / 1 var(--f-rou-titre); color: #fff; }
.ec-g__favicon--gris { background: #E8EAED; }
.ec-g__lien { margin: 6px 0 0; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.3; color: var(--g-bleu); }
.ec-g__extrait { margin: 4px 0 0; font-size: 0.875rem; line-height: 1.55; color: var(--g-gris); }
.ec-g__gris { display: grid; gap: 7px; flex: 1; margin: 8px 0 0; }
.ec-g__gris i { display: block; height: 8px; border-radius: 4px; background: #ECEDEF; }
.ec-g__gris i:nth-child(1) { width: 45%; } .ec-g__gris i:nth-child(2) { width: 80%; }
.ec-g__paa { margin: 20px 0 6px; font-size: 1.0625rem; font-weight: 500; }
.ec-g__question { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 11px 0; border-top: 1px solid #EBEBEB; font-size: 0.9375rem; }
.ec-g__question svg { flex: none; width: 18px; height: 18px; fill: none; stroke: #5F6368; stroke-width: 2; }
.ec-g__sponso { margin: 0 0 6px; font-size: 0.8125rem; font-weight: 700; color: #202124; }
.ec-g__campagne { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--papier); font-size: 0.8125rem; color: var(--encre); }
.ec-g__campagne b { flex-basis: 100%; font: 500 1rem / 1.2 var(--f-titre); color: var(--petrole); }
.ec-g__campagne span { padding: 4px 10px; border: 1px solid var(--lin); border-radius: 999px; background: #fff; }

/* Google Maps */
.ec-m { position: relative; }
.ec-m__plan { position: relative; height: clamp(14rem, 22vw, 16.5rem); background: #EEF0E8; overflow: hidden; }
.ec-m__rues { position: absolute; inset: 0; width: 100%; height: 100%; }
.ec-m__rues path { fill: none; stroke: #fff; stroke-width: 9; stroke-linecap: round; }
.ec-m__rues path + path { stroke-width: 5; }
.ec-m__rues .ec-m__mer { fill: #AFD3E8; stroke: none; }
.ec-m__epingle { position: absolute; width: 22px; height: 22px; border-radius: 50% 50% 50% 0; rotate: -45deg; background: #EA4335; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); }
.ec-m__epingle::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #8E1E14; }
.ec-m__epingle--a { left: 40%; top: 12%; } .ec-m__epingle--b { left: 86%; top: 48%; }
.ec-m__epingle--cabinet { left: 66%; top: 22%; display: grid; place-items: center; width: 38px; height: 38px; background: var(--rou-bleu); box-shadow: 0 0 0 4px rgba(224, 189, 142, 0.6), 0 6px 12px rgba(0, 0, 0, 0.35); }
.ec-m__epingle--cabinet::after { display: none; }
.ec-m__epingle--cabinet b { rotate: 45deg; font: 600 0.9375rem / 1 var(--f-rou-titre); color: #fff; }
.js .ec-levier.est-visible .ec-m__epingle { animation: ec-tombe 0.5s var(--ease-sortie) both; }
.js .ec-levier.est-visible .ec-m__epingle--b { animation-delay: 0.12s; }
.js .ec-levier.est-visible .ec-m__epingle--cabinet { animation-delay: 0.3s; }
.ec-m__fiche { position: absolute; left: 14px; bottom: 14px; width: min(22rem, calc(100% - 28px)); padding: 14px 16px; border-radius: 12px; background: #fff; box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.4); font-family: var(--f-rou); }
.ec-m__nom { margin: 0; font-size: 1.0625rem; font-weight: 600; color: #202124; }
.ec-m__note { margin: 4px 0 0; font-size: 0.8125rem; color: var(--g-gris); }
.ec-m__horaires { margin: 4px 0 0; font-size: 0.8125rem; color: var(--g-gris); }
.ec-m__horaires b { font-weight: 600; color: #137333; }
.ec-m__boutons { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.ec-m__boutons span { padding: 6px 12px; border: 1px solid #DADCE0; border-radius: 999px; font-size: 0.8125rem; font-weight: 500; color: #0B57D0; }
.ec-m__boutons span:first-child { border-color: #0B57D0; background: #0B57D0; color: #fff; }

/* Aperçu IA */
.ec-apercu { margin: 18px clamp(14px, 3vw, 28px) 22px; padding: 18px 20px; border-radius: 16px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(120deg, #4285F4, #9B72CB, #D96570) border-box; border: 1.5px solid transparent; font-family: var(--f-rou); }
.ec-apercu__tete { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1rem; font-weight: 600; color: #202124; }
.ec-apercu__etoile { color: #7B61C9; }
.ec-apercu__texte { margin: 12px 0 0; font-size: 0.9375rem; line-height: 1.65; color: #202124; }
.ec-apercu__texte mark { padding: 0 3px; border-radius: 3px; background: rgba(224, 189, 142, 0.45); color: inherit; }
.ec-apercu__sources { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.ec-apercu__source { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1.5px solid var(--or); border-radius: 999px; font-size: 0.8125rem; color: #202124; }
.ec-apercu__source .ec-g__favicon { width: 22px; height: 22px; font-size: 0.6875rem; }
.ec-apercu__source--gris { width: 9rem; height: 36px; border: 1px solid #E8EAED; background: #F6F7F8; }
.js .ec-levier.est-visible .ec-apercu__texte { animation: ec-frappe 2s steps(40) 0.2s both; }

.js .ec-levier:not(.est-visible) .ec-m__epingle { opacity: 0; }
.js .ec-levier:not(.est-visible) .ec-apercu__texte { clip-path: inset(0 100% 0 0); }
.js .ec-levier:not(.est-visible) .ec-g__resultat--cabinet { opacity: 0; }
.js .ec-levier.est-visible .ec-g__resultat--cabinet { animation: ec-monte 0.6s var(--ease-sortie) 0.5s both; }


/* --------------------------------------------------------------------------
   7. L'IA : l'appel et la fiche
   -------------------------------------------------------------------------- */
.ec-ia__grille { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 64em) { .ec-ia__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ec-ia__exergue { grid-column: 1 / -1; margin-top: 0; }
.ec-appel { padding: 18px; border-radius: 22px; background: linear-gradient(160deg, #134344, #0A3031); box-shadow: 0 2.5rem 4rem -2rem rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(224, 189, 142, 0.18); font-family: var(--f-rou); }
.ec-appel__tete { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.ec-appel__tete p { display: grid; margin: 0; font-size: 0.8125rem; color: #C9D3D0; }
.ec-appel__tete b { font: 600 1rem / 1.3 var(--f-rou-titre); color: #fff; }
.ec-appel__avatar { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--rou-bleu); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25); font: 600 1rem / 1 var(--f-rou-titre); color: #fff; }
.ec-appel__onde { display: flex; align-items: center; gap: 3px; height: 22px; margin-left: auto; }
.ec-appel__onde i { width: 3px; height: 100%; border-radius: 2px; background: var(--or); scale: 1 0.5; }
.js .ec-appel.est-visible .ec-appel__onde i { animation: ec-onde 0.9s ease-in-out 3; }
.js .ec-appel.est-visible .ec-appel__onde i:nth-child(2) { animation-delay: 0.12s; }
.js .ec-appel.est-visible .ec-appel__onde i:nth-child(3) { animation-delay: 0.24s; }
.js .ec-appel.est-visible .ec-appel__onde i:nth-child(4) { animation-delay: 0.36s; }
.js .ec-appel.est-visible .ec-appel__onde i:nth-child(5) { animation-delay: 0.48s; }
.ec-bulle { max-width: 85%; margin: 12px 0 0; padding: 10px 14px; border-radius: 14px; font-size: 0.9375rem; line-height: 1.5; }
.ec-bulle--ia { border-bottom-left-radius: 4px; background: rgba(255, 255, 255, 0.1); color: #F1F1EC; }
.ec-bulle--client { margin-left: auto; border-bottom-right-radius: 4px; background: var(--or-200); color: #1C2A2A; }
.ec-fiche { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: #fff; color: var(--encre); }
.ec-fiche p { display: grid; grid-template-columns: 7.5rem 1fr; gap: 10px; margin: 6px 0 0; font-size: 0.875rem; line-height: 1.45; }
.ec-fiche p span { color: var(--taupe); }
.ec-fiche .ec-fiche__titre { display: block; margin: 0 0 4px; font: 500 1.125rem / 1.2 var(--f-titre); color: var(--petrole); }
.js .ec-appel:not(.est-visible) .ec-bulle, .js .ec-appel:not(.est-visible) .ec-fiche { opacity: 0; }
.js .ec-appel.est-visible .ec-bulle, .js .ec-appel.est-visible .ec-fiche { animation: ec-monte 0.5s var(--ease-sortie) both; }
.js .ec-appel.est-visible .ec-bulle:nth-of-type(1) { animation-delay: 0.3s; }
.js .ec-appel.est-visible .ec-bulle:nth-of-type(2) { animation-delay: 1s; }
.js .ec-appel.est-visible .ec-bulle:nth-of-type(3) { animation-delay: 1.7s; }
.js .ec-appel.est-visible .ec-fiche { animation-delay: 2.5s; }

/* --------------------------------------------------------------------------
   8. Règles : liste cochée et encadré pétrole à double filet
   -------------------------------------------------------------------------- */
.ec-regles__grille { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 64em) { .ec-regles__grille { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }
.ec-regles__sous { margin: 0; font: 500 clamp(1.375rem, 1.25rem + 0.4vw, 1.625rem) / 1.2 var(--f-titre); color: var(--petrole); }
.ec-sources { margin-top: var(--e-5); font-size: 0.9375rem; line-height: 1.55; color: var(--taupe); }
.ec-sceau { position: relative; padding: clamp(1.75rem, 3vw, 2.5rem); background: var(--petrole); color: var(--creme); outline: 1px solid var(--or-400); outline-offset: -10px; box-shadow: inset 0 0 0 14px var(--petrole), inset 0 0 0 15px rgba(224, 189, 142, 0.45); }
.ec-sceau__texte { margin: 0; font: 500 clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem) / 1.4 var(--f-titre); color: var(--creme); text-wrap: pretty; }
.ec-sceau .ec-or { color: var(--or-clair); }
.ec-sceau .lien-suite.ec-lien { color: var(--or-clair); text-decoration-color: rgba(224, 189, 142, 0.5); }
.ec-sceau .lien-suite.ec-lien:hover { color: var(--creme); }

/* --------------------------------------------------------------------------
   9. Prix : le forfait à gauche, le tableau à droite
   10. Méthode : quatre étapes en colonnes à filets
   11. FAQ : composant commun faq5 (rien à ajouter)
   12. Qui s'occupe de votre cabinet, et la carte de France
   -------------------------------------------------------------------------- */
.ec-prix__grille { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 60em) { .ec-prix__grille { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; } }
.ec-remuneration { margin: 0; padding: var(--e-4) var(--e-5); border-left: 2px solid var(--or); background: rgba(255, 255, 255, 0.05); font-size: 1.0625rem; line-height: 1.6; color: var(--creme); }
.ec-budget { padding: clamp(1.25rem, 2.5vw, 2rem); border-radius: 6px; background: var(--papier); color: var(--encre); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6); }
.ec-budget__table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.ec-budget__table th, .ec-budget__table td { padding: 0.8rem 0; border-bottom: 1px solid var(--lin); text-align: left; vertical-align: top; }
.ec-budget__table thead th { padding-top: 0; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--taupe); }
.ec-budget__table thead th:last-child { text-align: right; }
.ec-budget__table tbody th { padding-right: var(--e-4); font-weight: 500; color: var(--petrole); }
.ec-budget__table tbody th a { color: var(--petrole); text-decoration-color: var(--or-400); text-underline-offset: 3px; }
.ec-budget__table tbody th span { display: block; margin-top: 4px; font-size: 0.9375rem; font-weight: 400; line-height: 1.5; color: var(--taupe); }
.ec-budget__table td { min-width: 9rem; text-align: right; font-weight: 500; color: var(--petrole); }
.ec-budget__offert td { font: italic 500 1.25rem / 1.2 var(--f-titre); color: var(--or-texte); }
@media (max-width: 29.99em) { .ec-budget__table td { min-width: 6.5rem; font-size: 0.9375rem; } }

.ec-etapes { display: grid; gap: var(--e-5); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--lin); }
@media (min-width: 40em) { .ec-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .ec-etapes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; } }
.ec-etapes li { padding-top: var(--e-5); }
@media (min-width: 64em) { .ec-etapes li { padding: var(--e-6) var(--e-5) 0; border-left: 1px solid var(--lin); } .ec-etapes li:first-child { padding-left: 0; border-left: 0; } }
.ec-etapes__num { display: block; font: 300 2.75rem / 1 var(--f-titre); color: var(--or-texte); }
.ec-etapes__titre { margin: var(--e-3) 0 0; font: 500 clamp(1.375rem, 1.25rem + 0.4vw, 1.625rem) / 1.2 var(--f-titre); color: var(--petrole); }
.ec-etapes p { margin: var(--e-3) 0 0; font-size: 1.0625rem; line-height: 1.6; color: var(--encre); }
.ec-methode__bas { display: grid; gap: var(--e-5); margin-top: clamp(2rem, 4vw, 3rem); align-items: start; }
@media (min-width: 64em) { .ec-methode__bas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ec-methode__bas .ec-texte { margin-top: 0; } }
.ec-cote { margin: 0; padding: var(--e-4) var(--e-5); border-left: 2px solid var(--or-400); background: #FBF8F2; font-size: var(--t-corps); line-height: 1.6; color: var(--encre); }
.ec-cote strong { font-weight: 500; color: var(--petrole); }

.ec-lieu__grille { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 60em) { .ec-lieu__grille { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; } }
.ec-lieu__nice { color: var(--taupe); }

/* Carte de France (reprise de la page Syndics à l’identique, préfixe ec-) */
.ec-carte { position: relative; margin: 0; padding: clamp(1rem, 2.5vw, 2rem) clamp(1rem, 2.5vw, 2rem) clamp(0.75rem, 2vw, 1.25rem); border-radius: 12px; background: radial-gradient(ellipse 55% 45% at 82% 68%, rgba(176, 99, 57, 0.22), transparent 70%), radial-gradient(ellipse 80% 70% at 45% 40%, rgba(224, 189, 142, 0.1), transparent 70%), linear-gradient(160deg, var(--petrole), var(--petrole-900)); box-shadow: 0 2.5rem 4rem -2rem rgba(2, 24, 24, 0.6); overflow: hidden; }
.ec-carte__svg { display: block; width: 100%; height: auto; overflow: visible; }
#ec-points circle { fill: var(--or); opacity: 0.32; }
.ec-carte__trame { fill: url(#ec-points); }
.ec-carte__contour { fill: none; stroke: var(--or); stroke-width: 1.3; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 0.85; }
.ec-carte__arc { fill: none; stroke: var(--or-clair); stroke-width: 1.1; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 0.6; }
.ec-carte__ville { fill: var(--or); transform-box: fill-box; transform-origin: center; }
.ec-carte__ville--grande { fill: var(--or-clair); filter: drop-shadow(0 0 4px rgba(242, 217, 172, 0.7)); }
.ec-carte__nom { fill: var(--creme); font: 400 13px / 1 var(--f-texte); letter-spacing: 0.02em; opacity: 0.9; }
.ec-carte__nom--nice { fill: var(--or-clair); font: italic 500 22px / 1 var(--f-titre); opacity: 1; }
.ec-carte__nice { fill: var(--cuivre); stroke: var(--or-clair); stroke-width: 2; }
.ec-carte__onde { fill: none; stroke: var(--or-clair); stroke-width: 1.6; opacity: 0; transform-box: fill-box; transform-origin: center; }
.ec-carte__halo { opacity: 0.9; }
.ec-carte__legende { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: var(--e-3) 0 0; font-size: 0.875rem; color: var(--creme-doux); }
.ec-carte__legende span { display: inline-flex; align-items: center; gap: 0.5rem; }
.ec-carte__puce { width: 10px; height: 10px; border-radius: 50%; background: var(--cuivre); box-shadow: 0 0 0 3px rgba(176, 99, 57, 0.3); }
.ec-carte__puce--ville { width: 7px; height: 7px; background: var(--or-clair); box-shadow: 0 0 6px rgba(242, 217, 172, 0.8); }
.ec-carte__pause { position: absolute; top: 0.75rem; right: 0.75rem; display: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(224, 189, 142, 0.55); border-radius: 50%; background: rgba(2, 24, 24, 0.55); color: var(--or-clair); cursor: pointer; }
.js .ec-carte__pause { display: grid; }
.ec-carte__pause svg { width: 18px; height: 18px; fill: currentColor; }
.ec-carte__lire { display: none; }
.ec-carte.est-en-pause .ec-carte__lire { display: block; }
.ec-carte.est-en-pause .ec-carte__arret { display: none; }
.ec-carte__pause:hover { background: var(--petrole); }
.ec-carte__pause:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }

/* Avant l'arrivée à l'écran (avec JavaScript) */
.js .ec-carte:not(.est-visible) .ec-carte__contour { stroke-dashoffset: 1; }
.js .ec-carte:not(.est-visible) .ec-carte__arc { stroke-dashoffset: 1; }
.js .ec-carte:not(.est-visible) .ec-carte__trame, .js .ec-carte:not(.est-visible) .ec-carte__nom { opacity: 0; }
.js .ec-carte:not(.est-visible) .ec-carte__ville { opacity: 0.15; }
/* À l'arrivée : contour (1,4 s), trame, liens depuis Nice et villes qui s'allument en vague (jusqu'à 4,6 s) */
.js .ec-carte.est-visible .ec-carte__contour { animation: ec-trace 1.4s ease-in-out both; }
.js .ec-carte.est-visible .ec-carte__trame { animation: ec-apparait-trame 1.2s ease 0.6s both; }
.js .ec-carte.est-visible .ec-carte__arc { animation: ec-trace 1.1s ease-out var(--d) both; }
.js .ec-carte.est-visible .ec-carte__ville { animation: ec-allume 0.5s ease-out var(--d) both; }
.js .ec-carte.est-visible .ec-carte__ville--grande { animation: ec-allume 0.5s ease-out var(--d) both, ec-scintille 3.2s ease-in-out calc(var(--d) + 1.2s) infinite; }
.js .ec-carte.est-visible.est-en-pause .ec-carte__ville--grande { animation-play-state: paused; }
@keyframes ec-scintille { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.js .ec-carte.est-visible .ec-carte__nom { animation: ec-apparait-nom 0.5s ease var(--d) both; }
.js .ec-carte.est-visible .ec-carte__nom--nice { animation: none; }
/* Nice clignote en continu (bouton pause) */
.ec-carte .ec-carte__onde { animation: ec-pulse 2.4s ease-out infinite; }
.ec-carte .ec-carte__onde--2 { animation-delay: 1.2s; }
.ec-carte .ec-carte__nice { animation: ec-battement 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.ec-carte.est-en-pause .ec-carte__onde, .ec-carte.est-en-pause .ec-carte__nice { animation-play-state: paused; }
@keyframes ec-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ec-apparait-trame { from { opacity: 0; } to { opacity: 1; } }
@keyframes ec-apparait-nom { from { opacity: 0; } to { opacity: 0.9; } }
@keyframes ec-allume { 0% { opacity: 0.15; scale: 0.4; } 60% { opacity: 1; scale: 1.8; } 100% { opacity: 1; scale: 1; } }
@keyframes ec-pulse { from { opacity: 0.9; scale: 1; } to { opacity: 0; scale: 4.2; } }
@keyframes ec-battement { 0%, 100% { scale: 1; } 50% { scale: 1.18; } }


/* --------------------------------------------------------------------------
   Appel final sur photo
   -------------------------------------------------------------------------- */
.ec-final { position: relative; isolation: isolate; overflow: hidden; }
.ec-final__fond { position: absolute; inset: 0; z-index: -2; }
.ec-final__fond > img.ec-photo__img { object-position: 65% 40%; }
.ec-final::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6, 42, 43, 0.95) 0%, rgba(6, 42, 43, 0.86) 38%, rgba(6, 42, 43, 0.35) 70%, rgba(6, 42, 43, 0.2) 100%); }
@media (max-width: 59.99em) { .ec-final::after { background: rgba(6, 42, 43, 0.86); } }
.ec-final .ec-photo:not(.a-image)::before { left: auto; right: 1rem; }
.ec-final__contenu { position: relative; padding-block: clamp(1rem, 3vw, 2.5rem); }
.ec-final__contenu .ec-filet { margin: 0 0 var(--e-5); }
@media (min-width: 60em) { .ec-final .titre-section, .ec-final__texte { max-width: 36rem; } }
.ec-final__texte { margin-top: var(--e-5); font-size: var(--t-corps); line-height: 1.65; color: var(--creme); }
.ec-final__contact { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: var(--e-5); font-size: 1rem; color: var(--creme-doux); }
.ec-final__contact a { color: var(--creme); text-underline-offset: 4px; }
.ec-final__contact a:hover { color: var(--or-clair); }

/* --------------------------------------------------------------------------
   Moins d'animations : tout est fixe dans son état final
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ec-carte__pause { display: none !important; }
  .ec *, .ec *::before, .ec *::after { animation: none !important; transition: none !important; }
  .js .ec-photo-cadre .ec-recherche, .js .ec-levier--famille .ec-scene > *, .js .ec-levier .ec-m__epingle, .js .ec-levier .ec-g__resultat--cabinet,
  .js .ec-rapport .ec-constat, .js .ec-rapport .ec-rapport__priorite,
  .js .ec-avap__duo .ec-ecran--apres,
  .js .ec-appel .ec-bulle, .js .ec-appel .ec-fiche { opacity: 1 !important; translate: none !important; }
  .js .ec-levier .ec-apercu__texte { clip-path: none !important; }
}



/* --------------------------------------------------------------------------
   Retouches du 25/10/2026 (note 6/10 → corrections)
   -------------------------------------------------------------------------- */
/* 1. Être choisi : photo plus étroite, questions plus grandes */
@media (min-width: 60em) { .ec-choisi .ec-duo { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr); } }
.ec-choisi .ec-photo-cadre { max-width: 21rem; }
.ec-choisi .ec-questions { gap: var(--e-5); }
.ec-choisi .ec-question { min-height: 8.5rem; padding: var(--e-6) var(--e-5); align-items: center; }
.ec-choisi .ec-question__picto { width: 40px; height: 40px; }
.ec-choisi .ec-question p { font-size: clamp(1.375rem, 1.25rem + 0.45vw, 1.6875rem); line-height: 1.25; }
.ec-choisi .ec-texte { font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem); }

/* 2. Objectif : liste en deux colonnes, photo plus petite à droite */
.ec-objectifs__grille { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 60em) { .ec-objectifs__grille { grid-template-columns: minmax(0, 1fr) 17rem; align-items: start; } }
.ec-photo-cadre--petit { max-width: 17rem; }
.ec-liste--deux { border-bottom: 1px solid var(--lin); }
.ec-liste--deux li:last-child { border-bottom: 0; }
@media (min-width: 40em) { .ec-liste--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 2.5rem); } }
.ec-objectifs .ec-liste li { padding: var(--e-5) 0; }

/* 4b. Prix : le montant sur une ligne */
.ec-budget__table td { min-width: 8rem; }
.ec-budget__table td b { display: block; white-space: nowrap; font: 500 1.25rem / 1.2 var(--f-titre); color: var(--petrole); }
.ec-budget__de, .ec-budget__per { display: block; font-size: 0.8125rem; font-weight: 400; line-height: 1.3; color: var(--taupe); }

/* 4c. Écran « Avant » : un site daté, crédible */
.ec-page-avant { padding: 0; filter: none; font-family: "Times New Roman", Times, serif; color: #333; background: #fff; }
.ec-page-avant__entete { display: flex; align-items: baseline; gap: 10px; margin: 0; padding: 14px 18px; background: linear-gradient(#5B6B7C, #3E4C5B); font-size: 1.125rem; font-weight: 700; letter-spacing: 0.08em; color: #fff; }
.ec-page-avant__entete small { font-size: 0.8125rem; font-weight: 400; font-style: italic; letter-spacing: 0; color: #D9DEE4; }
.ec-page-avant__menu { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 7px 18px; background: #E6E9EC; border-bottom: 1px solid #C9CED4; font-size: 0.875rem; color: #888; }
.ec-page-avant__menu span { width: auto; height: auto; background: none; color: #1F3FA6; text-decoration: underline; }
.ec-page-avant__corps { padding: 16px 18px 6px; }
.ec-page-avant__titre { margin: 0; font-size: 1.5rem; font-weight: 700; color: #333; }
.ec-page-avant__texte { margin: 10px 0 0; padding: 0; font-size: 1.0625rem; line-height: 1.5; color: #333; }
.ec-page-avant__texte p { margin: 0; }
.ec-page-avant__liste { margin: 12px 0 0; padding-left: 20px; list-style: square; font-size: 0.9375rem; line-height: 1.7; color: #1F3FA6; }
.ec-page-avant__liste li { text-decoration: underline; }
.ec-page-avant__pied { margin: 8px 0 0; padding: 8px 18px; border-top: 1px solid #DDD; font-size: 0.75rem; color: #888; }
.ec-ecran--avant .ec-ecran__etiquette { top: auto; bottom: 14px; }

.ec-insecable { white-space: nowrap; }

/* Avant, après : deux boutons pour basculer d'une page à l'autre (ajoutés par le script ; sans lui, les deux écrans restent côte à côte) */
.ec-avap__duo.est-bascule { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-5); max-width: 52rem; margin-inline: auto; }
.ec-bascule { display: flex; gap: 6px; width: max-content; margin: 0 auto; padding: 5px; border: 1px solid var(--lin); border-radius: 999px; background: #fff; box-shadow: 0 0.75rem 1.5rem -1rem rgba(2, 24, 24, 0.3); }
.ec-bascule[hidden] { display: none; }
.ec-bascule button { min-height: 44px; padding: 8px 28px; border: 0; border-radius: 999px; background: transparent; font: 600 0.875rem / 1 var(--f-texte); letter-spacing: 0.14em; text-transform: uppercase; color: var(--petrole); cursor: pointer; transition: background var(--d-courte), color var(--d-courte); }
.ec-bascule button:hover { background: var(--creme); }
.ec-bascule button[aria-pressed="true"] { background: var(--petrole); color: var(--or-clair); }
.ec-bascule button:focus-visible { outline: 2px solid var(--petrole); outline-offset: 3px; }
.est-bascule .ec-ecran { grid-area: 2 / 1; display: flex; flex-direction: column; transition: opacity 0.45s var(--ease-sortie); }
.est-bascule .ec-ecran__page { flex: 1; }
.est-bascule .ec-ecran__etiquette { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.est-bascule[data-vue="apres"] .ec-ecran--avant, .est-bascule[data-vue="avant"] .ec-ecran--apres { opacity: 0; pointer-events: none; }
.js .est-bascule .ec-ecran--apres { translate: none; }

/* Téléphone : page plus courte (une scène réduite à ses supports principaux) */
@media (max-width: 47.99em) {
  .ec-charte, .ec-atelier, .ec-post, .ec-notif { display: none; }
}

/* Téléphone : page resserrée (questions sur deux colonnes, photos moins larges, écrans réduits) */
@media (max-width: 47.99em) {
  .ec-choisi .ec-photo-cadre, .ec-objectifs .ec-photo-cadre { max-width: 15rem; }
  .ec-choisi .ec-questions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
  .ec-choisi .ec-question { flex-direction: column; align-items: flex-start; gap: var(--e-2); min-height: 0; padding: var(--e-4); }
  .ec-choisi .ec-question__picto { width: 28px; height: 28px; }
  .ec-choisi .ec-question p { font-size: 1.125rem; }
  .ec-levier__ecran .ec-vue { zoom: 0.82; }
  .ec-g__filtres, .ec-g__paa, .ec-g__question, .ec-relances__pied { display: none; }
  .ec-levier__texte p { font-size: 1.0625rem; }
  .ec-levier + .ec-levier { margin-top: var(--e-6); }
}

/* --------------------------------------------------------------------------
   Corrections du contrôle des agents (25/10/2026) : Pauline, Octave
   -------------------------------------------------------------------------- */
/* Pauline 3 : téléphone entier sur tablette et petit ordinateur */
@media (min-width: 48em) and (max-width: 63.99em) { .ec-haut__tel { scale: 0.7; } }
@media (min-width: 64em) and (max-width: 79.99em) { .ec-haut__tel { scale: 0.85; } }

/* Octave 3 : la carte de l'appel aux couleurs du Cabinet Lisandre */
.ec-appel { background: linear-gradient(160deg, #1E3550, #15263B); box-shadow: 0 2.5rem 4rem -2rem rgba(2, 24, 24, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.ec-appel__tete p { color: rgba(255, 255, 255, 0.78); }
.ec-appel__onde i { background: #E99A82; }
.ec-bulle--ia { background: rgba(255, 255, 255, 0.12); color: #fff; }
.ec-bulle--client { background: #F4E3DD; color: #1E3550; }
.ec-fiche { color: #22303D; }
.ec-fiche p span { color: #56606B; }
.ec-fiche .ec-fiche__titre { font: 600 1.0625rem / 1.2 var(--f-rou-titre); color: #1E3550; }

/* Octave 4 : « On part de votre objectif » sur fond sombre */
.ec-objectifs .ec-liste li, .ec-objectifs .ec-liste--deux { border-color: var(--filet-couleur); }
.ec-objectifs .ec-liste__titre { color: var(--titre); }
.ec-objectifs .ec-liste p { color: var(--texte-doux); }

/* Octave 5 : scènes sans cartes qui se cachent */
.ec-scene--convaincre .ec-site__rdv { display: none; }
@media (min-width: 48em) {
  .ec-scene--automatiser .ec-relances { top: 0; }
  .ec-scene--automatiser .ec-notif { bottom: 0; }
}
@media (min-width: 48em) and (max-width: 79.99em) {
  .ec-levier--famille, .ec-levier--famille.ec-levier--inverse { grid-template-columns: minmax(0, 1fr); }
  .ec-levier--famille .ec-levier__ecran { order: 0; }
  .ec-levier--famille .ec-scene { max-width: 46rem; width: 100%; margin-inline: auto; }
  .ec-scene--convaincre .ec-site__missions { display: none; }
}
@media (min-width: 80em) { .ec-scene--automatiser { height: clamp(26rem, 36vw, 31rem); } }

/* Octave 6 : Google Maps, la fiche passe sous le plan (l'épingle du cabinet reste visible) */
@media (max-width: 79.99em) {
  .ec-m__plan { height: 10rem; }
  .ec-m__fiche { position: relative; left: auto; bottom: auto; width: auto; margin: -1.75rem 12px 12px; }
}

/* Octave 9 : téléphone, questions sur une colonne, barres de recherche sur une ligne */
@media (max-width: 29.99em) {
  .ec-choisi .ec-questions { grid-template-columns: minmax(0, 1fr); }
  .ec-choisi .ec-question { flex-direction: row; align-items: center; gap: var(--e-4); padding: var(--e-4) var(--e-5); }
}
@media (max-width: 47.99em) {
  .ec-choisi .ec-photo-cadre, .ec-objectifs .ec-photo-cadre { max-width: 17.5rem; }
  .ec-recherche { left: 10px; right: 10px; padding: 9px 12px; font-size: 0.8125rem; white-space: nowrap; }
}

/* Octave 10 : chiffres alignés (le « 1 » ne se lit plus « I ») */
.ec-etapes__num, .ec-levier__num, .ec-budget__table td b, .ec-rapport__rubrique b { font-variant-numeric: lining-nums; }

/* Octave 11 : le bloc de gauche accompagne la lecture (prix, scènes) */
@media (min-width: 60em) { .ec-prix__grille > div:first-child { position: sticky; top: calc(var(--h-entete) + 1.5rem); } }
@media (min-width: 80em) {
  .ec-levier--famille { align-items: start; }
  .ec-levier--famille .ec-levier__ecran { position: sticky; top: calc(var(--h-entete) + 2rem); }
}

/* Octave 12 : photo de « Être choisi » alignée sur la marge */
@media (min-width: 60em) { .ec-choisi .ec-photo-cadre { justify-self: start; } }

/* Octave 13 : écrans Google en Arial ; « Votre campagne » en légende sous la fenêtre */
.ec-g, .ec-m, .ec-apercu, .ec-recherche, .ec-navigateur { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; }
.ec-levier__ecran > .ec-g__campagne { margin: var(--e-4) 0 0; padding: 0; background: none; color: var(--creme-doux); }
.ec-levier__ecran > .ec-g__campagne b { color: var(--or-clair); }
.ec-levier__ecran > .ec-g__campagne span { border-color: rgba(224, 189, 142, 0.4); background: rgba(255, 255, 255, 0.06); color: var(--creme); }

/* Octave 15 : appel final, ligne de contact au téléphone */
@media (max-width: 29.99em) { .ec-final__contact span { display: none; } }

/* Note sous le tableau des prix (Gaspard) */
.ec-budget__note { margin: var(--e-4) 0 0; font-size: 0.9375rem; line-height: 1.5; color: var(--taupe); }

/* Pauline (recontrôle) : scène « Automatiser » plus haute de 768 à 1 279 px, plus rien de caché */
@media (min-width: 48em) and (max-width: 79.99em) { .ec-scene--automatiser { height: 30rem; } }