/* Portfolio v2 (doctrine « sur mesure » du 23/09/2026) : /portfolio/ et les quatre prototypes du lab.
   Classes prefixees pf-. Charge apres eoche.v2.css, n'en modifie aucune regle commune.
   Principes : fonds clairs pour lire, cartes blanches a ombre douce, vraies captures en grand,
   le rouge en accent rare, aucun decor anime en dehors du monogramme commun.
   Tailles de texte : l'echelle commune decide (H1, H2, H3 en .titre-3, texte courant, titre final).
   Cette feuille ne fixe que des libelles (statut, legende) et l'ecran simule des prototypes. */

/* ══════════════════════════════════════════════════════════════════
   PREMIERE VUE
   ══════════════════════════════════════════════════════════════════ */
.pf-heros .page-heros__chapeau { max-width: 44ch; }
/* Ordinateur et tablette : le H1 du portfolio est long, il reste un peu sous la taille commune.
   Sur telephone, rien ne change : l'echelle commune s'applique. */
@media (min-width: 768px) {
  .pf-heros .page-heros__titre { max-width: 17ch; font-size: clamp(36px, 4.7vw, 68px); }
  .pf-heros--proto .page-heros__titre { max-width: 19ch; }
}

/* ══════════════════════════════════════════════════════════════════
   ELEMENTS PARTAGES
   ══════════════════════════════════════════════════════════════════ */
