/* ==========================================================================
   CV Harith Seiler — feuille de style unique (web + impression A4)
   Réalisation : Kito Digital
   --------------------------------------------------------------------------
   MINI-CHARTE « CHANTIER » — gros œuvre, sécurité, énergie d'un jeune actif
   · Anthracite   #1B2126  titres, nom (couleur du béton brut / outillage)
   · Texte        #2E363C  corps de texte
   · Secondaire   #5F676D  dates, lieux, libellés (5,8:1 sur blanc)
   · Accent       #B4480F  orange brûlé, référence à la signalisation et aux
                           EPI de chantier : nom de famille, intitulés de
                           section, repères. 5,4:1 sur blanc, gris moyen en N&B
   · Accent doux  #FBF1EA  un seul bloc mis en avant (postes visés)
   · Béton        #F4F2EE / #E2DED8  étiquettes de compétences et filets
   · Vert signal  #1E7A45  réservé au statut « disponible », rien d'autre
   · Règle couleur : l'orange structure et guide l'œil, jamais en grand aplat.
     Aucun sens porté par la couleur seule (texte toujours présent).
   Mode sombre (sur demande, écran seulement) : fond #121416, carte #1B1E21, orange #F2894A.
   Typographies : Plus Jakarta Sans 700/800 (nom, titres) · Inter 400–700
   (texte). Auto-hébergées : aucun appel externe, rendu PDF identique.
   Échelle (1rem = 16px écran / 9.6pt impression) :
     nom 2.5rem · rôle 1.2rem · h2 .78rem capitales · h3 1rem · texte 1rem
     · secondaire .875rem · interlignage 1.45
   Espacements : multiples de .25rem ; sections séparées de 1.35rem.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../assets/fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../assets/fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --cv-ink:        #1B2126;
  --cv-text:       #2E363C;
  --cv-muted:      #5F676D;
  --cv-accent:     #B4480F;
  --cv-accent-2:   #943A0B;
  --cv-accent-soft:#FBF1EA;
  --cv-line:       #E2DED8;
  --cv-paper:      #FFFFFF;
  --cv-desk:       #EEECE8;
  --cv-chip-bg:    #F4F2EE;
  --cv-chip-line:  #E0DBD3;
  --cv-ok:         #1E7A45;
  --cv-ok-soft:    #E1F1E7;
  --cv-on-accent:  #FFFFFF;
  --cv-bar:        rgba(255, 255, 255, .82);
  --cv-bar-solid:  #FFFFFF;
  --cv-shadow:     0 1px 2px rgba(27, 33, 38, .05), 0 8px 28px rgba(27, 33, 38, .07);
  color-scheme: light;

  --cv-font-head: "Plus Jakarta Sans", "Inter", Arial, sans-serif;
  --cv-font-body: "Inter", Arial, "Helvetica Neue", sans-serif;

  --cv-radius:    10px;
  --cv-radius-sm: 6px;
  --cv-gap:       1.35rem;
}

/* ---------- Mode sombre : uniquement sur demande (bouton), écran seulement.
   Le CV s'ouvre toujours en clair ; l'impression reste en clair. ---------- */
@media screen {
  :root[data-theme="dark"] {
    --cv-ink:        #F1EEEA;
    --cv-text:       #CFCAC4;
    --cv-muted:      #9C968F;
    --cv-accent:     #F2894A;
    --cv-accent-2:   #F6A270;
    --cv-accent-soft:rgba(242, 137, 74, .12);
    --cv-line:       #2E3236;
    --cv-paper:      #1B1E21;
    --cv-desk:       #121416;
    --cv-chip-bg:    #24282C;
    --cv-chip-line:  #353A3F;
    --cv-ok:         #4CC27F;
    --cv-ok-soft:    rgba(76, 194, 127, .16);
    --cv-on-accent:  #16181A;
    --cv-bar:        rgba(18, 20, 22, .82);
    --cv-bar-solid:  #121416;
    --cv-shadow:     0 1px 2px rgba(0, 0, 0, .35), 0 8px 28px rgba(0, 0, 0, .4);
    color-scheme: dark;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--cv-font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--cv-text);
  background: var(--cv-desk);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
  overflow-wrap: break-word;
}
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--cv-accent); text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--cv-accent); outline-offset: 2px; border-radius: 3px; }
b, strong { font-weight: 600; color: var(--cv-ink); }
[hidden] { display: none !important; }
.print-only { display: none; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--cv-accent); color: #fff; padding: .5rem 1rem;
  border-radius: 0 0 var(--cv-radius-sm) var(--cv-radius-sm); z-index: 20;
}
.skip-link:focus { left: 1rem; }

