/* =====================================================================
   LAYOUT — Ossature commune à TOUTES les pages
   ---------------------------------------------------------------------
   Tout ce qui entoure le contenu et se répète d'une page à l'autre :
     1. La barre mobile (visible uniquement < 860px)
     2. La coque de page (.page-shell) et la sidebar de navigation
     3. La colonne de contenu (.main-content) et l'enveloppe .section
     4. Les en-têtes de section (.eyebrow, .section-title, .section-rule)
     5. Le pied de page
     6. L'apparition au scroll (.js-reveal)
     7. Les media queries qui concernent cette ossature

   A charger APRES base.css et AVANT le CSS de la page.

   NOTE MULTI-PAGES : la sidebar est recopiée dans les 5 fichiers HTML.
   Son style est ici (un seul endroit), mais si tu ajoutes un lien de
   navigation il faut l'ajouter dans les 5 pages.
   ===================================================================== */

/* ---------- Barre mobile ---------- */
.mobile-bar{
  display:none;
  position:fixed;top:0;left:0;right:0;
  align-items:center;justify-content:space-between;
  padding:14px 18px;
  background:var(--ink);
  border-bottom:4px solid var(--red);   /* aplat rouge franc, pas de flou */
  z-index:100;
}
.mobile-bar .logo{
  font-family:var(--font-head);font-weight:900;font-size:24px;
  text-transform:uppercase;letter-spacing:.04em;
  color:var(--text-primary);
  transform:rotate(-2deg);
}
.mobile-bar .logo span{
  color:var(--red);
  -webkit-text-stroke:1px var(--text-primary);
}
.menu-toggle{
  width:40px;height:40px;
  background:var(--red);
  border:3px solid var(--text-primary);
  border-radius:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  cursor:pointer;
  transition:background .14s var(--ease-snap);
}
.menu-toggle:hover{background:var(--ink);}
/* Géométrie des barres conservée (2px + gap 4px) pour que l'animation
   en croix reste exactement calée sur les offsets d'origine */
.menu-toggle span{width:18px;height:2px;background:var(--text-primary);transition:.2s var(--ease-hard);}
.menu-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.menu-toggle.open span:nth-child(2){opacity:0;}
.menu-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* ---------- Coque de page ---------- */
.page-shell{
  display:flex;
  align-items:flex-start;
  gap:52px;
  max-width:1440px;
  margin:0 auto;
  padding:28px 64px 28px 28px;
}

/* ---------- Sidebar : panneau "collé", légèrement pivoté ---------- */
.sidebar{
  position:sticky;
  top:28px;
  align-self:flex-start;
  flex:0 0 var(--sidebar-w);
  max-height:calc(100vh - 56px);
  background:var(--ink);
  border:3px solid var(--border);
  border-radius:var(--radius-lg);
  /* ombre DURE décalée (flou = 0) : effet papier découpé */
  box-shadow:12px 12px 0 var(--red);
  padding:30px 22px;
  display:flex;flex-direction:column;
  overflow-y:auto;
  transform:rotate(-1deg);       /* décalage collage */
  z-index:90;
}

.sidebar .brand{margin-bottom:26px;}
/* .brand-name et non <h1> : la marque se répète sur toutes les pages et
   ne décrit pas leur contenu. En <h1> elle volait le titre de chaque
   page (et en donnait trois à l'accueil). Le style, lui, ne change pas. */
.sidebar .brand .brand-name{
  display:block;
  font-family:var(--font-head);font-weight:900;
  color:var(--text-primary);
  text-transform:uppercase;letter-spacing:.01em;
  font-size:34px;line-height:.92;
  transform:rotate(-3deg);
  transform-origin:left center;
  text-shadow:4px 4px 0 var(--red);   /* ombre dure, jamais floue */
}
.sidebar .brand .brand-name span{
  color:var(--red);
  -webkit-text-stroke:1.5px var(--text-primary);
  text-shadow:none;
}
.sidebar .brand .rule{
  width:70px;height:9px;background:var(--red);
  margin:16px 0 12px;
  clip-path:var(--cut-slant);         /* barre en biais */
}
.sidebar .brand .tagline{
  font-style:italic;color:var(--text-muted);
  font-size:13px;letter-spacing:.04em;
}

.sidebar nav ul{display:flex;flex-direction:column;gap:6px;}
.sidebar nav a{
  display:flex;align-items:center;gap:13px;
  padding:13px 16px;
  border-radius:var(--radius-md);
  color:var(--text-secondary);
  font-family:var(--font-head);font-weight:700;
  font-size:17px;letter-spacing:.05em;text-transform:uppercase;
  position:relative;
  isolation:isolate;              /* garde le pseudo z-index:-1 dans l'item */
  overflow:hidden;                /* decoupe le balayage hors-cadre */
  transition:color .14s var(--ease-snap), transform .14s var(--ease-snap);
}
/* Balayage rouge EN DIAGONALE : remplace le simple surlignage.
   Le pseudo passe derrière le texte (z-index:-1 + isolation). */
.sidebar nav a::after{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:var(--red);
  clip-path:polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
  transform:translateX(-103%);
  transition:transform .16s var(--ease-hard);
}
.sidebar nav a:hover{color:var(--text-primary);transform:translateX(4px);}
.sidebar nav a:hover::after{transform:translateX(0);}
.sidebar nav a.active{color:var(--text-primary);}   /* blanc cassé sur rouge : 4.6:1 (AA) */
.sidebar nav a.active::after{transform:translateX(0);}
/* Encoche noire tranchée sur le bord gauche de l'item actif */
.sidebar nav a.active::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:6px;
  background:var(--ink);z-index:0;
}

