/* ============================================================
   DIGICRAFT LABS — Portfolio Koffa Jean AGOUDAVI
   Direction artistique : ivoire / blanc / or  (blueprint §1)
   Premium · minimaliste · technologique mais humain
   ============================================================ */

/* ---------- Tokens — palette validée v2 (blueprint v0.2 §2) ---------- */
:root{
  --bg:#F2F1F0;            /* fond principal (ivoire) */
  --card:#FFFFFF;          /* surfaces */
  --bg-2:#ECE9E5;          /* bandes alternatives (dérivée du fond) */
  --gold:#7048D8;          /* accent or/ocre — décor, remplissages */
  --gold-2:#4B2A9F;        /* ocre lisible — textes et liens (AA) */
  --gold-soft:rgba(112,72,216,.10);
  --gold-line:rgba(112,72,216,.35);
  --ink:#0D0D0D;           /* textes principaux, boutons, footer */
  --ink-2:#635B53;         /* textes secondaires (AA sur --bg) */
  --taupe:#A68F81;         /* bordures et séparateurs (décor) */
  --line:#E1DAD4;
  --line-strong:#CBC0B8;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono","Courier New",monospace;
  /* ---------- Échelle typographique (design system, 2026-10-28) ----------
     h1 display/hero · h2 sections · h3 titres de cartes · lead chapeaux
     body corps/descriptions · sm détails/boutons compacts · btn boutons
     xs micro-labels. Plancher accessibilité : rien sous 0.75rem. */
  --fs-h1: clamp(2.75rem, 6.7vw, 5rem);
  --fs-h2: clamp(1.75rem, 3.5vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.5rem);
  --fs-lead: 1.125rem;
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-btn: 0.9375rem;
  --fs-xs: 0.75rem;
  --radius:16px;
  --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(13,13,13,.05);
  --shadow-md:0 14px 34px -14px rgba(13,13,13,.16);
  --ease:cubic-bezier(.22,.61,.36,1);
  --header-h:72px;         /* ancien en-tête — pages pas encore migrées */
  --dock-w:88px;           /* Side Dock Bar — largeur desktop */
  --dock-h:64px;           /* Side Dock Bar — hauteur barre mobile */
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  font-size:var(--fs-body);line-height:1.65;color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
::selection{background:rgba(112,72,216,.22)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

/* ---------- Typographie ---------- */
h1,h2,h3{font-family:var(--font-display);font-weight:500;line-height:1.12;letter-spacing:-.015em;color:var(--ink)}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
p{color:var(--ink-2)}
.lead{font-size:var(--fs-lead);color:var(--ink-2)}
strong{color:var(--ink);font-weight:600}

.eyebrow::before{content:"";width:26px;height:1px;background:var(--gold)}

/* ---------- Layout ---------- */

.section-head .eyebrow{margin-bottom:.9rem}
.section-head h2{margin-bottom:.9rem}
.section-head p{font-size:var(--fs-lead)}
/* V1.1 — phrase de transition Hero → Expertise */
.section-intro{
  font-family:var(--font-display);font-style:italic;
  font-size:var(--fs-lead);line-height:1.55;
  color:var(--gold-2);max-width:58ch;margin-bottom:1.1rem;
}
.section-head.center{max-width:680px;margin-inline:auto;text-align:center}
.section-head.center .eyebrow::before{display:none}
.section-head.center .eyebrow{justify-content:center}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.85rem 1.5rem;border-radius:999px;
  font-size:var(--fs-btn);font-weight:600;line-height:1;
  border:1px solid transparent;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
  white-space:nowrap;
}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
/* Bouton principal : noir (texte, boutons et footer = #0D0D0D), survol or */
.btn-gold{background:var(--ink);color:#F2F1F0;box-shadow:0 8px 20px -12px rgba(13,13,13,.5)}
.btn-gold:hover{background:var(--gold);color:#171522;transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(112,72,216,.55)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-2);background:var(--gold-soft);transform:translateY(-2px)}
.btn-sm{padding:.6rem 1.1rem;font-size:var(--fs-sm)}
.btn-xs{padding:.5rem 1rem;font-size:var(--fs-sm)}
.btn-block{width:100%}

/* Lien flèche */
.link-arrow{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:var(--fs-btn);font-weight:600;color:var(--gold-2);
  transition:gap .25s var(--ease),color .25s var(--ease);
}
.link-arrow svg{transition:transform .25s var(--ease)}
.link-arrow:hover{color:var(--gold)}
.link-arrow:hover svg{transform:translateX(4px)}

/* ---------- Pills / chips / badges ---------- */
.chip{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.28rem .7rem;border-radius:999px;
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.04em;
  background:var(--bg-2);color:var(--ink-2);border:1px solid var(--line);
  white-space:nowrap;
}
.chip-gold{background:var(--gold-soft);color:var(--gold-2);border-color:var(--gold-line)}

.tag{
  display:inline-flex;align-items:center;
  padding:.22rem .6rem;border-radius:6px;
  font-size:var(--fs-xs);font-weight:500;color:var(--ink-2);
  background:var(--card);border:1px solid var(--line);
}

/* ---------- Cartes ---------- */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);
}
.card-hover:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--line-strong)}
.brand{display:inline-flex;align-items:center;gap:.7rem;font-weight:700;font-size:var(--fs-body);letter-spacing:.01em;color:var(--ink)}
.brand .brand-name small{display:block;font-size:var(--fs-xs);font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-2)}

/* ---------- Skip link ---------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;padding:.7rem 1.2rem;border-radius:0 0 8px 0;font-weight:600}
.skip-link:focus{left:0}

/* ---------- Hero ---------- */

.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(620px 420px at 88% -8%, rgba(112,72,216,.08), transparent 62%),
    radial-gradient(480px 380px at -6% 110%, rgba(112,72,216,.05), transparent 60%);
}

.hero .eyebrow{margin-bottom:1.4rem}
.hero h1{max-width:15ch}
.hero h1 em{font-style:italic;color:var(--gold)}

/* ---------- Bandeau crédibilité ---------- */

.band-track{display:flex;justify-content:center;flex-wrap:wrap;gap:.6rem 1.6rem}
.band-track span{font-size:var(--fs-xs);font-weight:700;letter-spacing:.18em;color:var(--ink-2);display:inline-flex;align-items:center;gap:1.6rem}
.band-track span::after{content:"•";color:var(--gold);font-size:1rem}
.band-track span:last-child::after{display:none}
@media (max-width:719px){
  .band-track{flex-wrap:nowrap;width:max-content;animation:marquee 26s linear infinite}
  .band:hover .band-track{animation-play-state:paused}
  @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
}

/* ---------- Filtres ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:2.2rem}
.f-btn{
  padding:.55rem 1.15rem;border-radius:999px;border:1px solid var(--line);
  font-size:var(--fs-sm);font-weight:600;color:var(--ink-2);background:var(--card);
  transition:all .25s var(--ease);
}
.f-btn:hover{border-color:var(--gold);color:var(--gold-2)}
.f-btn.is-active{background:var(--ink);border-color:var(--ink);color:#FAF9F6}
.f-btn.is-active:hover{color:#FAF9F6}

/* ---------- Carousel projets ---------- */
.carousel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-bottom:2rem}
.carousel-head .section-head{margin-bottom:0}
.carousel-arrows{display:none;gap:.6rem}
@media (min-width:1024px){.carousel-arrows{display:flex}}
.c-arrow{
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line-strong);
  display:grid;place-items:center;color:var(--ink);background:var(--card);
  transition:all .25s var(--ease);
}
.c-arrow:hover{border-color:var(--gold);color:var(--gold-2);transform:translateY(-2px)}
.c-arrow svg{width:18px;height:18px}
.c-arrow:disabled{opacity:.35;cursor:default;transform:none;border-color:var(--line)}

.carousel{
  display:flex;gap:1.25rem;overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:6px 6px 26px;margin:-6px;
  scrollbar-width:none;
}
.carousel::-webkit-scrollbar{display:none}
.carousel .p-card{flex:0 0 84%;scroll-snap-align:start}
.carousel .r-card{flex:0 0 84%;scroll-snap-align:start}
.carousel .a-card{flex:0 0 84%;scroll-snap-align:start}
.carousel .skel{flex:0 0 84%;scroll-snap-align:start}
@media (min-width:720px){
  .carousel .p-card{flex-basis:46%}
  .carousel .r-card{flex-basis:46%}
  .carousel .a-card{flex-basis:46%}
  .carousel .skel{flex-basis:46%}
}
@media (min-width:1100px){
  .carousel .p-card{flex-basis:calc((100% - 2.5rem)/3)}
  .carousel .r-card{flex-basis:calc((100% - 2.5rem)/3)}
  .carousel .a-card{flex-basis:calc((100% - 2.5rem)/3)}
  .carousel .skel{flex-basis:calc((100% - 2.5rem)/3)}
}

/* ---------- Cartes projet ---------- */
.p-card{display:flex;flex-direction:column;overflow:hidden}

.p-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.p-card:hover .p-media img{transform:scale(1.045)}
.p-media .chip{position:absolute;top:.9rem;left:.9rem;z-index:2;background:var(--card)}

.p-title a{transition:color .25s var(--ease)}

.p-foot{display:flex;align-items:center;justify-content:space-between;gap:.9rem;flex-wrap:wrap;padding-top:.6rem;margin-top:auto}
.p-foot .btn-xs{white-space:nowrap}

/* ---------- Cartes ressources ---------- */

.r-media{position:relative;aspect-ratio:4/3;background:var(--bg-2);border-bottom:1px solid var(--line);overflow:hidden}
.r-media img{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:cover}

.r-cover{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem;
  background-color:var(--cov-bg,#4B2A9F);
  background-image:linear-gradient(150deg,rgba(13,13,13,0) 40%,rgba(13,13,13,.32) 100%);
  color:rgba(255,253,248,.92);
}
.r-cover-brand{font-size:var(--fs-xs);font-weight:700;letter-spacing:.34em;text-transform:uppercase;opacity:.75}
.r-cover-letters{font-family:var(--font-display);font-size:3.2rem;line-height:1;font-weight:600}
.r-cover-line{width:44px;height:2px;background:rgba(255,253,248,.45);border-radius:2px}
.r-body{padding:1.35rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.r-body h3{letter-spacing:.01em}
.r-desc{flex:1}
.r-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.5rem}
.r-price{font-family:var(--font-display);font-size:1.45rem;color:var(--ink)}
.r-price small{font-family:var(--font-body);font-size:var(--fs-xs);color:var(--ink-2);font-weight:500}

/* ---------- Cartes articles ---------- */

.a-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.a-meta{font-size:var(--fs-sm);font-weight:600;color:var(--ink-2);letter-spacing:.03em}
.a-card h3{line-height:1.3}
.a-card h3 a{transition:color .25s var(--ease)}
.a-card h3 a:hover{color:var(--gold-2)}
.a-card p{flex:1}
.a-foot{padding-top:.35rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* ---------- Consentement cookies (bannière + panneaux) ---------- */
.dl-banner{
  position:fixed;left:50%;bottom:1.1rem;transform:translateX(-50%) translateY(14px);
  z-index:9990;width:min(560px,calc(100% - 1.6rem));
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 24px 60px -24px rgba(13,13,13,.35);
  opacity:0;pointer-events:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.dl-banner.is-visible{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.dl-banner-inner{padding:1.35rem 1.4rem;display:flex;flex-direction:column;gap:1.1rem}
.dl-banner-title{display:block;font-family:var(--font-display);font-size:var(--fs-lead);color:var(--ink);margin-bottom:.3rem}
.dl-banner-text p{font-size:var(--fs-sm);color:var(--ink-2);line-height:1.55;margin:0}
.dl-banner-actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.dl-banner-actions .btn{flex:1 1 auto;min-width:110px;min-height:40px;padding-top:.55rem;padding-bottom:.55rem}
.dl-text-btn{
  background:none;border:none;padding:.5rem .3rem;margin:0;
  font:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--gold-2);
  cursor:pointer;text-decoration:underline;text-underline-offset:2px;
  transition:color .25s var(--ease);
  min-height:38px;display:inline-flex;align-items:center;
}
.dl-text-btn:hover{color:var(--gold)}

/* Panneaux modaux */
.dl-modal{position:fixed;inset:0;z-index:9995;display:flex;align-items:center;justify-content:center;padding:1rem}
.dl-modal[hidden]{display:none}
.dl-backdrop{position:absolute;inset:0;background:rgba(13,13,13,.45);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.dl-box{
  position:relative;width:min(480px,100%);max-height:calc(100vh - 2rem);overflow:auto;
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 30px 70px -24px rgba(13,13,13,.4);padding:1.6rem 1.7rem;
}
.dl-box h3{font-family:var(--font-display);font-size:var(--fs-h3);color:var(--ink);margin-bottom:1.1rem}
.dl-cat{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  border:1px solid var(--line);border-radius:14px;padding:1rem 1.1rem;margin-bottom:.8rem;
  background:var(--bg);
}
.dl-cat-txt strong{display:block;font-size:var(--fs-body);color:var(--ink);margin-bottom:.2rem}
.dl-cat-txt p{font-size:var(--fs-sm);color:var(--ink-2);line-height:1.5;margin:0}
.dl-pill{
  flex:none;font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:var(--gold-soft);border:1px solid var(--gold-line);color:var(--gold-2);
  padding:.3rem .7rem;border-radius:999px;margin-top:.15rem;
}
.dl-switch{position:relative;display:inline-block;width:46px;height:26px;flex:none;margin-top:.2rem}
.dl-switch input{position:absolute;opacity:0;width:0;height:0}
.dl-slider{
  position:absolute;inset:0;border-radius:999px;background:var(--line-strong);
  transition:background .25s var(--ease);cursor:pointer;
}
.dl-slider::before{
  content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#FFF;box-shadow:0 2px 6px rgba(13,13,13,.25);transition:transform .25s var(--ease);
}
.dl-switch input:checked + .dl-slider{background:var(--gold-2)}
.dl-switch input:checked + .dl-slider::before{transform:translateX(20px)}
.dl-switch input:focus-visible + .dl-slider{outline:2px solid var(--gold);outline-offset:2px}
.dl-modal-actions{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1.1rem}
.dl-info-body p{font-size:var(--fs-sm);color:var(--ink-2);line-height:1.6}
.dl-info-body ul{margin:.6rem 0 .9rem;padding-left:1.1rem;display:grid;gap:.35rem}
.dl-info-body li{font-size:var(--fs-sm);color:var(--ink-2);line-height:1.5}

/* Bouton « Gérer mes cookies » du footer (même rendu qu'un lien) */
.dl-manage-btn{
  background:none;border:none;padding:0;margin:0;font:inherit;font-size:var(--fs-sm);
  color:var(--ink-2);cursor:pointer;text-align:left;
  transition:color .25s var(--ease);
}
.dl-manage-btn:hover{color:var(--gold-2)}

/* ---------- Grilles ---------- */
.grid-2{display:grid;gap:1.25rem;grid-template-columns:1fr}
.grid-3{display:grid;gap:1.25rem;grid-template-columns:1fr}

@media (min-width:720px){.grid-2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.grid-3{grid-template-columns:repeat(3,1fr)}}

/* ---------- À propos (accueil) ---------- */
.about-grid{display:grid;gap:2.5rem;align-items:center;grid-template-columns:1fr}
@media (min-width:1024px){.about-grid{grid-template-columns:380px 1fr;gap:4rem}}

.about-photo img{width:100%;height:100%;object-fit:cover}
.about-photo::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;background:linear-gradient(180deg,transparent,rgba(13,13,13,.55))}

.about-body .eyebrow{margin-bottom:1rem}
.about-body h2{margin-bottom:1.2rem;max-width:18ch}
.about-body p{margin-bottom:1rem;max-width:60ch}
.about-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.8rem}
.about-facts{display:grid;gap:.8rem;margin-top:2rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

.fact b{display:block;font-size:var(--fs-body);color:var(--ink);margin-bottom:.15rem}
.fact span{font-size:var(--fs-sm);color:var(--ink-2)}

/* ---------- CTA final ---------- */
.cta-box{
  position:relative;text-align:center;
  background:var(--bg-2);border:1px solid var(--line);
  border-radius:26px;padding:clamp(2.8rem,6vw,4.5rem) 1.5rem;
  overflow:hidden;
}
.cta-box::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(480px 300px at 12% 0%, rgba(112,72,216,.09), transparent 60%),
    radial-gradient(480px 300px at 90% 100%, rgba(112,72,216,.09), transparent 60%);
}
.cta-box > *{position:relative}
.cta-box .star{width:34px;height:34px;margin:0 auto 1.4rem;color:var(--gold)}
.cta-box h2{max-width:22ch;margin:0 auto 1rem}
.cta-box p{max-width:52ch;margin:0 auto 2rem;font-size:var(--fs-lead)}
.cta-actions{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center}

/* ---------- Footer ---------- */

.footer-grid{display:grid;gap:2.5rem;grid-template-columns:1fr;padding-bottom:3rem}
@media (min-width:720px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr}}
.footer-brand .brand{margin-bottom:1rem}
.footer-brand p{font-size:var(--fs-sm);max-width:34ch}
.footer-col h4{font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2);margin-bottom:1.1rem}
.footer-col ul{display:flex;flex-direction:column;gap:.6rem}
.footer-col a{font-size:var(--fs-sm);color:var(--ink-2);transition:color .25s var(--ease),padding-left .25s var(--ease)}
.footer-col a:hover{color:var(--gold-2);padding-left:4px}
.footer-bottom{
  border-top:1px solid var(--line);padding-top:1.6rem;
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  font-size:var(--fs-sm);color:var(--ink-2);
}
.footer-bottom .fb-links{display:flex;gap:1.4rem}
.footer-bottom a:hover{color:var(--gold-2)}

