/* ═══════════════════════════════════════════════════════════════════
   v2-pages.css — composants de page (accueil, services, blog, fiche
   projet, contact, pied de page). Complète v2.css, même langage :
   police Jost, accent --p1, filets rgba(--n3), rythme de 120 px.
   ═══════════════════════════════════════════════════════════════════ */

/* ══ EN-TÊTE DE PAGE ══ */
.v2-pagehead{padding:3.25rem var(--gutter) 3rem;}
.v2-crumb{font-size:14px;color:rgb(var(--n3));margin-bottom:1.2rem;}
.v2-crumb a{color:rgb(var(--p1));}
.v2-crumb a:hover{text-decoration:underline;}
.v2-headgrid{display:grid;grid-template-columns:1fr;gap:1.5rem 4rem;align-items:start;}

/* ══ ACCUEIL — bandeau ══ */
.v2-hero{padding:calc(var(--rhythm) - 20px) var(--gutter) var(--rhythm);}
.v2-hero-tag{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:rgb(var(--p1));background:rgba(var(--p1),.10);
  border:1px solid rgba(var(--p1),.26);padding:6px 16px;border-radius:100px;margin-bottom:1.6rem;
}
.v2-hero-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:rgb(var(--p1));}
.v2-hero h1{font-size:clamp(40px,5.4vw,72px);line-height:118%;font-weight:600;letter-spacing:-.02em;}
.v2-hero h1 em{font-style:normal;color:rgb(var(--p1));}
.v2-hero-role{font-size:18px;font-weight:500;color:rgb(var(--n4));margin-top:1.1rem;}
.v2-hero-desc{font-size:18px;line-height:165%;color:rgb(var(--n3));margin-top:1.2rem;max-width:60ch;}
.v2-btns{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2.2rem;}
.v2-btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:16px;font-weight:600;padding:13px 26px;border-radius:100px;
  transition:all .35s var(--ease);border:1px solid transparent;cursor:pointer;
}
.v2-btn svg{width:17px;height:17px;}
.v2-btn-fill{background:rgb(var(--p1));color:#fff;}
.v2-btn-fill:hover{filter:brightness(1.1);transform:translateY(-2px);color:#fff;}
.v2-btn-line{background:transparent;color:rgb(var(--n5));border-color:rgba(var(--n3),.45);}
.v2-btn-line:hover{border-color:rgb(var(--p1));color:rgb(var(--p1));transform:translateY(-2px);}
.v2-btn-block{width:100%;justify-content:center;border-radius:10px;}

.v2-stats{display:flex;flex-wrap:wrap;gap:2.5rem 3.5rem;margin-top:3rem;padding-top:2.5rem;border-top:1px solid rgba(var(--n3),.28);}
.v2-stat-n{font-size:40px;font-weight:600;color:rgb(var(--p1));line-height:1;}
.v2-stat-l{font-size:14px;color:rgb(var(--n3));margin-top:.35rem;}

/* ══ COMPÉTENCES ══ */
.v2-skills{margin-top:2rem;display:flex;flex-direction:column;gap:1.15rem;max-width:640px;}
.v2-skill-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.45rem;}
.v2-skill-n{font-size:16px;font-weight:500;}
.v2-skill-p{font-size:14px;font-weight:600;color:rgb(var(--p1));font-variant-numeric:tabular-nums;}
.v2-skill-t{height:5px;border-radius:3px;background:rgba(var(--n3),.22);overflow:hidden;}
.v2-skill-f{height:100%;border-radius:3px;background:rgb(var(--p1));width:0;transition:width 1.1s var(--ease);}

/* ══ SERVICES ══ */
.v2-svc-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-top:3rem;}
.v2-svc{
  position:relative;display:block;padding:2.4rem 2rem;border-radius:14px;
  background:rgb(var(--n2));border:1px solid rgba(var(--n3),.28);
  transition:all .4s var(--ease);
}
.v2-svc:hover{border-color:rgb(var(--p1));transform:translateY(-4px);box-shadow:var(--shadow1);}
.v2-svc-n{font-size:14px;font-weight:600;color:rgb(var(--n3));letter-spacing:.08em;}
.v2-svc-ico{
  width:54px;height:54px;border-radius:14px;margin:1.3rem 0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(var(--p1),.12);color:rgb(var(--p1));transition:all .4s var(--ease);
}
.v2-svc:hover .v2-svc-ico{background:rgb(var(--p1));color:#fff;}
.v2-svc-ico svg{width:26px;height:26px;}
.v2-svc h3{font-size:20px;font-weight:600;line-height:130%;margin-bottom:.6rem;}
.v2-svc p{font-size:16px;line-height:155%;color:rgb(var(--n3));}
.v2-svc-arrow{position:absolute;top:2.2rem;right:2rem;color:rgb(var(--n3));transition:all .4s var(--ease);}
.v2-svc-arrow svg{width:18px;height:18px;}
.v2-svc:hover .v2-svc-arrow{color:rgb(var(--p1));transform:translate(3px,-3px);}

/* ══ PARCOURS ══ */
.v2-tl-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;margin-top:3rem;}
.v2-tl-h{
  font-size:14px;font-weight:600;color:rgb(var(--p1));
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:1.8rem;
}
.v2-tl-item{position:relative;padding-left:1.8rem;padding-bottom:2rem;}
.v2-tl-item::before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;border-radius:50%;background:rgb(var(--p1));}
.v2-tl-item::after{content:"";position:absolute;left:4px;top:20px;width:1px;height:calc(100% - 14px);background:rgba(var(--n3),.35);}
.v2-tl-item:last-child{padding-bottom:0;}
.v2-tl-item:last-child::after{display:none;}
.v2-tl-date{font-size:12px;font-weight:600;color:rgb(var(--p1));letter-spacing:.06em;text-transform:uppercase;}
.v2-tl-title{font-size:18px;font-weight:600;margin-top:.25rem;}
.v2-tl-place{font-size:14px;color:rgb(var(--n3));margin-top:.15rem;}
.v2-tl-desc{font-size:14px;color:rgb(var(--n3));line-height:155%;margin-top:.4rem;}
.v2-chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem;}
.v2-chips li{
  font-size:14px;color:rgb(var(--n4));background:rgba(var(--n3),.14);
  border:1px solid rgba(var(--n3),.28);padding:6px 15px;border-radius:100px;
}

