/* ============================================================================
   CLÉMENT VERDIER — Site de présentation
   Direction (refonte du 03/10/2026) : « le dossier bien tenu ».
   Papier blanc cassé, encre presque noire, UN accent bleu nuit qui ne sert
   qu'à désigner (lien, état actif, date). Pas de halo, pas de grain, pas de
   dégradé, pas de lueur : la mise en valeur vient de la typographie (nom en
   Instrument Serif), de l'espace et du portrait, pas des effets.
   ========================================================================= */

/* ---------------------------------------------------------------- 1. JETONS */

:root {
  --fond:    #FAFAF7;
  --surface: #FFFFFF;
  --creux:   #F2F1EC;
  --ligne:   #E4E2DB;
  --ligne-2: #CFCCC3;

  --encre:   #14171C;   /* 17:1 sur le fond */
  --texte-2: #444B55;   /* 9:1  — texte courant */
  --mut:     #686F79;   /* 5:1  — intitulés, mentions */

  /* L'ACCENT. Lien, état actif, date. Jamais une grande surface. */
  --accent:   #1B3A6B;  /* 11:1 sur le fond */
  --accent-2: #2C5394;
  --accent-w: #E9EEF6;

  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --texte: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --t-geant: clamp(3.4rem, 10vw, 8.2rem);
  --t-titre: clamp(2.2rem, 5vw, 3.6rem);
  --t-corps: 1.0625rem;
  --t-petit: 0.875rem;
  --t-micro: 0.75rem;

  --gouttiere: clamp(20px, 5vw, 72px);
  --large: 1200px;
  --lisible: 66ch;

  --ombre-1: 0 1px 2px rgba(20, 23, 28, 0.05);
  --ombre-2: 0 1px 2px rgba(20, 23, 28, 0.04), 0 8px 24px rgba(20, 23, 28, 0.07);

  --sortie: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------- 2. SOCLE   */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  color-scheme: light;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

::selection { background: var(--accent); color: #fff; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--texte);
  font-size: var(--t-corps);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ----------------------------------------------------------- 3. TYPOGRAPHIE */

h1, h2, h3, h4 {
  font-family: var(--texte);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; max-width: var(--lisible); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--accent);
  text-decoration-color: rgba(27, 58, 107, 0.3);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
a:hover { color: var(--accent-2); text-decoration-color: currentColor; }

strong, b { font-weight: 600; }
time, .chiffre { font-variant-numeric: tabular-nums; }

/* Intitulé de section : un libellé discret et un filet. */
.etiq {
  display: flex; align-items: baseline; gap: 14px;
  font-size: var(--t-micro); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mut);
  margin: 0 0 clamp(28px, 4vw, 44px);
  max-width: none;
}
.etiq::after { content: ""; flex: 1; height: 1px; background: var(--ligne); align-self: center; }
.etiq span {
  text-transform: none; letter-spacing: 0; font-weight: 400;
  color: var(--mut); flex: 0 0 auto; order: 2;
}
.etiq::after { order: 1; }
@media (max-width: 640px) { .etiq span { display: none; } }
.etiq.espace { margin-top: clamp(56px, 8vw, 88px); }

.intro {
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2.6vw, 2.05rem);
  line-height: 1.32; letter-spacing: -0.005em;
  color: var(--texte-2);
  max-width: 34ch;
  margin-bottom: clamp(36px, 5vw, 60px);
}
.intro b { color: var(--encre); font-weight: 400; }
.intro em { color: var(--accent); font-style: italic; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------- 4. GABARITS  */

.enveloppe { max-width: var(--large); margin-inline: auto; padding-inline: var(--gouttiere); }
section { padding-block: clamp(64px, 9vw, 120px); position: relative; }
section + section { border-top: 1px solid var(--ligne); }

/* --------------------------------------------------------- 5. NAVIGATION    */

.barre {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 250, 247, 0.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}
.barre.detachee { border-bottom-color: var(--ligne); }
.barre-in {
  max-width: var(--large); margin-inline: auto;
  padding: 14px var(--gouttiere);
  display: flex; align-items: center; gap: clamp(12px, 3vw, 32px);
}

.sceau {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--encre);
  font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; white-space: nowrap;
}
.sceau i {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--encre); color: var(--fond);
  font-family: var(--texte); font-size: 0.6875rem; font-weight: 700; font-style: normal; letter-spacing: 0.02em;
  flex: 0 0 auto;
}
.sceau:hover { color: var(--encre); }

