/* Portfolio Vincent R. — Design institutionnel v2 */

/* Couleurs */
:root {
  --accent: #1e3a5f;
  --accent-hover: #2a6496;
  --bg-light: #f8f9fa;
  --border: #dee2e6;
}

/* Titres */
h1 {
  color: var(--accent);
}

h2 {
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 0.5rem;
  margin-top: 2.5rem;
}

h3 {
  color: #2c3e50;
  margin-top: 0.5rem;
}

h3 a {
  text-decoration: none;
  color: #2c3e50;
}

h3 a:hover {
  color: var(--accent);
}

/* Liens */
a {
  color: var(--accent);
}

a:hover {
  color: var(--accent-hover);
}

/* Navbar */
.navbar {
  background-color: var(--accent) !important;
}

/* Boutons */
.btn-primary {
  background-color: var(--accent);
  border-color: var(--accent);
}

.btn-primary:hover {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn-outline-primary {
  color: var(--accent);
  border-color: var(--accent);
}

.btn-outline-primary:hover {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.btn-sm {
  margin-right: 0.5rem;
  margin-top: 0.5rem;
}

/* Badges compétences */
.badges {
  margin: 1.5rem 0;
}

.badge {
  display: inline-block;
  background-color: #e8eef4;
  color: var(--accent);
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  margin: 0.25rem 0.15rem;
  border: 1px solid #c5d5e5;
}

/* Featured project — pleine largeur en tête */
.featured-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-bottom: 2rem;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.featured-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
  transform: translateY(-2px);
}

.featured-card > p:first-child {
  margin: 0;
}

.featured-card > p:first-child a {
  display: block;
}

.featured-card > p:first-child img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
}

.featured-card h3,
.featured-card p {
  padding: 0 1.5rem;
}

.featured-card > p:last-child {
  padding-bottom: 1.25rem;
  font-size: 0.9rem;
  color: #666;
}

.featured-card p {
  color: #444;
}

/* Project grid — Cartes côte à côte */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 0.5rem;
}

.grid-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.grid-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  transform: translateY(-2px);
}

.grid-card > p:first-child {
  margin: 0;
}

.grid-card > p:first-child a {
  display: block;
}

.grid-card > p:first-child img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.grid-card h3,
.grid-card p {
  padding: 0 1rem;
}

.grid-card > p:last-child {
  padding-bottom: 1rem;
  font-size: 0.85rem;
  color: #666;
}

.grid-card p {
  margin-bottom: 0.4rem;
  color: #444;
  font-size: 0.92rem;
  font-weight: 400;
}

/* Project section headers */
.project-header {
  color: var(--accent);
  font-size: 1.3rem;
  font-weight: 700;
  margin-top: 0.5rem;
  margin-bottom: 0.3rem;
  border: none;
}

/* Project description — sous-titre sources */
.project-desc {
  font-size: 0.9rem;
  color: #666;
  margin-top: -0.3rem;
  margin-bottom: 0.5rem;
  font-weight: 400;
}

/* Grid card h4 titles + padding */
.grid-card h4 {
  padding: 1rem 1rem 0 1rem;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #2c3e50;
}

.grid-card h4 a {
  text-decoration: none;
  color: var(--accent);
  font-weight: 700;
}

.grid-card h4 a:hover {
  color: var(--accent-hover);
}

.grid-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  margin-top: 0.5rem;
  border-top: 1px solid #eee;
}

/* Featured card — text first, image below */
.featured-card {
  padding: 1.5rem;
}

.featured-card img {
  width: 100%;
  height: auto;
  max-height: 350px;
  object-fit: cover;
  border-radius: 6px;
  margin-top: 1rem;
}

/* Footer */
.page-footer {
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  margin-top: 3rem;
  font-size: 0.9rem;
  color: #666;
}