/* ══ BLOG ══ */
.v2-blog-grid{display:grid;grid-template-columns:1fr;gap:2rem;margin-top:3rem;}
.v2-post{
  display:block;border-radius:14px;overflow:hidden;
  background:rgb(var(--n2));border:1px solid rgba(var(--n3),.28);
  transition:all .4s var(--ease);
}
.v2-post:hover{border-color:rgb(var(--p1));transform:translateY(-4px);box-shadow:var(--shadow1);}
.v2-post-thumb{aspect-ratio:16/10;overflow:hidden;background:rgba(var(--n3),.14);}
.v2-post-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);}
.v2-post:hover .v2-post-thumb img{transform:scale(1.05);}
.v2-post-ph{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:34px;font-weight:600;color:rgba(var(--n4),.45);position:relative;overflow:hidden;
}
.v2-post-ph::after{
  content:"";position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(var(--ph-angle,135deg),transparent 0 10px,rgba(var(--n3),.16) 10px 11px);
}
.v2-post-body{padding:1.6rem;}
.v2-post-meta{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:.9rem;}
.v2-post-cat{
  font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:rgb(var(--p1));background:rgba(var(--p1),.10);padding:4px 12px;border-radius:100px;
}
.v2-post-date{font-size:14px;color:rgb(var(--n3));}
.v2-post h3{font-size:18px;font-weight:600;line-height:135%;margin-bottom:.5rem;}
.v2-post p{font-size:14px;line-height:155%;color:rgb(var(--n3));}
.v2-post-link{display:inline-flex;align-items:center;gap:.4rem;font-size:14px;font-weight:600;color:rgb(var(--p1));margin-top:1rem;}