/* ---------- Layout ---------- */
.main-content{
  flex:1 1 auto;
  min-width:0;
  background:transparent;   /* laisse voir la trame halftone de la page */
  min-height:100vh;
}

.section{
  position:relative;
  isolation:isolate;        /* contient les décors en z-index négatif */
  max-width:1040px;
  padding:96px 0 72px;
}
/* Bord "papier" clair juste au-dessus de la déchirure rouge */
.section::before{
  content:"";
  position:absolute;left:0;right:0;bottom:16px;
  height:3px;background:rgba(247,244,236,.22);
}
/* Séparateur : bande rouge à bord DECHIRE entre les sections */
.section::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;
  height:16px;
  background:var(--red);
  clip-path:polygon(
    0 10%, 4% 62%, 9% 6%, 15% 70%, 21% 14%, 27% 66%, 33% 4%, 39% 72%,
    45% 16%, 52% 64%, 58% 2%, 64% 70%, 70% 12%, 76% 66%, 82% 8%,
    88% 72%, 94% 18%, 100% 58%, 100% 100%, 0 100%
  );
}
.section:last-of-type::before,
.section:last-of-type::after{display:none;}

.eyebrow{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-head);font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;
  color:var(--red);font-size:15px;
  margin-bottom:22px;
}
.eyebrow .line{
  width:54px;height:7px;background:var(--red);
  clip-path:var(--cut-slant);
}

/* Titre de section : très grand, incliné, ombre rouge dure */
.section-title{
  display:inline-block;
  font-size:clamp(40px,5.6vw,74px);
  margin-bottom:8px;
  transform:rotate(-2.5deg);
  transform-origin:left center;
  text-shadow:6px 6px 0 var(--red);
}
.section-rule{
  width:130px;height:13px;background:var(--red);
  margin:22px 0 26px;
  clip-path:var(--cut-slant);
}
.section-lead{
  color:var(--text-muted);
  font-size:19px;max-width:620px;
}

/* ---------- Pied de page ---------- */
footer{
  position:relative;
  max-width:1040px;
  padding:34px 0 96px;
  color:var(--text-faint);
  font-size:14px;letter-spacing:.03em;
}
/* Bande rouge oblique fermant la page */
footer::before{
  content:"";
  position:absolute;top:0;left:0;
  width:180px;height:9px;background:var(--red);
  clip-path:var(--cut-slant);
}
footer p{margin:0;}
/* Lien mentions legales : souligne, la couleur seule ne suffirait pas
   a le distinguer du texte de copyright qui l'entoure */
.footer-links{margin-top:8px;}
.footer-links a{
  text-decoration:underline;
  text-decoration-color:var(--red);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  transition:color .13s var(--ease-snap);
}
.footer-links a:hover{color:var(--text-primary);}

/* =====================================================================
   APPARITION AU SCROLL
   L'état masqué n'est appliqué QUE si le JS a posé .js-reveal sur <html>.
   Sans JavaScript, tout reste visible (aucun contenu piégé en opacity:0).
   ===================================================================== */
.js-reveal .section,
.js-reveal footer{
  opacity:0;
  transform:translateY(54px) rotate(-1.8deg);
  transition:opacity .5s var(--ease-snap), transform .55s var(--ease-snap);
}
.js-reveal .section.is-visible,
.js-reveal footer.is-visible{
  opacity:1;
  transform:none;              /* la rotation se redresse à l'arrivée */
}

/* =====================================================================
   RESPONSIVE — Ossature uniquement
   Les adaptations propres à une section (grilles projets, compétences,
   contact…) sont dans le fichier CSS de la page concernée.
   ===================================================================== */

/* Ecrans moyens : on resserre les marges autour de la coque */
@media (max-width: 1180px){
  .page-shell{gap:38px;padding:24px 32px 24px 24px;}
}

/* Sous 860px : la sidebar devient un panneau coulissant hors-champ et
   la barre mobile apparait. */
@media (max-width: 860px){
  .mobile-bar{display:flex;}
  .page-shell{padding:0;gap:0;}
  /* La sidebar redevient un panneau fixe hors-champ : comportement du
     menu mobile strictement identique (translateX + classe .open) */
  .sidebar{
    position:fixed;
    top:0;left:0;bottom:0;
    /* 82vw : sur un iPhone SE (320px) un 284px fixe couvrait 89% de
       l'ecran et ne laissait plus rien voir du contenu */
    width:min(284px, 82vw);
    max-height:none;
    /* padding haut dégagé pour passer sous la barre fixe (~72px) */
    padding:88px 22px 30px;
    border-width:0 3px 0 0;
    border-radius:0;
    box-shadow:14px 0 0 rgba(218,29,38,.55);
    transform:translateX(-120%) rotate(0);
    /* visibility : sans elle le panneau hors-champ reste atteignable au
       Tab, et le focus clavier part dans un menu invisible.
       Le delai sur la transition laisse l'animation de fermeture se
       jouer AVANT que le panneau ne devienne inatteignable. */
    visibility:hidden;
    transition:transform .28s var(--ease-hard), visibility 0s linear .28s;
    /* reste SOUS la barre mobile (z-index:100) pour que le bouton
       de fermeture demeure cliquable, comme dans la version d'origine */
    z-index:95;
  }
  .sidebar.open{
    transform:translateX(0) rotate(0);
    visibility:visible;
    transition:transform .28s var(--ease-hard), visibility 0s linear 0s;
  }
  .main-content{padding:0 20px;}
  .section{padding:104px 0 56px;max-width:100%;}
  .section-title{font-size:34px;}
  footer{padding-bottom:64px;}
  /* Rotation neutralisée sur les cartes : évite tout débordement latéral */
  .card{transform:rotate(0);}
}