/* ---------- Pages internes : héros ---------- */
.page-hero{padding:calc(var(--header-h) + clamp(2.6rem,6vw,4.5rem)) 0 clamp(2.2rem,5vw,3.5rem)}
.page-hero .eyebrow{margin-bottom:1.1rem}
.page-hero h1{max-width:20ch}
.page-hero p.lead{margin-top:1.2rem;max-width:62ch}
.page-hero .page-extra{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
/* Bouton d'action directe sur la page étude de cas (type_lien → url_destination) */

/* ---------- États dynamiques ---------- */
.dyn-state{grid-column:1/-1;text-align:center;padding:3.5rem 1.5rem;color:var(--ink-2)}
.dyn-state .ds-ico{width:52px;height:52px;margin:0 auto 1.1rem;border-radius:14px;background:var(--bg-2);border:1px solid var(--line);display:grid;place-items:center;color:var(--gold-2)}
.dyn-state .ds-ico svg{width:24px;height:24px}
.dyn-state h3{font-size:var(--fs-h3);margin-bottom:.4rem}
.dyn-state p{font-size:var(--fs-body);margin-bottom:1.2rem}
.dyn-state .btn{padding:.6rem 1.2rem;font-size:var(--fs-sm)}

/* Skeleton */
.skel{position:relative;overflow:hidden;background:#E9E5E1;border-radius:var(--radius);min-height:280px}
.skel::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);
  animation:shimmer 1.5s infinite;
}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* ---------- Formulaires ---------- */
.form-grid{display:grid;gap:1.1rem;grid-template-columns:1fr}
@media (min-width:720px){.form-grid{grid-template-columns:1fr 1fr}.form-grid .full{grid-column:1/-1}}
.field label{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--ink);margin-bottom:.45rem}
.field input,.field textarea,.field select{
  width:100%;padding:.85rem 1rem;border-radius:12px;
  border:1px solid var(--line-strong);background:var(--card);
  font:inherit;font-size:var(--fs-body);color:var(--ink);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
.field textarea{min-height:150px;resize:vertical}
.hp-field{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.form-note{font-size:var(--fs-sm);color:var(--ink-2);display:flex;align-items:center;gap:.5rem}
.form-note svg{width:14px;height:14px;color:var(--gold);flex:none}
.form-ok{
  display:none;align-items:flex-start;gap:.8rem;
  background:var(--gold-soft);border:1px solid var(--gold-line);
  border-radius:14px;padding:1.1rem 1.3rem;margin-bottom:1.4rem;
}
.form-ok.is-visible{display:flex}
.form-ok svg{width:22px;height:22px;color:var(--gold-2);flex:none}
.form-ok b{color:var(--ink);display:block;margin-bottom:.15rem}
.form-ok p{font-size:var(--fs-sm)}
.form-err{background:#FBF0EE;border-color:#EBD3CE}
.form-err svg{color:#A94438}
.form-err p a{color:var(--gold-2);font-weight:600;text-decoration:underline}
.form-err p a:hover{color:var(--gold)}

/* Coordonnées */
.coords-grid{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:720px){.coords-grid{grid-template-columns:1fr 1fr}}
.coord-card{padding:1.3rem 1.4rem;display:flex;gap:1rem;align-items:flex-start;border-radius:14px}
.coord-ico{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:11px;background:var(--gold-soft);border:1px solid var(--gold-line);color:var(--gold-2)}
.coord-ico svg{width:20px;height:20px}
.coord-card b{display:block;font-size:var(--fs-body);margin-bottom:.15rem}
.coord-card span{font-size:var(--fs-sm);color:var(--ink-2);word-break:break-all}
.coord-card a{font-size:var(--fs-sm);font-weight:600;color:var(--gold-2)}
.coord-card a:hover{color:var(--gold)}

/* ---------- À propos : page — layout v2 (refonte 2026-10-29) ---------- */
/* Hero 2 colonnes : texte à gauche, photo à droite (l'accueil garde
   .about-grid de base, photo à gauche — seul .ap-hero-grid inverse). */
.ap-hero-grid{gap:2.5rem}
@media (min-width:1024px){.ap-hero-grid{grid-template-columns:1fr 380px;gap:4rem}}
@media (max-width:1023px){.ap-hero-grid .about-photo{max-width:340px;width:100%;margin-inline:auto}}
.ap-hero-body .lead{margin-top:1.2rem;max-width:56ch}
#methode{scroll-margin-top:2rem}

/* Bandeau indicateurs clés — 4 métriques, séparateurs verticaux */
.ap-stats-band{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ap-stats{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);margin:0;padding:1.15rem 0}
.ap-stat{display:grid;justify-items:center;gap:.25rem;text-align:center;padding:.55rem .7rem}
.ap-stat + .ap-stat{border-left:1px solid var(--line)}
.ap-stat b{font-family:var(--font-display);font-weight:500;font-size:var(--fs-h3);line-height:1.1;color:var(--gold-2)}
.ap-stat span{font-size:var(--fs-sm);color:var(--ink-2)}
@media (max-width:719px){
  .ap-stats{grid-template-columns:repeat(2,1fr);row-gap:.35rem}
  .ap-stat + .ap-stat{border-left:0}
  .ap-stat:nth-child(even){border-left:1px solid var(--line)}
  .ap-stat:nth-child(n+3){border-top:1px solid var(--line);padding-top:.85rem}
}

/* Vision & laboratoire — 2 cartes côte à côte */
.ap-duo{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media (min-width:860px){.ap-duo{grid-template-columns:repeat(2,1fr)}}
.ap-duo-card{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:clamp(1.4rem,3vw,1.9rem)}
.ap-duo-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold)}
.ap-duo-card h3{font-size:var(--fs-h3);margin-bottom:.9rem;max-width:20ch}
.ap-duo-card p{font-size:var(--fs-body);margin-bottom:.85rem;max-width:60ch}
.ap-duo-card p:last-child{margin-bottom:0}

/* Méthodologie — triade de qualité en chips */
.ap-methode-chips{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem;margin-top:1.5rem;margin-bottom:0;color:var(--ink-2)}
.ap-methode-chips .chip{margin:0}

/* Réseaux puis CTA final — collés */
.ap-follow .section-head{margin-bottom:1.6rem}
.ap-follow .about-cta{margin-top:0}
.ap-follow + .cta-box{margin-top:clamp(2.2rem,5vw,3.2rem)}
.method-steps{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:1.5rem}
@media (min-width:720px){.method-steps{grid-template-columns:repeat(3,1fr)}}
.method-step{border:1px solid var(--line);border-radius:14px;padding:1.4rem;background:var(--card)}
.method-step b{display:flex;align-items:center;gap:.6rem;font-size:var(--fs-body);margin-bottom:.5rem}
.method-step b .m-num{width:26px;height:26px;flex:none;display:grid;place-items:center;border-radius:8px;background:var(--gold-soft);color:var(--gold-2);font-family:var(--font-display);font-size:var(--fs-xs);border:1px solid var(--gold-line)}
.method-step p{font-size:var(--fs-sm)}

/* .tl-* : l'ancien bloc hérité qui stylisait .tl-item ici a été supprimé —
   la timeline n'a qu'une seule source de vérité, dans la section
   « Activité — journal chronologique » plus bas dans ce fichier. */

/* ---------- Note boutique ---------- */
.shop-note{
  display:flex;align-items:flex-start;gap:.8rem;
  background:var(--gold-soft);border:1px solid var(--gold-line);
  border-radius:14px;padding:1.1rem 1.3rem;margin-bottom:2.4rem;max-width:760px;
}
.shop-note svg{width:20px;height:20px;color:var(--gold-2);flex:none;margin-top:.15rem}
.shop-note p{font-size:var(--fs-sm)}

/* ---------- Étude de cas (V1.1) ---------- */
.back-link{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:var(--fs-sm);font-weight:600;color:var(--ink-2);
  margin-bottom:1.3rem;transition:color .25s var(--ease);
}

.cs-media{
  border-radius:20px;overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow-md);max-width:860px;margin:0 auto clamp(3rem,6vw,4rem);
  aspect-ratio:16/9;background:var(--bg-2);
}
.cs-media img{width:100%;height:100%;object-fit:cover}

/* ---------- Révélation au scroll ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s var(--ease),transform .65s var(--ease);transition-delay:var(--d,0s)}
.reveal.is-visible{opacity:1;transform:none}

/* ---------- Accessibilité ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
  .band-track{animation:none;flex-wrap:wrap;width:auto}
}

/* ============================================================
   v2 — FONDATIONS (blueprint v0.2 §2-3-4)
   Side Dock Bar · palette · footer noir · composants nouveaux
   Tout ce bloc surcharge les règles ci-dessus (cascade) et peut
   être lu comme la « couche v2 » du design system.
   ============================================================ */

/* ---------- Marque personnelle : monogramme KJ ---------- */

.mono{font-family:var(--font-mono);font-size:.86em;letter-spacing:-.01em}

/* Ligne technologique — texte brut monospace (v0.2 §2) */

/* Pilule de statut projet — colonne badge_statut (v0.2 §5) */
.badge-statut{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.22rem .62rem;border-radius:999px;border:1px solid transparent;
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  white-space:nowrap;
}
.badge-statut.is-public{background:var(--gold-soft);color:var(--gold-2);border-color:var(--gold-line)}
.badge-statut.is-beta{background:rgba(166,143,129,.16);color:#5E5147;border-color:var(--line-strong)}
.badge-statut.is-prive{background:var(--ink);color:#F2F1F0;border-color:var(--ink)}
.badge-statut.is-nouveau{background:var(--gold);color:#171522;border-color:var(--gold)}

/* Chiffres clés (clés stat_* du CMS) */
.figures{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr);margin-top:2rem}
@media (min-width:720px){.figures{grid-template-columns:repeat(4,1fr)}}
.figure{padding:1.1rem 1.2rem;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.figure b{display:block;font-family:var(--font-display);font-size:1.85rem;line-height:1;color:var(--gold-2);margin-bottom:.4rem}
.figure span{font-size:var(--fs-sm);color:var(--ink-2)}

/* État vide — contenu pas encore saisi dans le CMS (jamais de faux contenu) */
.empty-state{
  grid-column:1/-1;text-align:center;padding:2.6rem 1.4rem;
  border:1.5px dashed var(--line-strong);border-radius:18px;background:var(--card);
}
.empty-state .es-ico{
  width:46px;height:46px;margin:0 auto .9rem;border-radius:12px;
  display:grid;place-items:center;background:var(--bg-2);border:1px solid var(--line);color:var(--gold-2);
}
.empty-state .es-ico svg{width:22px;height:22px}
.empty-state b{display:block;font-size:var(--fs-body);color:var(--ink);margin-bottom:.35rem}
.empty-state p{font-size:var(--fs-sm);max-width:54ch;margin-inline:auto}
.empty-state .empty-hint{display:block;margin-top:.9rem;font-size:var(--fs-xs);color:var(--ink-2)}

/* ---------- Side Dock Bar ---------- */
.dock{
  position:fixed;left:0;top:0;bottom:0;z-index:80;width:var(--dock-w);
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
  padding:1rem .5rem .85rem;
  background:var(--ink);color:#F2F1F0;
  overflow-y:auto;scrollbar-width:none;
}
.dock::-webkit-scrollbar{display:none}
.dock-brand{
  display:flex;flex-direction:column;align-items:center;gap:.45rem;
  width:100%;padding-bottom:.85rem;margin-bottom:.5rem;
  border-bottom:1px solid rgba(242,241,240,.14);
}

.dock-nav{display:flex;flex-direction:column;gap:2px;width:100%;flex:1}
.dock-item{
  display:flex;flex-direction:column;align-items:center;gap:.3rem;width:100%;
  padding:.55rem .2rem .5rem;border-radius:10px;
  font-size:var(--fs-xs);font-weight:600;line-height:1.25;letter-spacing:.02em;
  color:#C9C3BC;text-align:center;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.dock-item svg{width:19px;height:19px;flex:none}
.dock-item:hover{background:rgba(242,241,240,.07);color:#FFFFFF}
.dock-item[aria-current="page"]{background:rgba(112,72,216,.16);color:#D7C9F6;box-shadow:inset 3px 0 0 var(--gold)}
.dock-more{display:none}
.dock-foot{
  width:100%;display:flex;flex-direction:column;align-items:center;gap:.6rem;
  padding-top:.7rem;border-top:1px solid rgba(242,241,240,.14);
}

.dock-avail .dot{width:7px;height:7px;border-radius:50%;background:#6FBF73;flex:none;box-shadow:0 0 0 3px rgba(111,191,115,.18)}

/* Décalage du contenu quand le dock est présent (desktop) */
@media (min-width:1024px){
  body.has-dock{padding-left:var(--dock-w)}
  body.has-dock .hero{padding-top:clamp(2.4rem,5vw,4rem)}
  body.has-dock .page-hero{padding-top:clamp(2.4rem,5vw,4rem)}
}

/* ---------- Feuille « Plus » (mobile) ---------- */
.dock-sheet{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end;justify-content:center}
.dock-sheet[hidden]{display:none}
.dock-sheet-backdrop{position:absolute;inset:0;background:rgba(13,13,13,.5)}
.dock-sheet-inner{
  position:relative;width:100%;max-width:520px;
  background:var(--ink);color:#F2F1F0;
  border-radius:18px 18px 0 0;padding:1.1rem 1.15rem calc(1.2rem + env(safe-area-inset-bottom,0px));
  box-shadow:0 -18px 40px rgba(0,0,0,.35);
  animation:dockUp .28s var(--ease);
}
@keyframes dockUp{from{transform:translateY(16px);opacity:.55}to{transform:none;opacity:1}}
.dock-sheet-title{font-size:var(--fs-xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#A79F96;margin-bottom:.8rem}
.dock-sheet-grid{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
.dock-sheet-grid > *{
  display:flex;align-items:center;min-height:46px;padding:.7rem .9rem;
  border-radius:10px;background:rgba(242,241,240,.06);
  border:1px solid rgba(242,241,240,.12);
  font-size:var(--fs-sm);font-weight:600;color:#E7E3DF;
}
.dock-sheet-grid > *:hover{border-color:var(--gold);color:#D7C9F6}
.dock-sheet .dl-manage-btn{color:#CFC9C2;}
.dock-sheet .dl-manage-btn:hover{color:#D7C9F6}
.dock-sheet-close{
  margin-top:.8rem;width:100%;min-height:46px;border-radius:10px;
  background:var(--gold);color:#171522;font-size:var(--fs-sm);font-weight:700;
}
body.dock-sheet-open{overflow:hidden}

/* ---------- Footer noir (v0.2 §2) ---------- */

.site-footer .brand{color:#F2F1F0}
.site-footer .brand-name small{color:#A79F96}
.site-footer .footer-brand p{color:#A79F96}

.site-footer .footer-col a{color:#CFC9C2}
.site-footer .footer-col a:hover{color:#FFFFFF;padding-left:4px}
.site-footer .dl-manage-btn{color:#CFC9C2}
.site-footer .dl-manage-btn:hover{color:#FFFFFF}
.site-footer .footer-bottom{border-top-color:rgba(242,241,240,.14);color:#8C857C}
.site-footer .footer-bottom a{color:#CFC9C2}
.site-footer .footer-bottom a:hover{color:#FFFFFF}

/* ---------- Barre basse (mobile < 1024px) ---------- */
@media (max-width:1023px){
  .dock{
    top:auto;right:0;bottom:0;width:auto;
    height:calc(var(--dock-h) + env(safe-area-inset-bottom,0px));
    flex-direction:row;align-items:stretch;gap:0;
    padding:.35rem .4rem calc(.35rem + env(safe-area-inset-bottom,0px));
    border-top:1px solid rgba(242,241,240,.12);
    overflow:visible;
  }
  .dock-brand,.dock-foot{display:none}
  .dock-nav{flex-direction:row;align-items:stretch;justify-content:space-between;gap:.15rem}
  .dock-item{flex:1 1 0;justify-content:center;gap:.2rem;padding:.35rem .1rem}
  .dock-item svg{width:18px;height:18px}
  .dock-item[aria-current="page"]{box-shadow:inset 0 3px 0 var(--gold);background:rgba(112,72,216,.13)}
  .dock-more{display:flex}
  .dock-item-secondary{display:none}   /* Parcours · À propos · Contact → feuille « Plus » */
  body.has-dock{padding-bottom:calc(var(--dock-h) + env(safe-area-inset-bottom,0px))}
  body.has-dock .hero{padding-top:clamp(1.8rem,6vw,2.6rem)}
  body.has-dock .page-hero{padding-top:clamp(1.8rem,6vw,2.6rem)}
}

/* ============================================================
   v2 — HERO & IDENTITÉ (étape 2, blueprint v0.2 §3-§4)
   Texte à gauche · photo à droite · chiffres clés dessous.
   ============================================================ */

.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(620px 420px at 88% -10%, rgba(112,72,216,.09), transparent 62%),
    radial-gradient(480px 380px at -8% 112%, rgba(112,72,216,.05), transparent 60%);
}

@media (min-width:1024px){
  .hero-grid{grid-template-columns:minmax(0,1.06fr) minmax(0,.84fr);gap:clamp(2.6rem,4.6vw,4.4rem)}
}
.hero-body .eyebrow{margin-bottom:1.1rem}
.hero h1{margin-bottom:.65rem}

/* Photo (droite) + badge de marque */


.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}

@media (max-width:479px){.hero-badge{left:.7rem;bottom:.7rem;right:.7rem;}}

/* Chiffres clés (tuiles de .figures définies plus haut) */
.hero .figures{margin-top:clamp(2.2rem,4.5vw,3.2rem)}
@media (max-width:719px){
  .hero .figures{grid-template-columns:repeat(3,1fr);gap:.6rem}
  .hero .figure{padding:.85rem .7rem;border-radius:12px}
  .hero .figure span{line-height:1.3;display:block}
}

/* ---------- Sélecteur de langue FR/EN (dock) ---------- */

.lang-btn:hover{color:#FFFFFF}
.lang-btn[aria-pressed="true"]{background:var(--gold);color:#171522}
.lang-btn:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.dock-lang-sheet{
  grid-column:1/-1;justify-content:center;margin:.15rem 0 .35rem;
  border-color:rgba(242,241,240,.28);
}
.dock-lang-sheet .lang-btn{flex:1;padding:.6rem 1rem;font-size:var(--fs-xs)}

/* ============================================================
   v2 — EXPERTISE (étape 3, blueprint v0.2 §8)
   « Ce que je conçois et apporte » : cartes iconographiées,
   catégorie, description, exemples de réalisations liés.
   ============================================================ */
.xp-card{display:flex;flex-direction:column;gap:.8rem;padding:1.7rem 1.6rem 1.6rem;position:relative;overflow:hidden}
.xp-card::before{
  content:"";position:absolute;inset:0 auto auto 0;width:100%;height:2px;
  background:linear-gradient(90deg,var(--gold),transparent 72%);
  opacity:0;transition:opacity .3s var(--ease);
}
.xp-card:hover::before{opacity:1}
.xp-ico{
  width:46px;height:46px;flex:none;display:grid;place-items:center;
  border-radius:13px;background:var(--gold-soft);border:1px solid var(--gold-line);
  color:var(--gold-2);
}
.xp-ico svg{width:23px;height:23px}
.xp-ico img{width:100%;height:100%;object-fit:contain;border-radius:12px;background:#fff}
.xp-cat{align-self:flex-start}
.xp-title{font-size:var(--fs-h3);margin:0}
.xp-desc{margin:0;font-size:var(--fs-body);color:var(--ink-2)}
.xp-projects{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-top:auto;padding-top:.7rem;border-top:1px dashed var(--line)}
.xp-projects-label{
  flex-basis:100%;font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:.15rem;
}
.xp-tag{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.26rem .6rem;border-radius:999px;
  font-family:var(--font-mono);font-size:var(--fs-xs);
  background:rgba(166,143,129,.12);border:1px solid var(--line);color:#4E463E;
}
.xp-tag[href]{background:var(--card);border-color:var(--gold-line);color:var(--gold-2);font-weight:600}
.xp-tag[href]:hover{background:var(--gold-soft);border-color:var(--gold)}
.xp-tag[href]::after{content:"→";font-family:var(--font-body);font-size:.8em;opacity:.85}

/* ---------- Expertise accueil : cartes horizontales 2 blocs ----------
   Alignées sur le langage visuel de la section Parcours (carte blanche,
   pilule lavande) : BLOC 1 gauche ~30% (badge catégorie + visuel
   d'ancrage cadré façon badges Parcours), BLOC 2 droite ~70% (titre,
   description concise, projets preuves ➔). Cartes statiques. */
/* ---------- Expertise accueil : carrousel horizontal ----------
   Scroll-snap PAR CARTE (décision utilisateur) : 2 cartes par vue
   ≥1024px (~48,4% chacune), 1 carte <1023px avec swipe tactile.
   Scrollbar masquée comme les carrousels Projets/Articles ; hauteur
   contenue : la description est raccourcie à 2 lignes (coupure
   propre) et les cartes d'une même vue s'alignent à hauteur égale. */
main#contenu{overflow-x:hidden}   /* wrapper principal : aucun débordement global */
.expertise-carousel-container{
  display:flex;gap:1.25rem;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:6px 6px 14px;margin:-6px;
  scrollbar-width:none;
}
.expertise-carousel-container::-webkit-scrollbar{display:none}
.expertise-carousel-container .expertise-card-horizontal{
  flex:0 0 calc((100% - 1.25rem)/2);
  scroll-snap-align:start;
}
.expertise-carousel-container .skel{
  flex:0 0 calc((100% - 1.25rem)/2);
  scroll-snap-align:start;min-height:170px;
}
.expertise-carousel-container .xp-h-desc{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* Points de pagination discrets — 1 par carte, actif en pilule lavande */
/* ---------- Indicateurs de pagination unifiés (tirets) ----------
   Composant cloné du carrousel Expertise pour toutes les sections à
   défilement horizontal (Projets à la une, Articles) : pilule 8px,
   état actif 22px violet #6D28D9. Décision 2026-10-28 : carrousels
   seuls — les grilles statiques restent sans indicateurs. */
.carousel-dots,.expertise-carousel-dots{display:flex;justify-content:center;align-items:center;gap:.5rem;margin-top:.65rem}
.carousel-dots[hidden],.expertise-carousel-dots[hidden]{display:none}
.carousel-dot,.xp-dot{width:8px;height:8px;border-radius:999px;border:none;padding:0;background:#CBD5E1;cursor:pointer;transition:width .25s var(--ease),background .25s var(--ease)}
.carousel-dot:hover,.xp-dot:hover{background:#94A3B8}
.carousel-dot:focus-visible,.xp-dot:focus-visible{outline:2px solid #6D28D9;outline-offset:2px}
.carousel-dot.is-active,.xp-dot.is-active{width:22px;background:#6D28D9}
.expertise-card-horizontal{
  display:grid;grid-template-columns:minmax(210px,30%) minmax(0,1fr);
  gap:clamp(1.1rem,2.5vw,1.9rem);align-items:center;
  padding:1.4rem 1.6rem;
  border:1px solid rgba(226,232,240,.95);border-radius:20px;
  background:rgba(255,255,255,.92);
  box-shadow:0 10px 30px -10px rgba(109,40,217,.08),0 1px 2px rgba(15,23,42,.03);
  backdrop-filter:blur(16px);
}
.xp-h-visuel{display:flex;flex-direction:column;align-items:flex-start;gap:.9rem;min-width:0}
.xp-h-cat{
  font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--lav-dark,#4B2A9F);
  background:var(--lav-soft,#F5F3FF);border:1px solid var(--lav-line,#E7DEFB);
  border-radius:999px;padding:.3rem .65rem;
}
.xp-h-ico{
  width:62px;height:62px;border-radius:16px;flex:none;
  display:grid;place-items:center;
  background:var(--lav-soft,#F5F3FF);color:#6D28D9;
  border:1px solid var(--lav-line,#E7DEFB);
}
.xp-h-ico svg{width:27px;height:27px}
.xp-h-ico img{width:100%;height:100%;object-fit:contain;border-radius:16px;background:#fff}
.xp-h-contenu{display:flex;flex-direction:column;gap:.55rem;min-width:0}
.xp-h-titre{margin:0;color:#0F172A;font-size:var(--fs-h3);font-weight:800;letter-spacing:-.025em;line-height:1.2;overflow-wrap:break-word}
.xp-h-desc{margin:0;color:#475569;font-size:var(--fs-body);line-height:1.65;max-width:62ch}
.xp-h-projets{display:flex;flex-wrap:wrap;gap:.45rem .9rem;align-items:center;padding-top:.75rem;border-top:1px solid rgba(226,232,240,.9)}
.xp-h-projets-label{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#94A3B8}
.xp-h-lien{display:inline-flex;align-items:center;gap:.35rem;color:#6D28D9;font-weight:600;font-size:var(--fs-btn);text-decoration:none;transition:color .2s ease}
.xp-h-lien:hover{color:#5B21B6;text-decoration:underline}
.xp-h-lien:focus-visible{outline:2px solid #6D28D9;outline-offset:2px;border-radius:4px}
.xp-h-lien.is-text{color:#94A3B8;font-weight:500}
@media (max-width:1023px){
  /* Mobile : 1 carte par vue (swipe tactile) ; Bloc 2 sous Bloc 1 ; le
     visuel s'aligne en ligne (badge + icône). */
  .expertise-card-horizontal{grid-template-columns:1fr;gap:1rem}
  .expertise-carousel-container .expertise-card-horizontal{flex-basis:100%}
  .expertise-carousel-container .skel{flex-basis:100%}
  .xp-h-visuel{flex-direction:row;align-items:center;gap:1rem}
  .xp-h-ico{width:52px;height:52px;border-radius:14px}
  .xp-h-ico svg{width:23px;height:23px}
}
@media (max-width:560px){
  .expertise-card-horizontal{padding:1.15rem 1.1rem;border-radius:16px}
  .xp-h-projets{gap:.4rem .7rem}
}
@media (prefers-reduced-motion:reduce){.xp-card::before{opacity:1}}

/* ---------- Réalisations v2 — cartes, pilules, filtres (Étape 4) ---------- */
/* Rangée supérieure : pilule `badge_statut` + catégorie du Sheet */

.p-cat{font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}

/* Variantes de pilule complémentaires (public/beta/privé/nouveau : plus haut) */
.badge-statut.is-archive{background:var(--bg-2);color:var(--ink-2);border-color:var(--line-strong)}
.badge-statut.is-neutre{background:var(--card);color:var(--ink-2);border-color:var(--line-strong)}

/* Visuel de remplacement : initiales du titre réel (aucune image inventée) */
.p-ph{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(135deg,var(--bg-2),#E4DFD9)}
.p-ph b{font-family:var(--font-display);font-weight:600;line-height:1;color:var(--gold-2);letter-spacing:.02em}
.p-ph span{position:absolute;bottom:.75rem;right:.9rem;font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--taupe)}

/* Ligne technologique monospace dans les cartes */
.p-card .stack-mono{margin-top:.05rem}

/* Pied de carte : statut (mono) + actions */
.p-foot .p-status{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--ink-2)}

.p-card .p-desc{color:var(--ink-2)}

@media (max-width:560px){
  .p-foot{flex-direction:column;align-items:flex-start;gap:.7rem}
  .p-actions{width:100%}
  .p-actions .btn-xs{flex:1;text-align:center}
}

/* ---------- Pages projets v2 — entête d'étude de cas (Étape 5) ---------- */
/* La fiche reprend exactement les surfaces de /projets/ : pilule de
   statut, ligne technologique monospace, boutons v2. */
.page-hero .badge-statut{padding:.3rem .8rem}
.cs-stack{margin-top:.15rem;max-width:min(100%,70ch)}
.page-extra .cs-stack{margin-top:0}
.cs-actions{align-items:center;margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.75rem}
.cs-actions .btn{min-height:44px}
.back-link{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;color:var(--ink-2);margin-bottom:1.1rem}
.back-link:hover{color:var(--gold-2)}
@media (max-width:560px){
  .cs-actions .btn{flex:1 1 auto;text-align:center}
}

/* ---------- Activité — journal chronologique (v0.2 §6) ----------
   SOURCE DE VÉRITÉ UNIQUE du composant timeline (accueil + /activite/).
   Les anciennes déclarations .tl dispersées (bloc « À propos » et couche
   re-thème 2026) sont consolidées ici. La ligne verticale qui relie les
   étapes est un simple border-left sur le conteneur : plus aucun ::before
   en position absolue, la timeline compose donc proprement dans une grille. */
.tl{list-style:none;margin:2.2rem 0 0;padding-left:2.1rem;border-left:1px solid var(--line-strong);display:flex;flex-direction:column;gap:1.9rem}
.tl-item{position:relative}
.tl-item::before{content:"";position:absolute;left:calc(-2.1rem - 6px);top:.42rem;width:11px;height:11px;border-radius:50%;background:var(--card);border:2.5px solid var(--gold)}
.tl-item.is-first::before{background:var(--gold);box-shadow:0 0 0 4px var(--gold-soft)}
.tl-meta{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin-bottom:.3rem}
.tl-date{font-size:var(--fs-sm);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2)}
.tl-type{font-size:var(--fs-sm);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-2);background:var(--gold-soft);border:1px solid var(--gold-line);border-radius:999px;padding:.1rem .5rem}
.tl-titre{font-size:var(--fs-h3);margin-bottom:.3rem}
.tl-desc{font-size:var(--fs-body);color:var(--ink-2);margin-top:.25rem;max-width:78ch}
.tl-foot{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-top:.55rem}
.tl-statut{font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-2);background:rgba(166,143,129,.10);border:1px dashed var(--line);border-radius:8px;padding:.28rem .55rem;max-width:100%}
.tl-link{font-size:var(--fs-sm)}
.tl-img{display:block;margin-top:.7rem;max-width:min(100%,360px);border-radius:12px;border:1px solid var(--line)}
.tl-state{list-style:none}
.tl-state::before{display:none}
.tl-state .es-ico{margin-inline:auto}

/* Layout accueil « Coulisses » : grande carte pastel + grille 2 colonnes.
   CONTRAINTE STICKY : aucun transform ni overflow ne doit jamais être
   appliqué à .actv-card, .actv-grid, .container ou .section — sinon la
   colonne gauche cesserait de coller au défilement. */
.actv-card{background:var(--gold-soft);border:1px solid var(--gold-line);border-radius:24px;padding:clamp(2.2rem,4.5vw,3.8rem)}
.actv-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:4rem;align-items:start}
.actv-aside{position:sticky;top:100px}
.actv-aside .section-head{margin-bottom:0}
.actv-main .tl{margin-top:0}
.actv-cta{text-align:center;margin-top:2.75rem}

/* Mobile (<768px) : grille et sticky désactivés — le titre s'empile au-dessus
   de la timeline (spécification refonte §6). */
@media (max-width:767.98px){
  .actv-grid{display:block}
  .actv-aside{position:static}
  .actv-aside .section-head{margin-bottom:1.4rem}
  .actv-main .tl{margin-top:.4rem}
  .actv-cta{margin-top:2rem}
  .tl{gap:1.5rem;padding-left:1.6rem;margin-top:1.6rem}
  .tl-item::before{left:calc(-1.6rem - 5px);width:9px;height:9px}
}

/* ---------- Parcours — expériences, formations, certifications (v0.2 §7) ---------- */
.parc-badge{align-self:flex-start;max-height:52px;width:auto;border-radius:8px;margin-bottom:.2rem}
.parc-titre{line-height:1.25}
.parc-org{font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.parc-periode{display:flex;align-items:center;gap:.4rem;font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--ink-2)}
.parc-periode svg{flex:none;color:var(--gold-2)}
.parc-desc{color:var(--ink-2)}
.parc-foot{margin-top:auto;padding-top:.7rem}
.parc-verif{font-size:var(--fs-xs)}
/* Badges d'outils sur les cartes de l'aperçu accueil (stack_tags) :
   même langage visuel que la carte Focus (pilules .stack-badge),
   ancrés au-dessus du pied de carte. */
.parc-card .stack-badges{margin-top:.7rem}
.parc-card .parc-foot + *, .parc-card > *:last-child{margin-bottom:0}

/* ---------- Parcours : Split Timeline & Detail Preview (Phase 1, 2026-10-27) ----------
   Page /parcours/ : liste chronologique compacte à gauche (timeline unifiée,
   une pastille par entrée), carte de détail à droite. Le mode « aperçu » de
   la page d'accueil (.parc-card) n'est PAS concerné. */
.career-split-container{
  display:grid;
  grid-template-columns:minmax(280px,360px) minmax(0,1fr);
  gap:clamp(1.6rem,3vw,2.6rem);
  align-items:start;
}
@media (max-width:959px){
  /* Empilement mobile : la timeline reste lisible, le détail passe dessous. */
  .career-split-container{grid-template-columns:1fr;gap:1.4rem}
}
.career-timeline-list{display:flex;flex-direction:column;gap:.4rem;position:relative}
/* Ligne verticale d'ancrage : elle coulisse derrière les pastilles. */
.career-timeline-list::before{
  content:"";position:absolute;left:2rem;top:1.1rem;bottom:1.1rem;width:2px;
  background:linear-gradient(180deg,var(--lav-line,#E7DEFB),rgba(231,222,251,.25));
  border-radius:2px;
}
.career-item{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.8rem;
  width:100%;text-align:left;
  padding:.7rem .85rem .7rem .75rem;
  border:1px solid transparent;border-radius:14px;background:transparent;
  cursor:pointer;position:relative;z-index:1;
  font:inherit;color:inherit;
  transition:background .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.career-item:hover{background:rgba(255,255,255,.72)}
.career-item:focus-visible{outline:2px solid #6D28D9;outline-offset:2px}
.career-item.is-active{
  background:rgba(255,255,255,.92);
  border-color:var(--lav-line,#E7DEFB);
  box-shadow:0 10px 26px -12px rgba(109,40,217,.18),0 1px 2px rgba(15,23,42,.04);
}
.career-item-ico{
  width:38px;height:38px;border-radius:11px;flex:none;
  display:grid;place-items:center;
  background:var(--lav-soft,#F5F3FF);color:#6D28D9;
  border:1px solid var(--lav-line,#E7DEFB);
}
.career-item.is-active .career-item-ico{background:#fff}
.career-item-ico svg{width:19px;height:19px}
.career-item-ico img{width:100%;height:100%;object-fit:contain;border-radius:10px;background:#fff}
.career-item-body{display:flex;flex-direction:column;gap:.12rem;min-width:0}
.career-item-type{
  font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:#94A3B8;
}
.career-item-titre{font-size:var(--fs-body);font-weight:700;color:#0F172A;line-height:1.3}
.career-item-org{
  font-size:var(--fs-sm);color:#475569;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.career-item-periode{
  font-family:var(--font-mono);font-size:var(--fs-sm);letter-spacing:.02em;color:var(--lav-dark,#4B2A9F);
  background:var(--lav-soft,#F5F3FF);border:1px solid var(--lav-line,#E7DEFB);
  border-radius:999px;padding:.28rem .6rem;white-space:nowrap;align-self:center;
  max-width:9.5rem;overflow:hidden;text-overflow:ellipsis;
}
.career-item.is-active .career-item-periode{background:#fff}
.career-focus-panel{position:sticky;top:100px;min-width:0}   /* aligné sur .actv-aside */
@media (max-width:959px){
  .career-focus-panel{position:static}   /* pas de sticky en empilement mobile */
  /* Phase 3 — indicateur mobile : chevron sur l'item actif, il signale
     que le détail de la sélection s'affiche sous la timeline. */
  .career-item.is-active{padding-right:2.15rem}
  .career-item.is-active::after{
    content:"";position:absolute;right:.9rem;top:50%;
    width:8px;height:8px;border-right:2px solid #6D28D9;border-bottom:2px solid #6D28D9;
    transform:translateY(-70%) rotate(45deg);
  }
}
@media (max-width:560px){
  /* Très petits écrans : la période passe sous le texte, badge aligné à gauche. */
  .career-item{grid-template-columns:auto minmax(0,1fr);row-gap:.4rem}
  .career-item-periode{grid-column:2;justify-self:start}
}

/* ---------- Carte Focus dynamique (Phase 2, 2026-10-27) ----------
   Carte de détail enrichie rendue dans .career-focus-panel : en-tête
   (pastille + micro-libellé + grand titre + organisation), badges
   (période, type, « En cours » vert si date_fin = présent), description
   et bouton d'action. La permutation au clic est animée (fondu +
   micro-glissement), désactivée si prefers-reduced-motion. */
.career-focus-card{
  display:flex;flex-direction:column;gap:1.15rem;
  padding:1.7rem 1.7rem 1.5rem;
  border:1px solid rgba(226,232,240,.95);border-radius:20px;
  background:rgba(255,255,255,.92);
  box-shadow:0 10px 30px -10px rgba(109,40,217,.08),0 1px 2px rgba(15,23,42,.03);
  backdrop-filter:blur(16px);
}
.career-focus-head{display:flex;align-items:center;gap:1rem;min-width:0}
.career-focus-ico{
  width:56px;height:56px;border-radius:14px;flex:none;
  display:grid;place-items:center;
  background:var(--lav-soft,#F5F3FF);color:#6D28D9;
  border:1px solid var(--lav-line,#E7DEFB);
}
.career-focus-ico svg{width:26px;height:26px}
.career-focus-ico img{width:100%;height:100%;object-fit:contain;border-radius:12px;background:#fff}
.career-focus-headtxt{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.career-focus-type{
  font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:#94A3B8;
}
.career-focus-titre{margin:0;color:#0F172A;font-size:var(--fs-h3);letter-spacing:-.03em;line-height:1.15;overflow-wrap:break-word}
.career-focus-org{margin:0;font-size:var(--fs-sm);font-weight:600;color:#475569}
.career-focus-badges{display:flex;flex-wrap:wrap;gap:.5rem}
.career-focus-periode{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--lav-dark,#4B2A9F);
  background:var(--lav-soft,#F5F3FF);border:1px solid var(--lav-line,#E7DEFB);
  border-radius:999px;padding:.32rem .7rem;
}
.career-focus-periode svg{flex:none;color:#6D28D9}
.career-focus-statut{
  display:inline-flex;align-items:center;
  font-size:var(--fs-xs);font-weight:700;color:#475569;
  background:rgba(255,255,255,.9);border:1px solid #E2E8F0;
  border-radius:999px;padding:.32rem .7rem;
}
.career-focus-live{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:var(--fs-xs);font-weight:700;color:#047857;
  background:#ECFDF5;border:1px solid #A7F3D0;
  border-radius:999px;padding:.32rem .7rem;
}
.career-live-dot{width:7px;height:7px;border-radius:50%;background:#10B981;box-shadow:0 0 0 4px rgba(16,185,129,.12);flex:none}
.career-focus-desc{margin:0;color:#475569;font-size:var(--fs-body);line-height:1.75}
/* Phase 3 : rangée d'outils/compétences — les pilules .stack-badge du
   système global (TOOLS_REGISTRY) s'y alignent avec retour à la ligne. */
.career-focus-tools{display:flex;min-width:0}
.career-focus-tools .stack-badges{margin-top:0}
.career-focus-foot{margin-top:auto;padding-top:1rem;border-top:1px solid rgba(226,232,240,.9);display:flex}
.career-focus-btn{
  display:inline-flex;align-items:center;gap:.45rem;
  background:#6D28D9;color:#fff;border:1px solid #6D28D9;border-radius:12px;
  padding:.68rem 1.15rem;font-weight:600;font-size:var(--fs-sm);text-decoration:none;
  box-shadow:0 10px 22px rgba(109,40,217,.16);
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.career-focus-btn:hover{background:#5B21B6;border-color:#5B21B6;color:#fff}
.career-focus-btn:focus-visible{outline:2px solid #6D28D9;outline-offset:2px}
.career-focus-btn svg{flex:none}
/* Transition de permutation (effet dashboard SaaS) */
@keyframes careerSwap{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
.career-focus-card.is-swapping{animation:careerSwap .38s var(--ease) both}
@media (prefers-reduced-motion:reduce){
  .career-focus-card.is-swapping{animation:none}
}
@media (max-width:560px){
  .career-focus-card{padding:1.25rem 1.15rem 1.1rem;border-radius:16px}
  .career-focus-ico{width:46px;height:46px;border-radius:12px}
  .career-focus-ico svg{width:22px;height:22px}
}

/* ---------- Aperçu Parcours de l'accueil : Split Layout (harmonisation) ----------
   Même composant que /parcours/, adapté à une section d'accueil : la
   timeline vit dans une hauteur bornée (480px) avec défilement interne
   pour ne pas rallonger la page, scrollbar discrète aux tons lavande de
   la charte. Les items sont rendus dans .career-timeline-scroll pour que
   la ligne d'ancrage couvre tout le contenu défilant. */
#apercu-parcours .career-timeline-list{
  max-height:480px;
  overflow-y:auto;
  padding-right:.45rem;                 /* place pour la scrollbar */
  overscroll-behavior:contain;          /* le scroll interne ne déborde pas sur la page */
  scrollbar-width:thin;                 /* Firefox : scrollbar fine */
  scrollbar-color:#DDD6FE transparent;
}
#apercu-parcours .career-timeline-list::before{display:none}   /* remplacée par celle du contenu défilant */
#apercu-parcours .career-timeline-scroll{position:relative;display:flex;flex-direction:column;gap:.4rem;padding-bottom:.4rem}
#apercu-parcours .career-timeline-scroll::before{
  content:"";position:absolute;left:2rem;top:1.1rem;bottom:1.1rem;width:2px;
  background:linear-gradient(180deg,var(--lav-line,#E7DEFB),rgba(231,222,251,.25));
  border-radius:2px;
}
/* Scrollbar WebKit : piste transparente, pouce lavande, hover violet profond */
#apercu-parcours .career-timeline-list::-webkit-scrollbar{width:8px}
#apercu-parcours .career-timeline-list::-webkit-scrollbar-track{background:transparent;border-radius:8px}
#apercu-parcours .career-timeline-list::-webkit-scrollbar-thumb{background:#DDD6FE;border-radius:8px}
#apercu-parcours .career-timeline-list::-webkit-scrollbar-thumb:hover{background:#6D28D9}
#apercu-parcours .career-focus-panel{position:static}   /* section courte : pas de sticky */
@media (max-width:959px){
  #apercu-parcours .career-timeline-list{max-height:340px}   /* mobile : contrainte adaptée */
}
@media (max-width:560px){
  #apercu-parcours .career-timeline-list{max-height:300px}
}

/* ---------- Articles & Ressources — ajustements v2 (étape 8) ---------- */
/* Articles : étiquette de plateforme (mono) + média optionnel */
.a-plat{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2)}
.a-ext{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--ink-2);white-space:nowrap}
.a-media{display:block;margin:-1.6rem -1.6rem 0;aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--line);background:var(--bg-2)}
.a-media img{width:100%;height:100%;object-fit:cover}
.a-card h3 + p{margin-top:.1rem}

/* Filtres : compteur réel par catégorie */
.f-n{display:inline-block;margin-left:.35rem;font-family:var(--font-mono);font-size:var(--fs-xs);opacity:.6}

/* Ressources : étiquette `type` + regroupement par type */
.r-type{margin:0}
.r-type span{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2)}
.r-badge{position:absolute;top:.9rem;left:.9rem;z-index:3}
.r-foot .r-link{font-size:var(--fs-sm)}
.ress-groupe{margin-top:2.4rem}
.ress-groupe:first-child{margin-top:0}
.ress-groupe-titre{display:flex;align-items:baseline;gap:.6rem;font-size:var(--fs-h3);margin-bottom:1.1rem}
.ress-count{font-family:var(--font-mono);font-style:normal;font-size:var(--fs-xs);font-weight:700;color:var(--gold-2);background:var(--gold-soft);border:1px solid var(--gold-line);border-radius:999px;padding:.05rem .5rem}
.ress-grid{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media (min-width:720px){.ress-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.ress-grid{grid-template-columns:repeat(3,1fr)}}
#grille-articles .a-card{height:100%}

/* ---------- À propos & Contact — finitions v2 (étape 9) ---------- */
/* Technologies : étiquettes monospace (système v2) */

/* Repères « Parcours & expériences » : liste v2 (remplace .timeline v1.3) */
.ap-tl{list-style:none;padding:0;margin-top:1.6rem;display:flex;flex-direction:column;gap:.9rem}
.ap-tl li{
  position:relative;display:grid;grid-template-columns:4.6rem 1fr;gap:0 1rem;
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.05rem 1.25rem;
}
.ap-tl li::before{content:"";position:absolute;left:0;top:1.1rem;bottom:1.1rem;width:3px;border-radius:0 3px 3px 0;background:var(--gold)}
.ap-tl-year{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:700;color:var(--gold-2);letter-spacing:.04em}
.ap-tl b{display:block;font-size:var(--fs-body);color:var(--ink)}
.ap-tl p{grid-column:2;font-size:var(--fs-sm);margin-top:.2rem}
@media (max-width:520px){.ap-tl li{grid-template-columns:1fr}.ap-tl p{grid-column:1}}

/* Contact : cartes de canaux — coupure de mot propre (plus de « gmail.co/m ») */
.coord-card span{word-break:normal;overflow-wrap:anywhere}
.coord-card[hidden]{display:none}
/* L'email est le canal principal : sa carte occupe toute la largeur
   (l'adresse tient alors sur une ligne, sans coupure au milieu du mot) */
@media (min-width:720px){.coord-card[data-canal="email"]{grid-column:1/-1}}
.coord-card[data-canal="email"] span:last-child{font-family:var(--font-mono);letter-spacing:-.01em}

/* ============================================================
   DIGICRAFT LABS — Direction artistique 2026
   Refonte visuelle : éditoriale, contrastée, lisible, CMS-safe.
   Cette couche ne modifie aucun contrat HTML/JS/Google Sheets.
   ============================================================ */
:root{
  --bg:#f5f3ee;
  --card:#fffdf9;
  --bg-2:#ebe8e1;
  --ink:#111827;
  --ink-2:#596273;
  --gold:#7048D8;
  --gold-2:#4B2A9F;
  --gold-soft:rgba(112,72,216,.12);
  --gold-line:rgba(112,72,216,.34);
  --line:#dedbd3;
  --line-strong:#c9c5bb;
  --navy:#0b1424;
  --navy-2:#121f33;
  --shadow-sm:0 2px 10px rgba(17,24,39,.05);
  --shadow-md:0 20px 50px -24px rgba(17,24,39,.30);
  --radius:20px;
  --radius-sm:13px;
}

body{background:var(--bg);color:var(--ink)}
.container{margin-inline:auto;width:min(1220px,100% - 3rem)}
.section{padding:clamp(4.8rem,9vw,8rem) 0}
.section-head{max-width:640px;margin-bottom:3rem}
.section-head h2{font-size:var(--fs-h2);letter-spacing:-.035em}
.section-head p{max-width:60ch}

.eyebrow::before{width:34px;background:var(--gold)}

/* Navigation : moins gadget, plus repère de marque */
.dock{width:96px;background:var(--navy);padding:1.25rem .65rem 1rem;box-shadow:10px 0 30px rgba(11,20,36,.08)}
.dock-brand{padding-bottom:1.1rem;margin-bottom:.7rem;border-bottom-color:rgba(255,255,255,.13)}

.dock-brand-sub{font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#9ca9ba;font-size:var(--fs-xs)}
.dock-item{padding:.68rem .2rem .62rem;border-radius:12px;color:#aeb8c7;}
.dock-item:hover{background:rgba(255,255,255,.07);color:#fff}
.dock-item[aria-current="page"]{background:rgba(112,72,216,.18);color:#D9C9FF;box-shadow:inset 3px 0 0 #8F72E5}
.dock-foot{border-top-color:rgba(255,255,255,.13)}
body.has-dock{padding-left:96px}

/* Hero : premier écran plus mémorable et plus direct */

.hero::before{background:radial-gradient(620px 520px at 88% 20%,rgba(112,72,216,.23),transparent 64%),radial-gradient(520px 420px at 10% 100%,rgba(65,108,153,.18),transparent 68%);z-index:-1}

.hero-body .eyebrow{color:#D9C9FF}
.hero-body .eyebrow::before{background:#7048D8}
.hero h1{color:#fffdf8;line-height:.98;letter-spacing:-.06em;max-width:11ch}

.hero .btn-ghost{border-color:rgba(255,255,255,.25);color:#f8f6f0}
.hero .btn-ghost:hover{background:rgba(255,255,255,.08);border-color:#8F72E5;color:#D9C9FF}
.hero .btn-gold{background:#7048D8;color:#111827;box-shadow:0 14px 30px -14px rgba(112,72,216,.8)}
.hero .btn-gold:hover{background:#D9C9FF;color:#111827}

.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(11,20,36,.42));pointer-events:none}

.hero .figures{gap:.8rem;margin-top:clamp(2.5rem,5vw,4.5rem)}
.hero .figure{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.15);backdrop-filter:blur(8px)}
.hero .figure b{color:#D9C9FF;font-size:2rem}
.hero .figure span{color:#b6c0ce}

/* Bandeau et sections : alternance plus nette */

.band-track span{color:#5b5348;letter-spacing:.2em}
.band-track span::after{color:#7048D8}
.section[style*="background:var(--bg-2)"]{background:#e9e6df !important;border-color:#d8d3c9 !important}

/* Cartes : volume léger, grille plus premium */
.card{background:var(--card);border-color:#e3dfd7;box-shadow:var(--shadow-sm)}
.card-hover:hover{border-color:#CBB8FA;box-shadow:0 24px 50px -24px rgba(17,24,39,.32)}
.grid-3{gap:1.25rem}
.xp-card{padding:1.8rem 1.7rem 1.65rem;min-height:245px;border-radius:18px}
.xp-card .xp-ico{background:#F0EBFF;border-color:#D9CAFA}
.p-card,.r-card,.a-card{border-radius:18px}
.p-media,.r-media{border-bottom-color:#e6e0d6}
.p-body,.r-body{padding:1.5rem 1.55rem 1.6rem}

.p-desc,.r-desc{line-height:1.6}

.badge-statut.is-public{background:#e8f1e8;color:#397044;border-color:#bdd7c0}

/* Timeline et profil : respirer davantage
   (les règles .tl/.tl-item qui figuraient ici sont consolidées dans la
   section « Activité — journal chronologique » — source de vérité unique) */
.about-grid{gap:clamp(3rem,7vw,7rem)}
.about-photo{position:relative;overflow:hidden;aspect-ratio:4/5;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-md)}
.about-photo::after{background:linear-gradient(180deg,transparent 55%,rgba(11,20,36,.75))}
.about-photo-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;font-size:var(--fs-sm);font-weight:600;letter-spacing:.04em;background:var(--navy);color:#D9C9FF;border-radius:999px;padding:.55rem .9rem}
.about-body h2{font-size:var(--fs-h2);letter-spacing:-.04em}
.fact{border:1px solid var(--line);background:var(--card);border-color:#e0dbd2;border-radius:14px;padding:1rem 1.1rem}

/* CTA final : point de conversion */
.cta-box{background:var(--navy);border:1px solid #22334e;border-radius:26px;padding:clamp(2.2rem,6vw,4.5rem);box-shadow:0 28px 60px -34px rgba(11,20,36,.65)}
.cta-box h2{color:#fffdf8;font-size:var(--fs-h2)}
.cta-box p{color:#b6c0ce;max-width:52ch}
.cta-box .star{color:#7048D8}
.cta-box .btn-ghost{border-color:rgba(255,255,255,.25);color:#fffdf8}
.cta-box .btn-ghost:hover{background:rgba(255,255,255,.08);border-color:#7048D8}

/* Footer */

.site-footer .dock-mono{background:rgba(112,72,216,.08)}
.site-footer .footer-col h4{color:#D9C9FF}

@media (max-width:1023px){
  body.has-dock{padding-left:0}
  .dock{width:auto;background:rgba(11,20,36,.97);backdrop-filter:blur(14px);box-shadow:0 -8px 30px rgba(11,20,36,.2)}
  .dock-item[aria-current="page"]{box-shadow:inset 0 3px 0 #8F72E5}
  body.has-dock .hero{padding-top:clamp(3.5rem,9vw,5rem)}
}
@media (max-width:719px){
  .container{width:min(100% - 2rem,1220px)}
  .section{padding:4.5rem 0}
  .hero-photo{border-radius:22px}
  .hero .figures{margin-top:2.2rem}
  .hero .figure{padding:.85rem .6rem}
  .hero .figure b{font-size:1.45rem}
  .section-head{margin-bottom:2.2rem}
  .cta-box{border-radius:20px}
}

/* ============================================================
   INTERACTIVE EDITORIAL LAYER — mouvement ciblé, jamais décoratif
   ============================================================ */
:root{
  --pointer-x:50vw;
  --pointer-y:20vh;
}

/* Progression de lecture : une seule ligne, presque invisible. */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:120;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,#7048D8,#D9C9FF,#EEE6FF);
  box-shadow:0 0 16px rgba(112,72,216,.55);
  pointer-events:none;
}

/* Texture et lumière du hero. */
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.2;z-index:-1;
  background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(135deg,rgba(0,0,0,.8),transparent 62%);
}
.hero-media::before{
  content:"";position:absolute;inset:-18px -18px 18px 18px;border:1px solid rgba(112,72,216,.28);
  border-radius:34px;transform:rotate(3deg);pointer-events:none;transition:transform .7s var(--ease),border-color .7s var(--ease);
}
.hero-media:hover::before{transform:rotate(-2deg) translate(4px,-3px);border-color:rgba(112,72,216,.65)}

/* Les cartes gagnent en relief seulement lorsque l’utilisateur les explore. */
.card-hover,.hero-photo{
  --rx:0deg;--ry:0deg;
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style:preserve-3d;
}
.card-hover.is-tilting,.hero-photo.is-tilting{
  transition:transform .12s ease-out,box-shadow .28s var(--ease),border-color .28s var(--ease);
}
.card-hover:not(.is-tilting),.hero-photo:not(.is-tilting){transition:transform .55s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease)}
.card-hover:hover .p-media,.card-hover:hover .r-media,.card-hover:hover .a-media{filter:saturate(1.06)}
.card-hover:hover h3{color:#4B2A9F}

/* Spotlight desktop : réduit l’impression de page statique sans distraire. */
.cursor-spotlight{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .4s ease;
  background:radial-gradient(360px circle at var(--pointer-x) var(--pointer-y),rgba(112,72,216,.065),transparent 72%);
}
.dock,.dock-sheet{z-index:90}

/* Entrée initiale plus narrative : le contenu arrive par petits groupes. */
.motion-ready .hero-body > *{animation:editorialIn .8s var(--ease) both;}
.motion-ready .hero-body > :nth-child(1){animation-delay:.08s}
.motion-ready .hero-body > :nth-child(2){animation-delay:.16s}
.motion-ready .hero-body > :nth-child(3){animation-delay:.24s}
.motion-ready .hero-body > :nth-child(4){animation-delay:.32s}
.motion-ready .hero-body > :nth-child(5){animation-delay:.4s}
.motion-ready .hero-media{animation:editorialIn .9s .22s var(--ease) both}
.motion-ready .figures{animation:editorialIn .8s .48s var(--ease) both}
@keyframes editorialIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* États focus/hover plus tactiles sur les commandes importantes. */
.btn,.c-arrow,.f-btn,.dock-item{will-change:transform}
.btn:active,.c-arrow:active,.f-btn:active{transform:translateY(1px) scale(.98)}

@media (max-width:1023px){
  .cursor-spotlight{display:none}
  .hero-media::before{inset:-10px -10px 10px 10px}
}
@media (prefers-reduced-motion:reduce){
  .scroll-progress{display:none}
  .hero::after,.hero-media::before,.cursor-spotlight{display:none}
  .motion-ready .hero-body > *, .motion-ready .hero-media, .motion-ready .figures{animation:none}
  .card-hover,.hero-photo{transform:none!important;transition:none!important}
}

/* ============================================================
   DIGICRAFT — LAVENDER PRODUCT DIRECTION
   Hero clair, photo détourée en buste, palette violette inspirée
   de la référence visuelle fournie par Koffa.
   ============================================================ */
:root{
  --lav-bg:#f8f6ff;
  --lav-soft:#f0ebff;
  --lav-panel:#ffffff;
  --lav:#7048d8;
  --lav-dark:#4b2a9f;
  --lav-line:#e7defb;
  --lav-text:#171522;
  --lav-muted:#716b80;
}

body{background:var(--lav-bg);color:var(--lav-text)}
.dock{background:#fff;border-right:1px solid var(--lav-line);box-shadow:8px 0 30px rgba(76,43,159,.06)}
.dock-brand{border-bottom-color:var(--lav-line)}
.dock-mono{flex:none;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);font-size:var(--fs-body);font-weight:600;letter-spacing:.02em;border:1.5px solid var(--gold);width:48px;height:48px;background:var(--lav-soft);border-color:#cbb8fa;color:var(--lav-dark)}
.dock-brand-sub,.dock-item{color:var(--lav-muted)}
.dock-item:hover{background:var(--lav-soft);color:var(--lav-dark)}
.dock-item[aria-current="page"]{background:var(--lav-soft);color:var(--lav-dark);box-shadow:inset 3px 0 0 var(--lav)}
.dock-foot{border-top-color:var(--lav-line)}
.dock-lang{display:inline-flex;border:1px solid rgba(242,241,240,.28);border-radius:999px;overflow:hidden;border-color:#d9cdf5}
.lang-btn{background:none;border:0;cursor:pointer;font:600 var(--fs-xs) var(--font-body);letter-spacing:.08em;line-height:1;padding:.34rem .58rem;transition:background .2s var(--ease),color .2s var(--ease);color:var(--lav-muted)}
.lang-btn:hover{color:var(--lav-dark)}
.lang-btn[aria-pressed="true"]{background:var(--lav);color:#fff}

.hero{position:relative;overflow:hidden;isolation:isolate;background:var(--lav-bg);color:var(--lav-text);padding:clamp(4rem,8vw,7rem) 0 clamp(3.5rem,6vw,5rem)}
.hero::before{
  background:radial-gradient(600px 460px at 78% 18%,rgba(210,192,255,.6),transparent 68%),radial-gradient(520px 380px at 5% 100%,rgba(235,226,255,.9),transparent 72%);
}
.hero::after{background-image:linear-gradient(rgba(112,72,216,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(112,72,216,.045) 1px,transparent 1px);opacity:.45}
.hero-grid{position:relative;display:grid;align-items:center;grid-template-columns:minmax(0,1fr) minmax(360px,.82fr);gap:clamp(2rem,5vw,5.5rem)}
.hero-body .eyebrow{color:var(--lav-dark)}
.hero-body .eyebrow::before{background:var(--lav)}
.hero h1{color:var(--lav-text);font-size:var(--fs-h1);max-width:10ch}
.hero-role{font-weight:600;margin-bottom:1.15rem;font-size:var(--fs-lead);letter-spacing:.01em;color:var(--lav-dark)}
.hero-slogan{font-family:var(--font-display);line-height:1.35;margin-bottom:.95rem;font-size:clamp(1.35rem,2.4vw,1.9rem);max-width:25ch;color:var(--lav);font-style:normal;font-weight:650}
.hero-promesse{max-width:52ch;font-size:var(--fs-body);line-height:1.75;color:var(--lav-muted)}
.hero .btn-ghost{border-color:#d7c9f6;color:var(--lav-dark)}
.hero .btn-ghost:hover{background:var(--lav-soft);border-color:var(--lav)}
.hero .btn-gold{background:var(--lav);color:#fff;box-shadow:0 16px 32px -14px rgba(112,72,216,.7)}
.hero .btn-gold:hover{background:var(--lav-dark);color:#fff}

.hero-media{position:relative;min-height:430px;display:grid;place-items:end center}
.hero-media::after{content:"";position:absolute;z-index:-1;width:min(100%,520px);height:82%;right:0;bottom:4%;border-radius:48% 52% 22% 28%;background:linear-gradient(145deg,#eee6ff,#d8c7ff);transform:rotate(-5deg)}
.hero-media::before{inset:10% 2% 2% 8%;border-color:rgba(112,72,216,.22);border-radius:48% 52% 26% 20%;transform:rotate(4deg)}
.hero-photo{position:relative;margin:0;width:min(100%,500px);height:auto;aspect-ratio:1/1;background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible;transform:none!important}
.hero-photo img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 24px 24px rgba(76,43,159,.16))}
.hero-photo::after{display:none}
.hero-badge{position:absolute;display:inline-flex;align-items:center;gap:.4rem;width:max-content;max-width:calc(100% - 2rem);border-radius:999px;font-weight:600;letter-spacing:.01em;z-index:1;font-size:var(--fs-xs);padding:.65rem 1rem;left:auto;right:0;bottom:8%;background:#fff;color:var(--lav-dark);border:1px solid var(--lav-line);box-shadow:0 12px 30px rgba(76,43,159,.12)}
.hero .figure{background:rgba(255,255,255,.82);border-color:var(--lav-line);box-shadow:0 10px 28px rgba(76,43,159,.07)}
.hero .figure b{color:var(--lav)}
.hero .figure span{color:var(--lav-muted)}

.band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1.15rem 0;overflow:hidden;background:#fff;border-color:var(--lav-line)}
.band-track span{color:var(--lav-muted)}
.band-track span::after{color:var(--lav)}
.section[style*="background:var(--bg-2)"]{background:var(--lav-soft) !important;border-color:var(--lav-line) !important}
.section-head h2{color:var(--lav-text)}
.eyebrow{display:inline-flex;align-items:center;gap:.65rem;font-weight:600;text-transform:uppercase;font-size:var(--fs-xs);letter-spacing:.2em;color:var(--lav-dark)}
.eyebrow::before{background:var(--lav)}
.card{background:var(--lav-panel);border-color:var(--lav-line);box-shadow:0 8px 24px rgba(76,43,159,.055)}
.card-hover:hover{border-color:#cbb8fa;box-shadow:0 24px 50px -24px rgba(76,43,159,.25)}
.xp-card .xp-ico{background:var(--lav-soft);border-color:#d9cafa;color:var(--lav-dark)}
.stack-mono{display:block;font-family:var(--font-mono);font-size:var(--fs-xs);line-height:1.6;border:1px dashed var(--line);border-radius:8px;padding:.5rem .7rem;word-break:break-word;background:var(--lav-soft);border-color:var(--lav-line);color:var(--lav-dark)}

/* ---------- Badges de stack (Phase 1 — dictionnaire d'outils) ----------
   Rendu harmonisé fiche étude de cas ↔ cartes projets (accueil, grille) :
   pastille lavande, icône 15px + nom depuis TOOLS_REGISTRY (js/projects.js).
   Outil non répertorié → badge textuel à bordure pointillée (repli propre). */
.stack-badges{display:flex;flex-wrap:wrap;gap:.42rem}
.p-card .stack-badges{margin-top:auto}      /* ancrage bas de carte, comme l'ancienne ligne mono */
.stack-badge{display:inline-flex;align-items:center;gap:.42rem;max-width:100%;font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:600;line-height:1.25;color:var(--lav-dark);background:var(--lav-soft);border:1px solid var(--lav-line);border-radius:999px;padding:.34rem .68rem}
.stack-badge img{display:block;width:15px;height:15px;flex:none;object-fit:contain}
.stack-badge.is-unknown{border-style:dashed}

.cta-box{background:linear-gradient(135deg,var(--lav-dark),var(--lav));border-color:#8f72e5;box-shadow:0 28px 60px -34px rgba(76,43,159,.55)}
.site-footer{padding:4rem 0 2rem;margin-top:2rem;color:#CFC9C2;border-top:1px solid #1c2b40;background:#21163f;border-top-color:#39266c}
.site-footer .footer-col h4{color:#d9c9ff}

@media (max-width:1023px){
  .dock{background:rgba(255,255,255,.95)}
  .dock-item[aria-current="page"]{box-shadow:inset 0 3px 0 var(--lav)}
  .hero-grid{grid-template-columns:1fr}
  .hero-body{max-width:720px;margin-inline:auto;text-align:center}
  .hero-body .eyebrow::before{display:none}
  .hero-slogan,.hero-promesse{margin-inline:auto}
  .hero-cta{justify-content:center}
  .hero-media{margin-inline:auto;width:100%;max-width:500px;margin:0 auto}
}
@media (max-width:719px){
  .hero{padding-top:3.5rem}
  .hero h1{font-size:clamp(2.8rem,14vw,4.2rem)}
  .hero-media{min-height:350px}
  .hero-photo{width:min(100%,390px)}
  .hero-badge{right:2%;bottom:5%;}
}

/* ---------- Carousel crossfade : le prochain élément prend la place du précédent ---------- */
.carousel .p-card,
.carousel .r-card,
.carousel .a-card,
.carousel .skel{
  opacity:1;
  transition:opacity .28s ease, border-color .28s var(--ease), box-shadow .28s var(--ease);
}
@media (prefers-reduced-motion:reduce){
  .carousel .p-card,
  .carousel .r-card,
  .carousel .a-card,
  .carousel .skel{opacity:1!important;transition:none}
}

/* Une carte estompée redevient nette dès que l’utilisateur la cible. */
@media (hover:hover) and (pointer:fine){
  .carousel .p-card:hover,
  .carousel .r-card:hover,
  .carousel .a-card:hover,
  .carousel .skel:hover,
  .carousel .p-card:focus-within,
  .carousel .r-card:focus-within,
  .carousel .a-card:focus-within,
  .carousel .skel:focus-within{
    opacity:1!important;
  }
}

/* ---------- Carrousel Expertise de l'accueil ---------- */
.carousel .xp-card{flex:0 0 84%;scroll-snap-align:start}
@media (min-width:720px){.carousel .xp-card{flex-basis:46%}}
@media (min-width:1100px){.carousel .xp-card{flex-basis:calc((100% - 2.5rem)/3)}}
.carousel .xp-card{opacity:1;transition:opacity .28s ease, border-color .28s var(--ease), box-shadow .28s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .carousel .xp-card:hover,
  .carousel .xp-card:focus-within{opacity:1!important}
}
@media (prefers-reduced-motion:reduce){.carousel .xp-card{opacity:1!important;transition:none}}

/* ---------- Bande outils : logos + noms ---------- */
.band[aria-label]{background:#fff;border-color:var(--lav-line);padding:1.25rem 0}
.band-track{align-items:center;gap:.7rem 2rem}
.band-track .tool-pill{
  display:inline-flex;align-items:center;gap:.62rem;
  min-height:34px;padding:.35rem .8rem;border:1px solid transparent;border-radius:999px;
  color:var(--lav-muted);font-size:var(--fs-xs);font-weight:700;letter-spacing:.02em;
  white-space:nowrap;transition:color .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)
}
.band-track .tool-pill::after{display:none}
.tool-pill img{width:22px;height:22px;object-fit:contain;opacity:.66;filter:grayscale(1);transition:opacity .25s var(--ease),filter .25s var(--ease),transform .25s var(--ease)}
.tool-mark{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;font-size:var(--fs-xs);font-weight:800;line-height:1;color:#fff;opacity:.68;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.tool-mark-canva{background:linear-gradient(135deg,#7048d8,#d9c9ff);font-family:var(--font-display);font-style:italic}
.tool-mark-manus{background:var(--lav-dark);font-family:var(--font-display)}
.band-track .tool-pill:hover{color:var(--lav-dark);background:var(--lav-soft);border-color:var(--lav-line);transform:translateY(-2px)}
.band-track .tool-pill:hover img{opacity:1;filter:grayscale(0);transform:scale(1.06)}
.band-track .tool-pill:hover .tool-mark{opacity:1;transform:scale(1.06)}
@media (max-width:719px){
  .band[aria-label]{padding:.85rem 0}
  .band-track{gap:.35rem .65rem}
  .band-track .tool-pill{padding:.28rem .6rem;gap:.45rem;}
  .tool-pill img,.tool-mark{width:20px;height:20px}
}

/* ---------- Défilement infini de la bande outils ---------- */
.band[aria-label] .band-track{
  width:max-content;justify-content:flex-start;flex-wrap:nowrap;gap:0;
  animation:toolsMarquee 38s linear infinite;
}
.band-set{display:flex;align-items:center;gap:.7rem 2rem;padding-right:2rem;flex:none}
@keyframes toolsMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.band[aria-label]:hover .band-track{animation-play-state:paused}
@media (max-width:719px){
  .band[aria-label] .band-track{animation-duration:30s}
  .band-set{gap:.35rem .65rem;padding-right:.65rem}
}
@media (prefers-reduced-motion:reduce){
  .band[aria-label] .band-track{animation:none;transform:none}
  .band-set[aria-hidden="true"]{display:none}
}

/* ============================================================
   CASE STUDY BENTO — inspiration Google Stitch
   Palette : canvas #F7F8FD · brand #6D28D9 · brand-soft #EDE9FE
   Les cartes restent alimentées exclusivement par le CMS projet.
   ============================================================ */
body.case-study-page{
  background:#F7F8FD;
  color:#1E293B;
  background-image:
    radial-gradient(700px 420px at 100% 0%,rgba(235,232,253,.7),transparent 70%),
    radial-gradient(560px 460px at 0% 100%,rgba(243,238,255,.62),transparent 72%);
}
.case-study-page .page-hero{
  background:transparent;
  border-bottom:0;
  padding-bottom:clamp(1.5rem,3vw,2.6rem);
}
.case-study-page .page-hero .container{max-width:1180px}
.case-study-page .page-hero h1{
  color:#0F172A;
  font-size:var(--fs-h1);
  letter-spacing:-.055em;
  line-height:1.02;
  margin:.35rem 0 .6rem;
}
/* Description narrative (V1.5) : le texte du projet se lit après la
   vidéo, aligné sur la largeur du média pour un flux de lecture continu
   (Titre → Badges → Bouton → Vidéo → Description → Triptyque). */
.case-study-page .cs-longdesc{
  max-width:880px;
  margin:0 auto clamp(2.2rem,4vw,3.2rem);
}
.case-study-page .cs-longdesc p{
  margin:0;max-width:70ch;
  color:#475569;
  font-size:var(--fs-lead);
  line-height:1.75;
}
.case-study-page .page-extra{
  display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;
  margin-top:.9rem;   /* V1.5 : badges directement sous le titre (hero épuré) */
}
.case-study-page .page-extra .stack-mono{
  background:rgba(255,255,255,.72);
  border:1px solid #E2E8F0;
  color:#334155;
  border-radius:999px;
  padding:.55rem .85rem;
}
.case-study-page .page-extra .badge-statut{
  background:rgba(255,255,255,.82);
  border-color:#DDD6FE;
  color:#475569;
}
.case-study-page .cs-actions{margin-top:1.15rem}
.case-study-page .cs-actions .btn-gold{
  background:#6D28D9;color:#fff;border-color:#6D28D9;
  box-shadow:0 10px 22px rgba(109,40,217,.16);
}
.case-study-page .cs-actions .btn-gold:hover{background:#5B21B6;border-color:#5B21B6}
/* Triptyque horizontal (Phase 3) : Problème → Solution → Résultats côte à
   côte. Flexbox élastique : une carte masquée (champ Sheet vide) laisse
   les autres se partager la largeur — jamais de colonne orpheline.
   V1.4 (2026-10-27) blindage anti-écrasement : alignement explicite et
   contenu des cartes non compressible (voir règle flex-shrink:0 ci-dessous). */
.case-study-page .cs-triptych{
  max-width:1180px;
  margin:0 auto;
  display:flex;
  align-items:stretch;
  gap:1.25rem;
}
.case-study-page .cs-triptych>.cs-card{flex:1 1 0}
.case-study-page .cs-card{
  min-width:0;
  display:flex;flex-direction:column;
  padding:1.55rem 1.6rem 1.25rem;
  border:1px solid rgba(226,232,240,.95);
  border-radius:20px;
  background:rgba(255,255,255,.86);
  box-shadow:0 10px 30px -10px rgba(109,40,217,.08),0 1px 2px rgba(15,23,42,.03);
  backdrop-filter:blur(16px);
  overflow:hidden;
}
.case-study-page .cs-card:hover{box-shadow:0 22px 42px -16px rgba(109,40,217,.15),0 4px 12px rgba(15,23,42,.04)}
.case-study-page .cs-card-head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-bottom:1.25rem;
}
.case-study-page .cs-card-label{display:flex;align-items:center;gap:.65rem;min-width:0;color:#0F172A;font-size:var(--fs-xs);font-weight:700;letter-spacing:.035em;text-transform:uppercase}
.case-study-page .cs-index{
  display:inline-grid;place-items:center;flex:none;
  min-width:2.4rem;height:1.6rem;padding:0 .45rem;
  border-radius:7px;background:#F1F5F9;color:#475569;
  font-size:var(--fs-xs);letter-spacing:.08em;
}
.case-study-page .cs-card-kicker{flex:none;color:#94A3B8;font-size:var(--fs-xs);font-weight:600;letter-spacing:.04em}
.case-study-page .cs-card h2{margin:0 0 .85rem;color:#0F172A;font-size:var(--fs-h3);letter-spacing:-.03em;line-height:1.16}
.case-study-page .cs-card-text{margin:0;color:#475569;font-size:var(--fs-body);line-height:1.75;white-space:pre-line;overflow-wrap:break-word}
/* V1.4 (2026-10-27) — correctif « texte écrasé » : dans un conteneur flex
   en colonne, les enfants ont flex-shrink:1 par défaut : si une contrainte
   de hauteur apparaît (héritée, moteur, zoom), le bloc de texte — le plus
   grand enfant — est le premier comprimé vers 0 sous overflow:hidden, ce
   qui donne exactement « en-têtes visibles, corps replié ». En interdisant
   la compression verticale de TOUS les enfants de contenu, le texte pousse
   la carte au lieu de s'effacer ; la carte grandit avec son contenu. */
.case-study-page .cs-card>.cs-card-head,
.case-study-page .cs-card>h2,
.case-study-page .cs-card>.cs-card-text,
.case-study-page .cs-card>.cs-card-foot{flex-shrink:0}
/* Média hero (Phase 2) : démo vidéo remontée sous l'en-tête, repli image.
   Bloc immersif épuré — pas d'habillage bento. Vidéo 16:9 (ou 9:16
   centrée pour le format vertical) ; image en ratio naturel (aucun
   rognage : les visuels sont souvent des schémas). */
.case-study-page .cs-hero-media{
  max-width:880px;margin:clamp(2rem,4vw,3rem) auto 0;
  border:1px solid rgba(226,232,240,.95);border-radius:20px;overflow:hidden;
  background:rgba(255,255,255,.86);
  box-shadow:0 10px 30px -10px rgba(109,40,217,.08),0 1px 2px rgba(15,23,42,.03);
}
.case-study-page .cs-hero-media[hidden]{display:none!important}
.case-study-page .cs-hero-media .cs-video-frame{
  display:grid;place-items:center;width:100%;aspect-ratio:16/9;min-height:230px;
  background:linear-gradient(135deg,#F1F5F9,#EDE9FE);
}
.case-study-page .cs-hero-media .cs-video-frame iframe{display:block;width:100%;height:100%;min-height:0;border:0}
.case-study-page .cs-hero-media.is-vertical .cs-video-frame{max-width:360px;width:100%;aspect-ratio:9/16;min-height:0;margin-inline:auto}
.case-study-page .cs-hero-media .cs-media{
  width:100%;max-width:none;margin:0;border:0;border-radius:0;box-shadow:none;aspect-ratio:auto;
  background:linear-gradient(135deg,#F1F5F9,#EDE9FE);
}
.case-study-page .cs-hero-media .cs-media img{height:auto;object-fit:contain}
.case-study-page .cs-video-poster{position:relative;display:block;width:100%;height:100%;min-height:230px;padding:0;border:0;cursor:pointer;background:#EDE9FE}
.case-study-page .cs-video-poster img{display:block;width:100%;height:100%;object-fit:cover}
.case-study-page .cs-video-play{position:absolute;inset:50% auto auto 50%;display:grid;place-items:center;width:3.5rem;height:3.5rem;transform:translate(-50%,-50%);border-radius:50%;background:#6D28D9;color:#fff;font-size:1.15rem;box-shadow:0 10px 24px rgba(15,23,42,.22);transition:transform .2s ease,background .2s ease}
.case-study-page .cs-video-poster:hover .cs-video-play,.case-study-page .cs-video-poster:focus-visible .cs-video-play{transform:translate(-50%,-50%) scale(1.08);background:#5B21B6}
.case-study-page .cs-video-external{margin:auto}
.demo-pill{display:inline-flex;align-items:center;gap:.25rem;padding:.28rem .55rem;border:1px solid #DDD6FE;border-radius:999px;background:#F5F3FF;color:#6D28D9;font-size:var(--fs-xs);font-weight:700;white-space:nowrap}
.case-study-page .cs-card-foot{
  display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;
  margin-top:auto;padding-top:1rem;
  color:#94A3B8;font-size:var(--fs-xs);line-height:1.35;
}
.case-study-page .cs-foot-dot{width:7px;height:7px;border-radius:50%;background:#94A3B8;flex:none}
.case-study-page .cs-foot-dot-live{background:#10B981;box-shadow:0 0 0 4px rgba(16,185,129,.12)}
.case-study-page .cs-foot-mono{margin-left:auto;font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.12em;color:#A1A1AA}
/* Bandeau « Stack technique » (Phase 3) : pleine largeur sous le triptyque,
   langage visuel harmonisé avec les badges de stack (pilule lavande + mono). */
.case-study-page .cs-tech-strip{
  max-width:1180px;margin:1.25rem auto 0;padding:1.15rem 1.3rem;
  border:1px solid var(--lav-line,#EDE9FE);border-radius:20px;background:var(--lav-soft,#F8F7FF);
  display:flex;flex-direction:column;gap:.6rem;
}
.case-study-page .cs-tech-strip .cs-inline-label{
  display:inline-flex;align-self:flex-start;
  font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--lav-dark,#4B2A9F);background:#fff;border:1px solid var(--lav-line,#EDE9FE);
  border-radius:999px;padding:.32rem .7rem;
}
.case-study-page .cs-tech-strip p{margin:0;color:#475569;font-family:var(--font-mono);font-size:var(--fs-sm);line-height:1.7;white-space:pre-line;overflow-wrap:break-word}
.case-study-page .cta-box{max-width:1180px;margin-inline:auto!important;margin-top:4.5rem;border-color:#DDD6FE;background:linear-gradient(135deg,#F5F3FF,#fff)}
@media (max-width:1023px){
  .case-study-page .cs-triptych{flex-direction:column;gap:1rem}   /* 3 colonnes trop étroites entre 820 et 1024px */
  /* V1.4 (2026-10-27) — correctif « texte écrasé » (bug mobile) :
     `flex:1 1 0` (règle desktop, répartition en LARGEUR) devient
     destructeur en colonne : flex-basis 0 sur l'axe VERTICAL + overflow
    :hidden (qui annule min-height:auto → 0) écrase chaque carte à la
     hauteur de son seul en-tête, tout le contenu suivant étant rogné.
     En empilement mobile, la hauteur d'une carte doit redevenir celle
     de son contenu : flex:none (= 0 0 auto). */
  .case-study-page .cs-triptych>.cs-card{flex:none}
}
@media (max-width:820px){
  .case-study-page .cs-hero-media{margin-top:1.6rem}
  .case-study-page .cs-tech-strip{margin-top:1rem;padding:1rem 1.1rem}
}
@media (max-width:560px){
  .case-study-page .cs-card{padding:1.2rem 1.1rem 1rem;border-radius:16px}
  .case-study-page .cs-card-head{align-items:flex-start;flex-direction:column;gap:.55rem;margin-bottom:1rem}
  .case-study-page .cs-card-kicker{padding-left:3.05rem}
  .case-study-page .cs-card-text{line-height:1.65}
  .case-study-page .cs-foot-mono{margin-left:auto}
}

/* ---------- CTA études de cas : palette de la maquette restaurée ---------- */
.case-study-page .cta-box{
  background:linear-gradient(135deg,#4B2A9F 0%,#7048D8 100%);
  border-color:#8F72E5;
  box-shadow:0 28px 60px -34px rgba(76,43,159,.55);
}
.case-study-page .cta-box h2{color:#FFFDF8}
.case-study-page .cta-box p{color:#D9C9FF}
.case-study-page .cta-box .star{color:#D9C9FF}
.case-study-page .cta-box .btn-gold{background:#0B1424;color:#FFFDF8;border-color:#0B1424}
.case-study-page .cta-box .btn-gold:hover{background:#17243A;border-color:#17243A}
.case-study-page .cta-box .btn-ghost{border-color:rgba(255,255,255,.3);color:#FFFDF8}
.case-study-page .cta-box .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#D9C9FF;color:#FFFDF8}

/* ============================================================
   CARTES PROJETS — direction "feature cards"
   Visuel dominant, contenu éditorial compact et actions ancrées en bas.
   Le markup et les champs du CMS restent inchangés.
   ============================================================ */
.p-card{
  min-height:100%;
  border-radius:22px;
  background:#fffdfb;
  border:1px solid #e4dff0;
  box-shadow:0 16px 34px -24px rgba(49,38,91,.34);
  transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s var(--ease);
}
.p-card:hover{
  transform:translateY(-6px);
  border-color:#cbb8fa;
  box-shadow:0 24px 46px -24px rgba(70,49,137,.34);
}
.p-media{position:relative;overflow:hidden;aspect-ratio:1.28 / 1;background:#f0ebff;border-bottom:1px solid #ebe6f5}
.p-media img{
  object-fit:cover;
  transition:transform .55s var(--ease),filter .35s var(--ease);
}
.p-card:hover .p-media img{transform:scale(1.035);filter:saturate(1.04)}

.p-media .p-ph b{font-size:clamp(2.4rem,5vw,4rem);color:#4b2a9f}
.p-body{display:flex;flex-direction:column;flex:1;padding:1.35rem 1.35rem 1.25rem;gap:.72rem;background:#fffdfb}

.p-card .badge-statut{
  padding:.32rem .72rem;
  
  letter-spacing:.1em;
  box-shadow:none;
}
.p-card .p-cat{
  
  letter-spacing:.1em;
  color:#7b8190;
}
.p-title{letter-spacing:-.02em;font-size:var(--fs-h3);line-height:1.18}
.p-title a:hover{color:var(--gold-2)}
.p-desc{flex:1;font-size:var(--fs-body);line-height:1.58;min-height:4.45em}
.p-card .stack-mono{
  margin-top:auto;
  padding:.72rem .82rem;
  border:1px solid #e4dafa;
  border-radius:10px;
  background:#f0ebff;
  color:#4b2a9f;
  
  line-height:1.5;
}
.p-foot{
  padding-top:.7rem;
  border-top:1px solid #eeeaf5;
  gap:.7rem;
}
.p-foot .p-status{color:#7b8190}
.p-actions{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem}
.p-foot .link-arrow{color:#4b2a9f}
.p-foot .link-arrow:hover{color:#7048d8}
.p-card .btn-xs{padding:.58rem .9rem;}
@media (max-width:719px){
  .p-media{aspect-ratio:1.18 / 1}
  .p-body{padding:1.25rem 1.2rem 1.15rem}
  .p-desc{min-height:0}
}
@media (prefers-reduced-motion:reduce){
  .p-card,.p-media img{transition:none}
}

/* ============================================================
   SYSTÈME DE CARTES UNIFIÉ — style "Feature Ads"
   Même silhouette pour Expertise, Projets, Articles et Parcours.
   ============================================================ */
:root{
  --feature-surface:#fffdfb;
  --feature-line:#e4dff0;
  --feature-soft:#f0ebff;
  --feature-shadow:0 16px 34px -24px rgba(49,38,91,.34);
}
.p-card,.xp-card,.a-card,.parc-card{
  background:var(--feature-surface);
  border:1px solid var(--feature-line);
  border-radius:22px;
  box-shadow:var(--feature-shadow);
  overflow:hidden;
  transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s var(--ease);
}
.p-card:hover,.xp-card:hover,.a-card:hover,.parc-card:hover,
.p-card:focus-within,.xp-card:focus-within,.a-card:focus-within,.parc-card:focus-within{
  transform:translateY(-5px);
  border-color:#cbb8fa;
  box-shadow:0 24px 46px -24px rgba(70,49,137,.34);
}
.p-media,.a-media{
  aspect-ratio:1.32 / 1;
  background:var(--feature-soft);
  border-bottom:1px solid #ebe6f5;
}
.p-media img,.a-media img{object-fit:cover;transition:transform .55s var(--ease),filter .35s var(--ease)}
.p-card:hover .p-media img,.a-card:hover .a-media img{transform:scale(1.035);filter:saturate(1.04)}
.p-media .p-ph{background:linear-gradient(145deg,#f4f0ff 0%,#e8e0ff 100%)}
.xp-card{min-height:350px;padding:1.35rem 1.35rem 1.25rem;gap:.75rem}
.xp-card .xp-ico{
  width:54px;height:54px;border-radius:15px;
  background:var(--feature-soft);border:1px solid #d9cafa;color:#4b2a9f;
}
.xp-card .xp-ico img{border-radius:14px}
.xp-card .xp-title{line-height:1.18}
.xp-card .xp-desc{line-height:1.58}
.xp-card .xp-projects{margin-top:auto;border-top:1px solid #eeeaf5;padding-top:.8rem}
.a-card{display:flex;flex-direction:column;min-height:350px;padding:0;gap:0}
.a-card .a-media{margin:0}
.a-card .a-top{margin-top:0}
.a-body{display:flex;flex:1;flex-direction:column;gap:.85rem;padding:1.5rem 1.55rem 1.55rem}
.a-card h3{font-size:var(--fs-h3);line-height:1.2}
.a-card p{font-size:var(--fs-body);line-height:1.58}
.a-card .a-foot{margin-top:auto;border-top:1px solid #eeeaf5;padding-top:.75rem}
.parc-card{display:flex;flex-direction:column;min-height:285px;padding:1.35rem 1.35rem 1.25rem;gap:.55rem}
.parc-card .parc-titre{font-size:var(--fs-h3);line-height:1.18}
.parc-card .parc-desc{font-size:var(--fs-body);line-height:1.58}
.parc-card .parc-foot{margin-top:auto;border-top:1px solid #eeeaf5;padding-top:.75rem}
.p-card{min-height:510px}
.p-card .p-body{padding:1.35rem 1.35rem 1.25rem;gap:.72rem}

.p-card .stack-mono{margin-top:auto;background:var(--feature-soft);border:1px solid #e4dafa;border-radius:10px;color:#4b2a9f;padding:.72rem .82rem}
.p-card .p-foot{border-top:1px solid #eeeaf5;padding-top:.75rem}
@media (max-width:719px){
  .p-card,.xp-card,.a-card,.parc-card{border-radius:19px}
  .p-media,.a-media{aspect-ratio:1.2 / 1}
  .xp-card,.a-card,.parc-card{min-height:0}
  
  .p-card .p-body{padding-left:1.2rem;padding-right:1.2rem}
}
@media (prefers-reduced-motion:reduce){
  .p-card,.xp-card,.a-card,.parc-card,.p-media img,.a-media img{transition:none}
}

/* ============================================================
   PROJECT CARDS — inner visual container + dual-action footer
   ============================================================ */
.carousel .p-card{
  background:rgba(255,255,255,.88);
  border:1px solid rgba(203,184,250,.48);
  border-radius:22px;
  box-shadow:0 18px 42px -28px rgba(70,49,137,.38);
}
.carousel .p-media{
  aspect-ratio:1.25 / 1;
  padding:.9rem;
  background:#f8f9fa;
  border-bottom:0;
  overflow:hidden;
}
.carousel .p-media-inner{
  position:relative;
  width:100%;
  height:100%;
  min-height:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:1rem;
  border:1px solid rgba(224,218,238,.9);
  border-radius:16px;
  background:rgba(255,255,255,.86);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.carousel .p-media-inner img{
  position:relative;
  inset:auto;
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:10px;
  transform:none;
}
.carousel .p-card:hover .p-media-inner img{transform:scale(1.025)}
.carousel .p-media-inner .p-ph{
  position:relative;
  inset:auto;
  width:100%;
  height:100%;
  min-height:150px;
  border-radius:10px;
}
.carousel .p-card .p-body{padding:1.5rem 1.55rem 1.55rem;gap:.85rem}

.carousel .p-card .p-desc{min-height:4.7em}
.carousel .p-card .stack-mono{margin-top:auto;padding:.78rem .9rem;border-radius:10px}
.carousel .p-card .p-foot{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  margin-top:.1rem;
  padding-top:.85rem;
  border-top:1px solid #eeeaf5;
}
.carousel .p-card .p-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap;
  margin-left:auto;
}
.carousel .p-card .p-actions .link-arrow{white-space:nowrap}
.carousel .p-card .p-actions .btn-xs{white-space:nowrap;min-height:38px}
@media (max-width:719px){
  .carousel .p-media{padding:.7rem}
  .carousel .p-media-inner{padding:.75rem;border-radius:14px}
  .carousel .p-card .p-body{padding:1.35rem 1.25rem 1.35rem}
}
@media (max-width:560px){
  .carousel .p-card .p-foot{align-items:stretch;flex-direction:column;gap:.75rem}
  .carousel .p-card .p-actions{width:100%;justify-content:space-between;margin-left:0}
  .carousel .p-card .p-actions .btn-xs{flex:0 1 auto}
}

/* ---------- Ressources — même structure que les cartes projets ---------- */
.r-card{display:flex;flex-direction:column;overflow:hidden;background:rgba(255,255,255,.88);border:1px solid rgba(203,184,250,.48);border-radius:22px;box-shadow:0 18px 42px -28px rgba(70,49,137,.38);transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s var(--ease)}
.r-card:hover,.r-card:focus-within{
  transform:translateY(-5px);
  border-color:#cbb8fa;
  box-shadow:0 24px 46px -24px rgba(70,49,137,.34);
}
.r-card .r-media{
  aspect-ratio:1.25 / 1;
  padding:.9rem;
  background:#f8f9fa;
  border-bottom:0;
  overflow:hidden;
}
.r-media-inner{
  position:relative;
  width:100%;
  height:100%;
  min-height:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:1rem;
  border:1px solid rgba(224,218,238,.9);
  border-radius:16px;
  background:rgba(255,255,255,.86);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.r-media-inner img{
  position:relative;
  inset:auto;
  z-index:2;
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:10px;
  transition:transform .55s var(--ease),filter .35s var(--ease);
}
.r-card:hover .r-media-inner img{transform:scale(1.025);filter:saturate(1.04)}
.r-media-inner .r-cover{border-radius:10px}

.r-card .r-body{padding:1.5rem 1.55rem 1.55rem;gap:.85rem}
.r-card .r-type{margin-top:0}
.r-card .r-body h3{font-size:var(--fs-h3);line-height:1.18}
.r-card .r-desc{font-size:var(--fs-body);line-height:1.58;min-height:4.45em}
.r-card .r-foot{margin-top:auto;padding-top:.85rem;border-top:1px solid #eeeaf5}

/* ---------- Articles : même cadre visuel que les Ressources ---------- */
.a-card .a-media{
  position:relative;
  aspect-ratio:1.25 / 1;
  padding:.9rem;
  background:#f8f9fa;
  border-bottom:0;
  overflow:hidden;
}
.a-media-inner{
  position:relative;
  width:100%;
  height:100%;
  min-height:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:1rem;
  border:1px solid rgba(224,218,238,.9);
  border-radius:16px;
  background:rgba(255,255,255,.86);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.a-media-inner img{
  position:relative;
  inset:auto;
  z-index:2;
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:10px;
  transition:transform .55s var(--ease),filter .35s var(--ease);
}
.a-card:hover .a-media-inner img{transform:scale(1.025);filter:saturate(1.04)}
@media (max-width:719px){
  .r-card{border-radius:19px}
  .r-card .r-media{padding:.7rem;aspect-ratio:1.2 / 1}
  .r-media-inner{padding:.75rem;border-radius:14px}
  .r-card .r-body{padding:1.35rem 1.25rem 1.35rem}
  .a-card .a-media{padding:.7rem;aspect-ratio:1.2 / 1}
  .a-media-inner{padding:.75rem;border-radius:14px}
  .a-body{padding:1.35rem 1.25rem 1.35rem}
}
@media (prefers-reduced-motion:reduce){
  .r-card,.r-media-inner img,.a-card,.a-media-inner img{transition:none}
}

/* ---------- Projets : même cadre visuel que les Ressources ---------- */
.p-card{
  background:rgba(255,255,255,.88);
  border:1px solid rgba(203,184,250,.48);
  border-radius:22px;
  box-shadow:0 18px 42px -28px rgba(70,49,137,.38);
}
.p-card:hover,.p-card:focus-within{
  transform:translateY(-5px);
  border-color:#cbb8fa;
  box-shadow:0 24px 46px -24px rgba(70,49,137,.34);
}
.p-card .p-media{
  aspect-ratio:1.25 / 1;
  padding:.9rem;
  background:#f8f9fa;
  border-bottom:0;
  overflow:hidden;
}
.p-media-inner{
  position:relative;
  width:100%;
  height:100%;
  min-height:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:1rem;
  border:1px solid rgba(224,218,238,.9);
  border-radius:16px;
  background:rgba(255,255,255,.86);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.p-media-inner img,.p-media-inner .p-ph{
  position:relative;
  inset:auto;
  z-index:2;
  width:100%;
  height:100%;
  min-height:0;
  border-radius:10px;
}
.p-media-inner img{object-fit:contain;transition:transform .55s var(--ease),filter .35s var(--ease)}
.p-media-inner .p-ph{display:flex;align-items:center;justify-content:center;flex-direction:column}
.p-card:hover .p-media-inner img{transform:scale(1.025);filter:saturate(1.04)}
.p-card .p-body{padding:1.5rem 1.55rem 1.55rem;gap:.85rem}

.p-card .p-title{line-height:1.18}
.p-card .p-desc{line-height:1.58;min-height:4.45em}
.p-card .stack-mono{margin-top:auto;padding:.72rem .82rem;border-radius:10px}
.p-card .p-foot{margin-top:auto;padding-top:.85rem;border-top:1px solid #eeeaf5}
@media (max-width:719px){
  .p-card .p-media{padding:.7rem;aspect-ratio:1.2 / 1}
  .p-media-inner{padding:.75rem;border-radius:14px}
  .p-card .p-body{padding:1.35rem 1.25rem 1.35rem}
}
@media (prefers-reduced-motion:reduce){
  .p-card,.p-media-inner img{transition:none}
}

/* ---------- Micro-interactions des cartes ---------- */

.p-card::before,.xp-card::before,.r-card::before,.a-card::before,.parc-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.42) 48%,transparent 76%);
  transform:translateX(-120%);
  transition:transform .72s cubic-bezier(.22,.61,.36,1);
}
.p-card > *,.xp-card > *,.r-card > *,.a-card > *,.parc-card > *{position:relative;z-index:1}
.p-card:hover,.xp-card:hover,.r-card:hover,.a-card:hover,.parc-card:hover,
.p-card:focus-within,.xp-card:focus-within,.r-card:focus-within,.a-card:focus-within,.parc-card:focus-within{
  transform:translateY(-7px) scale(1.012);
  box-shadow:0 28px 52px -26px rgba(70,49,137,.4);
}
.p-card:hover::before,.xp-card:hover::before,.r-card:hover::before,.a-card:hover::before,.parc-card:hover::before,
.p-card:focus-within::before,.xp-card:focus-within::before,.r-card:focus-within::before,.a-card:focus-within::before,.parc-card:focus-within::before{
  transform:translateX(120%);
}
@media (prefers-reduced-motion:reduce){
  
  .p-card::before,.xp-card::before,.r-card::before,.a-card::before,.parc-card::before{display:none}
  .p-card:hover,.xp-card:hover,.r-card:hover,.a-card:hover,.parc-card:hover,
  .p-card:focus-within,.xp-card:focus-within,.r-card:focus-within,.a-card:focus-within,.parc-card:focus-within{
    transform:none;
  }
}

/* ---------- Performance 60fps : cartes et ombres ---------- */
.p-card,.xp-card,.r-card,.a-card,.parc-card{position:relative;isolation:isolate;contain:layout;will-change:auto;box-shadow:var(--feature-shadow,0 16px 34px -24px rgba(49,38,91,.34));transition:transform .36s cubic-bezier(.22,.61,.36,1),border-color .24s ease}
/* L’ombre renforcée passe par l’opacité d’une couche dédiée,
   plutôt que par une interpolation continue de box-shadow. */
.p-card::after,.xp-card::after,.r-card::after,.a-card::after,.parc-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:0 26px 48px -28px rgba(70,49,137,.42);
  opacity:0;
  transition:opacity .24s ease;
}
.p-card:hover,.xp-card:hover,.r-card:hover,.a-card:hover,.parc-card:hover,
.p-card:focus-within,.xp-card:focus-within,.r-card:focus-within,.a-card:focus-within,.parc-card:focus-within{
  will-change:transform;
  box-shadow:var(--feature-shadow,0 16px 34px -24px rgba(49,38,91,.34));
}
.p-card:hover::after,.xp-card:hover::after,.r-card:hover::after,.a-card:hover::after,.parc-card:hover::after,
.p-card:focus-within::after,.xp-card:focus-within::after,.r-card:focus-within::after,.a-card:focus-within::after,.parc-card:focus-within::after{
  opacity:1;
}
/* Les images lazy gardent leur ratio réservé par le conteneur : pas de CLS. */
.p-media img,.a-media img,.r-media-inner img,.parc-badge{
  backface-visibility:hidden;
}
@media (prefers-reduced-motion:reduce){
  .p-card,.xp-card,.r-card,.a-card,.parc-card{will-change:auto;transition:none}
  .p-card::after,.xp-card::after,.r-card::after,.a-card::after,.parc-card::after{display:none}
}

/* Chantier 4 — pages légales, même système lavande/violet */
.legal-page .container { max-width: 980px; }
.legal-page .lead { max-width: 760px; }
.legal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.legal-stack { display: grid; gap: 1rem; margin-top: 2rem; }
.legal-card { background: rgba(255,255,255,.84); border: 1px solid var(--line, #E7DEFB); border-radius: 22px; padding: clamp(1.25rem, 3vw, 2rem); box-shadow: 0 16px 40px rgba(75,42,159,.08); }
.legal-card h2 { margin: 0 0 .75rem; font-size: var(--fs-h3); }
.legal-card p { margin: 0; color: var(--ink-2, #716B80); line-height: 1.75; white-space: pre-line; }
.legal-card a { color: var(--violet, #7048D8); font-weight: 600; }
.legal-note { margin-top: 1rem !important; font-size: var(--fs-sm); }

@media (max-width: 720px) { .legal-grid { grid-template-columns: 1fr; } .legal-card { border-radius: 18px; } }

/* ---------- Google reviews + testimonials (lot 5) ---------- */
.gr-google-badge{display:inline-flex;align-items:center;gap:.55rem;width:max-content;margin-top:1rem;padding:.55rem .85rem;border:1px solid var(--gold-line);border-radius:999px;background:var(--gold-soft);color:var(--gold-2);font-size:var(--fs-xs);font-weight:600;transition:transform .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease)}
.gr-google-badge:hover{transform:translateY(-2px);background:rgba(112,72,216,.16);border-color:var(--gold)}
.gr-stars{color:#F4B400;letter-spacing:.08em;font-size:var(--fs-xs);line-height:1}
.site-footer .gr-google-badge{margin-top:0;border-color:rgba(217,201,255,.45);background:rgba(217,201,255,.10);color:#F2F1F0}
.site-footer .gr-google-badge:hover{background:rgba(217,201,255,.18);border-color:#D9C9FF}
.gr-testimonials{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gr-testimonials-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:720px){.gr-testimonials-grid{grid-template-columns:repeat(3,1fr)}}
.gr-testimonial-card{display:flex;flex-direction:column;gap:.85rem;padding:1.45rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow-sm)}
.gr-testimonial-text{font-family:var(--font-display);font-size:var(--fs-lead);line-height:1.5;color:var(--ink)}
.gr-testimonial-meta{margin-top:auto;color:var(--ink-2);font-size:var(--fs-sm)}
.gr-testimonial-meta strong{display:block;color:var(--ink);font-size:var(--fs-sm)}
.gr-testimonial-source{font-size:var(--fs-xs);color:var(--gold-2);font-weight:600}

/* ---------- Pré-rendu SEO (affiché uniquement sans JavaScript) ---------- */
.prerender-content{display:block;margin-top:1.5rem}
.prerender-grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:1rem}
.prerender-card{padding:1.35rem}
.prerender-card h3{margin:.25rem 0 .55rem}
.prerender-card p{margin:0 0 .35rem}
.prerender-card .prerender-meta{font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--gold-2)}
.prerender-card a{color:var(--gold-2);font-weight:600}
@media (min-width:720px){.prerender-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Disponibilité du dock : contraste AA sur le fond lavande, sans modifier le gabarit. */
.dock-avail{display:flex;align-items:center;gap:.4rem;font-size:var(--fs-xs);line-height:1.35;text-align:center;color:var(--ink-2)}

/* ---------- Boîte à outils CMS de la page À propos ---------- */
.outils-groups{display:grid;gap:1.25rem;margin-top:1.4rem}
.outils-group{padding:1rem 0 0;border-top:1px solid var(--lav-line)}
.outils-category{margin:0 0 .7rem;color:var(--lav-dark);font-size:var(--fs-xs);font-weight:750;letter-spacing:.08em;text-transform:uppercase}
.outils-list{display:flex;flex-wrap:wrap;gap:.55rem;list-style:none;margin:0;padding:0}
.outils-pill{display:inline-flex;align-items:center;gap:.55rem;min-height:42px;padding:.45rem .78rem;border:1px solid var(--lav-line);border-radius:999px;background:rgba(255,255,255,.78);color:var(--lav-text);font-size:var(--fs-sm);font-weight:650;box-shadow:0 6px 18px rgba(76,43,159,.045)}
.outils-logo-wrap{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:7px;background:var(--lav-soft);overflow:hidden}
.outils-logo{display:block;width:22px;height:22px;object-fit:contain}
.outils-empty{margin:0;color:var(--lav-muted)}
@media (max-width:719px){
  .outils-groups{gap:1rem}
  .outils-group{padding-top:.85rem}
  .outils-list{gap:.45rem}
  .outils-pill{min-height:40px;padding:.4rem .65rem;}
}

/* ---------- Teinte adaptative subtile des cadres image ---------- */

.r-media-inner::before,.a-media-inner::before,.p-media-inner::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:var(--media-adapt-image,none);
  background-position:center;
  background-size:cover;
  filter:blur(22px) saturate(1.12);
  opacity:.12;
  transform:scale(1.08);
}
@media (prefers-reduced-motion:reduce){
  .r-media-inner::before,.a-media-inner::before,.p-media-inner::before{filter:blur(18px);opacity:.1}
}

/* ---------- Cadre média unifié : Ressources = Articles = Projets ---------- */
.r-card .r-media,.a-card .a-media,.p-card .p-media{
  position:relative;
  aspect-ratio:1.25 / 1;
  padding:.9rem;
  background:#f8f9fa;
  border:0;
  overflow:hidden;
}
.r-media-inner,.a-media-inner,.p-media-inner{isolation:isolate;position:relative;width:100%;height:100%;min-height:0;display:grid;place-items:center;overflow:hidden;padding:1rem;border:1px solid rgba(224,218,238,.9);border-radius:16px;background:rgba(255,255,255,.86);box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.r-media-inner img,.a-media-inner img,.p-media-inner img,.r-media-inner .r-cover,.p-media-inner .p-ph{
  border-radius:10px;
}
.r-media-inner img,.a-media-inner img,.p-media-inner img{
  position:relative;
  inset:auto;
  z-index:2;
  width:100%;
  height:100%;
  object-fit:contain;
}
@media (max-width:719px){
  .r-card .r-media,.a-card .a-media,.p-card .p-media{padding:.7rem;aspect-ratio:1.2 / 1}
  .r-media-inner,.a-media-inner,.p-media-inner{padding:.75rem;border-radius:14px}
}

/* ---------- Services & Offres — cartes glassmorphism pilotées par le CMS ---------- */
.offers-section{
  background:#F2F1F0;
  border-top:1px solid rgba(224,218,238,.72);
  border-bottom:1px solid rgba(224,218,238,.72);
}
.offers-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.25rem;
  align-items:stretch;
}
/* ---------- Offres : commutateur d'onglets (Phase 2, 2026-10-28) ----------
   Bascule 2 positions centrée en haut de section : Prestations
   Sur-Mesure (DISCUSSION) / Kits & Templates (DIRECT). Segmented
   control aligné sur la charte des pastilles (lavande → plein). */
.offers-tabs{
  display:flex;justify-content:center;flex-wrap:wrap;gap:.25rem;
  width:-moz-fit-content;width:fit-content;max-width:100%;
  margin:0 auto 1.6rem;padding:.28rem;
  border:1px solid #E7DEFB;border-radius:999px;
  background:rgba(255,255,255,.72);backdrop-filter:blur(10px);
}
.offers-tab{
  appearance:none;border:none;border-radius:999px;
  padding:.62rem 1.35rem;background:transparent;color:#4B2A9F;cursor:pointer;
  font:600 var(--fs-sm)/1.2 var(--font-body,Inter,sans-serif);
  transition:background .2s ease,color .2s ease,box-shadow .2s ease;
}
.offers-tab:hover{background:#F0EBFF}
.offers-tab:focus-visible{outline:2px solid #7048D8;outline-offset:2px}
.offers-tab.is-active{background:#7048D8;color:#fff;box-shadow:0 8px 18px -10px rgba(112,72,216,.6)}

/* ---------- Offres : cartes pricing (Phase 3 — SaaS pricing table) ----------
   Fond blanc, bordure fine, coins arrondis marqués (22px) ; prix
   sous le titre ; carte phare (mise_en_avant=TRUE) : fond teinté
   lavande/violet en dégradé + ombre portée marquée + badge
   « LE PLUS DEMANDÉ » ; CTA contour (plein sur la phare) ;
   responsive : 3 colonnes ≥ 1024px, 1 colonne en dessous. */
.pricing-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:100%;
  padding:1.75rem;
  border:1px solid #EDE9F7;
  border-radius:22px;
  background:#fff;
  box-shadow:0 14px 34px -24px rgba(76,43,159,.22);
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}
.pricing-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:4px;
  border-radius:inherit;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
  background:linear-gradient(90deg,#7048D8,#CBB8FA);
  opacity:.85;
}
.pricing-card:hover,.pricing-card:focus-within{
  transform:translateY(-4px);
  border-color:#D9CAFA;
  box-shadow:0 22px 44px -22px rgba(76,43,159,.3);
}
/* Carte phare : mise_en_avant=TRUE → teinte lavande/violet,
   élévation visuelle marquée, badge « LE PLUS DEMANDÉ ». */
.pricing-card--highlight{
  border-color:#C9B2F8;
  background:linear-gradient(168deg,#FBF9FF 0%,#F4EEFF 48%,#ECE2FF 100%);
  box-shadow:0 26px 60px -18px rgba(112,72,216,.5),0 10px 24px -14px rgba(76,43,159,.32);
}
.pricing-card--highlight::before{background:linear-gradient(90deg,#5B34C0,#8F72E5);opacity:1}
.pricing-card--highlight:hover,.pricing-card--highlight:focus-within{
  border-color:#B79AF0;
  box-shadow:0 32px 70px -20px rgba(112,72,216,.58),0 12px 28px -14px rgba(76,43,159,.38);
}
.pricing-card-flag{
  position:absolute;
  top:-13px;
  left:50%;
  transform:translateX(-50%);
  padding:.42rem .85rem;
  border-radius:999px;
  background:linear-gradient(90deg,#5B34C0,#8F72E5);
  color:#fff;
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
  box-shadow:0 10px 22px -10px rgba(91,52,192,.65);
}
.pricing-card-head{display:flex;flex-direction:column;align-items:flex-start}
.pricing-card-type,.pricing-card-label{
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.pricing-card-type{
  margin-bottom:1rem;
  padding:.35rem .65rem;
  color:#4B2A9F;
  border:1px solid #D9CAFA;
  border-radius:999px;
  background:#F0EBFF;
}
.pricing-card--highlight .pricing-card-type{
  color:#4B2A9F;
  border-color:#C9B2F8;
  background:#EFE7FF;
}
.pricing-card-titre{
  margin:0;
  font-size:var(--fs-h3);
  line-height:1.15;
  letter-spacing:-.02em;
  overflow-wrap:break-word;
}
/* Prix sous le titre (décision utilisateur Phase 3). */
.pricing-card-prix{
  margin:.95rem 0 0;
  font-size:1.8rem;
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.1;
  color:var(--ink);
  overflow-wrap:break-word;
}
.pricing-card--highlight .pricing-card-prix{color:#5B34C0}
.pricing-card-desc{
  margin-top:.9rem;
  font-size:var(--fs-body);
  color:var(--ink-2);
  line-height:1.65;
  overflow-wrap:break-word;
}
/* ---------- Problème résolu (Phase 4) — blockquote discret sous la
   description : bordure gauche violette, fond très léger, label
   majuscules atténué, texte italique secondaire. ---------- */
.problem-solved-block{
  margin:12px 0;
  padding:.25rem .8rem .4rem 0;
  padding-left:12px;
  border-left:3px solid #7048D8;
  background:rgba(112,72,216,.045);
  border-radius:0 10px 10px 0;
}
.pricing-card--highlight .problem-solved-block{border-left-color:#5B34C0;background:rgba(91,52,192,.055)}
.problem-solved-label{
  display:block;
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#716B80;
}
.problem-solved-text{
  margin:.3rem 0 0;
  font-style:italic;
  color:var(--ink-2);
  line-height:1.6;
  overflow-wrap:break-word;
}
.pricing-card-body{margin-top:1.35rem}
.pricing-card-label{margin:0 0 .65rem;color:#716B80}
.pricing-card-body ul{display:grid;gap:.55rem;margin:0;padding:0;list-style:none}
.pricing-card-body li{display:flex;align-items:flex-start;gap:.55rem;color:var(--ink-2);font-size:var(--fs-sm);line-height:1.45}
.pricing-check{display:grid;place-items:center;flex:none;width:1.1rem;height:1.1rem;margin-top:.08rem;border-radius:50%;background:#7048D8;color:#fff;font-size:var(--fs-xs);font-weight:700}
.pricing-card--highlight .pricing-check{background:#5B34C0}
.pricing-card-bottom{display:flex;flex-direction:column;gap:1rem;margin-top:auto;padding-top:1.5rem}
.pricing-card-stack{display:flex;flex-wrap:wrap;gap:.42rem}
.pricing-card-stack--text{margin:0;padding:0;list-style:none}
.pricing-card-stack--text li{padding:.32rem .55rem;border:1px solid #E7DEFB;border-radius:999px;background:rgba(240,235,255,.62);color:#4B2A9F;font-family:var(--font-mono);font-size:var(--fs-xs)}
/* ---------- Fonctionnement (dernier champ CMS) — juste sous la stack,
   avant le CTA : label mono discret + texte secondaire. ---------- */
.pricing-card-fonctionnement{margin:0}
.pricing-card-fonctionnement-label{
  display:block;
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#716B80;
}
.pricing-card-fonctionnement-text{
  margin:.3rem 0 0;
  color:var(--ink-2);
  font-size:var(--fs-sm);
  line-height:1.6;
  overflow-wrap:break-word;
}
/* CTA : contour violet sur les cartes standard, plein dégradé sur
   la carte phare (hiérarchie SaaS — décision utilisateur). */
.pricing-card-cta{
  align-self:flex-start;
  margin-top:.1rem;
  background:transparent;
  color:#7048D8;
  border:1.5px solid #A98FE8;
}
.pricing-card-cta:hover,.pricing-card-cta:focus-visible{
  background:#7048D8;
  color:#fff;
  border-color:#7048D8;
  transform:translateY(-2px);
  box-shadow:0 12px 26px -12px rgba(112,72,216,.55);
}
.pricing-card--highlight .pricing-card-cta{
  background:linear-gradient(90deg,#7048D8,#8F72E5);
  color:#fff;
  border-color:transparent;
  box-shadow:0 14px 30px -14px rgba(112,72,216,.65);
}
.pricing-card--highlight .pricing-card-cta:hover,.pricing-card--highlight .pricing-card-cta:focus-visible{
  background:linear-gradient(90deg,#5B34C0,#7048D8);
  border-color:transparent;
  transform:translateY(-2px);
  box-shadow:0 16px 34px -14px rgba(91,52,192,.7);
}
.offers-empty{grid-column:1/-1;margin:0;padding:2.2rem 1rem;text-align:center;color:var(--ink-2);font-size:var(--fs-sm);border:1px dashed var(--line);border-radius:16px;background:rgba(255,255,255,.5)}
/* Responsive : 3 colonnes ≥ 1024px, empilement fluide 1 colonne
   en dessous (< 1023px), sans débordement horizontal. */
@media (max-width:1023px){
  .offers-grid{grid-template-columns:1fr;gap:1.25rem}
  .pricing-card{padding:1.4rem;border-radius:18px}
  .pricing-card-flag{top:-12px;padding:.38rem .7rem;}
  .offers-tab{padding:.55rem 1rem;}
}
@media (prefers-reduced-motion:reduce){.pricing-card{transition:none}.pricing-card:hover,.pricing-card:focus-within{transform:none}}

/* Filtre par type : les boutons sont générés depuis la colonne `type` du Sheet. */
.offers-filter{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  margin:-1rem 0 2rem;
}
.offers-filter-btn{
  appearance:none;
  border:1px solid #E7DEFB;
  border-radius:999px;
  padding:.55rem .9rem;
  background:rgba(255,255,255,.72);
  color:#4B2A9F;
  cursor:pointer;
  font:600 var(--fs-sm)/1.2 var(--font-body,Inter,sans-serif);
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.offers-filter-btn:hover,.offers-filter-btn:focus-visible{
  border-color:#BBA5F3;
  background:#F0EBFF;
  transform:translateY(-1px);
}
.offers-filter-btn.is-active{
  border-color:#7048D8;
  background:#7048D8;
  color:#fff;
}
.offers-grid.is-leaving{
  opacity:0;
  transform:translateY(8px);
}
.offers-grid.is-entering{
  opacity:0;
  transform:translateY(-8px);
}
.offers-grid{
  opacity:1;
  transform:translateY(0);
  transition:opacity .18s ease,transform .24s ease;
}
@media (max-width:620px){
  .offers-filter{margin:-.8rem 0 1.5rem;gap:.45rem}
  .offers-filter-btn{padding:.5rem .75rem;}
}
@media (prefers-reduced-motion:reduce){
  .offers-filter-btn,.offers-grid{transition:none}
  .offers-filter-btn:hover,.offers-filter-btn:focus-visible{transform:none}
  .offers-grid.is-leaving,.offers-grid.is-entering{opacity:1;transform:none}
}

/* Hero : un CTA primaire Offres, deux actions secondaires alignées. */
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.9rem;align-items:center}
.hero-cta .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.hero-cta .btn[hidden]{display:none}
@media (min-width:1024px){.hero-cta .btn{white-space:nowrap}}
@media (max-width:719px){.hero-cta{align-items:stretch}.hero-cta .btn{width:100%}}

/* ============================================================
   PROJECT CARDS — compact horizontal split layout + accessibility
   ============================================================ */
.p-card.p-card-split{
  display:grid;
  grid-template-columns:minmax(190px,.85fr) minmax(0,1.5fr);
  gap:.9rem;
  min-height:0;
  padding:.7rem;
  align-items:stretch;
}
.p-card-split .p-left{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:.7rem;
  background:#F8F9FA;
  border:1px solid var(--line);
  border-radius:16px;
}
.p-card-split .p-media{
  display:block;
  flex:1 1 auto;
  min-height:150px;
  aspect-ratio:4 / 3;
  overflow:hidden;
  border:0;
  border-radius:12px;
  background:var(--card);
}
.p-card-split .p-media-inner{
  position:relative;
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  min-height:inherit;
  overflow:hidden;
  border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(246,244,250,.88));
}
.p-card-split .p-media-inner::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--media-adapt-image);
  background-position:center;
  background-size:cover;
  filter:blur(22px);
  opacity:.12;
  transform:scale(1.12);
  pointer-events:none;
}
.p-card-split .p-media img{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  padding:.8rem;
  object-fit:contain;
}
.p-card-split .p-left-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.35rem;
  min-height:1.55rem;
  margin-top:.65rem;
}
.p-card-split .p-left-meta .badge-statut,
.p-card-split .p-left-meta .p-cat,
.p-card-split .p-left-meta .demo-pill{flex:0 0 auto}
.p-card-split .p-left-meta .badge-statut{
  padding:.25rem .55rem;
  
}
.p-card-split .p-left-meta .p-cat{
  max-width:100%;
  overflow:hidden;
  padding:.25rem .5rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:#635B53;
  
  letter-spacing:.06em;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.p-card-split .p-left-meta .demo-pill{
  display:inline-flex;
  align-items:center;
  min-height:1.45rem;
  padding:.22rem .5rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--card);
  color:#635B53;
  font-family:var(--font-mono);
  
  font-weight:700;
  line-height:1;
  white-space:nowrap;
}
.p-card-split .p-body{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:.55rem .75rem .55rem .35rem;
}
.p-card-split .p-title{
  margin:0;
  
  line-height:1.15;
}
.p-card-split .p-title a{color:inherit;text-decoration:none}
.p-card-split .p-title a:hover{color:var(--gold-2)}
.p-card-split .p-desc{
  display:-webkit-box;
  overflow:hidden;
  margin:.55rem 0 0;
  color:#635B53;
  
  line-height:1.5;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:4;
}
.p-card-split .stack-mono{
  margin:auto 0 0;
  padding-top:.85rem;
  color:#4B2A9F;
  font-family:var(--font-mono);
  
  line-height:1.45;
}
.p-card-split .p-foot{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:.75rem;
  margin-top:.8rem;
  padding-top:.7rem;
  border-top:1px solid var(--line);
}
.p-card-split .p-status{
  flex:1 1 auto;
  min-width:0;
  color:#635B53;
  font-family:var(--font-mono);
  
  line-height:1.35;
}
.p-card-split .p-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex:0 0 auto;
  gap:.55rem;
  flex-wrap:wrap;
  margin-left:auto;
}
.p-card-split .p-actions .link-arrow{white-space:nowrap}
.p-card-split .p-actions .btn-xs{
  min-height:32px;
  padding:.45rem .75rem;
  border-radius:999px;
  background:#0D0D0D;
  border-color:#0D0D0D;
  color:#fff;
  
  white-space:nowrap;
}
.p-card-split .p-actions .btn-xs:hover,
.p-card-split .p-actions .btn-xs:focus-visible{
  background:#4B2A9F;
  border-color:#4B2A9F;
  color:#fff;
}
.p-card-split a:focus-visible,
.p-card-split .demo-pill:focus-visible{
  outline:3px solid #4B2A9F;
  outline-offset:3px;
}
@media (max-width:767px){
  .p-card.p-card-split{grid-template-columns:1fr;gap:.75rem;padding:.65rem}
  .p-card-split .p-left{padding:.6rem}
  .p-card-split .p-media{aspect-ratio:16 / 9;min-height:0}
  .p-card-split .p-body{padding:.35rem .35rem .5rem}
  .p-card-split .p-desc{-webkit-line-clamp:5}
  .p-card-split .p-foot{align-items:stretch;flex-direction:column;gap:.65rem}
  .p-card-split .p-actions{width:100%;margin-left:0;justify-content:flex-start}
  .p-card-split .p-actions .link-arrow,
  .p-card-split .p-actions .btn-xs{flex:1 1 auto;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .p-card-split,
  .p-card-split .p-media img{transition:none}
}

/* Project cards carousel: two cards per desktop view */
@media (min-width:720px){
  .carousel .p-card{
    flex:0 0 calc((100% - 1.25rem)/2);
    max-width:calc((100% - 1.25rem)/2);
  }
}
@media (max-width:719px){
  .carousel .p-card{
    flex:0 0 84%;
    max-width:84%;
  }
}

/* Projects page container: two cards per row on desktop */
@media (min-width:1024px){
  #grille-projets.grid-3{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:1023px){
  #grille-projets.grid-3{
    grid-template-columns:1fr;
  }
}
/* ============================================================
   PROJECT CARDS — image gauche agrandie, rendu statique
   ============================================================ */
.p-card-split .p-left{
  min-width:0;
  overflow:hidden;
}
.p-card-split .p-media,
.p-card-split .p-media-inner{
  width:100%;
  max-width:100%;
  min-height:0;
  aspect-ratio:4 / 3;
  overflow:hidden;
  border:0;
  border-radius:12px;
  background:#F8F9FA;
}
.p-card-split .p-media-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
.p-card-split .p-media-inner::before{display:none}
.p-card-split .p-media img{
  position:relative;
  inset:auto;
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  max-height:200px;
  padding:0;
  object-fit:contain;
  transform:none;
  filter:none;
}
.p-card-split .p-media .p-ph{
  position:relative;
  inset:auto;
  width:100%;
  min-height:160px;
  border-radius:12px;
}

/* Aucun effet de survol sur les cartes projet ni leurs médias */
.p-card-split,
.p-card-split:hover,
.carousel .p-card-split:hover{
  transform:none;
  border-color:var(--feature-line);
  box-shadow:var(--feature-shadow);
  transition:none;
}
.p-card-split:hover .p-media img,
.carousel .p-card-split:hover .p-media img,
.p-card-split .p-media img{
  transform:none;
  filter:none;
}
.p-card-split .p-title a:hover,
.p-card-split .p-actions a:hover,
.p-card-split .p-actions .btn-xs:hover{
  color:inherit;
  background:inherit;
  border-color:inherit;
}
@media (max-width:767px){
  .p-card-split .p-media,
  .p-card-split .p-media-inner{aspect-ratio:16 / 9}
  .p-card-split .p-media img{max-height:180px}
}

/* Accueil — carousel projets : une carte par vue sur tous les écrans */
#carousel-projets .p-card{
  flex:0 0 100%;
  max-width:100%;
  scroll-snap-align:start;
}