/* =====================================================================
   edouardtan.fr · V2 « le carrousel »
   L'accueil respire : le nom, le logo (ce que j'apporte), la phrase (ce que je suis).
   Les cartes sont rangées dans une rangée qu'on fait glisser, et s'ouvrent en feuille.
   Les composants (logo, caviardage, terminal, lexique…) viennent de style.css (V1)
   ===================================================================== */

html:has(dialog[open]) { overflow: hidden; }
body { min-height: 100svh; }

/* Quand une carte est ouverte, l'accueil recule, comme une pile de cartes */
.home { transform-origin: 50% 0; transition: transform .5s var(--ease), filter .5s var(--ease); }
html.sheet-open .home { transform: scale(.94); filter: brightness(.55); }

/* ---------------- L'accueil : le logo en gros plan ----------------
   Les trois barres du logo sortent du bord gauche et deviennent les trois portes du profil.
   Le curseur les traverse à la même place que dans le logo (≈ 20 % de la longueur des barres). */
.home {
  --bw1: calc(100% - 18px);            /* barres haute et basse égales, celle du milieu à 90 % : un vrai E */
  --cur: calc((100% - 18px) * .205);
  display: flex; flex-direction: column;
  min-height: 100svh;
  max-width: 1320px; margin: 0 auto;
  padding: 0 0 calc(12px + env(safe-area-inset-bottom));
}
@media (min-width: 900px) { .home { padding-bottom: 22px; } }

.who3 { display: flex; align-items: flex-end; gap: 11px; padding: calc(22px + env(safe-area-inset-top)) 18px 0; animation: tile-in .7s var(--ease) both; }
.who3 h1 { font: 600 clamp(38px, 10.6vw, 132px)/.88 var(--sans); letter-spacing: -.055em; margin-left: -.04em; white-space: nowrap; }
.who3 .hero-role { flex: none; font-size: 10px; line-height: 1.4; letter-spacing: .07em; white-space: nowrap; padding: 0 0 .3em 11px; border-left: 1px solid rgba(241, 237, 228, .22); color: var(--papier); }
.who3 .hero-role span { color: var(--vermillon-vif); }
@media (min-width: 900px) { .who3 { gap: 24px; padding: 36px 32px 0; } .who3 h1 { font-size: clamp(64px, 8.4vw, 132px); } .who3 .hero-role { font-size: 13px; padding: 0 0 .7em 20px; } }

.bars { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: clamp(22px, 5svh, 48px) 0; }
.barc {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px;
  height: clamp(84px, 14.5svh, 128px); border-radius: 0 8px 8px 0;
  padding: 0 44px 0 calc(var(--cur) + 26px);
  background: var(--papier); color: var(--encre); text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform-origin: left; animation: bar-in .8s var(--ease) both;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.barc.b1 { width: var(--bw1); }
.barc.b2 { width: calc(var(--bw1) * .9); animation-delay: .07s; }
.barc.b3 { width: var(--bw1); animation-delay: .14s; }
.barc .k { font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--vermillon); }
.barc .s { font: 500 clamp(18px, 5vw, 30px)/1.05 var(--sans); letter-spacing: -.03em; }
.barc .s b { display: block; font-weight: 700; font-size: 1.3em; letter-spacing: -.04em; }
.barc .go { position: absolute; right: 16px; bottom: 12px; font: 400 20px var(--sans); color: var(--L3); transition: transform .3s var(--ease), color .2s; }
@media (hover: hover) { .barc:hover { box-shadow: 0 14px 30px rgba(0, 0, 0, .35); } .barc:hover .go { transform: translateX(5px); color: var(--vermillon); } }
.barc:active { transform: scale(.99); }
.bars-cur { position: absolute; left: var(--cur); top: calc(clamp(22px, 5svh, 48px) - 12px); bottom: calc(clamp(22px, 5svh, 48px) - 12px); width: 11px; border-radius: 2px; background: var(--vermillon-vif); box-shadow: 0 0 0 4px var(--encre); pointer-events: none; animation: blink 1.1s steps(1) infinite; }
@media (min-width: 900px) {
  .home { --bw1: min(66%, 860px); --cur: calc(var(--bw1) * .205); }
  .barc { padding-right: 60px; }
  .barc .go { right: 24px; bottom: 18px; font-size: 24px; }
}