.liens { display: flex; gap: 2px; margin-left: auto; align-items: center; }
.liens a {
  font-size: var(--t-petit); padding: 7px 12px;
  text-decoration: none; color: var(--texte-2);
  white-space: nowrap; border-radius: 999px;
  transition: color 0.15s ease, background 0.15s ease;
}
.liens a:hover { color: var(--encre); background: var(--creux); }
.liens a[aria-current="page"] { color: var(--encre); background: var(--creux); font-weight: 600; }

.langue {
  display: flex; flex: 0 0 auto;
  border: 1px solid var(--ligne); border-radius: 999px; overflow: hidden;
  font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.04em;
}
.langue a { padding: 6px 11px; text-decoration: none; color: var(--mut); transition: background 0.15s, color 0.15s; }
.langue a[aria-current="true"] { background: var(--encre); color: var(--fond); }
.langue a:not([aria-current="true"]):hover { background: var(--creux); color: var(--encre); }

@media (max-width: 900px) {
  /* flex-wrap INDISPENSABLE : sans lui, width:100% + order:3 sur .liens ne
     provoquent pas de retour à la ligne et les liens sortent de l'écran. */
  .barre-in { flex-wrap: wrap; gap: 10px; row-gap: 8px; }
  .liens { order: 3; width: 100%; margin-left: 0; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .liens::-webkit-scrollbar { display: none; }
  .liens a { flex: 0 0 auto; }
  .langue { margin-left: auto; }
}

/* ----------------------------------------------------------- 6. LE BANDEAU  */

.quart {
  padding-block: clamp(48px, 8vw, 104px) clamp(48px, 7vw, 88px);
}
/* Vestiges de l'ancienne direction : plus aucun décor dans le bandeau. */
.halos { display: none; }

.quart-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}

/* Le portrait est ce qui met en valeur : grand, net, sans cadre lumineux.
   Plafonné à 340 px — le fichier fait 400×400, plus grand il deviendrait mou. */
.portrait {
  width: clamp(150px, 26vw, 340px);
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  overflow: hidden;
  margin: 0;
  background: var(--creux);
  box-shadow: var(--ombre-2);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }

@media (max-width: 900px) {
  .quart-grille { grid-template-columns: 1fr; gap: 28px; justify-items: start; }
  .portrait { order: -1; width: clamp(120px, 34vw, 170px); }
}

.quart h1 {
  font-family: var(--serif);
  font-size: var(--t-geant); font-weight: 400;
  letter-spacing: -0.02em; line-height: 0.95;
  margin-bottom: 0.32em;
}
.quart h1 em { font-style: italic; color: var(--accent); }

.fonction {
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  line-height: 1.5; color: var(--texte-2);
  max-width: 34ch; margin-bottom: 1.2em;
}
.fonction b { color: var(--encre); font-weight: 600; }

.ou {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--t-petit); color: var(--mut); margin-bottom: 2.2em;
}
/* Le poste actuel : un point plein, fixe. */
.ou i { width: 7px; height: 7px; border-radius: 50%; background: #2E8B57; flex: 0 0 auto; }

.actions { display: flex; flex-wrap: wrap; gap: 10px; }

.bouton {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 20px;
  font-family: var(--texte); font-size: 0.9375rem; font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--encre); border-radius: 999px;
  background: var(--encre); color: var(--fond);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.bouton:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.bouton.creux { background: transparent; color: var(--encre); border-color: var(--ligne-2); }
.bouton.creux:hover { background: var(--surface); border-color: var(--encre); color: var(--encre); }
.bouton svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* --------------------------------------------- 7. LE RUBAN DE COMPÉTENCES  */
/* Plus de défilement : une simple rangée de mots-clés, lisible d'un coup. */

.ruban { border-block: 1px solid var(--ligne); background: var(--surface); }
.ruban-piste {
  max-width: var(--large); margin-inline: auto;
  padding: 18px var(--gouttiere);
}
.ruban-lot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; }
.ruban-lot + .ruban-lot { display: none; }
.ruban-lot span {
  font-size: var(--t-petit); color: var(--texte-2);
  padding-inline: 12px; white-space: nowrap;
}
.ruban-lot span:first-child { padding-left: 0; }
.ruban-lot span.fort { color: var(--encre); font-weight: 600; }
.ruban-lot i { width: 3px; height: 3px; border-radius: 50%; background: var(--ligne-2); flex: 0 0 auto; }
.ruban-lot i:last-child { display: none; }

/* ------------------------------------------------------------ 8. LE RELEVÉ */