/* ---------- Barre d'actions (écran) ---------- */
.toolbar {
  position: sticky; top: 0; z-index: 10;
  background: var(--cv-bar-solid);
  border-bottom: 1px solid var(--cv-line);
}
@supports (backdrop-filter: blur(1px)) {
  .toolbar { background: var(--cv-bar); backdrop-filter: blur(10px); }
}
@supports not (backdrop-filter: blur(1px)) {
  .toolbar { background: var(--cv-bar-solid); }
}
.toolbar-inner {
  max-width: 880px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .6rem 1rem;
}
.toolbar-title {
  font-family: var(--cv-font-head); font-weight: 700; font-size: .9rem;
  color: var(--cv-ink); white-space: nowrap;
}
.toolbar-actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }

.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 40px; padding: .45rem .9rem;
  font: 600 .875rem/1 var(--cv-font-body);
  border-radius: var(--cv-radius-sm); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--cv-accent); color: var(--cv-on-accent); }
.btn-primary:hover { background: var(--cv-accent-2); color: var(--cv-on-accent); }
.btn-ghost { background: var(--cv-paper); color: var(--cv-ink); border-color: var(--cv-line); }

/* Bouton thème : icône selon le thème affiché */
.js-theme .ico-sun { display: none; }
.is-dark .js-theme .ico-sun { display: block; }
.is-dark .js-theme .ico-moon { display: none; }
.btn-ghost:hover { border-color: var(--cv-accent); color: var(--cv-accent); }

/* ---------- Feuille ---------- */
.sheet {
  max-width: 880px;
  margin: 1.5rem auto 2.5rem;
  padding: 2.75rem 3rem 1.75rem;
  background: var(--cv-paper);
  border: 1px solid var(--cv-line);
  border-radius: var(--cv-radius);
  box-shadow: var(--cv-shadow);
}

/* ---------- En-tête ---------- */
.cv-header {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "id photo" "contact contact" "glance glance";
  column-gap: 1.5rem;
  padding-bottom: 1.1rem;
  margin-bottom: var(--cv-gap);
  border-bottom: 1px solid var(--cv-line);
}
.cv-id { grid-area: id; align-self: center; min-width: 0; }
.cv-photo {
  grid-area: photo;
  width: 104px; height: 139px;
  object-fit: cover; object-position: center 20%;
  border-radius: var(--cv-radius-sm);
  border: 1px solid var(--cv-line);
}
.cv-name {
  font-family: var(--cv-font-head); font-weight: 800;
  font-size: 2.5rem; line-height: 1.05; letter-spacing: -.02em;
  color: var(--cv-ink);
}
.cv-name-last { text-transform: uppercase; color: var(--cv-accent); letter-spacing: -.01em; }
.cv-role {
  margin-top: .45rem;
  font-family: var(--cv-font-head); font-weight: 700;
  font-size: 1.2rem; line-height: 1.25; color: var(--cv-ink);
}
.cv-target { margin-top: .3rem; font-size: .95rem; color: var(--cv-muted); }
.cv-target strong { color: var(--cv-text); }