/* Entre les lignes : la personne, en une phrase */
.between { padding: 0 18px 18px; font: italic 400 clamp(20px, 5.4vw, 28px)/1.3 var(--serif); color: var(--D2); }
.between .eyebrow { display: block; margin-bottom: 4px; font-style: normal; }
.between button { font: inherit; color: var(--papier); cursor: pointer; text-decoration: underline; text-decoration-color: var(--vermillon-vif); text-decoration-thickness: 1.5px; text-underline-offset: 5px; transition: color .2s; }
.between button:hover { color: var(--vermillon-vif); }
@media (min-width: 900px) { .between { padding: 0 32px 22px; } }

@keyframes tile-in { from { opacity: 0; transform: translateY(14px); } }

/* ---------------- Bas de page ---------------- */
.home-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 18px 0; border-top: 1px solid rgba(241, 237, 228, .08); padding-top: 12px; margin: 0 18px; padding-left: 0; padding-right: 0; }
@media (min-width: 900px) { .home-foot { margin: 0 32px; } }
.ct-link { display: inline-flex; align-items: baseline; gap: 10px; min-height: 44px; font: 600 clamp(22px, 6vw, 34px)/1 var(--sans); letter-spacing: -.045em; color: var(--vermillon-vif); cursor: pointer; }
.ct-link span { transition: transform .35s var(--ease); }
.ct-link:hover span { transform: translateX(6px); }
.t-foot { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font: 500 9.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--t3); }
.t-foot button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--t2); text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }

/* ---------------- Dans les fiches ---------------- */
.sheet-k { margin-bottom: 12px; }
.sheet h2.tri-h { font: 500 clamp(34px, 9vw, 64px)/1 var(--sans); letter-spacing: -.04em; }
.sheet h2.tri-h b { font-weight: 700; color: var(--ac); }
.story-hook { margin: 6px 0 14px; font: italic 400 clamp(26px, 7vw, 40px)/1.15 var(--serif); color: var(--t1); }
.story-aside { margin-top: -14px; font: 500 12px/1.6 var(--mono); letter-spacing: .02em; color: var(--t3); }
.story-aside button { font: inherit; color: var(--ac); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
/* Mines-Télécom : les quatre domaines, séparés par le curseur */
.domains { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 4px; font: 600 clamp(28px, 8vw, 48px)/1.15 var(--sans); letter-spacing: -.04em; color: var(--t1); }
.domains i { width: 6px; height: .78em; border-radius: 1.5px; background: var(--vermillon-vif); }
.sheet .term { margin-top: 18px; }
/* Sur le terrain : un contexte par ligne */
.field, .splits { list-style: none; margin-top: 8px; border-top: 1.5px solid var(--t1); }
.field li, .splits li { display: grid; grid-template-columns: 58px 1fr; gap: 14px; padding: 18px 0 20px; border-bottom: 1px solid rgba(128, 120, 110, .22); }
.f-y, .sp-k { font: 500 12px var(--mono); color: var(--ac); padding-top: 5px; }
.field b, .splits b { display: block; font: 700 21px var(--sans); letter-spacing: -.03em; }
.f-k { display: block; margin-top: 3px; font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--t3); }
.field p, .splits p { margin-top: 8px; font-size: 15px; line-height: 1.45; color: var(--t2); max-width: 52ch; }
@media (min-width: 700px) {
  .field li, .splits li { grid-template-columns: 80px 240px 1fr; }
  .field li > div, .splits li > div { display: contents; }
  .field b, .splits b { grid-column: 2; }
  .f-k { grid-column: 2; margin-top: -8px; }
  .field p, .splits p { grid-column: 3; grid-row: 1 / span 2; margin-top: 2px; }
}
.sub-h { margin: 52px 0 10px; padding-top: 16px; border-top: 1.5px solid var(--t1); font: 600 24px var(--sans); letter-spacing: -.03em; }
.sub-lede { margin-bottom: 20px; font-size: 15px; color: var(--t2); max-width: 46ch; }
.sheet .q-list { border-top: 0; }
/* Coureur : la course solidaire, en dossard */
.race { margin-top: 26px; padding: 20px 20px 18px; max-width: 460px; border: 1px solid rgba(241, 237, 228, .16); border-radius: 14px; background: rgba(241, 237, 228, .04); }
.race-k { font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ac); }
.race-d { margin-top: 10px; font: 600 clamp(44px, 13vw, 64px)/.95 var(--sans); letter-spacing: -.045em; color: var(--t1); }
.race-n { margin-top: 10px; font: 700 19px/1.25 var(--sans); letter-spacing: -.03em; color: var(--t1); }
.race-m { margin-top: 4px; font-size: 14px; color: var(--t2); }
.race .run-trace { margin: 14px 0 12px; }
.race-c { display: flex; align-items: center; gap: 9px; font: 500 12px/1.4 var(--mono); color: var(--t2); }
.race-c i { flex: none; width: 6px; height: 14px; border-radius: 1.5px; background: var(--vermillon-vif); }
.run-trace { display: block; width: 100%; max-width: 420px; margin: 8px 0 22px; color: var(--D2); }
.run-trace .run-end { fill: var(--vermillon-vif); }