.releve-bande {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px clamp(20px, 3vw, 40px);
  margin: 0; padding-block: clamp(32px, 4.5vw, 52px);
}
@media (max-width: 820px) { .releve-bande { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.releve-bande > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.releve-bande dt {
  font-size: var(--t-petit); color: var(--mut);
  order: 2; line-height: 1.45; max-width: 24ch;
}
.releve-bande dd {
  margin: 0; order: 1;
  font-family: var(--serif);
  font-size: clamp(2.1rem, 3.6vw, 2.9rem);
  line-height: 1; color: var(--encre); white-space: nowrap;
}
.releve-bande dd.sig { color: var(--accent); }

/* ---------------------------------------- 9. CE QUE JE FAIS — en registre  */

.registre { border-top: 1px solid var(--ligne); }

.fait {
  display: grid;
  grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr);
  gap: clamp(14px, 4vw, 60px);
  padding-block: clamp(26px, 3.4vw, 40px);
  border-bottom: 1px solid var(--ligne);
}
.fait h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 2.8vw, 2.1rem); letter-spacing: -0.01em; }
.fait p { font-size: 1rem; line-height: 1.65; color: var(--texte-2); margin-bottom: 16px; max-width: 54ch; }

.outils { display: flex; flex-wrap: wrap; gap: 6px; }
.outils span {
  font-size: var(--t-micro); font-weight: 500;
  padding: 4px 10px; border: 1px solid var(--ligne); border-radius: 999px;
  color: var(--texte-2); background: var(--surface); white-space: nowrap;
}
@media (max-width: 780px) { .fait { grid-template-columns: 1fr; gap: 10px; } }

/* ------------------------------------------------------------ 10. PARCOURS  */

.parcours { border-top: 1px solid var(--ligne); }

.poste {
  display: grid;
  grid-template-columns: 170px 1fr; gap: clamp(14px, 3vw, 40px);
  padding-block: clamp(22px, 2.8vw, 32px);
  border-bottom: 1px solid var(--ligne);
}
.poste-date { font-size: var(--t-petit); color: var(--mut); line-height: 1.5; padding-top: 3px; font-variant-numeric: tabular-nums; }
.poste-date b { display: block; color: var(--accent); font-weight: 600; }
.poste h3 { font-size: clamp(1.1rem, 1.8vw, 1.3rem); margin-bottom: 4px; }
.poste-lieu { font-size: 0.9375rem; color: var(--texte-2); font-weight: 500; margin-bottom: 12px; }
.poste-lieu em { font-style: normal; font-weight: 400; color: var(--mut); }
.poste ul { margin: 0; padding: 0; list-style: none; max-width: var(--lisible); }
.poste li {
  position: relative; padding-left: 18px; margin-bottom: 7px;
  font-size: 0.9375rem; line-height: 1.6; color: var(--texte-2);
}
.poste li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 7px; height: 1px; background: var(--ligne-2); }
@media (max-width: 760px) {
  .poste { grid-template-columns: 1fr; gap: 6px; }
  .poste-date { padding-top: 0; display: flex; gap: 9px; align-items: baseline; }
  .poste-date b { display: inline; }
}

/* ------------------------------------------------------------ 11. PROJETS   */

.projets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.projet {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--ligne); border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.projet:hover, .projet:focus-within { border-color: var(--ligne-2); box-shadow: var(--ombre-2); }

/* --- LE CARROUSEL DE CAPTURES (défilement par accroche natif) ------------ */

.vues { position: relative; border-bottom: 1px solid var(--ligne); }
.vues-piste {
  display: flex; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.vues-piste::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .vues-piste { scroll-behavior: auto; } }

.vue {
  flex: 0 0 100%;
  scroll-snap-align: center; scroll-snap-stop: always;
  margin: 0; aspect-ratio: 16 / 10;
  position: relative; display: grid; place-items: center;
  background: var(--creux);
  overflow: hidden;
}
.vue img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Un film (16:9) dans une vue 16:10 : contenu, jamais rogné. */
.vue-film { background: #0E1117; }
.vue-film video { width: 100%; height: 100%; object-fit: contain; display: block; background: #0E1117; }

/* La vue-sigle : le nom court du projet sur sa courbe. */
.vue-sigle b {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 2.5rem);
  letter-spacing: -0.01em; color: var(--encre); z-index: 1;
}
.vue-sigle b span { color: var(--mut); }
.vue-sigle::after {
  content: ""; position: absolute; inset: 0;
  background: var(--courbe, none) center / 100% 100% no-repeat;
  opacity: 0.22;
  transition: opacity 0.3s ease;
}
.projet:hover .vue-sigle::after { opacity: 0.45; }

.vue figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 14px 12px;
  font-size: var(--t-micro); color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  text-align: left;
}