/* ══ CONTENU RÉDACTIONNEL ══ */
.v2-prose{font-size:17px;line-height:175%;color:rgb(var(--n4));max-width:72ch;}
.v2-prose h2{font-size:28px;font-weight:600;line-height:130%;margin:2.2rem 0 .9rem;color:rgb(var(--n5));}
.v2-prose h3{font-size:22px;font-weight:600;line-height:130%;margin:1.7rem 0 .7rem;color:rgb(var(--n5));}
.v2-prose p{margin-bottom:1.2rem;}
.v2-prose ul,.v2-prose ol{margin:0 0 1.2rem 1.3rem;list-style:disc;}
.v2-prose ol{list-style:decimal;}
.v2-prose li{margin-bottom:.45rem;}
.v2-prose a{color:rgb(var(--p1));text-decoration:underline;}
.v2-prose blockquote{border-left:3px solid rgb(var(--p1));padding-left:1.4rem;font-style:italic;color:rgb(var(--n3));margin:1.5rem 0;}
.v2-prose img{border-radius:12px;margin:1.2rem 0;}
.v2-prose code{background:rgba(var(--n3),.18);padding:2px 8px;border-radius:5px;font-size:.9em;}
.v2-prose pre{background:rgba(var(--n3),.16);padding:1.4rem;border-radius:12px;overflow-x:auto;margin-bottom:1.2rem;}
.v2-prose pre code{background:none;padding:0;}
.v2-prose>table{display:block;overflow-x:auto;max-width:100%;}

/* ══ FICHE PROJET ══ */
.v2-case-title{font-size:clamp(32px,4.6vw,56px);line-height:120%;font-weight:600;letter-spacing:-.02em;max-width:18ch;}
.v2-case-lead{font-size:18px;line-height:165%;color:rgb(var(--n3));margin-top:1rem;max-width:62ch;}
.v2-facts{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;margin-top:2.2rem;padding-top:1.8rem;border-top:1px solid rgba(var(--n3),.28);}
.v2-facts dt{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgb(var(--n3));margin-bottom:.3rem;}
.v2-facts dd{font-size:16px;font-weight:500;max-width:34ch;}
.v2-case-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem;}

.v2-detail{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:start;}
.v2-block{margin-top:3.5rem;}
.v2-block:first-child{margin-top:0;}
.v2-h2{display:flex;align-items:center;gap:.6rem;font-size:28px;font-weight:600;line-height:130%;margin-bottom:1.2rem;}
.v2-h2 svg{color:rgb(var(--p1));flex-shrink:0;}

/* Galerie */
.v2-gal-main{
  display:block;width:100%;padding:0;position:relative;cursor:zoom-in;
  border:1px solid rgba(var(--n3),.3);border-radius:14px;overflow:hidden;
  aspect-ratio:16/10;background:rgba(var(--n3),.12);margin-bottom:.9rem;
}
.v2-gal-main img{width:100%;height:100%;object-fit:cover;}
.v2-zoom{
  position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:.4rem;
  font-size:14px;font-weight:500;color:#fff;background:rgba(20,20,20,.66);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.18);padding:7px 13px;border-radius:8px;
  opacity:0;transform:translateY(4px);transition:all .35s var(--ease);
}
.v2-gal-main:hover .v2-zoom,.v2-gal-main:focus-visible .v2-zoom{opacity:1;transform:none;}
.v2-thumbs{display:flex;gap:.6rem;flex-wrap:wrap;}
.v2-thumb-btn{
  width:88px;height:62px;padding:0;border-radius:9px;overflow:hidden;cursor:pointer;
  border:1px solid rgba(var(--n3),.3);background:rgba(var(--n3),.12);opacity:.6;transition:all .3s var(--ease);
}
.v2-thumb-btn:hover{opacity:1;}
.v2-thumb-btn.active{opacity:1;border-color:rgb(var(--p1));box-shadow:0 0 0 2px rgb(var(--p1));}
.v2-thumb-btn img{width:100%;height:100%;object-fit:cover;}
.v2-gal-cap{font-size:14px;color:rgb(var(--n3));margin-top:.9rem;font-style:italic;}