/* ---------------- Les dossiers ----------------
   Une carte qui monte du bas, arrondie aux quatre coins, avec un espace en haut :
   on voit le bureau derrière, on comprend qu'on peut y revenir. */
dialog.sheet {
  position: fixed; margin: 0; padding: 0; border: 0;
  inset: calc(env(safe-area-inset-top) + 52px) 6px calc(6px + env(safe-area-inset-bottom)) 6px;
  width: auto; height: auto; max-width: none; max-height: none;
  border-radius: 22px; overflow: hidden;
  background: var(--bg); color: var(--t1);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .35);
  transform: translateY(calc(100% + 40px));
  transition: transform .5s var(--ease);
}
dialog.sheet[open] { display: flex; flex-direction: column; }
dialog.sheet.is-open { transform: none; }
dialog.sheet.dragging { transition: none; }
dialog.sheet::backdrop { background: rgba(10, 9, 8, .35); opacity: 0; transition: opacity .4s; }
dialog.sheet.is-open::backdrop { opacity: 1; }
.tailor-sheet { --bg: var(--papier-2); }
@media (min-width: 900px) {
  dialog.sheet { inset: 60px 0 16px; margin: 0 auto; width: min(900px, 92vw); border-radius: 26px; }
}

/* La poignée : on la tire vers le bas, ou on la touche, pour revenir au bureau */
.sheet-head { flex: none; position: relative; height: 28px; touch-action: none; cursor: grab; }
.grab { position: absolute; inset: 0; cursor: pointer; outline: none; }  /* pas d'anneau de focus : la poignée s'éclaire à la place */
.grab::before { content: ""; position: absolute; top: 10px; left: 50%; width: 40px; height: 5px; border-radius: 3px; background: currentColor; opacity: .25; transform: translateX(-50%); transition: opacity .2s, width .25s var(--ease); }
.grab:hover::before, .grab:focus-visible::before { opacity: .5; width: 52px; }
@media (min-width: 900px) { .sheet-head { height: 32px; } }

.sheet-body {
  flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 22px 20px 44px;
}
@media (min-width: 900px) { .sheet-body { padding: 32px 56px 56px; } }