.cv-contact {
  grid-area: contact;
  display: flex; flex-wrap: wrap; gap: .45rem 1.35rem;
  margin-top: 1rem;
  font-size: .9rem; color: var(--cv-text);
}
.cv-contact li { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; }
.cv-contact svg {
  width: 15px; height: 15px; flex-shrink: 0;
  fill: none; stroke: var(--cv-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.cv-contact a { font-weight: 600; color: var(--cv-ink); }

/* ---------- Bandeau « en un coup d'œil » ---------- */
.cv-glance {
  grid-area: glance;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr));
  margin: 1rem 0 0;
  border: 1px solid var(--cv-line);
  border-radius: var(--cv-radius-sm);
  overflow: hidden;
}
.cv-glance > div {
  padding: .6rem .8rem;
  border-left: 1px solid var(--cv-line);
  min-width: 0;
}
.cv-glance > div:first-child { border-left: 0; }
.cv-glance dt {
  font-size: .68rem; font-weight: 700; line-height: 1.2;
  letter-spacing: .03em; text-transform: uppercase;
  color: var(--cv-muted);
}
.cv-glance dd {
  margin-top: .2rem;
  font-family: var(--cv-font-head); font-weight: 700;
  font-size: .95rem; line-height: 1.25; color: var(--cv-ink);
}
.cv-glance dd .nowrap { display: inline; margin: 0; font: inherit; color: inherit; white-space: nowrap; }
.cv-glance dd span:not(.nowrap) {
  display: block; margin-top: .15rem;
  font-family: var(--cv-font-body); font-weight: 500;
  font-size: .8rem; color: var(--cv-muted);
}
.cv-glance .is-status dd { color: var(--cv-ok); }
.cv-glance .dot {
  display: inline-block; vertical-align: middle;
  width: .5em; height: .5em; margin: -.1em .4em 0 .05em;
  border-radius: 50%; background: var(--cv-ok);
  box-shadow: 0 0 0 .2em var(--cv-ok-soft);
}

/* ---------- Corps : 2 colonnes (ordre DOM = ordre de lecture ATS) ---------- */
.cv-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15.5rem;
  gap: 2.25rem;
}
.cv-side {
  padding-left: 1.5rem;
  border-left: 1px solid var(--cv-line);
}
.cv-section + .cv-section { margin-top: var(--cv-gap); }

.cv-h2 {
  display: flex; align-items: center; gap: .6rem;
  margin-bottom: .75rem;
  font-family: var(--cv-font-head); font-weight: 800;
  font-size: .78rem; line-height: 1.2;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--cv-accent);
  break-after: avoid; page-break-after: avoid;
}
.cv-h2::after { content: ""; flex: 1; height: 1px; background: var(--cv-line); }
.cv-side .cv-h2::after { display: none; }

.cv-h3 {
  margin: .9rem 0 .4rem;
  font-size: .8rem; font-weight: 600; line-height: 1.3;
  color: var(--cv-ink);
}
.cv-h2 + .cv-h3 { margin-top: 0; }

/* ---------- Profil ---------- */
.cv-summary { line-height: 1.55; }
.cv-wanted {
  margin-top: .7rem; padding: .55rem .8rem;
  background: var(--cv-accent-soft);
  border-left: 3px solid var(--cv-accent);
  border-radius: 0 var(--cv-radius-sm) var(--cv-radius-sm) 0;
  font-size: .9rem; font-weight: 500; color: var(--cv-ink); line-height: 1.45;
}
.cv-wanted-label {
  display: block; margin-bottom: .1rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cv-accent);
}

/* ---------- Expériences : fil chronologique ---------- */
.timeline { position: relative; }
.job {
  position: relative;
  padding-left: 1.15rem;
  break-inside: avoid; page-break-inside: avoid;
}
.job::before { /* repère */
  content: ""; position: absolute; left: 0; top: .42em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cv-paper); border: 2px solid var(--cv-accent);
}
.job::after { /* fil */
  content: ""; position: absolute; left: 4.5px; top: 1.2em; bottom: -1rem;
  width: 1px; background: var(--cv-line);
}
.job:last-child::after { display: none; }
.job + .job { margin-top: 1rem; }
.job--main::before { background: var(--cv-accent); }