/* Projet sans visuel */
.v2-noimg{
  border:1px dashed rgba(var(--n3),.5);border-radius:14px;padding:3.5rem 2rem;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:1rem;position:relative;overflow:hidden;
  background:rgba(var(--n3),.08);
}
.v2-noimg::after{
  content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:repeating-linear-gradient(var(--ph-angle,135deg),transparent 0 11px,rgba(var(--n3),.16) 11px 12px);
}
.v2-noimg>*{position:relative;z-index:1;}
.v2-noimg-mono{font-size:52px;font-weight:600;color:rgba(var(--n4),.45);}
.v2-noimg p{font-size:16px;color:rgb(var(--n3));}

/* Vidéo */
.v2-video{width:100%;border-radius:14px;border:1px solid rgba(var(--n3),.3);background:#000;display:block;aspect-ratio:16/9;}
.v2-videobox{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:16/9;background:rgba(var(--n3),.14);border:1px solid rgba(var(--n3),.3);}
.v2-videobox img{width:100%;height:100%;object-fit:cover;filter:brightness(.6);}
.v2-videobox-ph{position:absolute;inset:0;background:rgba(var(--n3),.16);}
.v2-videobox iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.v2-videobox-play{
  position:absolute;inset:0;width:100%;height:100%;background:none;border:none;cursor:pointer;color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
}
.v2-videobox-ico{
  width:74px;height:74px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgb(var(--p1));color:#fff;box-shadow:0 10px 34px rgba(0,0,0,.3);transition:transform .35s var(--ease);
}
.v2-videobox-play:hover .v2-videobox-ico{transform:scale(1.08);}
.v2-videobox-lbl{font-size:18px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:.2rem;text-shadow:0 2px 12px rgba(0,0,0,.55);}
.v2-videobox-lbl em{font-style:normal;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;opacity:.8;}
.v2-videobox-note{font-size:14px;color:rgb(var(--n3));margin-top:.7rem;}
.v2-videobox-note a{color:rgb(var(--p1));text-decoration:underline;}

/* Colonne latérale de la fiche */
.v2-meta{
  background:rgb(var(--n2));border:1px solid rgba(var(--n3),.28);border-radius:14px;
  padding:1.8rem;position:sticky;top:2rem;box-shadow:var(--shadow2);
}
.v2-meta-item{margin-bottom:1.2rem;padding-bottom:1.2rem;border-bottom:1px solid rgba(var(--n3),.24);}
.v2-meta-item:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none;}
.v2-meta-l{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgb(var(--n3));margin-bottom:.35rem;}
.v2-meta-v{font-size:16px;font-weight:500;}
.v2-techs{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.4rem;}
.v2-techs span{font-size:14px;color:rgb(var(--n5));border:1px solid rgba(var(--n3),.4);padding:3px 12px;border-radius:100px;}
.v2-meta-assets{display:flex;flex-direction:column;gap:.4rem;}
.v2-meta-assets span{display:inline-flex;align-items:center;gap:.45rem;font-size:14px;color:rgb(var(--n3));}
.v2-meta-assets svg{color:rgb(var(--p1));width:15px;height:15px;}

/* Navigation entre projets */
.v2-casenav{display:grid;grid-template-columns:1fr;align-items:center;gap:1.5rem;margin-top:4.5rem;padding-top:2.5rem;border-top:1px solid rgba(var(--n3),.28);}
.v2-casenav-i{display:inline-flex;align-items:center;gap:.8rem;max-width:100%;transition:color .3s var(--ease);}
.v2-casenav-i.next{justify-self:start;text-align:left;flex-direction:row-reverse;}
.v2-casenav-i span{display:flex;flex-direction:column;min-width:0;font-size:16px;font-weight:600;}
.v2-casenav-i em{font-style:normal;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgb(var(--n3));margin-bottom:.15rem;}
.v2-casenav-i:hover{color:rgb(var(--p1));}
.v2-casenav-i svg{width:17px;height:17px;color:rgb(var(--n3));flex-shrink:0;}
.v2-casenav-i:hover svg{color:rgb(var(--p1));}
.v2-casenav-all{
  justify-self:start;display:inline-flex;align-items:center;gap:.45rem;font-size:14px;font-weight:500;color:rgb(var(--n4));
  border:1px solid rgba(var(--n3),.4);padding:9px 16px;border-radius:100px;transition:all .3s var(--ease);
}
.v2-casenav-all:hover{color:rgb(var(--p1));border-color:rgb(var(--p1));}
.v2-casenav-all svg{width:16px;height:16px;}