.sheet h2 { font-size: clamp(40px, 10vw, 76px); margin-bottom: 18px; }
.sheet h2.roman-h { font: 400 clamp(36px, 9.4vw, 76px)/1.05 var(--roman); letter-spacing: -.015em; }
.sheet h2.code-h { font: 500 clamp(32px, 8.4vw, 64px)/1.05 var(--mono); letter-spacing: -.05em; }
.sheet h2.sig-h { font: italic 400 clamp(44px, 11vw, 84px)/.98 var(--serif); letter-spacing: -.02em; }
.sheet-lede { max-width: 46ch; margin-bottom: 32px; font-size: 17px; color: var(--t2); }
.sheet .manif-text { font-size: clamp(27px, 6.6vw, 46px); margin-top: 28px; }

/* « Tout déchiffrer » vit à côté des passages qu'il révèle */
.sheet .declass { color: var(--t2); box-shadow: inset 0 0 0 1px rgba(22, 20, 18, .25); min-height: 42px; padding: 0 16px; }
.sheet .declass:hover { color: var(--t1); box-shadow: inset 0 0 0 1px var(--t1); }
.sheet .declass-box { background: var(--t1); }
.sheet .declass[aria-pressed="true"] { color: var(--ac); box-shadow: inset 0 0 0 1px var(--ac); }
.sheet .declass[aria-pressed="true"] .declass-box { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ac); }
.sheet .declass kbd { background: rgba(22, 20, 18, .08); color: var(--t2); }
.sheet .declass-label { display: inline !important; }

.sheet-next {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 52px; min-height: 48px; padding: 0 20px;
  border-radius: 99px; box-shadow: inset 0 0 0 1px rgba(128, 120, 110, .45);
  font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
  transition: color .2s, box-shadow .2s;
}
.sheet-next span { transition: transform .3s var(--ease); }
.sheet-next:hover { color: var(--ac); box-shadow: inset 0 0 0 1px var(--ac); }
.sheet-next:hover span { transform: translateX(4px); }

/* Composants de la V1 recalés pour la largeur d'une feuille */
.sheet .term { margin: 0; }
@media (min-width: 900px) {
  .sheet .row { grid-template-columns: 110px 1fr; }
  .sheet .row-ref, .sheet .row-bar { grid-column: 2; text-align: left; padding-top: 0; }
  .sheet .q { grid-template-columns: 80px 1fr; gap: 12px 24px; padding: 36px 0 40px; }
  .sheet .q-src { grid-column: 2; padding-top: 0; }
  .sheet .q-text { font-size: clamp(28px, 3.6vw, 42px); }
}
.sheet .voice { margin-top: 8px; }
.sheet .voice-grid { border-top: 1.5px solid var(--t1); }
@media (min-width: 1000px) {
  .sheet .voice-grid { grid-template-columns: 1fr 1fr; }
  .sheet .voice-grid li, .sheet .voice-grid li:first-child { padding: 22px 24px 24px 0; border-left: 0; border-bottom: 1px solid rgba(22, 20, 18, .14); }
  .sheet .voice-grid li:nth-child(even) { padding: 22px 0 24px 24px; border-left: 1px solid rgba(22, 20, 18, .14); }
  .sheet .voice-grid li::before, .sheet .voice-grid li:first-child::before { left: 0; }
  .sheet .voice-grid li:nth-child(even)::before { left: 24px; }
}

.contact-body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.ct-h { font-size: clamp(56px, 16vw, 132px) !important; line-height: .95 !important; letter-spacing: -.05em; margin: 14px 0 32px -.04em !important; white-space: nowrap; }
.contact-body .eyebrow { color: var(--t2); }

.site-h { font-size: clamp(56px, 16vw, 120px) !important; line-height: .95 !important; margin: 8px 0 24px -.03em !important; }
.legal-block { margin-top: 20px; padding-top: 24px; border-top: 1px solid rgba(241, 237, 228, .12); max-width: 52ch; }
.legal-block .eyebrow { margin-bottom: 8px; }
.legal-block p:not(.eyebrow) { margin-top: 12px; font-size: 14px; color: var(--t2); }
.legal-block b { display: block; font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--t1); }

@media (prefers-reduced-motion: reduce) {
  dialog.sheet { transform: none; }
  html.sheet-open .home { transform: none; }
  .barc, .bars-cur { animation: none; }
}