/* ══════════════════════════════════════════════════════════════════
   EOCHE v2 : lecture du blog (page /blog/ et articles)
   Fichier STABLE, cite par le gabarit du robot SEO (lib-seo.js) :
   ne jamais le renommer. Se charge apres eoche.v2.css.

   Les classes stylees ici sont celles que le robot produit et relit
   (blog-card, article-body, article-toc, article-lead, article-faq,
   article-cta, article-related...). On ne change pas le HTML des
   articles : toute la mise en page vit dans cette feuille.
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   PAGE /blog/
   ══════════════════════════════════════════════════════════════════ */
/* En-tete compact : on vient lire, les articles doivent arriver vite a l'ecran. */
.blog-heros { padding-bottom: clamp(72px, 8vw, 104px); }
.blog-heros .page-heros__titre { max-width: 18ch; }
/* Tablette et ordinateur : titre plus compact que les autres pages. Sur telephone, il suit l'echelle
   commune de eoche.v2.css, comme le titre de toutes les pages. */
@media (min-width: 768px) {
  .blog-heros .page-heros__titre { font-size: clamp(36px, 4.3vw, 62px); line-height: 1.02; }
}
.blog-heros .page-heros__chapeau { max-width: 50ch; }
.blog-heros .page-heros__marque { width: min(340px, 100%); }
@media (max-width: 1023px) {
  /* Sur tablette et telephone, pas de monogramme en tete : reduit a 76 px, il ne se lisait plus
     et doublait le logo de l'en-tete. Les articles arrivent plus vite, et le grand monogramme
     vivant signe l'appel final en bas de page. */
  .blog-heros .page-heros__visuel { display: none; }
}
@media (max-width: 639px) {
  /* Un seul bouton sous le pouce : le telephone reste dans la barre mobile, qui prend le relais
     des que l'en-tete sort de l'ecran. Le premier article remonte dans le premier ecran. */
  .blog-heros .heros__actions .bouton--sombre { display: none; }
}
.blog-auteur {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  font-size: 16px;
  line-height: 1.45;
  color: #D4D4D8;
}
.blog-auteur b { color: #fff; font-weight: 600; }
.blog-auteur__photo {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.16);
}

.blog-liste { padding-top: clamp(56px, 7vw, 96px); }
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
}

/* Carte du robot : article.blog-card > p.blog-card__meta, h2 > a, p, a.blog-card__link */
.blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: clamp(24px, 2.4vw, 32px);
  border-radius: var(--r-l);
  background: #fff;
  border: 1px solid var(--ligne-claire);
  box-shadow: var(--ombre-claire);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(9, 9, 11, 0.05), 0 30px 50px -28px rgba(9, 9, 11, 0.34); }
.blog-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--rouge-profond);
}
.blog-card__meta time { font-weight: 500; color: var(--texte-clair-2); }
.blog-card h2 {
  font-size: clamp(22px, 1.65vw, 24px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--texte-clair);
  text-wrap: balance;
}
/* Toute la carte est cliquable : le lien du titre s'etend sur la carte. */
.blog-card h2 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-l); }
.blog-card h2 a:focus-visible { outline: none; }
.blog-card:focus-within { outline: 2px solid var(--rouge); outline-offset: 3px; }
.blog-card > p:not(.blog-card__meta) {
  font-size: 17px;
  line-height: 1.55;
  color: #3F3F46;
}
.blog-card__link {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: auto;
  font-size: 16px;
  font-weight: 600;
  color: var(--texte-clair);
}
.blog-card__link span { color: var(--rouge); transition: transform 0.35s var(--ease); }
.blog-card:hover .blog-card__link span { transform: translateX(4px); }

/* Le dernier article publie est a la une : la premiere carte prend toute la largeur. */
.blog-grid > .blog-card:first-of-type { grid-column: 1 / -1; }
.blog-grid > .blog-card:first-of-type h2 {
  font-size: clamp(27px, 3.2vw, 46px);
  font-weight: 580;
  letter-spacing: -0.032em;
  line-height: 1.08;
}
.blog-grid > .blog-card:first-of-type > p:not(.blog-card__meta) { font-size: clamp(17px, 1.3vw, 19px); }

/* Passerelle vers l'abonnement : placee apres la septieme carte par l'ordre de la grille,
   elle suit donc toute seule quand le robot ajoute des articles en tete. */
