/* =====================================================================
   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 chaque fichier HTML.
   Son style est ici (un seul endroit), mais si tu ajoutes un lien de
   navigation il faut l'ajouter dans toutes les 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:8px;}
/* Menu façon « menu pause » P5 : chaque entrée est pivotée et décalée
   différemment, comme des étiquettes collées à la main. */
.sidebar nav li:nth-child(odd) a{--tilt:-2.5deg;}
.sidebar nav li:nth-child(even) a{--tilt:1.5deg;margin-left:10px;}
.sidebar nav a{
  --tilt:0deg;
  display:flex;align-items:center;gap:13px;
  padding:12px 16px;
  color:var(--text-secondary);
  font-family:var(--font-head);font-weight:700;
  font-size:18px;letter-spacing:.05em;text-transform:uppercase;
  position:relative;
  isolation:isolate;              /* garde les pseudos z-index négatifs dans l'item */
  transform:rotate(var(--tilt));
  transition:color .12s var(--ease-snap), transform .14s var(--ease-snap);
}
/* Éclat rouge qui jaillit de la gauche au survol (scaleX : pas besoin
   de overflow:hidden, l'écho de l'item actif peut donc déborder) */
.sidebar nav a::after{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:var(--red);
  clip-path:var(--cut-jag);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .16s var(--ease-hard), background .12s var(--ease-snap);
}
.sidebar nav a:hover{color:var(--text-primary);transform:rotate(var(--tilt)) translateX(6px);}   /* 4.6:1 sur rouge */
.sidebar nav a:hover::after{transform:scaleX(1);}

/* Entrée active : éclat BLANC, texte noir (17:1), plus grande, avec un
   écho rouge décalé derrière — la sélection du menu P5. */
.sidebar nav a.active{
  color:var(--ink);
  font-size:21px;font-weight:700;
  transform:rotate(var(--tilt)) translateX(4px) scale(1.04);
}
.sidebar nav a.active::after{
  background:var(--text-primary);
  transform:scaleX(1);
}
.sidebar nav a.active::before{
  content:"";
  position:absolute;inset:0;z-index:-2;
  background:var(--red);
  clip-path:var(--cut-jag-alt);
  transform:translate(7px,6px) rotate(-2deg);
}

/* ---------- 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:19px;   /* >=18.66px gras : seuil "grand texte", 4:1 suffit (AA) */
  margin-bottom:22px;
}
.eyebrow .line{
  width:54px;height:7px;background:var(--red);
  clip-path:var(--cut-slant);
}
/* Étoile blanche en fin de ligne : signature graphique P5 */
.eyebrow::after{
  content:"";
  flex:0 0 auto;
  width:20px;height:20px;
  background:var(--text-primary);
  clip-path:var(--star);
  transform:rotate(12deg);
}

/* 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);
}
/* Titre d'une section secondaire (h2) : même grammaire, un cran plus petit */
.section-title.is-sub{font-size:clamp(34px,4.4vw,56px);}

.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;
}

/* =====================================================================
   TITRES « LETTRE ANONYME » (style carte de visite P5)
   script.js découpe chaque .section-title et la 1re ligne du hero en
   lettres collées : 5 styles (papier blanc, noir cerclé, rouge, serif
   italique, serif rouge sur blanc), pivotés et décalés différemment.
   Le texte reste lu d'un bloc : une copie .sr-only est gardée, les
   lettres découpées sont aria-hidden. Sans JS : titre classique.
   ===================================================================== */
.is-ransom{text-shadow:none !important;}
.ransom-word{display:inline-block;white-space:nowrap;}   /* espace entre mots : noeud texte inséré par script.js */
.rl{
  display:inline-block;
  line-height:.92;
  padding:.07em .08em .03em;
  margin:0 .02em;
  font-size:var(--s,1em);
  transform:translateY(var(--y,0)) rotate(var(--r,0deg));
}
.rl-a{background:var(--text-primary);color:var(--ink);clip-path:var(--cut-jag);}            /* 17:1 */
.rl-b{background:var(--ink);color:var(--text-primary);outline:.05em solid var(--text-primary);outline-offset:-.05em;}
.rl-c{background:var(--red);color:var(--text-primary);clip-path:var(--cut-jag-alt);}       /* 4.6:1 */
.rl-d{
  color:var(--text-primary);
  font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:700;
  text-transform:none;
  text-shadow:.06em .06em 0 var(--red);
}
.rl-e{
  background:var(--text-primary);color:var(--red);                                          /* 4.6:1, gros corps */
  font-family:Georgia,"Times New Roman",serif;font-weight:700;
}

/* ---------- 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;}
  .section-title.is-sub{font-size:30px;}
  footer{padding-bottom:64px;}
  /* Rotation neutralisée sur les cartes : évite tout débordement latéral */
  .card{transform:rotate(0);}
}