/* Responsive mobile */
@media (max-width: 768px) {
  h1 {
    font-size: 1.8rem;
  }

  h2 {
    font-size: 1.4rem;
  }

  .featured-card > p:first-child img {
    height: 200px;
  }

  .project-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .project-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   Homepage Davran — hero, chiffres, offre, méthode, contact  (2026-09-04)
   ========================================================================== */

:root {
  --ink-soft: #5a6270;
  --ink-faint: #8a92a0;
  --rule: #e3e7ed;
  --fam-1: #1696d2;   /* Etudes & diagnostics      — identique a pwpterr/catalogue */
  --fam-2: #ca5b00;   /* Evaluation                                                */
  --fam-3: #0a7d8c;   /* Dashboard & rapports semi-auto                            */
  --fam-4: #5b3a8c;   /* Data science                                              */
  --fam-5: #408941;   /* AMO donnees et pilotage                                   */
}

/* Bandes pleine largeur depuis l'intérieur du conteneur article */
.hero-band, .figures-band, .contact-band {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.hero-inner, .figures-inner, .contact-inner {
  max-width: 940px;
  margin: 0 auto;
}

/* ---- Hero ---- */
.hero-band {
  padding-top: 2rem;
  padding-bottom: 1.8rem;
  border-bottom: 1px solid var(--rule);
}
.hero-mark { width: 38px; height: 38px; margin-bottom: 0.9rem; }
h1.hero-title {
  font-size: clamp(1.55rem, 3.1vw, 2.05rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 640;
  margin: 0 0 0.75rem;
  max-width: 34ch;
}
.hero-lede {
  font-size: 1rem;
  line-height: 1.58;
  color: var(--ink-soft);
  max-width: 66ch;
  margin-bottom: 1.25rem;
}
.hero-lede strong { color: #1a1d23; font-weight: 600; }
.hero-cta { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.hero-cta .btn { padding: 0.55rem 1.25rem; font-size: 0.94rem; }

/* ---- Chiffres ---- */
.figures-band {
  padding-top: 0; padding-bottom: 0;
  border-bottom: 1px solid var(--rule);
  background: var(--bg-light);
}
.figures-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--rule);
}
.fig-cell { background: var(--bg-light); padding: 1.5rem 1.4rem; }
.fig-n {
  display: block; font-size: 1.65rem; line-height: 1.1;
  letter-spacing: -0.02em; font-weight: 640; color: var(--accent);
}
.fig-l {
  display: block; margin-top: 0.4rem;
  font-size: 0.85rem; line-height: 1.45; color: var(--ink-soft);
}

/* ---- Offre ---- */
.fam {
  border-left: 3px solid var(--fc);
  padding-left: 1.35rem;
  margin: 1.9rem 0;
}
.fam-1 { --fc: var(--fam-1); }
.fam-2 { --fc: var(--fam-2); }
.fam-3 { --fc: var(--fam-3); }
.fam-4 { --fc: var(--fam-4); }
.fam-5 { --fc: var(--fam-5); }
.fam-h {
  display: block; font-size: 1.1rem; font-weight: 620;
  letter-spacing: -0.01em; color: #1a1d23; margin-bottom: 0.15rem;
}
.fam-sub {
  display: block; font-size: 0.86rem; color: var(--ink-faint);
  margin-bottom: 0.9rem;
}
.presta { padding: 0.8rem 0; border-top: 1px solid var(--rule); }
.presta:first-of-type { border-top: none; padding-top: 0; }
.presta p { margin: 0; font-size: 0.93rem; line-height: 1.58; color: var(--ink-soft); }
.presta-n { font-size: 0.98rem; font-weight: 600; color: #1a1d23; }
.presta-ex { color: var(--ink-faint); }
.chip {
  display: inline-block; vertical-align: 1px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.63rem; font-weight: 500; letter-spacing: 0.07em;
  color: var(--fc); border: 1px solid currentColor; border-radius: 2px;
  padding: 2px 5px; margin-left: 0.45rem; opacity: 0.75;
}
.stack-line { margin: 2rem 0 0.5rem; }

/* ---- Méthode ---- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(188px, 1fr));
  gap: 1.6rem;
  margin-top: 1.6rem;
}
.step { position: relative; padding-top: 1rem; border-top: 2px solid var(--accent); }
.step p { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--ink-soft); }
.step-n {
  position: absolute; top: -0.72rem; right: 0;
  font-family: ui-monospace, Menlo, monospace; font-size: 0.68rem;
  color: var(--ink-faint); background: #fff; padding-left: 0.5rem;
}
.step-h {
  display: block; font-size: 0.96rem; font-weight: 600;
  color: #1a1d23; margin-bottom: 0.35rem;
}

/* ---- Contact ---- */
.contact-band {
  margin-top: 3.2rem;
  padding-top: 2.6rem; padding-bottom: 2.8rem;
  background: var(--bg-light);
  border-top: 1px solid var(--rule);
}
.contact-h {
  display: block; font-size: 1.16rem; font-weight: 620;
  color: var(--accent); margin-bottom: 1.1rem; max-width: 46ch;
}
.contact-inner .btn { margin-right: 0.6rem; padding: 0.55rem 1.25rem; font-size: 0.94rem; }

/* La homepage ouvre sur le hero : pas de filet sous le premier H2 non plus */
.hero-band + .figures-band { margin-top: 0; }

@media (max-width: 575.98px) {
  .hero-band { padding-top: 2.2rem; padding-bottom: 2rem; }
  h1.hero-title { max-width: none; }
  .fig-cell { padding: 1.15rem 1.1rem; }
}

/* Rattachement d'une fiche projet a une prestation de l'offre */
.presta-tag {
  margin: 1.2rem 0 1.6rem;
  padding: 0.7rem 1rem;
  border-left: 3px solid var(--accent);
  background: var(--bg-light);
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.presta-tag strong { color: var(--accent); }

/* Icône Bootstrap devant la puce de code prestation */
.presta-ico {
  color: var(--fc);
  font-size: 0.95rem;
  margin-left: 0.5rem;
  vertical-align: -1px;
  opacity: 0.85;
}
.presta-ico + .chip { margin-left: 0.3rem; }

/* ==========================================================================
   Vignettes de livrables — 2026-09-23
   Les captures automatiques sont recadrees sur le bandeau et le premier ecran
   utile (720 px de large, ratio ~2,6:1). On les affiche a leur ratio naturel
   plutot qu'en object-fit cover sur 280 px : recadrer une capture deja recadree
   ne montrait plus que le milieu, illisible.
   ========================================================================== */

.featured-card > p:first-child img {
  height: auto;              /* etait 280px + cover : double recadrage */
  aspect-ratio: 1440 / 558;  /* le ratio des captures */
  object-fit: cover;
  object-position: top center;
}

/* Le bloc de boutons doit respirer sous l'image, pas la toucher */
.featured-card > p:last-child {
  padding-top: 1.1rem;
  padding-bottom: 1.35rem;
}

.grid-card img {
  aspect-ratio: 1440 / 558;
  object-fit: cover;
  object-position: top center;
  border-radius: 3px;
  border: 1px solid var(--rule);
  margin-top: 0.7rem;
}

/* ==========================================================================
   Alignement des bandes pleine largeur — 2026-09-23
   Mesure : les bandes etaient a 250 px du bord, le corps de l'article a 321.
   71 px de decalage, visible a l'oeil. Les bandes debordent toujours en couleur,
   mais leur CONTENU s'aligne desormais sur la colonne de texte.
   ========================================================================== */
.hero-inner, .figures-inner, .contact-inner { max-width: 799px; }

/* Logo de navbar plus present */
.navbar-brand img, .navbar-logo { height: 30px !important; width: auto !important; }
.navbar-brand { font-size: 1.02rem; letter-spacing: .02em; }

/* ==========================================================================
   Navbar collante — 2026-09-23
   Elle reste visible au defilement : sur une page longue, revenir en haut pour
   changer de section est une friction inutile.
   ========================================================================== */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16);
}
/* Les ancres ne doivent pas passer SOUS la navbar collante */
h2[id], h3[id], section[id] { scroll-margin-top: 4.6rem; }

/* Logo de navbar : encore plus present, le nom de marque doit s'imposer */
.navbar-brand img, .navbar-logo { height: 38px !important; }
.navbar-brand { font-size: 1.1rem; font-weight: 600; }

/* Plus de hero : la page ouvre sur les chiffres, il leur faut de l'air au-dessus */
.figures-band:first-of-type { margin-top: 0; border-top: none; }

/* ==========================================================================
   Pitch court + trois registres d'intervention — 2026-09-23
   Le pitch remplace le hero (qui prenait un ecran entier). Les piliers remplacent
   la liste des dix prestations sur l'accueil : le detail est sur offre.qmd et
   apparait au survol.
   ========================================================================== */

/* ---- Pitch ---- */
.pitch-band {
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding: 2.6rem 1.25rem 2.2rem;
  border-bottom: 1px solid var(--rule);
}
.pitch-inner { max-width: 799px; margin: 0 auto; }
h1.pitch-title {
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  line-height: 1.12; letter-spacing: -0.024em; font-weight: 680;
  margin: 0 0 0.9rem; color: var(--accent);
}
.pitch-lede {
  font-size: 1.06rem; line-height: 1.6; color: var(--ink-soft);
  max-width: 64ch; margin: 0;
}
.pitch-lede strong { color: #1a1d23; font-weight: 600; }

/* ---- Trois piliers ---- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.piliers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  margin: 2.4rem 0 2.8rem;
}
.pilier {
  position: relative;
  padding: 1.35rem 1.35rem 1.15rem;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--fc);
  border-radius: 5px;
  background: #fff;
  transition: box-shadow .18s ease, transform .18s ease;
}
.pilier:hover {
  box-shadow: 0 8px 26px rgba(10, 76, 106, 0.13);
  transform: translateY(-3px);
}
.pilier-diag  { --fc: #1696d2; }
.pilier-eval  { --fc: #ca5b00; }
.pilier-outil { --fc: #0a7d8c; }
.pilier-h {
  display: block; font-size: 1.3rem; font-weight: 660;
  letter-spacing: -0.015em; color: var(--fc); margin-bottom: 0.25rem;
}
.pilier-sub {
  display: block; font-size: 0.92rem; line-height: 1.45;
  color: var(--ink-soft); min-height: 2.9em;
}
/* Le detail est replie, il se deplie au survol — sans JavaScript */
.pilier-detail {
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .28s ease, opacity .22s ease, margin .28s ease;
  margin-top: 0;
}
.pilier:hover .pilier-detail, .pilier:focus-within .pilier-detail {
  max-height: 12rem; opacity: 1; margin-top: 0.85rem;
}
.pilier-detail ul { margin: 0; padding-left: 1.05rem; }
.pilier-detail li { font-size: 0.88rem; line-height: 1.5; color: var(--ink); margin: 0.12rem 0; }
.pilier-lien {
  display: inline-block; margin-top: 0.9rem;
  font-size: 0.86rem; font-weight: 560; color: var(--fc);
  text-decoration: none; border-bottom: 1px solid transparent;
}
.pilier-lien:hover { border-bottom-color: currentColor; }

@media (max-width: 767.98px) {
  .piliers { grid-template-columns: 1fr; }
  .pilier-detail { max-height: 12rem; opacity: 1; margin-top: 0.85rem; }  /* pas de survol au doigt */
}

/* Le H1 du pitch heritait d'une grosse marge basse : 150 px de blanc avant le texte */
h1.pitch-title { margin-bottom: 0.7rem !important; }
.pitch-lede    { margin-top: 0 !important; }
.pitch-band    { padding-top: 2.2rem; padding-bottom: 1.9rem; }

/* ==========================================================================
   LARGEUR ET ALIGNEMENT — 2026-09-24
   Mesure a 1718 px (largeur reelle de l'ecran, pas 1440) : le corps faisait
   799 px cale a 460, la navbar 1684 px calee a 17. Soit 430 px d'ecart entre
   la marque et le titre, et 47 % seulement de la fenetre utilisee.
   La colonne passe a 1140 px centres (grid dans _quarto.yml) et la navbar
   s'aligne dessus. Les bandes gardent leur fond pleine largeur.
   ========================================================================== */
@media (min-width: 992px) {
  .navbar > .container-fluid { max-width: 1140px; margin-inline: auto; padding-inline: 0; }
}

/* Fond pleine largeur, contenu ramene sur la colonne : la marge negative sort
   le bloc jusqu'aux bords, le padding egal le remet exactement en place.
   Aucun nombre magique — l'alignement suit la colonne quoi qu'elle fasse. */
.hero-band, .pitch-band, .figures-band, .contact-band {
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
}
.hero-inner, .pitch-inner, .figures-inner, .contact-inner { max-width: none; margin: 0; }

/* 100vw ignore la barre de defilement : sans ca les bandes debordent de ~15 px
   et creent un scroll horizontal. `clip` plutot que `hidden` : ne casse pas la
   navbar collante. */
body { overflow-x: clip; }

/* La colonne fait 1140 px : la prose, elle, garde une largeur de lecture. */
.pitch-lede    { max-width: 66ch; }
.project-desc  { max-width: 82ch; }
.reg-intro     { max-width: 74ch; }

/* ==========================================================================
   PASTILLES — 2026-09-24
   Chaque travail annonce son registre, sa prestation et ses formats. Sans ca,
   le titre disait le SUJET (« 76 villes, 31 pays ») mais jamais la NATURE du
   livrable — le lecteur ne savait pas s'il allait ouvrir une etude ou un outil.
   ========================================================================== */
.tags { display: flex; flex-wrap: wrap; gap: 0.38rem; margin: 0.15rem 0 0.7rem; }
.tag {
  display: inline-block; font-size: 0.735rem; line-height: 1.5; font-weight: 560;
  letter-spacing: 0.015em; padding: 0.12rem 0.55rem; border-radius: 3px;
  border: 1px solid var(--rule); color: var(--ink-soft); background: #fff;
  white-space: nowrap;
}
/* Registre : plein, couleur du pilier. Il se lit en premier. */
.tag-diag  { background: #1696d2; border-color: #1696d2; color: #fff; }
.tag-eval  { background: #ca5b00; border-color: #ca5b00; color: #fff; }
.tag-outil { background: #0a7d8c; border-color: #0a7d8c; color: #fff; }
/* Prestation : contour de la meme couleur, sans aplat. */
.tag-presta { border-color: #b9c6d2; color: #33506b; background: #f4f8fb; }
/* Format : neutre, c'est une information de service. */
.tag-fmt { font-weight: 500; color: var(--ink-faint); }

/* ---- Vue d'ensemble des travaux ---- */
.tbl-travaux { width: 100%; border-collapse: collapse; margin: 0.4rem 0 2.6rem; font-size: 0.9rem; }
.tbl-travaux th {
  text-align: left; font-size: 0.72rem; font-weight: 640; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-faint); padding: 0 0.7rem 0.45rem 0;
  border-bottom: 1px solid var(--rule); white-space: nowrap;
}
.tbl-travaux td { padding: 0.62rem 0.7rem 0.62rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.tbl-travaux tr:hover td { background: #fafbfc; }
.tbl-travaux td:first-child { font-weight: 560; }
.tbl-travaux td:first-child a { text-decoration: none; }
.tbl-travaux td:first-child a:hover { text-decoration: underline; }
.tbl-travaux .tags { margin: 0; }

/* ==========================================================================
   FORCES DE L'APPROCHE — 2026-09-24
   Remplace « Comment je travaille » (4 etapes de process, a la premiere
   personne). Ce sont les partis pris communs aux trois registres : ils
   remontent ici parce qu'ils ne se rattachent a aucune prestation en propre.
   ========================================================================== */
.forces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.05rem; margin: 1.6rem 0 2.6rem; }
/* Cinq cartes sur trois colonnes : la derniere occupe les deux cases restantes,
   sinon la 2e rangee laisse un trou de la largeur d'une carte. */
.forces > .force:nth-child(5):last-child { grid-column: span 2; }
@media (max-width: 991.98px) { .forces { grid-template-columns: repeat(2, 1fr); }
  .forces > .force:nth-child(5):last-child { grid-column: span 2; } }
@media (max-width: 599.98px) { .forces { grid-template-columns: 1fr; }
  .forces > .force:nth-child(5):last-child { grid-column: auto; } }
.force {
  padding: 1.15rem 1.2rem 1.1rem; border: 1px solid var(--rule); border-radius: 5px;
  background: #fff; border-left: 3px solid var(--fc, var(--fam-1));
}
.force-ico { display: block; font-size: 1.15rem; color: var(--fc, var(--fam-1)); margin-bottom: 0.45rem; line-height: 1; }
.force-h { display: block; font-size: 1rem; font-weight: 640; color: #1a1d23; margin-bottom: 0.35rem; letter-spacing: -0.01em; }
.force p { margin: 0; font-size: 0.895rem; line-height: 1.56; color: var(--ink-soft); }
.force p + p { margin-top: 0.5rem; }
.force .caution { color: var(--ink-faint); font-size: 0.84rem; }
.force-1 { --fc: #1696d2; } .force-2 { --fc: #5b3a8c; } .force-3 { --fc: #0a7d8c; }
.force-4 { --fc: #408941; } .force-5 { --fc: #ca5b00; }

/* ---- Promesse visible sur chaque registre ---- */
.pilier-force {
  display: block; margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--rule);
  font-size: 0.875rem; line-height: 1.5; color: #33506b;
}

/* ==========================================================================
   HIERARCHIE DES BLOCS D'OFFRE — 2026-09-24
   La famille et la prestation etaient au meme niveau visuel (0.98 vs 1.0 rem,
   meme graisse) : l'oeil ne voyait qu'une liste plate. La famille prend une
   pastille d'icone, du corps et la couleur ; la prestation redescend.
   ========================================================================== */
.fam { margin: 1.6rem 0 2.4rem; }
.fam-h {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 1.32rem; font-weight: 680; letter-spacing: -0.018em;
  color: var(--fc); margin-bottom: 0.1rem;
}
/* L'icone est dans le flux (pas en ::before) : elle porte la pastille ronde,
   ce qui evite de superposer deux elements positionnes a la main. */
.fam-h > i {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 50%; font-size: 0.98rem;
  background: color-mix(in srgb, var(--fc) 13%, #fff); color: var(--fc);
}
.fam-sub {
  display: block; margin: 0 0 0.9rem 2.55rem;
  font-size: 0.775rem; font-weight: 560; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--ink-faint);
}
.presta { padding: 0.85rem 0 0.85rem 2.55rem; }
.presta-n { font-size: 1.005rem; font-weight: 620; color: #10131a; }

/* Encadre de prudence — une reserve de methode, pas une alerte. Ton sobre. */
.encadre-caution {
  margin: 1.2rem 0 2rem 2.55rem;
  padding: 0.85rem 1.1rem;
  border-left: 3px solid #d6a800;
  background: #fffdf5;
  font-size: 0.885rem; line-height: 1.58; color: var(--ink-soft);
}

/* Le <p> interne de la bande pitch apportait sa marge par defaut : 90 px de
   blanc entre le titre et l'accroche, la ou 0.7rem etait demande. */
.pitch-lede > p:first-child, .reg-intro > p:first-child { margin-top: 0; }
.pitch-lede > p:last-child,  .reg-intro > p:last-child  { margin-bottom: 0; }
.reg-intro { margin-bottom: 0.4rem; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.58; }

/* ==========================================================================
   V3 — 2026-09-24 : epuration, palette, navbar claire
   Trois regles de fond :
   · palette reduite a bleu / orange / jaune (+ deux bleus de profondeur) ;
   · plus aucun filet pleine largeur sous les titres — une barre courte, basse ;
   · la navbar passe en blanc, la marque grossit.
   ========================================================================== */
:root {
  --bleu:      #1696d2;
  --bleu-nuit: #0a4c6a;
  --orange:    #ca5b00;
  --jaune:     #fdbf11;
  --jaune-ink: #8a6a00;
  --accent:    #0a4c6a;
  --accent-hover: #1696d2;
}

/* ---- Navbar blanche ---- */
.navbar {
  background: #fff !important;
  border-bottom: 1px solid #e3e7ed;
  box-shadow: 0 1px 3px rgba(10, 76, 106, 0.07);
  padding-top: 0.55rem; padding-bottom: 0.55rem;
}
.navbar .navbar-brand, .navbar .nav-link, .navbar .navbar-toggler-icon { color: var(--bleu-nuit) !important; }
.navbar .nav-link { font-weight: 520; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--bleu) !important; }
.navbar-brand img, .navbar-logo { height: 46px !important; width: auto !important; }
.navbar-brand { font-size: 1.3rem !important; font-weight: 680 !important; letter-spacing: -0.01em; }
.navbar .aa-DetachedSearchButton, .navbar .bi { color: var(--bleu-nuit); }

/* ---- Titres : barre courte et basse, pas de filet pleine largeur ---- */
h2 {
  border-bottom: none !important; padding-bottom: 0;
  margin-top: 3.4rem; margin-bottom: 1.1rem;
  font-size: 1.82rem; font-weight: 700; letter-spacing: -0.025em;
  color: var(--bleu-nuit);
}
h2::after {
  content: ""; display: block; width: 52px; height: 4px; border-radius: 2px;
  background: var(--jaune); margin-top: 0.85rem;
}
h1 { color: var(--bleu-nuit); }

/* ---- Bandeau de tete : plus de hero, le slogan et les chiffres se suivent ---- */
.pitch-band { padding-top: 2.4rem !important; padding-bottom: 1.1rem !important; border-bottom: none; }
h1.pitch-title { font-size: clamp(1.9rem, 3.4vw, 2.5rem); margin-bottom: 0 !important; }
.figures-band { border-top: 1px solid #e3e7ed; }
.fig-n { color: var(--bleu-nuit); }
.fig-cell { padding: 1.25rem 1.3rem; }

/* ---- Pastilles allegees : une seule vraie pastille (le registre), le reste en texte ---- */
.tags { display: block; margin: 0.1rem 0 0.75rem; font-size: 0.815rem; line-height: 1.7; color: #7d8794; }
.tag {
  display: inline; font-size: 0.755rem; font-weight: 620; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 0.12rem 0.5rem; border-radius: 3px;
  border: none; margin-right: 0.45rem;
}
.tag-diag  { background: rgba(22, 150, 210, 0.13); color: #0d6b99; }
.tag-eval  { background: rgba(202, 91, 0, 0.13);   color: #a34900; }
.tag-outil { background: rgba(253, 191, 17, 0.22); color: #8a6a00; }
.tag-rest  { color: #7d8794; }

/* ---- Titres de travaux : plus gros, la lecture part de la ---- */
h3.project-header, .project-header {
  font-size: 1.4rem !important; font-weight: 680; letter-spacing: -0.022em;
  margin-top: 2.6rem; margin-bottom: 0.4rem; line-height: 1.25;
}
.project-header a { color: var(--bleu-nuit); }
.project-header a:hover { color: var(--bleu); }

/* ---- Tableau de synthese allege : plus de filets verticaux, pastilles discretes ---- */
.tbl-travaux { font-size: 0.875rem; }
.tbl-travaux th { border-bottom: 1px solid #e3e7ed; color: #9aa3ae; font-size: 0.68rem; }
.tbl-travaux td { border-bottom: 1px solid #f0f2f5; padding: 0.55rem 0.7rem 0.55rem 0; }
.tbl-travaux .tags { margin: 0; font-size: 0.79rem; }

/* ==========================================================================
   REGISTRES — icone au-dessus, fond legerement teinte, detail visible
   Le detail au survol cachait l'essentiel : le lecteur ne sait pas qu'il faut
   survoler. Les prestations sont desormais lisibles d'emblee.
   ========================================================================== */
.piliers { gap: 1.3rem; margin: 1.8rem 0 3rem; }
.pilier {
  padding: 1.5rem 1.4rem 1.3rem;
  border: 1px solid color-mix(in srgb, var(--fc) 22%, #fff);
  border-top: 3px solid var(--fc);
  background: color-mix(in srgb, var(--fc) 4%, #fff);
}
.pilier:hover { box-shadow: 0 10px 28px color-mix(in srgb, var(--fc) 18%, transparent); }
.pilier-diag  { --fc: #1696d2; }
.pilier-eval  { --fc: #ca5b00; }
.pilier-outil { --fc: #d9a400; }
.pilier-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; border-radius: 50%; margin-bottom: 0.8rem;
  background: color-mix(in srgb, var(--fc) 16%, #fff);
  color: var(--fc); font-size: 1.25rem;
}
.pilier-h { font-size: 1.28rem; color: color-mix(in srgb, var(--fc) 80%, #000); }
.pilier-sub { min-height: 0; margin-bottom: 0.8rem; color: #4a5563; }
.pilier-force {
  border-top: 1px solid color-mix(in srgb, var(--fc) 25%, #fff);
  color: #3a4654; font-size: 0.87rem;
}
/* Le detail ne se cache plus */
.pilier-detail { max-height: none !important; opacity: 1 !important; margin-top: 0.85rem !important; overflow: visible; }
.pilier-detail li { color: #3a4654; }
.pilier-lien { color: color-mix(in srgb, var(--fc) 80%, #000); }

/* ==========================================================================
   POINTS FORTS — carte compacte, le detail se deplie au survol
   ========================================================================== */
.forces { grid-template-columns: repeat(4, 1fr); gap: 0.95rem; }
.forces > .force:nth-child(5):last-child { grid-column: auto; }
.force { padding: 1.1rem 1.15rem 1rem; border-left-width: 3px; }
.force-ico { font-size: 1.2rem; margin-bottom: 0.4rem; }
.force-h { font-size: 0.97rem; margin-bottom: 0.3rem; }
.force p { font-size: 0.87rem; line-height: 1.52; }
.force-detail {
  max-height: 0; opacity: 0; overflow: hidden; margin-top: 0;
  transition: max-height .3s ease, opacity .24s ease, margin-top .3s ease;
}
.force:hover .force-detail, .force:focus-within .force-detail { max-height: 16rem; opacity: 1; margin-top: 0.55rem; }
.force-detail p { color: var(--ink-faint); font-size: 0.83rem; }
.force-1 { --fc: #1696d2; } .force-2 { --fc: #ca5b00; } .force-3 { --fc: #d9a400; }
.force-4 { --fc: #0a4c6a; } .force-5 { --fc: #1696d2; } .force-6 { --fc: #ca5b00; }
.force-7 { --fc: #d9a400; } .force-8 { --fc: #0a4c6a; }
@media (max-width: 1199.98px) { .forces { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 899.98px)  { .forces { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599.98px)  { .forces { grid-template-columns: 1fr; }
  .force-detail { max-height: 16rem; opacity: 1; margin-top: 0.55rem; } }

/* Mention de provenance : dit d'ou vient le contenu genere, sans peser. */
.note-source {
  margin: 1.1rem 0 2.2rem; padding: 0.6rem 0.9rem;
  border-left: 3px solid var(--bleu); background: #f4f9fc;
  font-size: 0.85rem; line-height: 1.55; color: #45525f;
}
.note-source code { background: none; color: var(--bleu-nuit); font-size: 0.86em; }

/* Cartes de registre de hauteur egale : la promesse et le lien se calent en bas,
   sinon une tuile a 4 prestations decale tout par rapport a ses voisines. */
.pilier { display: flex; flex-direction: column; }
.pilier-detail { margin-bottom: auto; }
.pilier-force  { margin-top: 1rem; }

/* ---- Le slogan est le titre du document (Quarto hisse tout h1 ici) ---- */
#title-block-header { margin-bottom: 0; padding-bottom: 1.35rem; }
#title-block-header .title {
  font-size: clamp(1.9rem, 3.4vw, 2.5rem); font-weight: 700;
  letter-spacing: -0.028em; line-height: 1.12; color: var(--bleu-nuit);
  margin: 0.6rem 0 0;
}
#title-block-header .subtitle {
  font-size: 1rem; font-weight: 400; color: #5a6672; margin-top: 0.5rem;
}

/* Pandoc emballe chaque span dans un <p> : ses marges par defaut ajoutaient
   ~45 px de blanc entre le sous-titre et la liste des prestations. */
.pilier > p { margin: 0; }
.pilier > p:has(.pilier-ico) { line-height: 1; }
.force  > p:first-of-type { margin-bottom: 0; }
.force  > p:has(.force-ico) { margin: 0; line-height: 1; }

/* Familles du catalogue ramenees dans la palette bleu / orange / jaune :
   le teal, le violet et le vert restaient de l'ancienne charte. */
:root {
  --fam-1: #1696d2;   /* Études & diagnostics                  — bleu       */
  --fam-2: #ca5b00;   /* Évaluation                            — orange     */
  --fam-3: #0a4c6a;   /* Dashboard & rapports semi-automatisés — bleu nuit  */
  --fam-4: #8a6a00;   /* Data science                          — or fonce   */
  --fam-5: #d9a400;   /* AMO données et pilotage               — or vif     */
}

/* ==========================================================================
   V4 — 2026-09-25
   ========================================================================== */

/* La navbar etait restee a 1140 px quand la colonne est passee a 1280 :
   la marque se retrouvait 74 px A DROITE du titre. Meme largeur, meme bord. */
@media (min-width: 992px) {
  .navbar > .container-fluid { max-width: 1280px; }
}
/* Marque plus presente, et respiration avant le menu : le nom doit se detacher
   du volet de navigation, pas s'aligner dessus comme un item de plus. */
.navbar-brand img, .navbar-logo { height: 54px !important; }
.navbar-brand { font-size: 1.5rem !important; font-weight: 700 !important; }
.navbar-brand + .navbar-collapse .navbar-nav,
.navbar .navbar-nav { margin-left: 2.4rem; }
.navbar .nav-link { font-size: 1.02rem; padding-left: 0.85rem !important; padding-right: 0.85rem !important; }
.navbar { padding-top: 0.35rem; padding-bottom: 0.35rem; }

/* Vignettes : 16/10 (voir CROP_RATIO dans sp-captures-vitrine.js). A 2.58
   on ne voyait qu'un bandeau de titre — « ca coupe ». */
.project-grid img, .featured-card > p:first-child img, .grid-card img { aspect-ratio: 16 / 10; }

/* Corps des descriptions : 0.93 rem etait trop petit pour le paragraphe qui
   porte l'analyse. */
.project-desc { font-size: 1rem; line-height: 1.62; color: #3a4654; }

/* Liens de livrables annexes : plus de soulignement en file indienne. */
.liv-annexes { margin: 0.9rem 0 0; font-size: 0.9rem; color: #8a92a0; }
.liv-annexes a {
  text-decoration: none; color: var(--bleu-nuit); font-weight: 520;
  border-bottom: 1px solid #d5dde4; padding-bottom: 1px;
}
.liv-annexes a:hover { color: var(--bleu); border-bottom-color: var(--bleu); }

/* ==========================================================================
   TRAVAUX — bloc projet en deux colonnes
   Avant : une grille de grandes vignettes par projet. Sept projets = 4 700 px
   de defilement, et le visuel occupait la place que meritait l'information.
   Desormais : un visuel a gauche, la LISTE NOMMEE des livrables a droite.
   Hauteur par projet divisee par deux, et chaque livrable porte son nom.
   ========================================================================== */
.proj { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.6rem; align-items: start; margin: 1.1rem 0 0; }
.proj-visuel { margin: 0; }
.proj-visuel img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center;
  display: block; border: 1px solid var(--rule); border-radius: 5px;
  transition: box-shadow .18s ease, transform .18s ease;
}
.proj-visuel a:hover img { box-shadow: 0 10px 26px rgba(10, 76, 106, 0.16); transform: translateY(-2px); }
.proj-visuel p { margin: 0; }

.proj-liv { display: flex; flex-direction: column; gap: 0.1rem; }
a.liv {
  display: grid; grid-template-columns: 1.6rem 1fr; gap: 0 0.6rem;
  padding: 0.62rem 0.6rem 0.62rem 0.35rem; border-radius: 4px;
  text-decoration: none; border-bottom: 1px solid #f0f2f5;
  transition: background .15s ease;
}
a.liv:last-child { border-bottom: none; }
a.liv:hover { background: #f4f9fc; }
a.liv > i { grid-row: 1 / 3; align-self: start; margin-top: 0.15rem; font-size: 0.98rem; color: var(--bleu); }
.liv-t { font-size: 0.97rem; font-weight: 600; color: var(--bleu-nuit); line-height: 1.35; }
a.liv:hover .liv-t { color: var(--bleu); }
.liv-d { font-size: 0.855rem; line-height: 1.45; color: #7d8794; }
.liv-ext::after { content: " ↗"; font-size: 0.8em; color: #9aa3ae; }

@media (max-width: 899.98px) { .proj { grid-template-columns: 1fr; } }

/* ==========================================================================
   THEMATIQUES — bande legere, huit entrees, pas de cartes
   ========================================================================== */
.themes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.55rem 1.4rem; margin: 1.3rem 0 2.6rem; }
.theme { display: block; font-size: 0.95rem; color: #2f3b47; padding: 0.4rem 0; border-top: 1px solid #eef1f4; }
.theme i { color: var(--bleu); font-size: 0.9rem; }
.theme .src { color: #8a92a0; font-size: 0.82rem; }
.theme > p { margin: 0; }
/* La source passe systematiquement a la ligne : sinon elle reste collee au
   libelle sur les themes courts et descend sur les longs — grille bancale. */
.theme .src { display: block; margin-left: 1.45rem; }
@media (max-width: 991.98px) { .themes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599.98px) { .themes { grid-template-columns: 1fr; } }

/* Quarto plafonne le logo par max-height : la hauteur demandee restait sans effet. */
.navbar-brand img, .navbar-logo, .navbar .navbar-logo {
  max-height: none !important; height: 52px !important; width: auto !important;
}
.navbar-brand { display: flex !important; align-items: center; gap: 0.7rem; }

/* 637 px par projet, dont 437 de vignette : le visuel dictait la hauteur de la
   page. Il est plafonne — il illustre, il n'informe pas. La colonne de droite
   (les livrables nommes) devient le bloc le plus haut, ce qui est l'ordre juste. */
.proj { grid-template-columns: 1fr 1.05fr; }
.proj-visuel img { max-height: 300px; }

/* Pastille « moteur parametrique » : cliquable, contour plutot qu'aplat — elle
   qualifie la production, elle n'est pas un registre. */
.tag-moteur { background: #fff; border: 1px solid var(--bleu); color: #0d6b99; padding: 0.1rem 0.5rem; }
.tag-moteur a { color: inherit; text-decoration: none; }
.tag-moteur:hover { background: rgba(22, 150, 210, 0.1); }

/* ==========================================================================
   V5 — 2026-09-30 : marque de navbar hierarchisee
   « daVRan » porte la marque, « Vincent Roué » la signe. Meme taille, les deux
   se disputaient l'attention.
   ========================================================================== */
.navbar-brand .bd-nom { font-size: 1.42rem; font-weight: 720; letter-spacing: -0.02em; color: var(--bleu-nuit); }
.navbar-brand .bd-sep { margin: 0 0.5rem; color: #b9c6d2; font-weight: 400; }
.navbar-brand .bd-sub { font-size: 0.92rem; font-weight: 500; color: #5a6672; letter-spacing: 0.01em; }
.navbar-brand { font-size: 1rem !important; }

/* La bande de chiffres est remise a plus tard : on garde la regle au cas ou, mais
   plus aucun bloc ne la porte sur l'accueil (cf. _blc-chiffres a venir). */

/* Print : un titre de section ne reste pas seul en bas de page (vu sur le PDF du 261001,
   « Points forts de l'approche » orphelin p.3). */
@media print { h2, h3 { break-after: avoid-page; page-break-after: avoid; } }

/* ===================================================================== V6 (261003)
   CARROUSEL DE CAPTURES par travail + APERCU AU SURVOL d'un livrable.
   Demande utilisateur : un seul visuel par bloc sous-vendait les livrables (ObTer a 7 captures,
   Airbnb 10, une seule etait montree). Sans JavaScript :
   - .proj-visuel devient un carrousel scroll-snap : on fait defiler au doigt / a la molette.
   - :has() : survoler le n-ieme lien de la colonne de droite AMENE la n-ieme capture en face.
     L'ordre des <img> dans .proj-visuel DOIT suivre l'ordre des <a class="liv">.
   ===================================================================== */
.proj-visuel.carr { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0.6rem;
  scrollbar-width: thin; padding-bottom: 0.4rem; scroll-behavior: smooth; }
.proj-visuel.carr > p { margin: 0; flex: 0 0 100%; scroll-snap-align: start; }
.proj-visuel.carr img { width: 100%; }
/* indicateur discret "il y en a d'autres" : un degrade sur le bord droit */
.proj:has(.carr) .proj-visuel { position: relative; }
.proj:has(.carr) .proj-visuel::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0.4rem;
  width: 2.2rem; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,0), #fff 85%); }
/* survol d'un livrable -> sa capture au premier plan. 1 regle par position, 6 positions suffisent.
   .nosync sur .proj DESACTIVE la synchronisation quand les captures ne suivent pas l ordre des liens
   (ex. ObTer : 7 captures, 2 liens) — mieux vaut pas de surlignage qu un surlignage faux. */
.proj:not(.nosync):has(.proj-liv a.liv:nth-of-type(1):hover) .carr > p:nth-of-type(1),
.proj:not(.nosync):has(.proj-liv a.liv:nth-of-type(2):hover) .carr > p:nth-of-type(2),
.proj:not(.nosync):has(.proj-liv a.liv:nth-of-type(3):hover) .carr > p:nth-of-type(3),
.proj:not(.nosync):has(.proj-liv a.liv:nth-of-type(4):hover) .carr > p:nth-of-type(4),
.proj:not(.nosync):has(.proj-liv a.liv:nth-of-type(5):hover) .carr > p:nth-of-type(5),
.proj:not(.nosync):has(.proj-liv a.liv:nth-of-type(6):hover) .carr > p:nth-of-type(6) { outline: 2px solid var(--bleu); outline-offset: 2px; border-radius: 6px; }
/* sous-groupes dans la colonne des livrables (ex. « Une ville face a ses comparables ») */
.proj-liv .liv-grp { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--bleu); margin: 0.75rem 0 0.15rem; padding-left: 0.1rem; }
.proj-liv .liv-grp:first-child { margin-top: 0; }