.job-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .25rem 1rem; flex-wrap: wrap;
}
.job-title, .edu-title, .cv-role {
  word-spacing: .06em;
}
.job-title, .edu-title {
  font-family: var(--cv-font-head); font-weight: 700;
  font-size: 1.05rem; line-height: 1.3; color: var(--cv-ink);
}
.job--main .job-title { font-size: 1.15rem; }
.job-date {
  font-size: .85rem; font-weight: 600; color: var(--cv-muted);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.job-org { margin-top: .1rem; font-size: .92rem; color: var(--cv-text); }
.job-context { margin-top: .1rem; font-size: .85rem; color: var(--cv-muted); font-style: italic; }

.job-tasks { margin-top: .45rem; }
.job-tasks li {
  position: relative; padding-left: .9rem;
  font-size: .95rem; line-height: 1.45;
}
.job-tasks li + li { margin-top: .18rem; }
.job-tasks li::before {
  content: ""; position: absolute; left: .1em; top: .6em;
  width: .3em; height: .3em; border-radius: 50%; background: var(--cv-accent);
}

/* ---------- Formation ---------- */
.edu + .edu { margin-top: .75rem; }
.edu { break-inside: avoid; page-break-inside: avoid; }
.edu-title { font-size: .98rem; flex: 1 1 0; min-width: 0; }
.edu-org { margin-top: .1rem; font-size: .88rem; color: var(--cv-muted); }
.edu-sub { font-family: var(--cv-font-body); font-weight: 500; font-size: .85em; color: var(--cv-muted); }

/* ---------- Colonne latérale ---------- */
.chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.chips li {
  padding: .18rem .5rem;
  font-size: .8rem; font-weight: 500; line-height: 1.35;
  color: var(--cv-ink);
  background: var(--cv-chip-bg);
  border: 1px solid var(--cv-chip-line);
  border-radius: 4px;
}
.plain li {
  position: relative; padding-left: .85rem;
  font-size: .88rem; line-height: 1.4;
}
.plain li + li { margin-top: .2rem; }
.plain li::before {
  content: ""; position: absolute; left: .1em; top: .58em;
  width: .3em; height: .3em; border-radius: 50%; background: var(--cv-accent);
}

.facts div + div { margin-top: .5rem; }
.facts dt {
  font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cv-muted);
}
.facts dd { font-size: .9rem; font-weight: 500; color: var(--cv-ink); line-height: 1.4; }

/* ---------- Pied ---------- */
.cv-footer {
  margin-top: 1.75rem; padding-top: .75rem;
  border-top: 1px solid var(--cv-line);
  font-size: .78rem; color: var(--cv-muted); text-align: right;
}
.cv-footer a { font-weight: 600; }

/* ==========================================================================
   RESPONSIVE (écran uniquement)
   ========================================================================== */
@media screen and (max-width: 780px) {
  .sheet { margin: 1rem; padding: 2rem 1.75rem 1.5rem; }
  .cv-body { grid-template-columns: minmax(0, 1fr) 13.5rem; gap: 1.75rem; }
  .cv-side { padding-left: 1.25rem; }
}

@media screen and (max-width: 680px) {
  .toolbar-title { display: none; }
  .toolbar-actions { width: 100%; justify-content: stretch; }
  .toolbar-actions .btn { flex: 1 1 auto; justify-content: center; }

  .sheet {
    margin: 0; padding: 1.5rem 1rem 1.25rem;
    border: 0; border-radius: 0; box-shadow: none;
  }
  .cv-header { column-gap: 1rem; }
  .cv-photo { width: 76px; height: 101px; }
  .cv-name { font-size: clamp(1.75rem, 8vw, 2.25rem); }
  .cv-role { font-size: 1.05rem; }
  .cv-target { font-size: .9rem; }
  .cv-contact { gap: .5rem 1.25rem; }
  .cv-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cv-glance > div:nth-child(3) { border-left: 0; }
  .cv-glance > div:nth-child(n+3) { border-top: 1px solid var(--cv-line); }
  .js-theme .js-theme-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .toolbar-actions .js-theme { flex: 0 0 auto; }
  .cv-contact li { min-height: 28px; }

  .cv-body { grid-template-columns: minmax(0, 1fr); gap: var(--cv-gap); }
  .cv-side { padding-left: 0; border-left: 0; }
  .cv-side .cv-h2::after { display: block; }
  .facts { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; }
  .facts div + div { margin-top: 0; }
  .cv-footer { text-align: left; }
  .edu .job-head { flex-direction: column; gap: .1rem; }
  .edu-title { flex: none; }
  .js-print { display: none !important; } /* impression peu utile sur mobile */
}

