/* ================================================================
   PORTFOLIO — ALIGNEMENT SUR LA DA DE L'ACCUEIL   (28/07/2026)

   Charge APRES portfolio.css, sur /portfolio/ uniquement.
   Scope : .portfolio-page SANS .prototype-page — les 4 sous-pages
   prototypes gardent leur habillage sombre d'origine.

   Toutes les valeurs ci-dessous sont RELEVEES sur l'accueil
   (styles calcules dans le navigateur), pas choisies au jugement :

     fond #EDECEC . texte #09090B . Urbanist
     H1  graisse 400, interlettrage -0.03em
         (signature du site : un grand titre ne passe JAMAIS en gras)
     H2  graisse 600
     sur-titre de section : texte rouge #FD3A25, graisse 600
     bouton principal : pilule #272727, rayon 99px, degrade radial
         blanc en haut + pile d'ombres (effet legerement bombe)
     bouton secondaire : pilule #F5F5F5, texte noir -> rouge au survol
     cartes : rayon 32px, ombre 0 26px 70px rgba(9,9,11,.18)

   Les cartes projets restent SOMBRES : c'est deja le composant
   .portfolio-card de la section Realisations de l'accueil. Ce qui
   manquait, c'est le fond clair de la marque autour.
   ================================================================ */

/* ---------- 1. Fond et texte de page ---------- */

.portfolio-page:not(.prototype-page) {
  color: #09090b;
  background: #edecec;
}

/* ---------- 2. Barre du haut ---------- */

/* L'accueil a lui aussi une capsule flottante — mais BLANCHE :
   fond rgba(255,255,255,.5), blur(44px), rayon 999px, marge laterale 32px.
   Ici elle etait noire. On reprend la blanche.

   Une seule valeur s'ecarte du releve : l'opacite du fond, montee de .5 a .94.
   Raison : l'en-tete de l'accueil ne colle pas au defilement (position sticky
   SANS top, donc il sort de l'ecran), le sien reste colle. Une capsule a 50 %
   qui glisse au-dessus des cartes noires vire au gris sale a chaque carte —
   c'est l'effet bizarre au scroll. A 94 % elle reste un objet net et lisible.
   Si l'en-tete devait un jour ne plus coller, on pourrait revenir a .5. */