.pf-statut { font-size: 15px; font-weight: 600; line-height: 1.4; color: #52525B; }
.scene .pf-statut { color: #A1A1AA; }

.pf-faits { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pf-faits li { position: relative; padding-left: 22px; line-height: 1.5; color: #3F3F46; }
.pf-faits li::before { content: ""; position: absolute; left: 0; top: 0.74em; width: 11px; height: 2px; border-radius: 1px; background: var(--rouge); }

/* ══════════════════════════════════════════════════════════════════
   SITES ET BOUTIQUES : une carte blanche par projet, captures en grand
   ══════════════════════════════════════════════════════════════════ */
.pf-sites { padding-top: clamp(64px, 7vw, 104px); }
.pf-projets { display: grid; gap: clamp(18px, 2.4vw, 28px); }
.pf-projet {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 60px);
  padding: clamp(18px, 2.6vw, 36px);
  border-radius: var(--r-xl);
  background: #fff;
  border: 1px solid rgba(9, 9, 11, 0.06);
  box-shadow: 0 1px 2px rgba(9, 9, 11, 0.04), 0 14px 34px -22px rgba(9, 9, 11, 0.28);
  scroll-margin-top: 96px;
}
.pf-projet--inverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.pf-projet--inverse .pf-projet__appareils { order: 2; padding: 0 0 7% 7%; }
.pf-projet--inverse .pf-projet__tel { right: auto; left: 0; }
.pf-projet__appareils { position: relative; padding: 0 7% 7% 0; }
.pf-projet__tel { position: absolute; right: 0; bottom: 0; width: 22%; }
.pf-projet__texte { display: grid; justify-items: start; gap: 12px; }
.pf-projet__phrase { max-width: 44ch; line-height: 1.55; color: #27272A; }
.pf-projet__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 20px;
  width: 100%;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--ligne-claire);
}

/* Et le site que vous lisez */
.pf-miroir {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px 40px;
  margin-top: clamp(18px, 2.4vw, 28px);
  padding: clamp(22px, 2.6vw, 32px) clamp(22px, 2.8vw, 36px);
  border-radius: var(--r-xl);
  background: #fff;
  border: 1px solid rgba(9, 9, 11, 0.06);
  box-shadow: 0 1px 2px rgba(9, 9, 11, 0.04), 0 14px 34px -22px rgba(9, 9, 11, 0.28);
}
.pf-miroir__texte p { max-width: 58ch; margin-top: 8px; line-height: 1.55; color: #3F3F46; }
.pf-miroir__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }

/* ══════════════════════════════════════════════════════════════════
   AUTOMATISATIONS : la liste commune des projets (.cas__* de eoche.v2.css)
   ══════════════════════════════════════════════════════════════════ */
.pf-cas .cas__ligne { scroll-margin-top: 96px; }
.pf-automatisations .note-lien { margin-top: 26px; }

/* ══════════════════════════════════════════════════════════════════
   URGENCE
   ══════════════════════════════════════════════════════════════════ */
.pf-urgence__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 6vw, 96px); }
.pf-urgence .tete-section { margin-bottom: clamp(28px, 3.4vw, 40px); }
.pf-incident { display: grid; justify-items: start; gap: 10px; scroll-margin-top: 96px; }
.pf-frise { position: relative; display: grid; gap: 16px; margin: 8px 0 4px; }
.pf-frise li { position: relative; display: grid; gap: 2px; padding-left: 28px; }
.pf-frise li::before { content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid rgba(9, 9, 11, 0.3); }
.pf-frise li:last-child::before { border-color: var(--rouge); background: var(--rouge); }
.pf-frise li:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: 19px; bottom: -19px; width: 2px; border-radius: 1px; background: linear-gradient(180deg, rgba(9, 9, 11, 0.2), var(--rouge)); }
.pf-frise b { font-size: 15px; font-weight: 700; color: var(--rouge-profond); }
.pf-frise span { max-width: 40ch; line-height: 1.5; color: #27272A; }
.pf-urgence__action { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: clamp(28px, 3.4vw, 40px); }
.pf-urgence__action p { max-width: 30ch; line-height: 1.5; color: #52525B; }
.pf-urgence__legende { margin-bottom: 12px; font-size: 15px; font-weight: 600; color: #52525B; }

/* ══════════════════════════════════════════════════════════════════
   PROTOTYPES DU LAB (liste sur /portfolio/)
   ══════════════════════════════════════════════════════════════════ */
.pf-labo__grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.pf-labo__carte {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 22px 18px;
  border-radius: var(--r-l);
  background: #fff;
  border: 1px solid rgba(9, 9, 11, 0.06);
  box-shadow: 0 1px 2px rgba(9, 9, 11, 0.04), 0 14px 34px -22px rgba(9, 9, 11, 0.28);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.pf-labo__carte:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(9, 9, 11, 0.04), 0 22px 44px -24px rgba(9, 9, 11, 0.32); }
.pf-labo__nom a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.pf-labo__nom a:focus-visible { outline: none; }
.pf-labo__carte:has(a:focus-visible) { outline: 2px solid var(--rouge); outline-offset: 3px; }
.pf-labo__texte { line-height: 1.55; color: #3F3F46; }
.pf-labo__pied { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--ligne-claire); font-size: 14.5px; font-weight: 600; color: #52525B; }
.pf-labo__pied .lien-fleche { min-height: 32px; color: var(--texte-clair); }

/* ══════════════════════════════════════════════════════════════════
   PAGES DE PROTOTYPE
   ══════════════════════════════════════════════════════════════════ */
.pf-proto__figure { margin: 0; }
.pf-proto__nav .cadre-nav__ecran { aspect-ratio: auto; background: #F4F4F2; }
.pf-proto__nav .cadre-nav__url { max-width: 70%; }
.pf-proto__legende { max-width: 72ch; margin-top: 14px; font-size: 16px; line-height: 1.5; color: #52525B; }
/* Le besoin traite par le prototype : un paragraphe, en texte courant, sous l'ecran */
.pf-proto__besoin { max-width: 62ch; margin-top: clamp(28px, 3.4vw, 40px); line-height: 1.6; color: #27272A; }

/* L'interface, en HTML lisible */
.pf-app { display: grid; grid-template-columns: 200px minmax(0, 1fr); font-size: 14px; line-height: 1.45; color: #18181B; text-align: left; }
.pf-app__cote { padding: 22px 14px; background: #FAFAF9; border-right: 1px solid rgba(9, 9, 11, 0.07); }
.pf-app__nom { margin: 0 0 18px 10px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.pf-app__cote ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pf-app__cote li { padding: 8px 10px; border-radius: 9px; font-weight: 500; color: #52525B; }
.pf-app__cote li.est-actif { background: #fff; color: #09090B; font-weight: 600; box-shadow: 0 1px 2px rgba(9, 9, 11, 0.06), 0 0 0 1px rgba(9, 9, 11, 0.06); }
.pf-app__main { min-width: 0; padding: 22px clamp(16px, 2.2vw, 28px) 26px; }
.pf-app__tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 16px; }
.pf-app__vue { font-size: 19px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.25; }
.pf-app__vue span { display: none; }
.pf-app__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px; }
.pf-app__bloc { min-width: 0; padding: 14px 16px 16px; border-radius: 14px; background: #fff; border: 1px solid rgba(9, 9, 11, 0.07); }
.pf-app__bloc--large { grid-column: 1 / -1; }
.pf-app__bloc--nu { padding: 0; background: none; border: 0; }
.pf-app__titre { margin-bottom: 10px; font-size: 13px; font-weight: 700; color: #71717A; }
.pf-app__lignes { display: grid; margin: 0; padding: 0; list-style: none; }
.pf-app__lignes li { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 8px 0; border-top: 1px solid rgba(9, 9, 11, 0.06); }
.pf-app__lignes li:first-child { padding-top: 0; border-top: 0; }
.pf-app__lignes span { color: #3F3F46; }
.pf-app__etat { flex: none; font-size: 13px; font-weight: 600; color: #52525B; text-align: right; }
.pf-app__etat--alerte { color: var(--rouge-profond); }
.pf-app__etat--ok { color: #09090B; }
.pf-app__bloc--fiche .pf-app__lignes li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; }
.pf-app__bloc--fiche .pf-app__lignes span { font-size: 13px; font-weight: 600; color: #71717A; }
.pf-app__bloc--fiche .pf-app__etat { font-size: 14px; font-weight: 500; color: #18181B; text-align: left; }

.pf-app__parcours { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pf-app__parcours li { position: relative; flex: 1 1 0; min-width: 0; padding: 10px 12px; border-radius: 10px; background: #F4F4F2; border: 1px solid rgba(9, 9, 11, 0.06); color: #71717A; }
.pf-app__parcours li + li::before { content: ""; position: absolute; left: -11px; top: 50%; width: 10px; height: 1px; background: rgba(9, 9, 11, 0.22); }
.pf-app__parcours span { display: block; font-weight: 600; }
.pf-app__parcours small { display: block; margin-top: 2px; font-size: 12.5px; }
.pf-app__parcours .est-fait { background: #fff; color: #09090B; }
.pf-app__parcours .est-fait span::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 7px;
  vertical-align: -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%2309090B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.pf-app__parcours .est-cours, .pf-app__parcours .est-alerte { background: rgba(253, 58, 37, 0.06); border-color: rgba(201, 39, 21, 0.4); color: #09090B; }
.pf-app__parcours .est-cours small, .pf-app__parcours .est-alerte small { font-weight: 600; color: var(--rouge-profond); }

.pf-app__actions { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: pf-action; }
.pf-app__actions li { counter-increment: pf-action; display: flex; align-items: baseline; gap: 10px; color: #27272A; }
.pf-app__actions li::before { content: counter(pf-action); flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #F4F4F2; font-size: 12px; font-weight: 700; color: #09090B; }

.pf-app__colonnes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pf-app__colonne { display: grid; align-content: start; gap: 8px; padding: 12px; border-radius: 14px; background: #EAEAE6; }
.pf-app__colonne .pf-app__titre { margin: 0 0 2px 2px; color: #52525B; }
.pf-app__fiche { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid rgba(9, 9, 11, 0.06); }
.pf-app__fiche b { font-weight: 600; }
.pf-app__fiche span { font-size: 13px; color: #71717A; }
.pf-app__fiche.est-vise { box-shadow: inset 3px 0 0 var(--rouge); }
.pf-app__fiche.est-vise span { color: var(--rouge-profond); font-weight: 600; }

.pf-app__pile { display: grid; align-content: start; gap: 12px; min-width: 0; }
.pf-app__code { margin: 0; padding: 12px 14px; overflow-x: auto; border-radius: 10px; background: #111114; color: #E4E4E7; font: 12.5px/1.6 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; white-space: pre; }
.pf-app__coches { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.pf-app__coches li { display: flex; align-items: center; gap: 9px; color: #27272A; }
.pf-app__coches li::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: #09090B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.4l2.4 2.4 5.2-5.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.pf-app__grand { margin-bottom: 8px; font-size: 17px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.35; }
.pf-app__roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.pf-app__roles li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: #F4F4F2; }
.pf-app__roles b { font-weight: 600; }
.pf-app__roles span { font-size: 13px; color: #52525B; }

/* Ce que le prototype demontre : titre a gauche, lecture a droite sur ordinateur */
.pf-proto-preuve__grille { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; gap: clamp(32px, 5vw, 80px); }
.pf-proto-preuve .tete-section { margin-bottom: 0; }
.pf-proto-preuve__corps { min-width: 0; max-width: 760px; }
.pf-points { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ligne-claire); }
.pf-points li { position: relative; padding: 15px 0 15px 26px; border-bottom: 1px solid var(--ligne-claire); line-height: 1.5; color: #27272A; }
.pf-points li::before { content: ""; position: absolute; left: 2px; top: 1.45em; width: 11px; height: 2px; border-radius: 1px; background: var(--rouge); }
.pf-proto__note { margin-top: 16px; line-height: 1.55; color: #52525B; }
.pf-proto__note a { color: var(--rouge-profond); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* Ce que nous livrerions pour une vraie entreprise : une phrase en texte courant, plus de bloc replie */
.pf-proto__livrables { max-width: 62ch; margin-top: 22px; line-height: 1.6; color: #27272A; }
.pf-proto__suite { display: flex; flex-wrap: wrap; gap: 0 28px; margin-top: 26px; }

/* ══════════════════════════════════════════════════════════════════
   ECRANS MOYENS ET TELEPHONES
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 1180px) {
  .pf-labo__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .pf-projet, .pf-projet--inverse { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .pf-projet--inverse .pf-projet__appareils { order: 0; padding: 0 7% 7% 0; }
  .pf-projet--inverse .pf-projet__tel { left: auto; right: 0; }
  .pf-projet__phrase { max-width: 60ch; }
  .pf-urgence__grille { grid-template-columns: minmax(0, 1fr); align-items: start; }
  /* Et le site que vous lisez : le texte garde toute la largeur, les actions passent dessous */
  .pf-miroir { grid-template-columns: minmax(0, 1fr); }
  /* Tablette : sans le menu lateral, l'ecran du prototype garde des colonnes lisibles */
  .pf-app { grid-template-columns: minmax(0, 1fr); }
  .pf-app__cote { display: none; }
  .pf-app__vue span { display: block; margin-bottom: 2px; font-size: 13px; font-weight: 600; letter-spacing: 0; color: #71717A; }
  .pf-app__grille--pile { grid-template-columns: minmax(0, 1fr); }
  .pf-proto-preuve__grille { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pf-proto-preuve .tete-section { margin-bottom: clamp(40px, 6vw, 72px); }
}
@media (max-width: 767px) {
  .pf-heros .page-heros__titre { max-width: none; }
  /* 24 px d'air de plus au-dessus de chaque titre de section : les sections se distinguent mieux */
  .pf-automatisations, .pf-urgence, .pf-labo, .pf-proto-ecran, .pf-proto-preuve { padding-top: calc(var(--section) + 24px); }
  .pf-sites { padding-top: 88px; }

  .pf-projet { gap: 20px; padding: 12px 12px 22px; border-radius: var(--r-l); }
  .pf-projet__texte { gap: 10px; padding: 0 8px; }
  .pf-projet__tel { width: 24%; }
  .pf-projet__pied { flex-direction: column; align-items: flex-start; }

  .pf-miroir { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; border-radius: var(--r-l); }
  .pf-miroir__actions { flex-direction: column; align-items: stretch; gap: 4px; }
  .pf-miroir__actions .bouton { width: 100%; }
  .pf-miroir__actions .lien-fleche { justify-content: center; }

  .pf-urgence__action { flex-direction: column; align-items: stretch; }
  .pf-urgence__action .bouton { width: 100%; }
  .pf-urgence__action p { max-width: none; }

  .pf-labo__grille { grid-template-columns: minmax(0, 1fr); }
  .pf-labo__carte { padding: 22px 20px 16px; }

  .pf-proto__nav .cadre-nav__url { max-width: 82%; font-size: 11px; transform: none; }
  .pf-app__main { padding: 16px 12px 18px; }
  .pf-app__vue { font-size: 18px; }
  .pf-app__grille { grid-template-columns: minmax(0, 1fr); }
  .pf-app__bloc { padding: 12px 14px 14px; }
  .pf-app__bloc--nu { padding: 0; }
  .pf-app__parcours { flex-direction: column; gap: 8px; }
  .pf-app__parcours li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .pf-app__parcours li + li::before { left: 22px; top: -9px; width: 1px; height: 8px; }
  .pf-app__parcours small { margin-top: 0; text-align: right; }
  .pf-app__colonnes { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pf-app__roles { grid-template-columns: minmax(0, 1fr); }
  .pf-app__bloc--fiche .pf-app__lignes li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  /* L'exemple JSON-LD a des lignes courtes : il tient sans retour a la ligne a 360 px, le retour reste un filet */
  .pf-app__code { padding: 12px 10px; font-size: 11.5px; white-space: pre-wrap; overflow-wrap: anywhere; }

  .pf-proto__suite { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .pf-labo__carte { transition: none; }
}