.blog-offre {
  order: 1;
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
  padding: clamp(28px, 4vw, 56px);
  border-radius: var(--r-l);
  background: var(--noir);
  color: var(--texte-sombre);
}
.blog-grid > .blog-card:nth-of-type(n+8) { order: 2; }
.blog-offre__texte { max-width: 640px; }
.blog-offre__titre {
  font-size: clamp(26px, 2.8vw, 38px);
  font-weight: 580;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: #fff;
}
.blog-offre p { margin-top: 12px; font-size: 17px; line-height: 1.55; color: #D4D4D8; }

.blog-suite {
  max-width: 72ch;
  margin-top: clamp(36px, 5vw, 56px);
  font-size: 17px;
  line-height: 1.75;
  color: #3F3F46;
}
.blog-suite a { color: var(--rouge-profond); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Une carte qui s'etire sur toute la ligne garde des lignes de lecture courtes. */
.blog-card > p:not(.blog-card__meta) { max-width: 62ch; }
/* Fin de grille sans trou : la derniere carte, seule sur sa ligne, prend la place libre.
   Calcule sur le rang de la carte, donc juste quel que soit le nombre d'articles publies
   par le robot (six cartes avant le bandeau, les suivantes apres). */
@media (min-width: 640px) and (max-width: 1023px) {
  .blog-grid > .blog-card:nth-of-type(n+8):nth-of-type(even):last-of-type { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .blog-grid > .blog-card:nth-of-type(n+8):nth-of-type(3n+2):last-of-type { grid-column: 1 / -1; }
  .blog-grid > .blog-card:nth-of-type(n+8):nth-of-type(3n):last-of-type { grid-column: span 2; }
}

@media (min-width: 900px) {
  .blog-grid > .blog-card:first-of-type {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    gap: 14px clamp(40px, 6vw, 96px);
    padding: clamp(36px, 4vw, 56px);
  }
  .blog-grid > .blog-card:first-of-type .blog-card__meta { grid-column: 1; grid-row: 1; }
  .blog-grid > .blog-card:first-of-type h2 { grid-column: 1; grid-row: 2 / 4; align-self: start; }
  .blog-grid > .blog-card:first-of-type > p:not(.blog-card__meta) { grid-column: 2; grid-row: 1 / 3; align-self: end; }
  .blog-grid > .blog-card:first-of-type .blog-card__link { grid-column: 2; grid-row: 3; margin-top: 0; }
}
@media (max-width: 1023px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .blog-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .blog-card { padding: 22px 20px; gap: 12px; }
  /* Echelle commune sur telephone : un titre de carte ou d'encadre a la taille d'un H3 (22 px).
     L'article a la une garde sa place en tete de liste, sans titre plus gros que les autres. */
  .blog-grid > .blog-card:first-of-type h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
  .blog-offre { padding: 28px 22px; }
  .blog-offre__titre { font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; }
  .blog-offre .bouton { width: 100%; }
  /* Liens de la phrase de fin plus espaces sous le doigt */
  .blog-suite { line-height: 1.95; }
}

/* ══════════════════════════════════════════════════════════════════
   TELEPHONE : barre d'action et assistant sur une seule ligne
   Sur le blog et les articles, la bulle de l'assistant flottait
   au-dessus de la barre et masquait la fin des lignes de lecture.
   Elle se range a droite de la barre : un seul bandeau en bas d'ecran.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .page-article .barre-mobile,
  .page-blog .barre-mobile { right: 76px; }
  .page-article .eoche-chat-launcher,
  .page-blog .eoche-chat-launcher {
    right: 10px;
    bottom: calc(13px + env(safe-area-inset-bottom));
    width: 58px;
    height: 58px;
  }
  .page-article .eoche-chat-panel,
  .page-blog .eoche-chat-panel { bottom: calc(86px + env(safe-area-inset-bottom)); }
}

/* ══════════════════════════════════════════════════════════════════
   ARTICLE : barre de lecture (data-progression, eoche.v2.js)
   ══════════════════════════════════════════════════════════════════ */
.article-progression {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  height: 3px;
  background: var(--rouge);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════
   ARTICLE : en-tete (section.blog-hero produite par le robot)
   ══════════════════════════════════════════════════════════════════ */
.page-article .portfolio-shell { width: min(720px, 100% - 2 * var(--gouttiere)); margin-inline: auto; }
.page-article .blog-hero {
  position: relative;
  padding: clamp(118px, 16vh, 172px) 0 clamp(92px, 10vw, 140px);
  background: var(--noir);
  color: var(--texte-sombre);
  color-scheme: dark;
}
.page-article .blog-hero h1 {
  max-width: 21ch;
  font-size: clamp(36px, 4.6vw, 60px);
  font-weight: 560;
  letter-spacing: -0.038em;
  line-height: 1.04;
  color: #fff;
}
.page-article .portfolio-kicker {
  margin-bottom: 18px;
  font-size: 15px;
  font-weight: 600;
  color: #FF8C6E;
}
.article-fil { margin-bottom: 18px; font-size: 15px; line-height: 1.5; color: #A1A1AA; }
.article-fil a { color: #E4E4E7; }
.article-fil a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.article-fil span[aria-hidden] { margin: 0 6px; opacity: 0.6; }
.article-fil__ici { color: #FF8C6E; }
/* Le fil d'Ariane donne deja la rubrique : le surtitre du robot devient inutile. */
.article-fil + .portfolio-kicker { display: none; }

/* Ligne d'auteur : la photo de Baptiste est posee par la feuille, le HTML du robot ne change pas. */
.page-article .blog-meta {
  position: relative;
  display: block;
  min-height: 44px;
  margin-top: 28px;
  padding-left: 56px;
  font-size: 15.5px;
  line-height: 1.5;
  color: #D4D4D8;
}
.page-article .blog-meta::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border-radius: 50%;
  vertical-align: middle;
  background: #27272A url("/assets/images/team/baptiste-eoche-160.webp") center / cover no-repeat;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.14);
}

/* ══════════════════════════════════════════════════════════════════
   ARTICLE : la feuille de lecture
   ══════════════════════════════════════════════════════════════════ */
.page-article .article-section {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * clamp(40px, 5vw, 64px));
  padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 7vw, 96px);
  border-radius: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px) 0 0;
  background: var(--blanc);
  color: var(--texte-clair);
}
.article-body {
  font-size: 18px;
  line-height: 1.72;
  color: #2A2A30;
  overflow-wrap: break-word;
}
.article-body > * { margin: 0; }
.article-body > * + * { margin-top: 1.15em; }
.article-body :where(p, li) { text-wrap: pretty; }
.article-body h2 {
  margin-top: 2.1em;
  font-size: clamp(32px, 2.4vw, 34px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--texte-clair);
  scroll-margin-top: 110px;
}
.article-body h3 {
  margin-top: 1.7em;
  font-size: clamp(22px, 1.6vw, 23px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--texte-clair);
  scroll-margin-top: 110px;
}
.article-body > h2 + *, .article-body > h3 + * { margin-top: 0.6em; }
/* Intertitres et sommaire : coupure « pretty » plutot que « balance ». L'equilibrage cherchait
   des lignes egales et coupait volontiers sur un trait d'union (« pouvez- / vous », « e- / commerce »).
   Le titre principal garde l'equilibrage. */
.article-body h2, .article-body h3, .article-toc a { text-wrap: pretty; }
/* Mot compose a garder entier (« e-commerce », « peut-on ») si le robot l'entoure de cette classe. */
.page-article .insecable, .page-blog .insecable { white-space: nowrap; }
.article-body a { color: var(--rouge-profond); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.article-body a:hover { color: var(--texte-clair); }
/* Adresse e-mail et numero de telephone jamais coupes en deux (« contact@agence- / eoche.fr ») */
.article-body a:is([href^="mailto:"], [href^="tel:"]) { white-space: nowrap; }
.article-body strong, .article-body b { font-weight: 650; color: var(--texte-clair); }
.article-body ul, .article-body ol { padding-left: 1.3em; }
.article-body li + li { margin-top: 0.55em; }
.article-body li::marker { color: var(--rouge-profond); font-weight: 700; }
.article-body hr { height: 1px; border: 0; background: var(--ligne-claire); margin-block: 2.4em; }
.article-body img { border-radius: var(--r-m); }

/* Chapeau : la reponse courte, lue en premier (et par les moteurs, balise speakable). */
.article-lead {
  font-size: clamp(19px, 1.55vw, 21.5px);
  line-height: 1.62;
  color: var(--texte-clair);
}
.article-lead strong { font-weight: 650; }

/* Couverture fabriquee par le robot (cover.js) : c'est une carte de partage (og:image), avec le
   titre imprime, une pastille de rubrique et un halo. Posee sous le titre, elle le repetait mot
   pour mot et prenait tout le premier ecran du telephone. Elle reste dans le HTML (le robot et
   son test la relisent, les reseaux sociaux l'affichent) mais pas dans la page. */
.article-cover { display: none; }
.article-body > .article-cover + * { margin-top: 0; }

/* Citations et encadres */
.article-body blockquote {
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--rouge);
  font-size: 1.06em;
  color: var(--texte-clair);
}
.article-body blockquote p + p { margin-top: 0.8em; }
.article-body blockquote cite, .article-body figcaption { display: block; margin-top: 10px; font-size: 15px; font-style: normal; color: var(--texte-clair-2); }
.article-body aside,
.article-body .article-note,
.article-body .article-encadre {
  padding: 20px 24px;
  border-radius: var(--r-m);
  background: #F4F4F2;
  border: 1px solid var(--ligne-claire);
}

/* Tableaux */
.article-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(9, 9, 11, 0.1);
  border-radius: var(--r-m);
  /* Ombres de defilement : sur telephone, une ombre au bord signale les colonnes cachees. */
  background:
    linear-gradient(90deg, #fff 30%, rgba(255, 255, 255, 0)) left center / 40px 100% no-repeat local,
    linear-gradient(270deg, #fff 30%, rgba(255, 255, 255, 0)) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(9, 9, 11, 0.16), rgba(9, 9, 11, 0)) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(9, 9, 11, 0.16), rgba(9, 9, 11, 0)) right center / 14px 100% no-repeat scroll,
    #fff;
  box-shadow: var(--ombre-claire);
  -webkit-overflow-scrolling: touch;
}
.article-body table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.article-table-wrap table { min-width: 560px; }
.article-body th, .article-body td {
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--ligne-claire);
}
.article-body thead th { background: #F4F4F2; font-size: 15px; font-weight: 700; color: var(--texte-clair); }
.article-body tbody th { font-weight: 650; color: var(--texte-clair); }
.article-body tr:last-child td, .article-body tr:last-child th { border-bottom: 0; }

/* Telephone : un tableau de 3 ou 4 colonnes se lit sans defilement lateral.
   Chaque ligne devient un bloc : la premiere cellule en titre, les autres cote a cote,
   alignees sous les intitules de colonnes. Au-dela de 4 colonnes, le defilement reste.
   Navigateur sans :has() : le tableau defilant d'origine s'applique. */
@media (max-width: 600px) {
  .article-body table:not(:has(td:nth-child(3))) { min-width: 0; }
  .article-body table:has(td:nth-child(3)):not(:has(td:nth-child(5))) { display: block; min-width: 0; }
  .article-body table:has(td:nth-child(3)):not(:has(td:nth-child(5))) :is(thead, tbody) { display: block; }
  .article-body table:has(td:nth-child(3)):not(:has(td:nth-child(5))) tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-bottom: 1px solid var(--ligne-claire);
  }
  .article-body table:has(td:nth-child(4)):not(:has(td:nth-child(5))) tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .article-body table:has(td:nth-child(3)):not(:has(td:nth-child(5))) tr:last-child { border-bottom: 0; }
  .article-body table:has(td:nth-child(3)):not(:has(td:nth-child(5))) :is(th, td) { border-bottom: 0; padding: 4px 12px 14px; }
  .article-body table:has(td:nth-child(3)):not(:has(td:nth-child(5))) :is(th, td):first-child { grid-column: 1 / -1; }
  .article-body table:has(td:nth-child(3)):not(:has(td:nth-child(5))) thead th { padding: 12px; font-size: 14.5px; line-height: 1.3; }
  /* L'intitule de la premiere colonne (« Critere », « Votre situation ») reste lu par les lecteurs d'ecran. */
  .article-body table:has(td:nth-child(3)):not(:has(td:nth-child(5))) thead th:first-child {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .article-body table:has(td:nth-child(3)):not(:has(td:nth-child(5))) tbody :is(th, td):first-child {
    padding: 14px 12px 6px;
    font-size: 16px;
    font-weight: 650;
    color: var(--texte-clair);
  }
  .article-body table:has(td:nth-child(3)):not(:has(td:nth-child(5))) tbody td:not(:first-child) { color: #3F3F46; }
  /* Quatre colonnes : trois valeurs cote a cote, colonnes plus serrees, cesure francaise
     pour les mots longs (« automatique-ment ») plutot qu'une coupure sans trait. */
  .article-body table:has(td:nth-child(4)):not(:has(td:nth-child(5))) :is(th, td),
  .article-body table:has(td:nth-child(4)):not(:has(td:nth-child(5))) tbody :is(th, td):first-child { padding-inline: 10px; }
  .article-body table:has(td:nth-child(4)):not(:has(td:nth-child(5))) :is(th, td):not(:first-child) {
    font-size: 14.5px;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}

/* Sommaire */
.article-toc {
  padding: 22px 24px 24px;
  border-radius: var(--r-m);
  background: #F4F4F2;
  border: 1px solid var(--ligne-claire);
  font-size: 16px;
  line-height: 1.45;
}
.article-toc__label { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 700; color: var(--texte-clair); }
.article-toc__label span { width: 18px; height: 2px; border-radius: 2px; background: var(--rouge); }
.article-toc ol { margin: 14px 0 0; padding: 0; list-style: none; counter-reset: sommaire; }
.article-toc ol > li { counter-increment: sommaire; display: grid; grid-template-columns: 30px minmax(0, 1fr); }
.article-toc ol > li::before {
  content: counter(sommaire, decimal-leading-zero);
  padding-top: 2px;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--rouge-profond);
}
.article-toc ol > li > ul { grid-column: 2; margin: 6px 0 2px; padding: 0; list-style: none; font-size: 15px; }
.article-toc li + li { margin-top: 9px; }
.article-toc ul li + li { margin-top: 5px; }
.article-body .article-toc a { font-weight: 500; color: #3F3F46; text-decoration: none; }
.article-body .article-toc a:hover { color: var(--rouge-profond); text-decoration: underline; }
.article-toc li::marker { content: none; }

/* Questions frequentes */
.article-body > .article-faq { margin-top: 2.4em; }
.article-faq > h2 { margin: 0 0 18px; }
.article-faq__item {
  margin-top: 12px;
  padding: 20px 24px;
  border-radius: var(--r-m);
  background: #fff;
  border: 1px solid rgba(9, 9, 11, 0.09);
  box-shadow: 0 1px 2px rgba(9, 9, 11, 0.04), 0 12px 28px -22px rgba(9, 9, 11, 0.3);
}
/* Question : meme taille que les questions de la FAQ des autres pages (.faq__question). */
.article-body .article-faq__item h3 { margin: 0; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.35; letter-spacing: -0.01em; }
.article-faq__item p { margin-top: 8px; font-size: 17px; line-height: 1.62; color: #3F3F46; }

/* Appel a l'action de fin d'article : la seule scene noire de la feuille */
.article-cta {
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--r-l);
  background: var(--noir);
  color: var(--texte-sombre);
}
.article-body > .article-cta { margin-top: 2.6em; }
/* Titre d'encadre : taille d'un H3 de l'echelle commune sur telephone (22 px), comme l'encadre du blog. */
.article-body .article-cta h2 {
  margin: 0;
  font-size: clamp(22px, 2.6vw, 34px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #fff;
}
.article-cta p { margin-top: 14px; font-size: 17.5px; line-height: 1.6; color: #D4D4D8; }
.article-body .article-cta p a { color: #FF8C6E; }
.article-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* Boutons du gabarit du robot (.portfolio-button), a l'identique des boutons du site (.bouton et
   .bouton--sombre de eoche.v2.css) : relief, lueur rouge, fleche sur le bouton rouge, combine sur
   le bouton sombre. Le HTML du robot n'a pas d'icone : elles sont posees ici, en masque, et
   s'effacent d'elles-memes si le gabarit en fournit une (svg). */
.portfolio-button {
  --bg: var(--rouge-profond);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: var(--r-pilule);
  background:
    radial-gradient(120% 140% at 30% -40%, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 55%),
    var(--bg);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -2px 0 rgba(0, 0, 0, 0.2), 0 10px 30px -10px var(--lueur);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background-color 0.2s ease;
}
.article-body a.portfolio-button { color: #fff; text-decoration: none; }
.portfolio-button:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -2px 0 rgba(0, 0, 0, 0.2), 0 16px 40px -12px rgba(253, 58, 37, 0.6); }
.portfolio-button:active { transform: scale(0.98); }
.portfolio-button--outline {
  --bg: #1B1B1F;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -2px 0 rgba(0, 0, 0, 0.4), 0 10px 30px -14px rgba(0, 0, 0, 0.6);
}
.portfolio-button:not(.portfolio-button--outline):not(:has(svg))::after,
.portfolio-button--outline[href^="tel:"]:not(:has(svg))::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--icone) center / 18px 18px no-repeat;
  mask: var(--icone) center / 18px 18px no-repeat;
}
/* Fleche du bouton rouge (meme trace que ICONES.fleche) */
.portfolio-button:not(.portfolio-button--outline):not(:has(svg))::after {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E");
  transition: transform 0.35s var(--ease);
}
.portfolio-button:hover::after { transform: translateX(4px); }
/* Combine du bouton sombre (meme trace que ICONES.tel) */
.portfolio-button--outline[href^="tel:"]:not(:has(svg))::before {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

/* Partage, articles lies, retour au blog */
.article-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 20px;
  padding-top: 20px;
  border-top: 1px solid var(--ligne-claire);
  font-size: 16px;
  color: var(--texte-clair-2);
}
.article-body > .article-share { margin-top: 2.2em; }
.article-body .article-share a { display: inline-flex; align-items: center; min-height: 44px; color: var(--texte-clair); text-decoration: none; }
.article-body .article-share a:hover { color: var(--rouge-profond); }
.article-related {
  padding: 16px 20px;
  border-radius: var(--r-m);
  background: #F4F4F2;
  border: 1px solid var(--ligne-claire);
  font-size: 17px;
  line-height: 1.5;
}
.article-body > .article-related { margin-top: 12px; }
.article-body > .article-share + .article-related,
.article-body > .article-cta + .article-related { margin-top: 2.2em; }
.article-related strong { display: block; margin-bottom: 2px; font-size: 15px; font-weight: 700; color: var(--texte-clair-2); }
/* Plusieurs liens « À lire aussi » a la suite : une seule etiquette, une liste compacte. */
.article-body > .article-related + .article-related { margin-top: 8px; }
.article-related + .article-related strong { display: none; }
.article-body .article-related a { color: var(--texte-clair); text-decoration: none; }
.article-body .article-related a::after { content: " \2192"; color: var(--rouge); }
.article-body .article-related a:hover { color: var(--rouge-profond); }
.article-body .article-back {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--texte-clair);
  text-decoration: none;
}
.article-body > .article-back { margin-top: 1.6em; }
.article-body .article-back:hover { color: var(--rouge-profond); }

/* ══════════════════════════════════════════════════════════════════
   ARTICLE : l'auteur (pose par l'enveloppe, apres le contenu)
   ══════════════════════════════════════════════════════════════════ */
.article-auteur { padding: 0 0 clamp(64px, 8vw, 112px); background: var(--blanc); }
main:has(+ .article-auteur) .article-section { padding-bottom: clamp(40px, 5vw, 64px); }
.article-auteur__carte {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 24px;
  border-radius: var(--r-l);
  background: #F4F4F2;
  border: 1px solid var(--ligne-claire);
}
.article-auteur__carte img { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.article-auteur__nom { font-size: 19px; font-weight: 650; letter-spacing: -0.01em; color: var(--texte-clair); }
.article-auteur__role { margin-top: 2px; font-size: 16px; color: var(--texte-clair-2); }
.article-auteur__texte { margin-top: 10px; font-size: 17px; line-height: 1.6; color: #3F3F46; }
.article-auteur__liens { display: flex; flex-wrap: wrap; gap: 0 22px; margin-top: 6px; }
.article-auteur__liens a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 600; color: var(--texte-clair); text-decoration: underline; text-decoration-color: rgba(201, 39, 21, 0.45); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.article-auteur__liens a:hover { color: var(--rouge-profond); }

/* ══════════════════════════════════════════════════════════════════
   ARTICLE : sommaire en colonne sur grand ecran
   Les enfants de .article-body restent dans le flux, le sommaire
   passe a droite et suit la lecture.
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
  .page-article:has(.article-toc) .portfolio-shell { width: min(1100px, 100% - 2 * var(--gouttiere)); }
  .page-article:has(.article-toc) .blog-hero .portfolio-shell > * { max-width: 760px; }
  .article-body:has(> .article-toc) {
    display: grid;
    grid-template-columns: minmax(0, 720px) 300px;
    justify-content: space-between;
    column-gap: 64px;
  }
  .article-body:has(> .article-toc) > * { grid-column: 1; }
  .article-body:has(> .article-toc) > .article-toc {
    grid-column: 2;
    grid-row: 1 / span 400;
    align-self: start;
    position: sticky;
    top: 100px;
    margin: 0;
    max-height: calc(100vh - 124px);
    overflow-y: auto;
    overscroll-behavior: contain;
    font-size: 14.5px;
    line-height: 1.4;
  }
  .article-body:has(> .article-toc) > .article-toc li + li { margin-top: 7px; }
  .article-body:has(> .article-toc) > .article-toc ~ .article-lead { margin-top: 1.6em; }
  .page-article:has(.article-toc) .article-auteur .portfolio-shell { width: min(1100px, 100% - 2 * var(--gouttiere)); }
  .page-article:has(.article-toc) .article-auteur__carte { max-width: 720px; }
}

/* ══════════════════════════════════════════════════════════════════
   ARTICLE : telephone d'abord
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Echelle commune des titres sur telephone : H1 36 px, H2 32 px, H3 22 px, texte courant 17 px. */
  .article-body { font-size: 17px; line-height: 1.68; }
  .article-body h2 { margin-top: 1.9em; font-size: 32px; line-height: 1.12; }
  .article-body h3 { font-size: 22px; }
  .article-lead { font-size: 18px; line-height: 1.62; }
  .page-article .blog-hero h1 { font-size: 36px; line-height: 1.08; }
  .article-cta p { font-size: 17px; }
  .page-article .blog-meta { font-size: 15px; }
  .article-toc { padding: 20px; }
  /* Sommaire : chaque entree devient une vraie cible pour le pouce */
  .article-toc li + li { margin-top: 2px; }
  .article-toc ol > li::before { padding-top: 8px; }
  .article-body .article-toc a { display: block; padding: 6px 0; }
  .article-faq__item { padding: 18px 20px; }
  .article-cta__actions .portfolio-button { width: 100%; }
  .article-table-wrap { margin-inline: calc(-1 * var(--gouttiere) / 2); border-radius: var(--r-s); }
  .article-body table { font-size: 15px; }
  .article-body th, .article-body td { padding: 12px 14px; }
  /* Carte auteur : la photo a cote du nom, le texte et les liens dessous */
  .article-auteur__carte {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 0 14px;
    align-items: center;
    padding: 20px;
  }
  .article-auteur__carte > div { display: contents; }
  .article-auteur__carte img { grid-row: 1 / span 2; width: 56px; height: 56px; }
  .article-auteur__nom { grid-column: 2; align-self: end; }
  .article-auteur__role { grid-column: 2; align-self: start; font-size: 15px; line-height: 1.4; }
  .article-auteur__texte, .article-auteur__liens { grid-column: 1 / -1; }
  .article-auteur__texte { margin-top: 14px; }
}

/* Tablette : colonne de lecture plus etroite, les lignes restent courtes
   et la bulle de l'assistant ne recouvre plus la fin des lignes. */
@media (min-width: 768px) and (max-width: 1023px) {
  .page-article .portfolio-shell { width: min(620px, 100% - 2 * var(--gouttiere)); }
}

@media (prefers-reduced-motion: reduce) {
  .blog-card, .blog-card__link span, .portfolio-button, .portfolio-button::after { transition: none; }
  .blog-card:hover { transform: none; }
}

@media print {
  .entete, .menu-plein, .barre-mobile, .pied, .pack-modal-overlay, .article-progression,
  .article-cta, .article-share, .eoche-chat-launcher, .eoche-chat-panel { display: none !important; }
  .page-article .blog-hero { padding: 0 0 16px; background: none; color: #000; }
  .page-article .blog-hero h1 { color: #000; }
  .page-article .article-section { margin: 0; padding: 0; border-radius: 0; }
}