.vues-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px;
  display: none; place-items: center;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--ligne); border-radius: 50%;
  color: var(--encre); cursor: pointer; z-index: 2;
  transition: background 0.15s ease, opacity 0.2s ease;
}
.vues.a-plusieurs .vues-nav { display: grid; }
.vues-nav:hover { background: #fff; }
.vues-nav[disabled] { opacity: 0.35; cursor: default; }
.vues-nav.prec { left: 10px; }
.vues-nav.suiv { right: 10px; }
.vues-nav svg { width: 16px; height: 16px; }

.vues-points {
  position: absolute; left: 0; right: 0; bottom: 11px;
  display: none; justify-content: center; gap: 6px; z-index: 2;
}
.vues.a-plusieurs .vues-points { display: flex; }
.vues.a-plusieurs .vue figcaption { padding-bottom: 32px; }
.vues-points button {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.55); cursor: pointer;
  transition: background 0.18s ease, width 0.22s var(--sortie);
}
.vues-points button[aria-current="true"] { background: #fff; width: 18px; border-radius: 4px; }

.projet-corps { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.projet-corps h3 { font-size: 1.125rem; margin-bottom: 8px; }
.projet-corps p { font-size: 0.9375rem; line-height: 1.6; color: var(--texte-2); margin-bottom: 16px; max-width: none; }

.projet-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--ligne);
}
.projet-meta > span {
  font-size: var(--t-micro); font-weight: 500;
  padding: 3px 9px; border-radius: 999px;
  background: var(--creux); color: var(--texte-2);
}
.projet-meta .depot {
  margin-left: auto; font-size: var(--t-micro); font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none; color: var(--accent); padding: 4px 6px;
}
.projet-meta .depot svg { width: 13px; height: 13px; transition: transform 0.2s var(--sortie); }
.projet-meta .depot:hover svg { transform: translate(2px, -2px); }
.projet-meta .depot[download]:hover svg { transform: translateY(2px); }

.etat {
  font-size: var(--t-micro); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
}
.projet-meta > .etat.vif   { background: #E7F3EC; color: #1F6B43; }
.projet-meta > .etat.calme { background: var(--accent-w); color: var(--accent); }

.note-depots { margin-top: clamp(24px, 3vw, 36px); font-size: var(--t-petit); color: var(--mut); }

/* --------------------------------- 12. INTERVENTIONS ET PUBLICATIONS  */

.publis { display: grid; margin-bottom: clamp(30px, 4vw, 48px); }
.publi {
  display: grid; grid-template-columns: 120px 1fr auto;
  gap: clamp(14px, 2.4vw, 30px); align-items: start;
  padding-block: 24px; border-top: 1px solid var(--ligne);
}
.publi:first-child { border-top: 0; padding-top: 0; }
.publi-an { font-size: var(--t-petit); font-weight: 600; color: var(--accent); padding-top: 3px; font-variant-numeric: tabular-nums; }
.publi h3 { font-size: 1.1875rem; line-height: 1.3; margin-bottom: 8px; }
.publi-aut { font-size: 0.9375rem; color: var(--texte-2); margin-bottom: 6px; line-height: 1.6; }
.publi-aut b { color: var(--encre); }
.publi-rev { font-size: var(--t-petit); color: var(--mut); }
.publi-lien { padding-top: 3px; font-size: var(--t-petit); font-weight: 600; white-space: nowrap; }
@media (max-width: 720px) {
  .publi { grid-template-columns: 1fr; gap: 6px; }
  .publi-an { padding-top: 0; }
}

.attente {
  max-width: 74ch;
  border: 1px dashed var(--ligne-2); border-radius: 10px;
  background: var(--surface); padding: clamp(20px, 3vw, 28px);
}
.attente h3 { font-size: 1.0625rem; margin-bottom: 10px; }
.attente p { font-size: 0.9375rem; color: var(--texte-2); margin-bottom: 0.7em; }
.attente code {
  font-family: var(--mono); font-size: 0.8125rem;
  background: var(--creux); color: var(--encre);
  padding: 2px 6px; border-radius: 4px;
}

/* ------------------------------------------------------------ 13. CONTACT   */

.appel {
  border: 1px solid var(--ligne); border-radius: 12px;
  background: var(--surface);
  padding: clamp(30px, 5vw, 64px);
}
.contact-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(28px, 5vw, 64px); align-items: start;
}
@media (max-width: 880px) { .contact-grille { grid-template-columns: 1fr; } }
.appel h2 { font-family: var(--serif); font-weight: 400; font-size: var(--t-titre); letter-spacing: -0.015em; margin-bottom: 0.4em; }
.appel p { color: var(--texte-2); }
.appel .bouton { margin-top: 22px; }