/* ══ LIGHTBOX ══ */
.v2-lb{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:rgba(10,10,12,.94);backdrop-filter:blur(6px);padding:clamp(1rem,4vw,3rem);}
.v2-lb img{max-width:100%;max-height:82vh;width:auto;height:auto;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.6);}
.v2-lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:1rem;max-width:100%;}
.v2-lb-cap{color:rgba(255,255,255,.75);font-size:14px;text-align:center;max-width:64ch;}
.v2-lb-count{color:rgba(255,255,255,.5);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-variant-numeric:tabular-nums;}
.v2-lb-btn,.v2-lb-close{
  position:absolute;width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;transition:all .3s var(--ease);
}
.v2-lb-btn:hover,.v2-lb-close:hover{background:rgba(255,255,255,.2);}
.v2-lb-btn{top:50%;transform:translateY(-50%);}
.v2-lb-prev{left:clamp(.6rem,3vw,2.5rem);}
.v2-lb-next{right:clamp(.6rem,3vw,2.5rem);}
.v2-lb-close{top:clamp(.8rem,3vw,2rem);right:clamp(.8rem,3vw,2rem);width:44px;height:44px;}
body.lb-open{overflow:hidden;}

/* ══ CONTACT ══ */
.v2-contact{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:start;margin-top:3rem;}
.v2-cinfo{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.8rem;}
.v2-cico{
  width:50px;height:50px;border-radius:14px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(var(--p1),.12);color:rgb(var(--p1));
}
.v2-cico svg{width:21px;height:21px;}
.v2-clbl{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgb(var(--n3));}
.v2-cval{font-size:16px;font-weight:500;margin-top:.15rem;}
.v2-form{display:flex;flex-direction:column;gap:1.1rem;}
.v2-fg{display:flex;flex-direction:column;gap:.45rem;}
.v2-fg label{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgb(var(--n3));}
.v2-fg input,.v2-fg textarea{
  background:rgb(var(--n2));border:1px solid rgba(var(--n3),.35);border-radius:10px;
  padding:13px 17px;color:rgb(var(--n5));font-family:var(--ff);font-size:16px;
  outline:none;transition:all .3s var(--ease);width:100%;
}
.v2-fg input:focus,.v2-fg textarea:focus{border-color:rgb(var(--p1));box-shadow:0 0 0 3px rgba(var(--p1),.18);}
.v2-fg textarea{min-height:140px;resize:vertical;}
.v2-frow{display:grid;grid-template-columns:1fr;gap:1.1rem;}
.v2-msg{padding:13px 17px;border-radius:10px;font-size:15px;display:none;}
.v2-msg.success{display:block;background:rgba(34,197,94,.10);border:1px solid rgba(34,197,94,.3);color:#16a34a;}
.v2-msg.error{display:block;background:rgba(239,68,68,.10);border:1px solid rgba(239,68,68,.3);color:#dc2626;}
:root[data-theme="dark"] .v2-msg.success{color:#4ade80;}
:root[data-theme="dark"] .v2-msg.error{color:#f87171;}

/* ══ APPEL À L'ACTION & PIED DE PAGE ══ */
.v2-cta-band{
  margin-top:4.5rem;padding-top:3rem;border-top:1px solid rgba(var(--n3),.28);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
}
.v2-cta-band p{font-size:24px;font-weight:600;line-height:130%;}
.v2-foot{
  padding:2.5rem var(--gutter);border-top:1px solid rgba(var(--n3),.28);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
}
.v2-foot-c{font-size:14px;color:rgb(var(--n3));}
.v2-foot-s{display:flex;gap:.6rem;}
.v2-foot-s a{
  width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(var(--n3),.16);border:1px solid rgba(var(--n3),.28);color:rgb(var(--n4));transition:all .3s var(--ease);
}
.v2-foot-s a:hover{background:rgb(var(--p1));border-color:rgb(var(--p1));color:#fff;}
.v2-foot-s svg{width:18px;height:18px;}
.v2-empty{text-align:center;padding:4.5rem 1rem;color:rgb(var(--n3));display:flex;flex-direction:column;align-items:center;gap:.7rem;}
.v2-empty h2{font-size:22px;font-weight:600;color:rgb(var(--n5));}
.v2-more{text-align:center;margin-top:3.5rem;}
.v2-search{
  display:flex;align-items:center;gap:.6rem;border:1px solid rgba(var(--n3),.4);border-radius:100px;
  background:rgb(var(--n2));padding:0 1.1rem;min-width:250px;color:rgb(var(--n3));transition:all .3s var(--ease);
}
.v2-search:focus-within{border-color:rgb(var(--p1));box-shadow:0 0 0 3px rgba(var(--p1),.16);}
.v2-search input{border:none;background:none;outline:none;color:rgb(var(--n5));font-family:var(--ff);font-size:15px;padding:10px 0;width:100%;}
.v2-filterbar{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin:3rem 0 1rem;}
.v2-filterbar .v2-filters{margin:0;}
.js-only{display:none;}
html.has-js .js-only{display:flex;}

/* ══ RESPONSIVE ══ */
@media(max-width:991px){
  .v2-meta{position:static;}
  .v2-case-title{max-width:100%;}
}
@media(max-width:720px){
  .v2-facts{gap:1.2rem;}
  .v2-cta-band{flex-direction:column;align-items:flex-start;}
  .v2-foot{flex-direction:column;text-align:center;}
  .v2-stats{gap:1.6rem 2.4rem;}
  .v2-stat-n{font-size:32px;}
  .v2-thumb-btn{width:70px;height:50px;}
}

/* ══ DIVERS ══ */
.v2-skip{
  position:absolute;left:1rem;top:-3.5rem;z-index:200;
  background:rgb(var(--p1));color:#fff;font-weight:600;font-size:14px;
  padding:10px 18px;border-radius:8px;transition:top .2s ease;
}
.v2-skip:focus{top:1rem;}
.v2-admin-float{
  position:fixed;bottom:1.5rem;right:1.5rem;z-index:90;
  display:inline-flex;align-items:center;gap:.45rem;
  background:rgb(var(--p1));color:#fff;font-size:14px;font-weight:600;
  padding:10px 18px;border-radius:100px;box-shadow:var(--shadow1);
  transition:all .3s var(--ease);
}
.v2-admin-float:hover{filter:brightness(1.1);transform:translateY(-2px);color:#fff;}
.v2-admin-float svg{width:16px;height:16px;}
@media(max-width:720px){.v2-admin-float{display:none;}}

/* ══════════════════════════════════════════════════════════════════
   BANDEAU D'ACCUEIL — mise en page en deux colonnes,
   mot animé et photo sur plaque oscillante.
   ══════════════════════════════════════════════════════════════════ */
.v2-banner{
  padding:3.25rem var(--gutter) 4rem;
  overflow:hidden;border-bottom:1px solid rgba(var(--n3),.28);
}
/* Grille plutôt que flex-wrap : « Développeuse » est un mot insécable
   d'environ 530 px au corps 80. En flex-wrap, le portrait basculait sous le
   texte dès que la zone de contenu passait sous ~920 px — ce qui arrive sur
   un écran 1366, ou sur 1920 à 125 % de mise à l'échelle Windows.
   Une grille ne renvoie jamais à la ligne : les colonnes se resserrent. */
.v2-banner-row{
  display:grid;grid-template-columns:1fr;justify-items:start;
  align-items:center;gap:2.5rem 3.5rem;
}
.v2-banner-txt{min-width:0;}
.v2-hi{font-size:clamp(18px,2.2vw,24px);font-weight:400;color:rgb(var(--n5));letter-spacing:.01em;}

/* Mot qui s'écrit puis s'efface */
.v2-typed{
  font-size:clamp(38px,5vw,80px);line-height:118%;font-weight:600;
  color:rgb(var(--p1));letter-spacing:-.02em;
  margin:.4rem 0 1rem;min-height:1.2em;
}
.v2-caret{
  display:inline-block;width:3px;height:.82em;vertical-align:-.08em;
  background:rgb(var(--p1));margin-left:4px;animation:v2blink 1s steps(1) infinite;
}
@keyframes v2blink{0%,49%{opacity:1;}50%,100%{opacity:0;}}

.v2-banner-desc{font-size:18px;line-height:160%;color:rgb(var(--n5));max-width:56ch;}
.v2-banner-desc a{color:rgb(var(--p1));font-weight:500;}
.v2-banner-desc a:hover{text-decoration:underline;}
.v2-banner-btns{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.2rem;}

/* Bouton sombre plein, second niveau du modèle */
.v2-btn-dark{background:rgb(var(--n5));color:rgb(var(--n1));}
.v2-btn-dark:hover{background:rgb(var(--p1));color:#fff;transform:translateY(-2px);}

/* ── Photo : plaque bleue qui oscille derrière le portrait ── */
.v2-portrait{position:relative;flex:0 0 auto;}   /* taille : voir couche adaptative */
.v2-portrait-bg{
  position:absolute;inset:0;background:rgb(var(--p1));
  animation:v2rotateBg 10s infinite linear;
}
@keyframes v2rotateBg{
  0%,100%{transform:rotate(11.163deg);}
  50%    {transform:rotate(-11.163deg);}
}
.v2-portrait-frame{
  position:absolute;inset:0;background:rgb(var(--n1));overflow:hidden;
}
.v2-portrait-frame img{width:100%;height:100%;object-fit:cover;object-position:top center;}
/* Sans photo : monogramme sur aplat, la plaque tourne quand même */
.v2-portrait-ph{
  width:100%;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.6rem;text-align:center;padding:1.5rem;
  background:rgba(var(--p1),.08);
}
.v2-portrait-ph b{font-size:64px;font-weight:600;color:rgba(var(--p1),.55);line-height:1;}
.v2-portrait-ph span{font-size:14px;color:rgb(var(--n3));max-width:22ch;line-height:1.5;}

/* ── Compteurs ── */
.v2-counters{
  display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem 2.5rem;
  margin-top:4rem;
}
.v2-counter{display:flex;align-items:center;gap:1rem;}
.v2-counter-n{
  font-size:clamp(40px,5vw,72px);line-height:120%;font-weight:600;
  color:rgb(var(--p1));font-variant-numeric:tabular-nums;
}
.v2-counter-line{width:1px;height:44px;background:rgba(var(--n3),.45);}
.v2-counter-l{font-size:16px;color:rgb(var(--n5));max-width:12ch;line-height:1.35;}

@media(max-width:520px){
  .v2-counter-n{font-size:36px;}
  .v2-counters{gap:1.2rem 1.8rem;margin-top:2.5rem;}
}
@media (prefers-reduced-motion:reduce){
  .v2-portrait-bg{animation:none;transform:rotate(6deg);}
  .v2-caret{animation:none;}
}

/* ══ PAGINATION ══ */
.v2-pager{
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  flex-wrap:wrap;margin-top:3.5rem;
}
.v2-pager-num,.v2-pager-arrow{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;height:42px;padding:0 .7rem;border-radius:10px;
  font-family:var(--ff);font-size:15px;font-weight:500;
  color:rgb(var(--n4));border:1px solid rgba(var(--n3),.35);
  transition:all .3s var(--ease);font-variant-numeric:tabular-nums;
}
.v2-pager-num:hover,.v2-pager-arrow:hover{color:rgb(var(--p1));border-color:rgb(var(--p1));}
.v2-pager-num.is-current{
  background:rgb(var(--p1));color:#fff;border-color:rgb(var(--p1));font-weight:600;
}
.v2-pager-arrow.is-off{opacity:.35;pointer-events:none;}
.v2-pager-arrow svg{width:16px;height:16px;}
.v2-pager-gap{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:26px;height:42px;color:rgb(var(--n3));
}
.v2-count a{color:rgb(var(--p1));text-decoration:underline;}

@media(max-width:520px){
  .v2-pager-num,.v2-pager-arrow{min-width:38px;height:38px;font-size:14px;padding:0 .5rem;}
}

/* ══════════════════════════════════════════════════════════════════
   MISE EN PAGE ADAPTATIVE — pilotée par la LARGEUR DU CONTENU

   Le rail (74 px) et la colonne de profil (300 px) retirent 374 px de
   largeur utile au-dessus de 991 px, et zéro en dessous. Des règles
   fondées sur la largeur de FENÊTRE se trompaient donc de 374 px dans
   toute la plage 992–1300 px : les grilles y restaient à 3 colonnes
   dans un espace qui n'en tenait que deux.

   On mesure désormais le conteneur réel. Les grilles sont à une colonne
   par défaut ; les colonnes s'ajoutent quand la place existe vraiment.
   ══════════════════════════════════════════════════════════════════ */

/* Le conteneur est posé sur les sections, et non sur .v2-main : la largeur
   interrogée est celle du contenu, gouttières exclues. Les seuils ci-dessous
   correspondent donc exactement à la largeur disponible pour les grilles. */
.v2-section,
.v2-banner,
.v2-pagehead{
  container-type: inline-size;
  container-name: content;
}

/* ── Bandeau d'accueil ── */
@container content (min-width: 600px){
  .v2-banner-row{grid-template-columns:minmax(0,1fr) auto;justify-items:stretch;}
  .v2-portrait{order:0;}
}

/* ── Grille projets ── */
@container content (min-width: 560px){
  .v2-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ── Services & blog ── */
@container content (min-width: 480px){
  .v2-svc-grid,.v2-blog-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@container content (min-width: 820px){
  .v2-svc-grid,.v2-blog-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}

/* ── En-tête de page : titre + chapô ── */
@container content (min-width: 700px){
  .v2-headgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem 4rem;align-items:end;}
}

/* ── Fiche projet : corps + colonne latérale ── */
@container content (min-width: 720px){
  .v2-detail{grid-template-columns:minmax(0,2fr) minmax(0,17rem);gap:4rem;}
}

/* ── Parcours ── */
@container content (min-width: 700px){
  .v2-tl-grid{grid-template-columns:1fr 1fr;gap:4rem;}
}

/* ── Contact ── */
@container content (min-width: 660px){
  .v2-contact{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:4rem;}
}
@container content (min-width: 420px){
  .v2-frow{grid-template-columns:1fr 1fr;}
}

/* ── Navigation entre projets ── */
@container content (min-width: 560px){
  .v2-casenav{grid-template-columns:1fr auto 1fr;}
  .v2-casenav-i.next{justify-self:end;text-align:right;flex-direction:row;}
  .v2-casenav-all{justify-self:center;}
}

/* ── Portrait : proportionnel au conteneur, jamais figé ── */
.v2-portrait{
  width:clamp(190px, 30cqi, 325px);
  height:auto;aspect-ratio:4/5;
}

/* ── Mot animé : calé sur la colonne de texte, pas sur la fenêtre ──
   « Développeuse » est insécable ; sans cette mesure il débordait. */
.v2-typed{font-size:clamp(34px, 8.5cqi, 80px);}
.v2-typed-word{overflow-wrap:anywhere;}

/* ── Repli pour les navigateurs sans requêtes de conteneur ──
   (antérieurs à Chrome 105 / Safari 16 / Firefox 110, soit avant 2023) ── */
@supports not (container-type: inline-size){
  @media(min-width:1400px){
    .v2-banner-row{grid-template-columns:minmax(0,1fr) auto;}
    .v2-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .v2-svc-grid,.v2-blog-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
    .v2-headgrid{grid-template-columns:1fr 1fr;align-items:end;}
    .v2-detail{grid-template-columns:2fr 1fr;gap:4rem;}
    .v2-tl-grid{grid-template-columns:1fr 1fr;gap:4rem;}
    .v2-contact{grid-template-columns:1fr 1.6fr;gap:4rem;}
    .v2-casenav{grid-template-columns:1fr auto 1fr;}
  }
  @media(max-width:991px) and (min-width:640px){
    .v2-banner-row{grid-template-columns:minmax(0,1fr) auto;}
    .v2-grid,.v2-svc-grid,.v2-blog-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .v2-frow{grid-template-columns:1fr 1fr;}
  }
  .v2-portrait{width:260px;height:325px;}
  .v2-typed{font-size:clamp(34px,5vw,72px);}
}