.portfolio-page:not(.prototype-page) .portfolio-header {
  top: 0;
  padding: 14px 0;
  border-bottom: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.portfolio-page:not(.prototype-page) .portfolio-header__inner {
  min-height: 68px;
  padding: 10px 10px 10px 26px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(44px) saturate(150%);
  -webkit-backdrop-filter: blur(44px) saturate(150%);
  box-shadow: 0 10px 30px rgba(9, 9, 11, 0.10);
}

/* Sous 980px l'en-tete passe en colonne : la capsule monte a 222px de haut sur
   telephone. Collee, elle figeait un tiers de l'ecran — mesure, pas suppose.
   On la laisse defiler, comme sur l'accueil ; l'acces au contact reste assure
   par la barre fixe du bas (Appeler / Devis gratuit). */
@media (max-width: 980px) {
  .portfolio-page:not(.prototype-page) .portfolio-header {
    position: static;
    padding: 12px 0 0;
  }

  /* Meme seuil : en colonne la capsule monte a 128px (800px de large) puis
     222px (telephone). Un rayon de 999px lui ferait deux bouts en demi-cercle. */
  .portfolio-page:not(.prototype-page) .portfolio-header__inner {
    padding: 16px 18px;
    border-radius: 28px;
  }
}

.portfolio-page:not(.prototype-page) .portfolio-logo strong {
  color: #09090b;
  font-weight: 700;
}

.portfolio-page:not(.prototype-page) .portfolio-logo small {
  color: #71717a;
  font-weight: 600;
}

/* :not(.portfolio-button) obligatoire — le bouton "Parler du projet" vit
   dans la nav, sans cette exclusion il heriterait du gris et deviendrait
   illisible sur sa pilule noire. */
.portfolio-page:not(.prototype-page) .portfolio-nav a:not(.portfolio-button) {
  color: #3f3f46;
  font-weight: 600;
}

.portfolio-page:not(.prototype-page) .portfolio-nav a[aria-current="page"] {
  color: #fd3a25;
}

/* .portfolio-nav a (0,1,1) battait .portfolio-button (0,1,0) : le bouton
   heritait d'un blanc casse #E4E4E7 au lieu du blanc pur du .tf-btn. */
.portfolio-page:not(.prototype-page) .portfolio-nav a.portfolio-button {
  color: #ffffff;
}

.portfolio-page:not(.prototype-page) .portfolio-nav a:not(.portfolio-button):hover,
.portfolio-page:not(.prototype-page) .portfolio-nav a:not(.portfolio-button):focus-visible {
  border-color: #e4e4e7;
  color: #fd3a25;
  background: #ffffff;
}

/* ---------- 3. Boutons ----------
   Le bouton plein n'a RIEN a corriger : le bloc "ALIGNEMENT DA SITE
   PRINCIPAL - 2026-07-04" en fin de portfolio.css l'a deja cale sur le
   .tf-btn de l'accueil (pilule #272727, degrade radial, graisse 600).
   On ne le redefinit pas ici, ce serait un doublon a maintenir en double.
   Seul le bouton secondaire doit changer : le sien est concu pour un fond
   sombre (blanc translucide), invisible sur le fond clair.               */

.portfolio-page:not(.prototype-page) .portfolio-button--outline {
  border: 1px solid #e4e4e7;
  color: #09090b;
  background: #f5f5f5;
  box-shadow: none;
}

.portfolio-page:not(.prototype-page) .portfolio-button--outline:hover,
.portfolio-page:not(.prototype-page) .portfolio-button--outline:focus-visible {
  border-color: #e4e4e7;
  color: #fd3a25;
  background: #ffffff;
  box-shadow: none;
}

/* ---------- 4. Hero ---------- */

.portfolio-page:not(.prototype-page) .portfolio-hero::before {
  background: linear-gradient(90deg, transparent, rgba(253, 58, 37, 0.28), transparent);
}

/* Sur-titre : sur l'accueil, un .heading-sub est un simple texte rouge
   en graisse 600. Ici c'etait une pastille a fond blanc translucide et
   bordure blanche, dessinee pour le fond noir : sur le fond clair il
   reste un lisere fantome. On repasse au texte nu. */
.portfolio-page:not(.prototype-page) .portfolio-kicker {
  margin-bottom: 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: #fd3a25;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.portfolio-page:not(.prototype-page) .portfolio-kicker::before {
  display: none;
}

/* Le monogramme avait recu une pastille blanche ronde le 05/07 pour ne pas
   disparaitre sur le header noir. Le header n'est plus noir : elle se voit
   maintenant comme un disque plus clair que le fond. */
.portfolio-page:not(.prototype-page) .portfolio-logo img {
  padding: 0;
  border-radius: 0;
  background: none;
}

.portfolio-page:not(.prototype-page) .portfolio-hero h1 {
  color: #09090b;
  font-size: clamp(38px, 5.8vw, 68px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.portfolio-page:not(.prototype-page) .portfolio-hero__lead {
  color: #3f3f46;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.6;
}

/* ---------- 5. Encart des avis : carte blanche de la charte ---------- */

.portfolio-page:not(.prototype-page) .portfolio-note {
  border: 1px solid #e4e4e7;
  border-radius: 24px;
  color: #09090b;
  background: #ffffff;
  box-shadow: 0 26px 70px rgba(9, 9, 11, 0.07);
}

.portfolio-page:not(.prototype-page) .portfolio-note strong {
  color: #09090b;
  font-size: 17px;
  font-weight: 600;
}

.proof-note ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.proof-note li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
  border-top: 1px solid #e4e4e7;
  color: #3f3f46;
  font-size: 15px;
}

.proof-note li:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.proof-note li:last-of-type {
  padding-bottom: 0;
}

/* Chiffre cle en rouge de marque : regle de la charte. */
.proof-note b {
  color: #fd3a25;
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
}

.proof-note em {
  display: block;
  margin-top: 2px;
  color: #71717a;
  font-size: 13px;
  font-style: normal;
}

/* ---------- 6. Titres de section ---------- */

.portfolio-page:not(.prototype-page) .portfolio-section-head h2,
.portfolio-page:not(.prototype-page) .portfolio-work .portfolio-section-head h2 {
  color: #18181b;
  font-size: clamp(28px, 3.6vw, 46px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.portfolio-page:not(.prototype-page) .portfolio-section-head p {
  color: #52525b;
}

/* Second groupe de cartes (prototypes) dans la meme section. */
.work-split {
  margin-top: clamp(56px, 7vw, 104px);
}

/* ---------- 7. Sections : fond plat, comme l'accueil ---------- */

.portfolio-page:not(.prototype-page) .portfolio-work {
  background: transparent;
}

/* Le bloc de conclusion reste NOIR, texte blanc : c'est une regle explicite
   de la charte ("bloc de conclusion en fond noir, texte blanc, chiffre cle
   en rouge — reprend le style des boutons du site"). On ne l'eclaircit pas.
   Seule la graisse du titre passe a 600 pour coller aux H2 de l'accueil. */

.portfolio-page:not(.prototype-page) .portfolio-closing h2 {
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* Sur ce fond noir, le bouton plein s'inverse : pilule claire, texte noir
   qui passe au rouge au survol (bouton secondaire de la charte). */
.portfolio-page:not(.prototype-page) .portfolio-closing .portfolio-button:not(.portfolio-button--outline) {
  color: #09090b;
  background: #f5f5f5;
  box-shadow: inset 0 -3px 0 rgba(9, 9, 11, 0.10);
}

.portfolio-page:not(.prototype-page) .portfolio-closing .portfolio-button:not(.portfolio-button--outline):hover,
.portfolio-page:not(.prototype-page) .portfolio-closing .portfolio-button:not(.portfolio-button--outline):focus-visible {
  color: #fd3a25;
  background: #ffffff;
  box-shadow: inset 0 -3px 0 rgba(9, 9, 11, 0.10);
}

/* ---------- 8. Cartes projets : calage exact sur .portfolio-card ---------- */

.portfolio-page:not(.prototype-page) .work-card {
  border-radius: 32px;
  border-color: rgba(9, 9, 11, 0.12);
  box-shadow:
    0 26px 70px rgba(9, 9, 11, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* La carte vedette garde son lisere rouge : la regle .work-card ci-dessus
   l'ecrasait sans le vouloir. */
.portfolio-page:not(.prototype-page) .work-card--real-feature {
  border-color: rgba(253, 58, 37, 0.28);
  box-shadow:
    0 34px 90px rgba(9, 9, 11, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 0 0 1px rgba(253, 58, 37, 0.08);
}

.portfolio-page:not(.prototype-page) .work-card__badge {
  border-color: rgba(253, 58, 37, 0.5);
  font-weight: 800;
}

/* ---------- 9. Pied de page ---------- */

.portfolio-page:not(.prototype-page) .portfolio-footer {
  color: #71717a;
  border-top: 1px solid rgba(9, 9, 11, 0.08);
  background: transparent;
}

.portfolio-page:not(.prototype-page) .portfolio-footer a {
  color: #3f3f46;
}

.portfolio-page:not(.prototype-page) .portfolio-footer a:hover,
.portfolio-page:not(.prototype-page) .portfolio-footer a:focus-visible {
  color: #fd3a25;
}