.coord { display: grid; gap: 0; border-top: 1px solid var(--ligne); }
.coord a {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 4px;
  border-bottom: 1px solid var(--ligne);
  text-decoration: none; color: var(--encre); font-size: 0.9375rem;
  transition: color 0.15s ease, padding 0.2s var(--sortie);
}
.coord a:hover { color: var(--accent); padding-left: 10px; }
.coord i {
  font-style: normal; font-size: var(--t-micro); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--mut); width: 70px; flex: 0 0 auto;
}
.coord b { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.coord svg { width: 15px; height: 15px; margin-left: auto; flex: 0 0 auto; color: var(--mut); transition: color 0.15s; }
.coord a:hover svg { color: var(--accent); }

/* -------------------------------------------------------------- 14. PIED    */

.pied { border-top: 1px solid var(--ligne); padding-block: clamp(34px, 5vw, 56px); }
.pied-in {
  max-width: var(--large); margin-inline: auto; padding-inline: var(--gouttiere);
  display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: baseline;
}
.pied-nom { font-family: var(--serif); font-size: 1.5rem; }
.pied-liens { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-left: auto; }
.pied-liens a { font-size: var(--t-petit); color: var(--texte-2); text-decoration: none; }
.pied-liens a:hover { color: var(--accent); }
.pied-note {
  width: 100%; font-size: var(--t-micro); color: var(--mut);
  border-top: 1px solid var(--ligne); padding-top: 18px; max-width: none;
}

/* --------------------------------------- 15. L'OUVERTURE, UNE SEULE FOIS   */
/* Le bandeau apparaît en un fondu court ; rien d'autre ne rejoue d'entrée. */

.js .quart h1,
.js .quart .fonction,
.js .quart .ou,
.js .quart .actions,
.js .quart .portrait { animation: leve 0.7s var(--sortie) both; }
.js .quart .portrait { animation-delay: 0.05s; }
.js .quart .fonction { animation-delay: 0.12s; }
.js .quart .ou       { animation-delay: 0.18s; }
.js .quart .actions  { animation-delay: 0.24s; }
.quart h1 .l { display: block; }

@keyframes leve   { from { opacity: 0; transform: translateY(10px); } }
@keyframes parait { from { opacity: 0; } }

.js .projets.serie > * { animation: leve 0.5s var(--sortie) both; }

@media (prefers-reduced-motion: reduce) {
  .js .quart h1, .js .quart .fonction, .js .quart .ou, .js .quart .actions,
  .js .quart .portrait, .js .projets.serie > * { animation: parait 0.3s ease-out both; }
}

/* ------------------------------------------------------ 16. FOCUS CLAVIER   */

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.evite {
  position: absolute; left: 12px; top: -64px; z-index: 100;
  background: var(--encre); color: var(--fond);
  padding: 10px 16px; border-radius: 999px;
  font-size: 0.9375rem; font-weight: 600; text-decoration: none;
  transition: top 0.18s var(--sortie);
}
.evite:focus { top: 12px; color: var(--fond); }

/* ------------------------------------------------------------- 17. IMPRIME  */

@media print {
  body { background: #fff !important; color: #000; font-size: 10.5pt; }
  .barre, .pied, .ruban, .attente, .vues-nav, .vues-points, .chat { display: none !important; }
  section { padding-block: 14pt; }
  .appel { border: 0; padding: 0; }
  a { text-decoration: none; color: #000; }
  .projet, .fait, .poste, .publi { break-inside: avoid; }
  .js .quart h1, .js .quart .fonction, .js .quart .ou, .js .quart .actions,
  .js .quart .portrait, .js .projets.serie > * { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ------------------------------------------------------ 18. L'ASSISTANT    */
/* Construit par chat.js ; n'existe pas sans script ni relais configuré. */

[data-chat-ouvrir][hidden] { display: none; }

.chat { position: fixed; right: 20px; bottom: 20px; z-index: 80; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }

.chat-lanceur {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 18px 12px 15px;
  font: 600 0.9375rem/1 var(--texte);
  color: var(--fond); background: var(--encre);
  border: 0; border-radius: 999px; cursor: pointer;
  box-shadow: 0 6px 24px rgba(20, 23, 28, 0.18);
  transition: background 0.15s ease, transform 0.2s var(--sortie);
}
.chat-lanceur:hover { background: var(--accent); transform: translateY(-2px); }
.chat-lanceur svg { width: 18px; height: 18px; }
.chat.ouvert .chat-lanceur span { display: none; }
.chat.ouvert .chat-lanceur { padding: 12px; }

/* ⚠️ padding-block: 0 OBLIGATOIRE : le panneau est un <section>, et
   « section { padding-block: … } » lui poserait 140 px en haut et en bas. */
.chat-panneau {
  padding-block: 0;
  width: min(400px, calc(100vw - 40px));
  height: min(600px, calc(100vh - 120px));
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--ligne); border-radius: 14px;
  box-shadow: 0 20px 60px rgba(20, 23, 28, 0.16);
  overflow: hidden;
  animation: leve 0.3s var(--sortie) both;
}
.chat-panneau[hidden] { display: none; }

.chat-tete {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 12px 14px 16px; border-bottom: 1px solid var(--ligne);
}
.chat-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.chat-titres { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.chat-titres b { font-size: 0.9375rem; }
.chat-titres span { font-size: var(--t-micro); color: var(--mut); }
.chat-icone {
  width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto;
  border: 0; border-radius: 50%; background: transparent; color: var(--mut); cursor: pointer;
}
.chat-icone:hover { background: var(--creux); color: var(--encre); }
.chat-icone svg { width: 17px; height: 17px; }

.chat-fil {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: 18px 16px; display: flex; flex-direction: column; gap: 12px;
  background: var(--fond);
}
.chat-msg { max-width: 88%; font-size: 0.9375rem; line-height: 1.55; }
.chat-msg p { margin: 0 0 0.6em; max-width: none; }
.chat-msg p:last-child { margin-bottom: 0; }
.chat-msg ul { margin: 0 0 0.6em; padding-left: 18px; }
.chat-msg ul:last-child { margin-bottom: 0; }
.chat-msg li { margin-bottom: 3px; }
.chat-msg.lui {
  align-self: flex-start; color: var(--encre);
  background: var(--surface); border: 1px solid var(--ligne);
  padding: 10px 14px; border-radius: 4px 14px 14px 14px;
}
.chat-msg.moi {
  align-self: flex-end; color: #fff; background: var(--accent);
  padding: 10px 14px; border-radius: 14px 4px 14px 14px;
}
.chat-msg.chat-erreur { color: var(--texte-2); border-style: dashed; }

.chat-suggestions { display: flex; flex-wrap: wrap; gap: 7px; }
.chat-suggestions button {
  font: 500 0.8125rem/1.3 var(--texte); text-align: left;
  padding: 8px 12px; border-radius: 999px; cursor: pointer;
  color: var(--accent); background: var(--surface); border: 1px solid var(--ligne-2);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.chat-suggestions button:hover { background: var(--accent-w); border-color: var(--accent); }

.chat-attente { display: inline-flex; gap: 5px; padding: 14px 16px !important; }
.chat-attente i { width: 6px; height: 6px; border-radius: 50%; background: var(--mut); animation: chat-point 1.1s ease-in-out infinite; }
.chat-attente i:nth-child(2) { animation-delay: 0.15s; }
.chat-attente i:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-point { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.chat-saisie {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 12px; border-top: 1px solid var(--ligne); background: var(--surface);
}
.chat-saisie textarea {
  flex: 1; resize: none; min-height: 42px; max-height: 120px;
  padding: 10px 13px;
  font: 400 16px/1.4 var(--texte); color: var(--encre);
  background: var(--fond); border: 1px solid var(--ligne-2); border-radius: 12px;
}
.chat-saisie textarea:focus { outline: none; border-color: var(--accent); }
.chat-envoi {
  width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--encre); color: var(--fond);
  transition: background 0.15s ease;
}
.chat-envoi:hover { background: var(--accent); }
.chat-envoi[disabled] { opacity: 0.4; cursor: default; }
.chat-envoi svg { width: 18px; height: 18px; }

.chat-note { margin: 0; padding: 0 14px 11px; font-size: var(--t-micro); color: var(--mut); background: var(--surface); max-width: none; }

@media (max-width: 560px) {
  .chat { right: 12px; bottom: 12px; left: 12px; }
  .chat-panneau { width: 100%; height: calc(100dvh - 96px); }
}
@media (prefers-reduced-motion: reduce) {
  .chat-panneau, .chat-attente i { animation: none; }
}

/* ---------------------------------------------------- 19. L'ATS MAISON     */
/* Page ats/ : remplie par ats.js. Même retenue que le reste : le vert de
   « En production » marque les points +, l'encre les points −. Pas de rouge :
   un point faible assumé n'est pas une alerte. */

.ats-bandeau { padding-block: clamp(40px, 6vw, 80px) clamp(28px, 4vw, 48px); }
.ats-bandeau h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--t-titre); letter-spacing: -0.015em; line-height: 1.05;
  margin-bottom: 0.45em;
}
.ats-bandeau h1 em { font-style: italic; color: var(--accent); }
.ats-bandeau .fonction { max-width: 52ch; }
.ats-bandeau .ou { margin-bottom: 0; }

/* Collée au bandeau : pas de filet ni de grand blanc entre les deux. */
.ats-section { padding-block: 0 clamp(56px, 8vw, 104px); }
section.ats-section { border-top: 0; }

.ats-label {
  display: block; margin-bottom: 10px;
  font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mut);
}
.ats-form textarea {
  display: block; width: 100%; min-height: 220px; resize: vertical;
  padding: 16px 18px;
  font: 400 16px/1.55 var(--texte); color: var(--encre);
  background: var(--surface); border: 1px solid var(--ligne-2); border-radius: 12px;
  box-shadow: var(--ombre-1);
}
.ats-form textarea:focus { outline: none; border-color: var(--accent); }
.ats-boutons { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.ats-ou { font-size: var(--t-petit); color: var(--mut); margin-left: 6px; }
.ats-exemple {
  font: 500 0.8125rem/1.3 var(--texte);
  padding: 8px 13px; border-radius: 999px; cursor: pointer;
  color: var(--accent); background: var(--surface); border: 1px solid var(--ligne-2);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ats-exemple:hover { background: var(--accent-w); border-color: var(--accent); }
/* Sans script, un formulaire qui ne répond pas serait pire que pas de formulaire. */
html:not(.js) .ats-form { display: none; }
.ats-sans { color: var(--texte-2); }
.ats-etat { margin: 10px 0 0; font-size: var(--t-petit); color: var(--accent); min-height: 0; }
.ats-etat:empty { display: none; }
.ats-petit { font-size: var(--t-micro); color: var(--mut); margin: 10px 0 0; max-width: 70ch; }

/* « Pas d'offre rédigée ? » : replié par défaut, il ne doit pas voler la
   vedette au champ principal. */
.ats-rediger { margin-top: 18px; border-top: 1px solid var(--ligne); padding-top: 14px; }
.ats-rediger[hidden] { display: none; }
.ats-rediger summary { cursor: pointer; font-size: var(--t-petit); font-weight: 600; color: var(--accent); }
.ats-rediger-corps { padding-top: 16px; display: grid; gap: 8px; }
.ats-rediger-corps .ats-label { margin: 8px 0 0; }
.ats-rediger-corps textarea {
  display: block; width: 100%; resize: vertical; padding: 12px 14px;
  font: 400 16px/1.5 var(--texte); color: var(--encre);
  background: var(--surface); border: 1px solid var(--ligne-2); border-radius: 10px;
}
.ats-rediger-corps textarea:focus { outline: none; border-color: var(--accent); }

/* L'avis de l'IA : un encadré à part, pour qu'on ne le confonde pas avec
   le calcul de l'algorithme. */
.ats-ia {
  margin-bottom: clamp(20px, 3vw, 28px); padding: clamp(16px, 2.6vw, 24px);
  background: var(--accent-w); border-radius: 10px;
}
.ats-ia[hidden] { display: none; }
.ats-ia-texte { font-size: 0.9375rem; line-height: 1.6; color: var(--encre); }
.ats-ia-texte:empty { display: none; }
.ats-ia-texte p { margin: 0 0 0.6em; max-width: 70ch; }
.ats-ia-texte ul { margin: 0 0 0.8em; padding-left: 20px; }
.ats-ia-texte li { margin-bottom: 4px; }
.ats-ia-texte + .bouton, .ats-ia-texte:not(:empty) + .bouton { margin-top: 6px; }
.ats-ia .bouton[hidden] { display: none; }
.ats-attente { color: var(--texte-2); font-style: italic; }

.ats-resultat {
  margin-top: clamp(28px, 4vw, 44px);
  background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px;
  padding: clamp(22px, 4vw, 44px);
  scroll-margin-top: 96px;
  animation: leve 0.4s var(--sortie) both;
}
.ats-resultat:focus { outline: none; }
.ats-resultat[hidden] { display: none; }

.ats-note {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(18px, 4vw, 44px); align-items: center;
  padding-bottom: clamp(20px, 3vw, 30px); border-bottom: 1px solid var(--ligne);
}
.ats-chiffre { margin: 0; white-space: nowrap; line-height: 0.9; }
.ats-chiffre b {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(4.2rem, 11vw, 7rem); letter-spacing: -0.03em; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.ats-chiffre span { font-size: 1.125rem; color: var(--mut); margin-left: 4px; }
.ats-verdict { font-family: var(--serif); font-size: clamp(1.3rem, 2.3vw, 1.7rem); line-height: 1.3; color: var(--encre); margin-bottom: 16px; }
.ats-jauge { height: 4px; border-radius: 4px; background: var(--creux); overflow: hidden; max-width: 420px; }
.ats-jauge span { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.8s var(--sortie); }
@media (max-width: 560px) { .ats-note { grid-template-columns: 1fr; gap: 10px; } }

.ats-colonnes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(22px, 4vw, 48px);
  padding-block: clamp(22px, 3vw, 32px);
}
.ats-col[hidden] { display: none; }
.ats-col h2 {
  font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mut); margin-bottom: 14px;
}
.ats-col ul { list-style: none; margin: 0; padding: 0; }
.ats-col li {
  position: relative; padding: 12px 0 12px 30px;
  border-top: 1px solid var(--ligne);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
}
.ats-col li::before {
  position: absolute; left: 0; top: 13px;
  width: 19px; height: 19px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.8125rem; font-weight: 700; line-height: 1;
}
.ats-col.plus li::before  { content: "+"; background: #E7F3EC; color: #1F6B43; }
.ats-col.moins li::before { content: "−"; background: var(--creux); color: var(--encre); }
.ats-col li b { font-size: 0.9375rem; }
.ats-tag { font-size: var(--t-micro); color: var(--mut); }
.ats-dit { flex-basis: 100%; font-size: 0.9375rem; line-height: 1.55; color: var(--texte-2); }

.ats-clins {
  list-style: none; margin: 0 0 clamp(20px, 3vw, 28px); padding: 14px 18px;
  background: var(--fond); border: 1px dashed var(--ligne-2); border-radius: 10px;
  font-size: 0.9375rem; color: var(--texte-2);
}
.ats-clins li + li { margin-top: 6px; }
.ats-clins[hidden] { display: none; }

.ats-mini { font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); margin-bottom: 10px; max-width: none; }
.ats-mini span { text-transform: none; letter-spacing: 0; font-weight: 400; }
.ats-ligne { padding-top: clamp(18px, 3vw, 26px); border-top: 1px solid var(--ligne); }
.ats-ligne[hidden] { display: none; }
.ats-ligne blockquote {
  margin: 0; padding-left: 16px; border-left: 2px solid var(--accent);
  font-family: var(--serif); font-size: clamp(1.15rem, 2vw, 1.35rem); line-height: 1.4; color: var(--encre);
  max-width: 62ch;
}

.ats-calculs { margin-top: clamp(22px, 3vw, 30px); border-top: 1px solid var(--ligne); padding-top: 16px; }
.ats-calculs summary { cursor: pointer; font-size: var(--t-petit); font-weight: 600; color: var(--accent); }
.ats-calculs[open] summary { margin-bottom: 16px; }
.ats-table { width: 100%; border-collapse: collapse; font-size: var(--t-petit); margin-bottom: 14px; }
.ats-table th { text-align: left; font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mut); padding: 0 10px 8px 0; }
.ats-table td { padding: 8px 10px 8px 0; border-top: 1px solid var(--ligne); color: var(--texte-2); vertical-align: top; }
.ats-table td + td { font-family: var(--mono); font-size: 0.8125rem; white-space: nowrap; color: var(--encre); }
.ats-formule { font-family: var(--mono); font-size: 0.8125rem; background: var(--creux); padding: 10px 12px; border-radius: 6px; max-width: none; overflow-x: auto; }
.ats-termes { display: flex; flex-wrap: wrap; gap: 6px; max-width: none; }
.ats-termes span {
  font-family: var(--mono); font-size: var(--t-micro);
  padding: 3px 9px; border-radius: 999px; background: var(--creux); color: var(--texte-2);
}
.ats-termes span.connu { color: var(--accent); background: var(--accent-w); text-decoration: underline; text-underline-offset: 3px; }

.ats-resultat .actions { margin-top: clamp(22px, 3vw, 30px); }

@media (prefers-reduced-motion: reduce) {
  .ats-resultat { animation: none; }
  .ats-jauge span { transition: none; }
}

/* ------------------------------------------- 20. LE LABO (page d'accueil)  */

.labo-carte {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(18px, 4vw, 48px); align-items: end;
  padding: clamp(24px, 4vw, 44px);
  background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px;
  text-decoration: none; color: var(--encre);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.labo-carte:hover { color: var(--encre); border-color: var(--ligne-2); box-shadow: var(--ombre-2); }
.labo-carte h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 3.2vw, 2.4rem); letter-spacing: -0.01em; margin-bottom: 12px; }
.labo-carte p { color: var(--texte-2); font-size: 1rem; line-height: 1.65; margin-bottom: 16px; max-width: 60ch; }
.labo-go {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  padding: 12px 20px; border-radius: 999px;
  background: var(--encre); color: var(--fond);
  font-size: 0.9375rem; font-weight: 600;
  transition: background 0.15s ease;
}
.labo-go svg { width: 16px; height: 16px; transition: transform 0.2s var(--sortie); }
.labo-carte:hover .labo-go { background: var(--accent); }
.labo-carte:hover .labo-go svg { transform: translateX(3px); }
@media (max-width: 760px) {
  .labo-carte { grid-template-columns: 1fr; align-items: start; }
  .labo-go { justify-self: start; }
}