/*
 * ReputatioLab v3 : l'écran Étude.
 * Valeurs COPIÉES de l'écran data-screen-label="Étude" de « ReputatioLab v2.dc.html »
 * (styles en ligne devenus classes et-*). Seuils de L : mobile < 720 px, étroit < 1100 px.
 * Écarts assumés : voir le rapport de livraison (sommaire mobile collant sous notre
 * bandeau de 68 px, libellé actif sans points de suspension).
 */

.et { display: block; }
.et-tete {
  max-width: 1280px; margin: 0 auto; padding: var(--rl-top) var(--rl-px) 0;
  display: flex; flex-direction: column; gap: 22px;
}

/* ---------------------------------------------------------------- en-tête */
.et-fil { display: flex; gap: 8px; flex-wrap: wrap; font: 400 14px var(--rl-font); color: var(--rl-soft); }
.et-fil a { color: inherit; }
.et-fil .et-fil-rub { color: var(--rl-accent); }
.et-titre {
  margin: 0; max-width: 1000px; font: 800 var(--rl-h1)/.98 var(--rl-font); letter-spacing: -.032em;
  color: var(--rl-ink); text-wrap: balance; overflow-wrap: break-word;
}
.et-signature { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; font: 400 15px var(--rl-font); color: var(--rl-soft); }
.et-signature strong { color: var(--rl-ink); }
.et-auteur { display: flex; align-items: center; gap: 10px; color: var(--rl-ink); font: 600 15px var(--rl-font); }
.et-auteur:hover { color: var(--rl-ink); }
.et-auteur img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }

