/* Notre mission : le manifeste de Yannis, à la première personne. Classes préfixées .mission- ; tout le reste vient de dt.css.
   Couleurs : uniquement les variables --dt-* (jour et nuit). Pas de max-width sur le texte : la largeur vient des grilles. */

/* La première section suit l'en-tête : une respiration plus courte qu'entre deux sections */
.mission-premiere { padding-top: clamp(16px, 3vw, 40px); }

/* ---------- En-tête : la signature, et la façade qui se révèle en vision thermique ---------- */
/* Le texte se centre sur la façade ; la signature se pose sur un filet en pointillés, comme au bas d'une lettre */
.mission-tete { align-items: center; }
.mission-signe { padding-top: var(--esp-4); border-top: 2px dashed var(--dt-ink-3); font-size: 15px; line-height: 1.4; color: var(--dt-ink-2); }
.mission-signe strong { display: block; font: 800 19px/1.2 var(--display); letter-spacing: -0.01em; color: var(--dt-ink); }

.mission-scan { margin: 0; }
/* La position du curseur (--p, de 0 à 1) place le trait au centre de la poignée du curseur natif (44 px de large) */
.mission-scan-cadre { position: relative; --pos: calc(22px + var(--p, 0.5) * (100% - 44px)); }
.mission-scan-dessin { display: block; width: 100%; height: auto; overflow: visible; }
.mission-scan-apres { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.mission-scan-trait { position: absolute; top: 2%; bottom: 3%; left: var(--pos); width: 4px; margin-left: -2px; border-radius: 2px; background: var(--dt-ink); pointer-events: none; }
.mission-scan-poignee { position: absolute; top: 50%; left: var(--pos); width: 50px; height: 50px; margin: -25px 0 0 -25px; display: grid; place-items: center; border-radius: 50%; background: var(--dt-paper); color: var(--dt-ink); box-shadow: 0 0 0 2.5px var(--dt-ink), 3px 3px 0 var(--dt-shadow); pointer-events: none; }
.mission-scan-poignee svg { width: 26px; height: 26px; }
.mission-scan-tag { position: absolute; top: 4px; padding: 5px 12px; border-radius: 999px; font: 700 14px/1.2 var(--display); pointer-events: none; }
.mission-scan-tag-g { left: 0; background: var(--dt-paper); color: var(--dt-ink); box-shadow: 0 0 0 2px var(--dt-ink), 2px 2px 0 var(--dt-shadow); transform: rotate(-4deg); }
.mission-scan-tag-d { right: 0; background: var(--dt-logo-accent); color: #FFFFFF; box-shadow: 2px 2px 0 var(--dt-shadow); transform: rotate(3deg); }
/* Le curseur natif couvre tout le dessin : on glisse n'importe où, au clavier comme au doigt (le défilement vertical reste libre) */
.mission-scan-curseur { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; -webkit-appearance: none; appearance: none; background: transparent; cursor: ew-resize; font-size: 16px; touch-action: pan-y; border-radius: 12px; }
.mission-scan-curseur::-webkit-slider-runnable-track { height: 100%; background: transparent; border: 0; }
.mission-scan-curseur::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100%; background: transparent; border: 0; }
.mission-scan-curseur::-moz-range-track { height: 100%; background: transparent; border: 0; }
.mission-scan-curseur::-moz-range-thumb { width: 44px; height: 100%; background: transparent; border: 0; }
.mission-scan figcaption { margin-top: 14px; font-size: 15px; color: var(--dt-ink-2); }

/* ---------- Le constat, et le film ---------- */
.mission-bref { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--esp-8); align-items: start; margin-top: var(--esp-7); }
/* Les phrases fortes restent du texte courant, en 21 px. */
.mission-texte p.mission-gros, .mission-texte p.mission-chute { font: 400 21px/1.5 var(--text); letter-spacing: 0; color: var(--dt-ink); }