@media screen and (max-width: 360px) {
  .cv-header { grid-template-columns: 1fr; grid-template-areas: "photo" "id" "contact"; }
  .cv-photo { margin-bottom: .75rem; }
  .facts { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   IMPRESSION / PDF A4 — 210 × 297 mm
   Marges 12 × 14 mm : zone imprimable sûre sur toutes les imprimantes.
   1rem = 9.6pt : missions 9.1pt, aucun texte sous 7.5pt.
   ========================================================================== */
@page {
  size: A4 portrait;
  margin: 12mm 14mm 11mm;
}

@media print {
  html { font-size: 9.6pt; }
  body {
    background: #fff; color: var(--cv-text);
    line-height: 1.42;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .toolbar, .skip-link, .screen-only { display: none !important; }
  .print-only { display: block; }

  .sheet {
    max-width: none; margin: 0; padding: 0;
    border: 0; border-radius: 0; box-shadow: none;
  }
  a { text-decoration: none !important; }

  .cv-header { padding-bottom: 3.5mm; margin-bottom: 4.5mm; column-gap: 6mm; }
  .cv-photo { width: 23mm; height: 30.5mm; border-radius: 2mm; }
  .cv-summary { line-height: 1.5; }
  .cv-wanted { margin-top: 2.5mm; padding: 1.8mm 3mm; }
  .job-tasks { margin-top: 1.5mm; }
  .job-tasks li + li { margin-top: .5mm; }
  .job + .job { margin-top: 3.2mm; }
  .edu + .edu { margin-top: 2.5mm; }
  .chips li { padding: .12rem .45rem; }
  .cv-h3 { margin: 3mm 0 1.4mm; }
  .facts div + div { margin-top: 1.6mm; }
  .cv-name { font-size: 2.55rem; }
  .cv-contact { margin-top: 3mm; gap: 1.5mm 5mm; font-size: .92rem; }
  .cv-glance { margin-top: 3.5mm; border-radius: 1.5mm; }
  .cv-wanted-label { display: inline; margin: 0 .5em 0 0; }
  .cv-glance > div { padding: 2mm 3mm; }
  .cv-glance, .cv-glance > div { break-inside: avoid; }
  .cv-contact svg { width: 3.2mm; height: 3.2mm; }

  .cv-body { grid-template-columns: minmax(0, 1fr) 55mm; gap: 7mm; }
  .cv-side { padding-left: 5mm; }
  :root { --cv-gap: 4.4mm; }

  .cv-footer { margin-top: 5mm; padding-top: 2mm; font-size: .8rem; }

  /* Pas de coupure au milieu d'un bloc */
  .job, .edu, .cv-wanted, .facts div, .chips { break-inside: avoid; page-break-inside: avoid; }
  .cv-h2, .cv-h3, .job-head { break-after: avoid; page-break-after: avoid; }
  p, li { orphans: 3; widows: 3; }

  /* Mode PDF : aucun effet coûteux */
  * { transition: none !important; animation: none !important; }
}

/* Classe de secours si le PDF est généré via un outil qui ignore @media print */
body.pdf-mode .toolbar,
body.pdf-mode .screen-only { display: none !important; }
body.pdf-mode * { backdrop-filter: none !important; box-shadow: none !important; }