/* Mise en page simple : en-tête, bandeau photo, sections empilées sur 1080 px, texte de 18 px.
   Couleurs SDU : bleu ardoise (bleu foncé pour tout fond qui porte du texte, contraste AA), gris clair, rouge du logo. */
:root {
  --bleu: #4E6382;
  --ardoise: #647B9C;
  --encre: #1F2A3D;
  --rouge: #C4675F;
  --rouge-fond: #D27E76;
  --gris: #EEF1F5;
  --fond: #FFFFFF;
  --texte: #222B38;
  --texte-doux: #4D5768;
  --trait: #D3DAE3;
  --sur-bleu: #FFFFFF;

  --titre: "Manrope", "Segoe UI", system-ui, sans-serif;
  --corps: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --largeur: 1080px;
  --rayon: 8px;
  --rayon-bloc: 12px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bleu: #3E5272; --ardoise: #9DB0CC; --encre: #E4EAF2; --rouge: #F4AAA4; --rouge-fond: #C9706A; --gris: #1A222D;
    --fond: #11171F; --texte: #E2E7EE; --texte-doux: #B0BAC8; --trait: #2E3A4A; --sur-bleu: #FFFFFF;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bleu: #3E5272; --ardoise: #9DB0CC; --encre: #E4EAF2; --rouge: #F4AAA4; --rouge-fond: #C9706A; --gris: #1A222D;
  --fond: #11171F; --texte: #E2E7EE; --texte-doux: #B0BAC8; --trait: #2E3A4A; --sur-bleu: #FFFFFF;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body { margin: 0; background: var(--fond); color: var(--texte); font: 400 1.125rem/1.7 var(--corps); }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--titre); color: var(--encre); line-height: 1.25; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--rouge); outline-offset: 3px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement { position: absolute; left: 16px; top: -60px; z-index: 20; background: var(--bleu); color: var(--sur-bleu); padding: 10px 16px; border-radius: 6px; font-weight: 700; }
.evitement:focus { top: calc(env(safe-area-inset-top, 0px) + 10px); }

.conteneur {
  max-width: var(--largeur); margin-inline: auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.surtitre { font: 700 .85rem/1.2 var(--titre); letter-spacing: .12em; text-transform: uppercase; color: var(--rouge); }
.pile { display: grid; gap: 16px; align-content: start; min-width: 0; }
.lisible { max-width: 42rem; }

/* ---------- En-tête fixe : bandeau logo arrondi + menu, toujours visibles au défilement ---------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--fond); }
.haut { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 9; background: var(--fond); padding-top: 8px; }
section[id] { scroll-margin-top: 220px; }

/* Bandeau logo : bleu ardoise foncé, logo seul en blanc monochrome, identique dans les deux thèmes */
.lettre {
  background: linear-gradient(180deg, #3A4C66 0%, #2C3B52 100%);
  margin-inline: max(10px, env(safe-area-inset-left, 0px)) max(10px, env(safe-area-inset-right, 0px));
  border-radius: var(--rayon-bloc);
}
.lettre .conteneur { display: flex; justify-content: center; align-items: center; padding-block: 20px; }
.logo { display: block; border-radius: 6px; }
.logo img { height: 72px; width: auto; }
.logo:focus-visible { outline-color: #FFFFFF; }
@media (max-width: 760px) {
  section[id] { scroll-margin-top: 165px; }
  .lettre .conteneur { padding-block: 14px; }
  .logo img { height: 52px; }
}

/* ---------- Menu : pastilles arrondies ---------- */
.menu .conteneur { padding-block: 8px; }
.menu ul {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 auto; padding: 6px; list-style: none;
  width: fit-content; max-width: 100%; background: var(--gris); border-radius: 8px;
}
.menu a { display: block; text-decoration: none; font: 700 .98rem/1 var(--titre); color: var(--texte); padding: 12px 18px; border-radius: 8px; transition: background .15s, color .15s; }
.menu a:hover { background: var(--fond); color: var(--bleu); }
.menu a[aria-current="page"] { background: var(--bleu); color: var(--sur-bleu); }
.menu a.menu-contact { background: var(--rouge-fond); color: #fff; }
.menu a.menu-contact:hover { background: color-mix(in srgb, var(--rouge-fond) 82%, black); }
/* Sur téléphone : une seule ligne qui défile latéralement, pour garder l'en-tête compact */
@media (max-width: 620px) {
  .menu ul {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; width: auto;
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent);
  }
  .menu ul::-webkit-scrollbar { display: none; }
  .menu li { flex: none; }
  .menu a { padding: 10px 14px; font-size: .92rem; white-space: nowrap; }
}

/* ---------- Boutons ---------- */
.bouton { display: inline-block; text-decoration: none; font: 700 1.05rem/1 var(--titre); padding: 16px 28px; border-radius: 8px; background: var(--rouge-fond); color: #fff; }
.bouton:hover { background: color-mix(in srgb, var(--rouge-fond) 82%, black); }

/* ---------- Bandeau : texte sur fond bleu, photo entière à côté (jamais recadrée) ---------- */
.bandeau, .bande-bleue { margin-inline: max(10px, env(safe-area-inset-left, 0px)) max(10px, env(safe-area-inset-right, 0px)); border-radius: var(--rayon-bloc); }
.bandeau { background: var(--bleu); color: var(--sur-bleu); margin-top: 6px; }
.bandeau .conteneur { padding-block: clamp(36px, 6vw, 64px); display: grid; gap: 28px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .bandeau .conteneur { grid-template-columns: 1fr 1.15fr; gap: 48px; } }
.bandeau-texte { display: grid; gap: 18px; justify-items: start; min-width: 0; }
.bandeau h1, .bandeau .surtitre { color: var(--sur-bleu); }
.bandeau h1 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.bandeau .chapo { font-size: clamp(1.1rem, 1.6vw, 1.3rem); max-width: 34rem; }
.bandeau-photo { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; border-radius: var(--rayon); }

/* ---------- Sections ---------- */
.section { padding-block: clamp(56px, 8vw, 88px); }
.section-grise { background: var(--gris); }
.section > .conteneur { display: grid; gap: 36px; }

/* Secteurs : photo + nom */
.secteurs { display: grid; gap: 20px; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .secteurs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .secteurs { grid-template-columns: repeat(3, 1fr); } }
.secteur { display: grid; gap: 12px; align-content: start; min-width: 0; }
.secteur img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; border-radius: var(--rayon); }
.secteur p { color: var(--texte-doux); font-size: 1.05rem; }

/* Cabinet */
.colonnes { display: grid; gap: 36px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 860px) { .colonnes { grid-template-columns: 1.4fr 1fr; gap: 56px; } }
.fiche { border: 1px solid var(--trait); border-radius: var(--rayon); padding: 24px; display: grid; gap: 14px; background: var(--fond); min-width: 0; }
.fiche dl { margin: 0; display: grid; gap: 12px; }
.fiche dt { font: 700 .8rem/1.3 var(--titre); letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux); }
.fiche dd { margin: 0; font-weight: 600; color: var(--encre); }

/* Valeurs */
.valeurs { display: grid; gap: 28px; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .valeurs { grid-template-columns: repeat(3, 1fr); } }
.valeurs li { display: grid; gap: 8px; border-top: 3px solid var(--ardoise); padding-top: 16px; min-width: 0; }
.valeurs p { color: var(--texte-doux); }

/* Partenaires : bande bleue, partenaires en blanc */
.bande-bleue { background: var(--bleu); color: var(--sur-bleu); margin-top: 14px; }
.bande-bleue h2, .bande-bleue .surtitre { color: var(--sur-bleu); }
.bande-bleue .conteneur { padding-block: clamp(56px, 8vw, 88px); display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); }
.bande-bleue p { max-width: 42rem; }
.partenaires { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .partenaires { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.partenaires li {
  aspect-ratio: 5 / 2; max-width: 100%; display: grid; place-items: center; padding: 14px; text-align: center;
  border: 1.5px solid rgba(255, 255, 255, .45); border-radius: var(--rayon);
  font: 800 clamp(1.15rem, 2.2vw, 1.5rem)/1.1 var(--titre); letter-spacing: .06em; color: #fff;
}
/* Un fichier de logo déposé à la place du nom s'affiche en blanc */
.partenaires img.logo-marge { transform: scale(1.8); }
.partenaires img { height: 40px; max-height: 100%; width: auto; max-width: 100%; object-fit: contain; filter: brightness(0) invert(1); }

/* Contact */
.contacts { display: grid; gap: 16px; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .contacts { grid-template-columns: repeat(3, 1fr); } }
.contacts li { border: 1px solid var(--trait); border-radius: var(--rayon); padding: 20px; display: grid; gap: 6px; align-content: start; background: var(--fond); min-width: 0; }
.contacts .libelle { font: 700 .8rem/1.2 var(--titre); letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux); }
.contacts .valeur { font: 700 1.2rem/1.4 var(--titre); color: var(--encre); overflow-wrap: anywhere; }
.contacts a { color: var(--bleu); font-weight: 700; }
.qr { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.qr img { width: 104px; height: 104px; background: #fff; padding: 6px; border-radius: 6px; }
.liste { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.mentions { display: grid; gap: 8px; font-size: 1rem; color: var(--texte-doux); }
.mentions strong { color: var(--texte); }
.a-completer { background: color-mix(in srgb, var(--rouge) 16%, transparent); color: var(--texte); padding: 0 5px; border-radius: 4px; }

/* ---------- Pied de page ---------- */
.pied { background: var(--encre); color: var(--fond); }
.pied .conteneur { padding-block: 36px; display: flex; flex-wrap: wrap; gap: 16px 40px; justify-content: space-between; align-items: center; font-size: 1rem; }
.pied a { color: inherit; }
.pied ul { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; }

/* ---------- Page CV ---------- */
.profil {
  display: grid; gap: 28px; grid-template-columns: 1fr; align-items: start;
  border: 1px solid var(--trait); border-radius: var(--rayon-bloc); padding: clamp(20px, 3vw, 32px); background: var(--fond);
}
@media (min-width: 860px) { .profil { grid-template-columns: 240px minmax(0, 1fr); gap: 40px; } }
.profil-cote { display: grid; gap: 14px; justify-items: start; min-width: 0; }
.profil-cote img { width: 100%; max-width: 240px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; border-radius: var(--rayon); }
.profil-contact { display: grid; gap: 2px; font-weight: 600; color: var(--bleu); overflow-wrap: anywhere; }
.profil-corps { display: grid; gap: 24px; min-width: 0; }
.profil-titre { font: 700 1.1rem/1.3 var(--titre); color: var(--rouge); }
.profil-blocs { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .profil-blocs { grid-template-columns: 1fr 1fr; } }
.bloc-cv { background: var(--gris); border-radius: var(--rayon); padding: 20px 22px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.bloc-cv h3 { font-size: .9rem; letter-spacing: .1em; text-transform: uppercase; color: var(--bleu); }
.bloc-cv ul { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; font-size: 1.02rem; }
.parcours { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.parcours li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 14px; font-size: 1.02rem; }
.parcours .annees { font: 700 .95rem/1.6 var(--titre); color: var(--bleu); font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .parcours li { grid-template-columns: 1fr; gap: 0; } }
.bouton-doux { background: var(--bleu); padding: 13px 20px; font-size: .98rem; }
.bouton-doux:hover { background: color-mix(in srgb, var(--bleu) 82%, black); }
.section > .conteneur > .profil + .profil { margin-top: 4px; }