.mission-film { padding: var(--esp-5); border-radius: var(--r-panel); background: var(--dt-paper); box-shadow: var(--ombre-decoupe); transform: rotate(0.8deg); }
.mission-film-ecran { position: relative; display: block; border-radius: 12px; transition: transform 140ms var(--ease); }
.mission-film-ecran:hover { transform: translateY(-2px) rotate(-0.6deg); }
.mission-film-ecran .film-dessin { display: block; width: 100%; height: auto; }
.mission-film-ecran .pastille { position: absolute; right: 14px; bottom: 16px; }
.mission-film-kicker { margin-top: var(--esp-4); font: 700 14px/1.2 var(--display); color: var(--dt-ink-2); }
.mission-film h3 { margin-top: 6px; font-size: 26px; line-height: 1.1; letter-spacing: -0.025em; }
.mission-film > p:not(.mission-film-kicker) { margin-top: 8px; font-size: 16px; color: var(--dt-ink-2); }
.mission-chapitres { list-style: none; margin: var(--esp-4) 0 0; padding: 0; border-top: 2px dashed var(--dt-surface-alt-2); }
.mission-chapitres a { display: flex; align-items: center; gap: 12px; min-height: 50px; text-decoration: none; font-weight: 600; font-size: 16px; border-bottom: 2px dashed var(--dt-surface-alt-2); }
.mission-chapitres a:hover span:last-child { text-decoration: underline; text-decoration-color: var(--dt-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.mission-chap-t { flex: none; min-width: 54px; padding: 4px 8px; border-radius: 8px; background: var(--dt-encart); font: 700 14px/1.2 var(--display); text-align: center; }
.mission-film p.mission-film-note { margin-top: 12px; font-size: 14px; }

.mission-texte p { font-size: 18px; line-height: 1.65; color: var(--dt-ink-2); }
.mission-texte p + p { margin-top: 1em; }
.mission-texte strong { font-weight: 600; color: var(--dt-ink); }

/* ---------- Qui je suis : le texte et le portrait ---------- */
.mission-parcours { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--esp-8); align-items: start; margin-top: var(--esp-7); }

/* ---------- Le parti pris ---------- */
.mission-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-8); margin-top: var(--esp-6); }
.mission-deux > div { padding-top: var(--esp-5); border-top: 3px solid var(--dt-ink); }
.mission-deux .ico { margin-bottom: var(--esp-4); }
.mission-deux h3 { font-size: 22px; line-height: 1.2; letter-spacing: -0.015em; }
.mission-deux p { margin-top: 8px; font-size: 17px; line-height: 1.6; color: var(--dt-ink-2); }
#parti-pris { padding-bottom: clamp(40px, 5vw, 72px); }
/* Le bandeau est un conteneur : pas d'ombre décalée, un sceau en papier porte le repère */
.mission-bandeau { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--esp-5) var(--esp-6); align-items: center; margin-top: clamp(40px, 5vw, 72px); padding: clamp(26px, 4vw, 52px); border-radius: var(--r-panel); background: var(--dt-band); color: var(--dt-on-band); }
.mission-bandeau-ico { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 48% 52% 50% 50%; background: var(--dt-il-pap); color: var(--dt-il-encre); transform: rotate(-4deg); }
.mission-bandeau-ico svg { width: 38px; height: 38px; }
.mission-bandeau p { font: 400 21px/1.5 var(--text); }
.mission-bandeau strong { font-weight: 600; text-decoration: underline; text-decoration-color: var(--dt-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---------- Le comparateur : DPE, audit, pré-diagnostic (tableau sur grand écran, lignes étiquetées sur téléphone) ---------- */
.mission-compare { margin-top: var(--esp-7); }
.mission-tableau { font-size: 17px; line-height: 1.45; table-layout: fixed; }
.mission-tableau thead th { padding: 0 14px 12px; font: 700 19px/1.2 var(--display); letter-spacing: -0.01em; color: var(--dt-ink); vertical-align: bottom; }
.mission-tableau thead td { width: 19%; border-top: 0; }
.mission-tableau tbody th[scope="row"] { font: 700 16px/1.35 var(--display); }
.mission-tableau td { padding-left: 14px; color: var(--dt-ink-2); }
/* La colonne Diag-Tertiaire, sur papier : on lit d'un coup d'œil ce qu'elle ajoute */
.mission-tableau .mission-nous { background: var(--dt-paper); color: var(--dt-ink); }
.mission-tableau thead th.mission-nous { padding-top: 14px; border-radius: 12px 12px 0 0; }
.mission-tableau tbody td.mission-nous { font-weight: 600; }
/* La note suit la grille de .sec-tete : 8 colonnes sur 12 */
.mission-compare-note { width: calc(100% * 8 / 12); margin-top: var(--esp-5); font-size: 17px; line-height: 1.6; color: var(--dt-ink-2); }

/* ---------- L'équipe : chaque fiche en ligne, le dessin à gauche ; la conseillère et l'artisan dans le même médaillon ---------- */
@media (min-width: 1000px) {
  .mission-equipe { column-gap: var(--esp-8); }
  .mission-equipe .membre { display: grid; grid-template-columns: 190px minmax(0, 1fr); column-gap: var(--esp-5); align-items: center; }
  .mission-equipe .membre > div { grid-row: span 2; }
  .mission-equipe .membre h3 { margin-top: 0; align-self: end; }
  .mission-equipe .membre p { align-self: start; }
}

.mission-bio { text-align: center; }
.mission-bio .portrait-photo { height: 230px; }
.mission-bio .portrait-photo::before { width: 210px; height: 180px; }
.mission-bio .portrait-photo img { width: 232px; }
.mission-bio p:not(.mission-bio-bic) { margin-top: 16px; font-size: 16px; line-height: 1.55; color: var(--dt-ink-2); }
.mission-bio-bic { margin-top: 16px; display: flex; justify-content: center; }
.mission-bio-bic img { height: 48px; width: auto; padding: 4px 6px; border-radius: 6px; background: #FFFFFF; }

/* ---------- Tablette et téléphone ---------- */
@media (max-width: 999px) {
  .mission-bref, .mission-parcours, .mission-deux { grid-template-columns: minmax(0, 1fr); gap: var(--esp-6); }
  .mission-compare-note { width: auto; }
  .mission-film { transform: none; }
}
@media (max-width: 760px) {
  /* En-tête compact sur téléphone : le h1 reste, la façade interactive se retire (elle demande la largeur d'un écran) */
  .mission-tete { padding: 8px 0 14px; gap: 0; }
  .mission-tete .mission-scan { display: none; }
  .page-tete.mission-tete h1 { font-size: 34px; line-height: 1; }
  .page-tete.mission-tete .chapo { margin-top: 12px; font-size: 17px; }
  .page-tete.mission-tete .actions-tete { margin-top: 14px; }
  .mission-signe { padding-top: 10px; font-size: 14px; }
  .mission-signe strong { font-size: 17px; }
  .mission-bref, .mission-parcours, .mission-compare { margin-top: var(--esp-6); gap: var(--esp-6); }
  .mission-texte p { font-size: 17px; }
  .mission-texte p.mission-gros, .mission-texte p.mission-chute { font-size: 19px; }
  .mission-film-ecran { max-width: 250px; }
  .mission-bandeau { grid-template-columns: minmax(0, 1fr); }
  .mission-bandeau-ico { width: 56px; height: 56px; }
  .mission-bandeau-ico svg { width: 30px; height: 30px; }
  /* Comparateur : chaque critère devient un bloc, une ligne par démarche, Diag-Tertiaire en dernier sur papier */
  .mission-tableau, .mission-tableau tbody, .mission-tableau tr, .mission-tableau th, .mission-tableau td { display: block; width: auto; }
  .mission-tableau thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mission-tableau tbody tr { padding: 14px 0 12px; border-top: 2px solid var(--dt-ink); }
  .mission-tableau tbody tr:last-child { border-bottom: 2px solid var(--dt-ink); }
  .mission-tableau tbody th[scope="row"], .mission-tableau tbody tr:last-child th[scope="row"] { padding: 0 0 6px; border: 0; font-size: 17px; }
  .mission-tableau td, .mission-tableau tbody tr:last-child td { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 12px; align-items: baseline; padding: 6px 10px; border: 0; font-size: 16px; }
  .mission-tableau td::before { content: attr(data-l); font: 700 14px/1.45 var(--display); color: var(--dt-ink-2); }
  .mission-tableau tbody td.mission-nous { margin-top: 4px; padding-top: 8px; padding-bottom: 8px; border-radius: 10px; }
  .mission-tableau td.mission-nous::before { color: var(--dt-ink); }
}
@media (forced-colors: active) {
  .mission-film, .mission-bandeau { border: 2px solid CanvasText; }
  .mission-tableau .mission-nous { outline: 2px solid CanvasText; outline-offset: -2px; }
  .mission-scan-trait { background: CanvasText; }
}