/* ----------------------------------------------------------- visuel et vidéo */
.et-video { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.et-ecran {
  position: relative; width: 100%; aspect-ratio: 16/9; max-height: 72vh;
  border-radius: 28px; overflow: hidden; background: #13242C;
}
.et-ecran > .et-visuel-img, .et-lecture > .et-visuel-img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block;
}
.et-lecture { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; cursor: pointer; background: none; font: inherit; }
.et-lecture[hidden] { display: none; }
.et-lecture-voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19,36,44,0) 45%, rgba(19,36,44,.85) 100%); }
.et-lecture-rond {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 88px; height: 88px; border-radius: 50%; background: #fff; color: #13242C;
  display: grid; place-items: center; box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
.et-lecture:hover .et-lecture-rond, .et-lecture:focus-visible .et-lecture-rond { transform: translate(-50%, -50%) scale(1.06); }
.et-lecture-rond { transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.et-lecture-bas {
  position: absolute; left: 24px; right: 24px; bottom: 22px; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; flex-wrap: wrap; color: #fff; text-align: left;
}
.et-lecture-qui { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.et-lecture-label {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px;
  background: #FF3D57; font: 700 12px/1 var(--rl-font); letter-spacing: .06em; text-transform: uppercase;
}
.et-lecture-label img { width: 14px; height: 14px; display: block; }
.et-lecture-texte { font: 600 15px var(--rl-font); }
.et-lecture-duree { font: 600 14px var(--rl-font); color: #C3D3E4; }

.et-lecteur { position: absolute; inset: 0; }
.et-lecteur[hidden] { display: none; }
.et-lecteur iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.et-pip-barre { display: none; }
.et-lecteur.et-pip {
  position: fixed; inset: auto 24px 84px auto; width: 380px; aspect-ratio: 16/9; z-index: 65;
  border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.4); background: #000;
}
.et-pip .et-pip-barre {
  position: absolute; left: 0; right: 0; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center;
  padding: 8px; background: linear-gradient(180deg, rgba(19,36,44,.85), rgba(19,36,44,0)); pointer-events: none;
}
.et-pip-titre { font: 700 11px/1 var(--rl-font); letter-spacing: .14em; text-transform: uppercase; color: #fff; padding-left: 6px; }
.et-pip-actions { display: flex; gap: 6px; pointer-events: auto; }
.et-pip-actions button {
  width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 0; background: rgba(255,255,255,.18);
  color: #fff; cursor: pointer; display: grid; place-items: center;
}

.et-video-pied { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 6px 4px; }
.et-video-pied > span { font: 400 14px/1.4 var(--rl-font); color: var(--rl-soft); }
.et-abonner {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px 0 6px; border-radius: 999px;
  background: var(--rl-tile); border: 1px solid var(--rl-line); color: var(--rl-ink); font: 600 13px var(--rl-font);
}
.et-abonner:hover { color: var(--rl-ink); border-color: #FF3D57; }
.et-abonner span { width: 28px; height: 28px; border-radius: 50%; background: #FF3D57; display: grid; place-items: center; }
.et-abonner img { width: 14px; height: 14px; display: block; }

/* --------------------------------------------------------------------- corps */
.et-corps {
  padding: 48px 32px 80px; display: grid; grid-template-columns: 230px minmax(0, 1fr) 230px; gap: 40px;
  max-width: 1344px; margin: 0 auto;
}
.et-etiquette { font: 700 11px/1 var(--rl-font); letter-spacing: .22em; text-transform: uppercase; color: var(--rl-accent); }

.et-rail {
  position: sticky; top: 136px; align-self: start; display: flex; flex-direction: column; gap: 22px;
  max-height: calc(100vh - 160px); overflow-y: auto; scrollbar-width: none; min-width: 0;
}
.et-rail::-webkit-scrollbar { display: none; }
.et-rail-tete { display: flex; flex-direction: column; gap: 8px; }
.et-reste { font: 400 13px var(--rl-font); color: var(--rl-soft); }
.et-somm { display: flex; flex-direction: column; border-left: 1px solid var(--rl-line); }
.et-somm a, .et-toc-liste a {
  display: grid; grid-template-columns: 24px 1fr; gap: 6px; text-align: left;
  border-left: 2px solid transparent; margin-left: -1px; padding: 8px 0 8px 16px;
  font: 400 14px/1.4 var(--rl-font); color: var(--rl-soft);
}
.et-somm a:hover, .et-toc-liste a:hover { color: var(--rl-ink); }
.et-somm a.est-actif { color: var(--rl-ink); border-left-color: #47A1DA; }
.et-somm-n { font-weight: 700; }
.et-somm a > span:only-child, .et-toc-liste a > span:only-child { grid-column: 1 / -1; }

.et-bascule {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px;
  border: 1px solid var(--rl-updline); background: var(--rl-upd); color: var(--rl-ink); cursor: pointer; text-align: left; font: inherit;
}
.et-bascule-piste { width: 34px; height: 20px; border-radius: 999px; background: #4FA99F; position: relative; flex: none; }
.et-bascule-piste span { position: absolute; top: 3px; left: 17px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .2s; }
.et-bascule[aria-checked="false"] .et-bascule-piste { background: var(--rl-line); }
.et-bascule[aria-checked="false"] .et-bascule-piste span { left: 3px; }
.et-bascule-txt { display: flex; flex-direction: column; gap: 2px; font: 400 12px var(--rl-font); color: var(--rl-soft); }
.et-bascule-txt b { font: 700 13px var(--rl-font); color: var(--rl-ink); }

.et-actions { display: flex; gap: 8px; }
.et-actions button {
  height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--rl-line); background: transparent;
  color: var(--rl-ink); cursor: pointer; display: flex; align-items: center; gap: 8px; font: 600 13px var(--rl-font);
}
.et-suivre { padding: 16px; border-radius: 16px; background: var(--rl-alt); }
.et-suivre .rl-suivre-icones { gap: 10px; }
.et-suivre .rl-suivre-rangee { display: grid; grid-template-columns: repeat(4, 38px); gap: 8px; }
.et-recevoir {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px;
  border-radius: 16px; background: #13242C; color: #fff; text-align: left;
}
.et-recevoir:hover { color: #fff; filter: brightness(1.15); }
.et-recevoir > span { display: flex; flex-direction: column; gap: 3px; font: 400 12px var(--rl-font); color: #9FB3C6; }
.et-recevoir b { font: 700 14px var(--rl-font); color: #fff; }

/* ------------------------------------------------------------------- texte */
.et-texte {
  width: 100%; max-width: 740px; min-width: 0; justify-self: center; display: flex; flex-direction: column; gap: 24px;
  font: 400 var(--rl-body)/1.75 var(--rl-font); color: var(--rl-text); overflow-wrap: break-word; counter-reset: etn;
}
.et-texte > * { margin: 0; max-width: 100%; }
.et-texte p { margin: 0; }
.et-texte strong, .et-texte b { color: var(--rl-ink); }
.et-texte a { color: var(--rl-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.et-texte a:hover { color: #47A1DA; }
.et-texte > .et-attaque { font: 500 23px/1.6 var(--rl-font); color: var(--rl-ink); text-wrap: pretty; }
.et-texte h2, .et-texte h3, .et-texte h4 { scroll-margin-top: 140px; }
.et-texte h2 {
  margin-top: 40px; display: flex; flex-direction: column; gap: 10px; font: 800 36px/1.05 var(--rl-font);
  letter-spacing: -.028em; color: var(--rl-ink); text-wrap: balance; counter-increment: etn;
}
.et-texte h2::before {
  content: counter(etn, decimal-leading-zero); font-size: 13px; letter-spacing: .22em; color: var(--rl-accent);
}
.et-texte h3 { margin-top: 16px; font: 700 24px/1.25 var(--rl-font); letter-spacing: -.015em; color: var(--rl-ink); }
.et-texte h4 { margin-top: 8px; font: 700 19px/1.3 var(--rl-font); color: var(--rl-ink); }
.et-texte ul, .et-texte ol { padding-left: 1.4em; }
.et-texte li { margin: 0; padding-left: .2em; }
.et-texte li + li { margin-top: 8px; }
.et-texte li::marker { color: var(--rl-accent); }
.et-texte hr { border: 0; border-top: 1px solid var(--rl-line); width: 100%; }

.et-texte blockquote {
  margin: 12px 0; font: 800 30px/1.25 var(--rl-font); letter-spacing: -.02em; color: var(--rl-accent); text-wrap: balance;
}
.et-texte blockquote p { font: inherit; }
.et-texte blockquote cite, .et-texte blockquote footer { display: block; margin-top: 10px; font: 400 15px var(--rl-font); letter-spacing: 0; color: var(--rl-soft); font-style: normal; }
.et-texte blockquote.wp-embedded-content:has(+ iframe.wp-embedded-content) { display: none; }

/* encadré d'accroche : classe .et-accroche, bloc « citation mise en avant » ou style Accroche */
.et-texte .et-accroche, .et-texte .wp-block-pullquote, .et-texte .is-style-accroche {
  padding: 28px 32px; border-radius: 22px; color: #1C2732; margin: 0;
  background: linear-gradient(135deg, #6DC2B8 0%, #5AC2D9 50%, #49C1EE 100%);
  font: 800 26px/1.25 var(--rl-font); letter-spacing: -.02em; text-wrap: balance;
}
.et-texte .wp-block-pullquote blockquote { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; }
.et-texte .wp-block-pullquote p { font: inherit; color: inherit; }

/* images, légendes, figures */
.et-texte figure { margin: 8px 0; display: flex; flex-direction: column; gap: 10px; max-width: 100%; }
.et-texte figure img, .et-texte > img, .et-texte p > img, .et-texte .wp-block-image img { max-width: 100%; height: auto; border-radius: 22px; display: block; }
.et-texte figure.aligncenter, .et-texte .aligncenter { align-items: center; margin-left: auto; margin-right: auto; }
.et-texte .wp-block-image { margin: 8px 0; max-width: 100%; }
.et-texte .wp-block-image figure { margin: 0; }
.et-texte figcaption, .et-texte .wp-caption-text, .et-texte .wp-element-caption { font: 400 13px/1.5 var(--rl-font); color: var(--rl-soft); }
.et-texte .alignleft, .et-texte .alignright { float: none; margin: 8px 0; }
.et-texte video { max-width: 100%; height: auto; border-radius: 22px; }
.et-texte div, .et-texte section { max-width: 100%; }

/* embeds : jamais plus larges que la colonne */
.et-texte iframe {
  display: block; width: 100%; max-width: 100%; aspect-ratio: 16/9; height: auto;
  border: 1px solid var(--rl-line); border-radius: 22px; background: #fff;
}
.et-texte iframe.wp-embedded-content { aspect-ratio: auto; min-height: 220px; }
.et-texte .wp-block-embed, .et-texte .wp-block-embed__wrapper { max-width: 100%; }
.et-texte .wp-block-embed { margin: 8px 0; }

/* tableaux : le défilement horizontal reste DANS le tableau */
.et-texte table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font: 400 15px/1.5 var(--rl-font); -webkit-overflow-scrolling: touch; }
.et-texte figure.wp-block-table { display: block; overflow-x: auto; margin: 8px 0; }
.et-texte figure.wp-block-table table { display: table; min-width: 100%; }
.et-texte td, .et-texte th { padding: 10px 14px; border-bottom: 1px solid var(--rl-line); text-align: left; vertical-align: top; }
.et-texte th, .et-texte tr:first-child td { color: var(--rl-ink); }
.et-texte pre, .et-texte code { font-size: .9em; }
.et-texte pre { overflow-x: auto; padding: 16px 18px; border-radius: 16px; background: var(--rl-alt); }

/* mises à jour : habillage du socle (.rl-maj), masquées par l'interrupteur */
.et-texte.et-sans-maj .rl-maj { display: none; }

/* le bloc d'inscription dans le fil : une colonne, la largeur du texte */
.et-texte .rl-inscription { grid-template-columns: minmax(0, 1fr); padding: 26px 28px; border-radius: 22px; margin: 8px 0; }
.et-texte .rl-inscription h2 { margin: 0; font-size: 22px; line-height: 1.2; counter-increment: none; }
.et-texte .rl-inscription h2::before { content: none; }
.et-texte .rl-inscription a { color: inherit; }

/* sommaire mobile (état tocOpen) : caché au-dessus de 1100 px */
.et-toc-mobile { display: none; }

/* --------------------------------------------------------------------- suite */
.et-suite {
  max-width: 1280px; margin: 0 auto; padding: 0 var(--rl-px) 96px; display: flex; flex-direction: column; gap: 64px;
}
.et-suite-lire { display: flex; flex-direction: column; gap: 28px; }
.et-suite-tete { display: flex; flex-direction: column; gap: 12px; }
.et-suite-h2 { margin: 0; font: 800 36px/1.05 var(--rl-font); letter-spacing: -.028em; color: var(--rl-ink); }

/* ----------------------------------------------------------------- responsive */
@media (max-width: 1099px) {
  .et-corps { grid-template-columns: minmax(0, 1fr); gap: 0; padding-left: 32px; padding-right: 32px; }
  .et-rail, .et-vide { display: none; }
  .et-toc-mobile {
    display: block; position: sticky; top: 80px; z-index: 20; border-radius: 18px; background: var(--rl-tile);
    border: 1px solid var(--rl-line); box-shadow: var(--rl-shadow); overflow: hidden;
  }
  .et-toc-bouton {
    width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border: 0; background: none;
    cursor: pointer; color: var(--rl-ink); text-align: left; font: inherit;
  }
  .et-toc-actif { flex: 1; min-width: 0; font: 600 14px/1.35 var(--rl-font); }
  .et-toc-min { font: 400 12px var(--rl-font); color: var(--rl-soft); }
  .et-toc-chev { display: flex; transition: transform .2s; }
  .et-toc-bouton[aria-expanded="true"] .et-toc-chev { transform: rotate(180deg); }
  .et-toc-liste { border-top: 1px solid var(--rl-line); padding: 6px 0; max-height: 60vh; overflow-y: auto; }
  .et-toc-liste[hidden] { display: none; }
  .et-toc-liste a { grid-template-columns: 26px 1fr; gap: 6px; padding: 10px 18px; border-left: 0; margin-left: 0; font-size: 15px; line-height: 1.35; }
  .et-toc-liste a.est-actif { color: var(--rl-ink); }
}
@media (max-width: 719px) {
  .et-corps { padding-left: 18px; padding-right: 18px; }
  .et-lecture-rond { width: 64px; height: 64px; }
  .et-lecteur.et-pip { inset: auto 12px 72px auto; width: calc(100vw - 24px); }
  .et-lecture-bas { left: 16px; right: 16px; bottom: 16px; flex-wrap: nowrap; }
  .et-lecture-texte { display: none; }
  .et-texte > .et-attaque { font-size: 20px; }
  .et-texte h2 { font-size: 30px; }
  .et-texte blockquote { font-size: 24px; }
  .et-texte .et-accroche, .et-texte .wp-block-pullquote { font-size: 22px; padding: 22px; }
}