/* ==========================================================================
   AK pixel — feuille de style principale
   Reprend l'identité de l'ancien site (bandeaux pliés, cubes isométriques,
   palette rouge / sarcelle / orange / marine) sans aucune image bitmap :
   tout est dessiné en CSS (clip-path, dégradés) ou en SVG inline.
   Stack : Bootstrap 5.3
   ========================================================================== */

:root {
  /* Palette d'origine */
  --ak-red: #f62838;
  --ak-red-dark: #b81e2a;
  --ak-red-fold: #941822;
  --ak-red-soft: #fb3c4a;
  --ak-orange: #fb663a;
  --ak-orange-dark: #973d23;
  --ak-orange-light: #fc8561;
  --ak-teal: #117d7f;
  --ak-teal-dark: #0a4b4c;
  --ak-teal-light: #419799;
  --ak-navy: #142b36;
  --ak-ink: #0c1a20;
  --ak-text: #333;
  --ak-muted: #5d6970;
  --ak-light: #eee;
  --ak-paper: #fff;
  --ak-grey: #dfe3e5;

  /* Typo : équivalents Google Fonts du DejaVu ExtraLight / Condensed */
  --ak-font: "Barlow", Helvetica, Arial, sans-serif;
  --ak-font-cond: "Barlow Condensed", "Barlow", Helvetica, Arial, sans-serif;

  /* Mesures */
  --ak-gutter: 150px;      /* retrait gauche du contenu, comme l'original */
  --ak-ease: cubic-bezier(.2, .7, .2, 1);

  /* Surcharges Bootstrap */
  --bs-body-font-family: var(--ak-font);
  --bs-body-color: var(--ak-text);
  --bs-link-color: var(--ak-teal);
  --bs-link-color-rgb: 17, 125, 127;
  --bs-link-hover-color: var(--ak-red);
  --bs-link-hover-color-rgb: 246, 40, 56;
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  font-family: var(--ak-font);
  font-weight: 300;
  color: var(--ak-text);
  background: var(--ak-paper);
  line-height: 1.6;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5 { font-family: var(--ak-font-cond); font-weight: 300; letter-spacing: .01em; }
strong, b { font-weight: 600; }
a { text-underline-offset: 3px; }
::selection { background: var(--ak-red); color: #fff; }

:focus-visible { outline: 3px solid var(--ak-orange); outline-offset: 3px; }

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 2000;
  background: var(--ak-red); color: #fff; padding: .5rem 1rem;
}
.skip-link:focus { top: 1rem; }

/* Bilinguisme : on affiche uniquement les blocs de la langue active */
html[lang="fr"] body [lang="en"],
html[lang="en"] body [lang="fr"] { display: none !important; }

/* Surlignages hérités de l'original */
.hl { padding: .05em .3em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hl-white { background: var(--ak-light); color: var(--ak-text); text-shadow: none; }
.hl-red { background: var(--ak-red); color: #fff; }
.hl-teal { background: var(--ak-teal); color: #fff; }
.hl-orange { background: var(--ak-orange); color: #fff; }

/* --------------------------------------------------------------------------
   Barre supérieure + navigation
   -------------------------------------------------------------------------- */
.ak-topbar {
  background: var(--ak-ink);
  color: var(--ak-light);
  font-size: .9rem;
}
.ak-topbar a { color: var(--ak-light); text-decoration: none; }
.ak-topbar a:hover { color: #fff; text-decoration: underline; }
.ak-topbar svg { width: 18px; height: 18px; vertical-align: -3px; }

.lang-switch { display: inline-flex; border: 1px solid rgba(255,255,255,.25); }
.lang-switch button {
  background: transparent; border: 0; color: var(--ak-light);
  font: 500 .8rem/1 var(--ak-font); letter-spacing: .08em;
  padding: .4rem .6rem; cursor: pointer;
}
.lang-switch button[aria-pressed="true"] { background: var(--ak-red); color: #fff; }

.ak-nav {
  background: rgba(20, 43, 54, .97);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.ak-nav .navbar-brand { display: flex; align-items: center; gap: .6rem; color: #fff; }
.ak-nav .navbar-brand svg { width: 38px; height: 44px; }
.ak-nav .navbar-brand span { font: 300 1.45rem/1 var(--ak-font-cond); text-transform: lowercase; letter-spacing: .04em; }
.ak-nav .navbar-brand b { font-weight: 600; text-transform: uppercase; }
.ak-nav .nav-link {
  color: #cfd8dc; text-transform: uppercase; font: 400 .85rem var(--ak-font);
  letter-spacing: .08em; position: relative;
}
.ak-nav .nav-link::after {
  content: ""; position: absolute; left: .5rem; right: .5rem; bottom: .2rem;
  height: 2px; background: var(--ak-red); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ak-ease);
}
.ak-nav .nav-link:hover, .ak-nav .nav-link.active { color: #fff; }
.ak-nav .nav-link:hover::after, .ak-nav .nav-link.active::after { transform: scaleX(1); }
.ak-nav .navbar-toggler { border-color: rgba(255,255,255,.3); }
.ak-nav .navbar-toggler-icon { filter: invert(1); }

.btn-ak {
  --bs-btn-bg: var(--ak-red); --bs-btn-border-color: var(--ak-red); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--ak-red-dark); --bs-btn-hover-border-color: var(--ak-red-dark); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--ak-red-fold); --bs-btn-active-border-color: var(--ak-red-fold);
  --bs-btn-font-family: var(--ak-font);
  text-transform: uppercase; letter-spacing: .08em; font-weight: 500;
  position: relative; padding: .7rem 1.4rem;
}
.btn-ak-outline {
  --bs-btn-color: #fff; --bs-btn-border-color: rgba(255,255,255,.55);
  --bs-btn-hover-bg: #fff; --bs-btn-hover-color: var(--ak-navy); --bs-btn-hover-border-color: #fff;
  text-transform: uppercase; letter-spacing: .08em; font-weight: 500; padding: .7rem 1.4rem;
}
.btn-ak-teal {
  --bs-btn-bg: var(--ak-teal); --bs-btn-border-color: var(--ak-teal); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--ak-teal-dark); --bs-btn-hover-border-color: var(--ak-teal-dark); --bs-btn-hover-color: #fff;
  text-transform: uppercase; letter-spacing: .08em; font-weight: 500;
}

/* --------------------------------------------------------------------------
   En-tête (head_content) : fond marine + cubes isométriques
   -------------------------------------------------------------------------- */
.ak-hero {
  background:
    radial-gradient(1200px 400px at 85% -10%, rgba(17,125,127,.25), transparent 60%),
    linear-gradient(180deg, var(--ak-navy), #10232c);
  color: #fff;
  position: relative;
  padding: 4.5rem 0 3.5rem;
  overflow: hidden;
}
/* trame de pixels discrète, dessinée en CSS */
.ak-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}
.ak-hero .eyebrow {
  display: inline-block; text-transform: uppercase; letter-spacing: .18em;
  font-size: .8rem; color: #9fb4bd; margin-bottom: 1rem;
}
.ak-hero h1 {
  font-size: clamp(2.4rem, 5.5vw, 4.3rem);
  line-height: 1.02; margin-bottom: 1.25rem; text-transform: uppercase;
}
.ak-hero h1 em { font-style: normal; font-weight: 600; color: var(--ak-red-soft); }
.ak-hero .lead { color: #cfd8dc; font-weight: 300; max-width: 36rem; font-size: 1.15rem; }

/* Scène de cubes (desktop) */
.cube-stage { position: relative; min-height: 470px; }
.cube-link {
  position: absolute; display: flex; align-items: flex-start; gap: .25rem;
  color: #fff; text-decoration: none; z-index: 2;
}
.cube-link .cube { width: 50px; height: 58px; flex: 0 0 50px; transition: transform .35s var(--ak-ease); }
.cube-link .bulle {
  margin-top: 14px; padding: .35rem .55rem; text-transform: uppercase;
  font-size: .78rem; letter-spacing: .06em; white-space: nowrap;
  text-shadow: -1px -1px var(--ak-ink); transition: background .25s;
}
.cube-link .plus {
  display: block; max-height: 0; overflow: hidden; opacity: 0;
  white-space: normal; width: 240px; text-transform: none; letter-spacing: 0;
  font-size: .85rem; line-height: 1.35; color: #dfe6e9;
  transition: max-height .35s var(--ak-ease), opacity .25s, margin .25s;
}
.cube-link:hover, .cube-link:focus-visible { z-index: 20; }
.cube-link:hover .cube, .cube-link:focus-visible .cube { transform: translateY(-6px); }
.cube-link:hover .bulle, .cube-link:focus-visible .bulle { background: rgba(0,0,0,.75); }
.cube-link:hover .plus, .cube-link:focus-visible .plus { max-height: 140px; opacity: 1; margin-top: .35rem; }
.cube-link:hover .cube { --c-top: #fff; --c-left: var(--ak-red); --c-right: var(--ak-red-dark); }

/* couleurs du cube via variables héritées dans <use> */
.cube { --c-top: #f4f5f6; --c-left: #d9dee1; --c-right: #bfc7cb; --c-line: rgba(0,0,0,.08); }
.cube-c1 { left: 2%;  top: 0%;  }
.cube-c2 { left: 54%; top: 7%;  }
.cube-c3 { left: 10%; top: 22%; }
.cube-c4 { left: 50%; top: 32%; }
.cube-c5 { left: 4%;  top: 48%; }
.cube-c6 { left: 46%; top: 60%; }
.cube-c7 { left: 12%; top: 76%; }
.cube-c2 .plus, .cube-c4 .plus, .cube-c6 .plus { width: 210px; }

/* Grande scène isométrique décorative */
.iso-big { position: absolute; right: -40px; bottom: -40px; width: 300px; opacity: .14; pointer-events: none; }

/* Liste mobile des cubes */
.cube-list { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.cube-list a { display: flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; }
.cube-list svg { width: 30px; height: 35px; flex: 0 0 30px; }

/* --------------------------------------------------------------------------
   Bloc intro rouge + ruban vertical plié (ex debord_red.png)
   -------------------------------------------------------------------------- */
.ak-intro { background: var(--ak-red); color: var(--ak-light); padding: clamp(3rem, 9vw, 7rem) 0; position: relative; }
.ak-intro .inner { position: relative; padding-left: var(--ak-gutter); min-height: 200px; }
.intro-quote {
  font: 300 clamp(1.4rem, 3vw, 2.1rem)/1.3 var(--ak-font);
  text-shadow: -1px -1px var(--ak-red-dark);
  margin: 0;
}
.intro-quote .hl { line-height: 1.7; }
.intro-sub { margin-top: 1.5rem; font-size: 1.1rem; color: #ffe3e5; max-width: 46rem; }

/* --------------------------------------------------------------------------
   Panneau de contenu (ex subWrapper) : liseré rouge + marche pliée
   -------------------------------------------------------------------------- */

/* Titres gauche : bandeau + V plié (ex bkck_title_left / _2) */
.band.orange { --band: var(--ak-orange); --band-dark: var(--ak-orange-dark); --band-light: var(--ak-orange-light); }
.band.red { --band: var(--ak-red); --band-dark: var(--ak-red-fold); --band-light: var(--ak-red-soft); }
.band.navy { --band: var(--ak-navy); --band-dark: var(--ak-ink); --band-light: #2c4a58; }
.band .num {
  font-family: var(--ak-font-cond); font-weight: 600; opacity: .55; margin-right: .6rem; font-size: .9em;
}

/* Titres colonne droite : ruban rouge à rabat (ex bkck_title_right) */

/* Colonne gauche : textes en retrait */
.indent { padding-left: var(--ak-gutter); padding-right: 25px; }
.lede { font-size: 1.15rem; color: #222; }
.hook {
  font: 600 clamp(1.5rem, 3vw, 2.1rem)/1.15 var(--ak-font-cond);
  text-transform: uppercase; color: var(--ak-navy); margin-bottom: .75rem; letter-spacing: .01em;
}
.hook small { display: block; font: 400 .85rem/1.4 var(--ak-font); letter-spacing: .14em; color: var(--ak-red); margin-bottom: .35rem; }
.service { margin-bottom: 4.5rem; }
.service .icon-wrap { float: right; width: 140px; margin: 0 0 1rem 1.5rem; }
.service .icon-wrap svg { width: 100%; height: auto; }
.service h4 {
  font: 500 .85rem/1.2 var(--ak-font); text-transform: uppercase; letter-spacing: .12em;
  color: var(--ak-teal); margin: 1.6rem 0 .7rem;
}
.service ul.sq { padding-left: 1.1rem; margin-bottom: 0; }
.service ul.sq li { list-style-type: square; margin-bottom: .3rem; }
.service ul.sq li::marker { color: var(--ak-red); }
.service .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; clear: both; }
.service .pull {
  border-left: 4px solid var(--ak-red); padding: .25rem 0 .25rem 1rem; margin: 1.5rem 0;
  font: 400 1.1rem/1.45 var(--ak-font); color: #222;
}
.service .proof {
  margin-top: 1.5rem; background: #f4f6f7; padding: 1rem 1.25rem; font-size: .95rem;
  border-top: 3px solid var(--ak-teal); clear: both;
}
.service .proof b { color: var(--ak-teal); text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; display: block; margin-bottom: .2rem; }

.tag {
  display: inline-block; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em;
  padding: .25rem .5rem; margin: 0 .3rem .4rem 0; border: 1px solid #c9d1d5; color: #46545b;
}

/* Colonne droite collante */
.side-sticky { position: sticky; top: 90px; }
.savoir { padding-left: 50px; margin-bottom: 2.5rem; }
.savoir .item { margin-bottom: 1.5rem; text-align: center; }
.savoir .item svg { width: 92px; height: 92px; }
.savoir h3 { text-transform: uppercase; font-size: 1.15rem; margin: .5rem 0 .6rem; }
.savoir ul { text-align: left; font-size: .9rem; padding-left: 1.1rem; }
.savoir li { list-style: square; margin-bottom: .25rem; }
.savoir li::marker { color: var(--ak-teal); }
.side-card { margin-left: 50px; background: var(--ak-navy); color: #dfe6e9; padding: 1.5rem; position: relative; }
.side-card h3 { color: #fff; text-transform: uppercase; font-size: 1.3rem; }
.side-card a { color: #fff; }

/* --------------------------------------------------------------------------
   Réalisations (cartes)
   -------------------------------------------------------------------------- */
.ak-works { background: #f3f5f6; padding: 5rem 0 4rem; position: relative; }
.ak-works .section-head { padding-left: var(--ak-gutter); margin-bottom: 3rem; max-width: 52rem; }
.work-card {
  background: #fff; height: 100%; display: flex; flex-direction: column;
  border: 0; box-shadow: 0 1px 0 rgba(0,0,0,.06);
  transition: transform .4s var(--ak-ease), box-shadow .4s var(--ak-ease);
  position: relative;
}
.work-card:hover { transform: translateY(-6px); box-shadow: 0 22px 40px -18px rgba(12,26,32,.35); }
.work-cover { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.work-cover svg { width: 100%; height: 100%; display: block; transition: opacity .6s var(--ak-ease); }
.work-cover .veil { /* reprise du survol vert de l'original */
  position: absolute; inset: 0; background: rgba(17,125,127,.92); color: #fff;
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 1.5rem;
  text-transform: uppercase; letter-spacing: .08em; font-size: .95rem; opacity: 0;
  transition: opacity .5s var(--ak-ease);
}
.work-card:hover .veil, .work-card:focus-within .veil { opacity: 1; }
.work-body { padding: 1.5rem 1.5rem 1.75rem; display: flex; flex-direction: column; flex: 1; }
.work-kicker { font-size: .75rem; text-transform: uppercase; letter-spacing: .14em; color: var(--ak-red); margin-bottom: .4rem; }
.work-body h3 { font-size: 1.7rem; text-transform: uppercase; margin-bottom: .2rem; color: var(--ak-navy); }
.work-hook { font-weight: 500; color: #222; margin-bottom: .8rem; }
.work-body ul { padding-left: 1.1rem; font-size: .93rem; }
.work-body li { list-style: square; margin-bottom: .25rem; }
.work-body li::marker { color: var(--ak-teal); }
.work-body .mt-auto a { font-weight: 500; text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; }
.work-card::after { /* coin plié */
  content: ""; position: absolute; top: 0; right: 0; width: 26px; height: 26px;
  background: linear-gradient(225deg, #f3f5f6 0 50%, var(--ak-red-dark) 50% 100%);
}

/* --------------------------------------------------------------------------
   Méthode (étapes)
   -------------------------------------------------------------------------- */
.ak-method { padding: 5rem 0; }
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--ak-grey); }
.steps li { background: #fff; padding: 1.75rem 1.25rem 1.5rem; position: relative; }
.steps li::before {
  counter-increment: step; content: "0" counter(step);
  display: block; font: 600 2.4rem/1 var(--ak-font-cond); color: var(--ak-red); margin-bottom: .6rem;
}
.steps h3 { font-size: 1.2rem; text-transform: uppercase; margin-bottom: .4rem; color: var(--ak-navy); }
.steps p { font-size: .92rem; margin: 0; color: #444; }

/* --------------------------------------------------------------------------
   Formations
   -------------------------------------------------------------------------- */
.ak-training { background: var(--ak-navy); color: #dfe6e9; padding: 5rem 0; position: relative; overflow: hidden; }
.ak-training .hook { color: #fff; }
.ak-training .band { margin-left: 0; }
.big-num { font: 600 clamp(4rem, 10vw, 7.5rem)/.9 var(--ak-font-cond); color: var(--ak-red-soft); }
.big-num + p { text-transform: uppercase; letter-spacing: .14em; font-size: .85rem; color: #9fb4bd; }
.module {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  padding: 1.4rem; height: 100%; transition: background .3s, border-color .3s;
}
.module:hover { background: rgba(255,255,255,.07); border-color: var(--ak-teal-light); }
.module h3 { color: #fff; font-size: 1.35rem; text-transform: uppercase; margin-bottom: .2rem; }
.module .m-hook { color: var(--ak-orange-light); font-weight: 500; margin-bottom: .6rem; }
.module ul { padding-left: 1.1rem; font-size: .92rem; margin: 0; }
.module li { list-style: square; margin-bottom: .2rem; }
.module li::marker { color: var(--ak-red-soft); }
.format { border-top: 3px solid var(--ak-red); padding-top: 1rem; }
.format h3 { color: #fff; font-size: 1.2rem; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   Engagements / FAQ
   -------------------------------------------------------------------------- */
.ak-ethic { padding: 5rem 0 3rem; }
.ethic-item { display: flex; gap: 1rem; margin-bottom: 1.75rem; }
.ethic-item svg { flex: 0 0 44px; width: 44px; height: 50px; }
.ethic-item h3 { font-size: 1.2rem; text-transform: uppercase; margin-bottom: .2rem; color: var(--ak-navy); }
.ethic-item p { margin: 0; font-size: .95rem; }

.ak-faq { padding: 1rem 0 5rem; }
.ak-faq .accordion { --bs-accordion-border-color: var(--ak-grey); --bs-accordion-active-bg: #eef5f5; --bs-accordion-active-color: var(--ak-teal-dark); --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(251,102,58,.5); }
.ak-faq .accordion-button { font: 500 1.05rem var(--ak-font); }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.ak-contact { background: var(--ak-red); color: #fff; padding: 5rem 0; position: relative; }
.ak-contact .hook { color: #fff; }
.ak-contact .hook small { color: #ffe3e5; }
.ak-contact .form-control, .ak-contact .form-select {
  background: rgba(255,255,255,.96); border: 0; padding: .8rem 1rem; font-family: var(--ak-font);
}
.ak-contact .form-control:focus, .ak-contact .form-select:focus { box-shadow: 0 0 0 3px var(--ak-ink); }
.ak-contact label { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .3rem; }
.ak-contact .btn-dark { --bs-btn-bg: var(--ak-ink); --bs-btn-border-color: var(--ak-ink); text-transform: uppercase; letter-spacing: .08em; padding: .8rem 1.6rem; }
.contact-lines a { color: #fff; }
.form-note { font-size: .85rem; color: #ffe3e5; }

/* --------------------------------------------------------------------------
   Pied de page (ex bkcg_footer) : marine + marche pliée
   -------------------------------------------------------------------------- */
.ak-footer { background: var(--ak-navy); color: var(--ak-light); padding: 4.5rem 0 2rem; position: relative; }
.ak-footer .container { position: relative; z-index: 2; }
.ak-footer h2 { font-size: 3rem; font-weight: 300; text-transform: lowercase; }
.ak-footer h2 b { text-transform: uppercase; font-weight: 600; }
.ak-footer a { color: #fff; }
.ak-footer h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .14em; color: #9fb4bd; font-family: var(--ak-font); font-weight: 500; }
.ak-footer ul { list-style: none; padding: 0; }
.ak-footer li { margin-bottom: .3rem; }
.ak-footer .legal { border-top: 1px solid rgba(255,255,255,.1); margin-top: 2.5rem; padding-top: 1.25rem; font-size: .85rem; color: #9fb4bd; }

/* Retour en haut */
.to-top {
  position: fixed; right: 1rem; bottom: 1rem; width: 46px; height: 52px; z-index: 1030;
  opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; border: 0; background: none; padding: 0;
}
.to-top.show { opacity: 1; pointer-events: auto; }
.to-top:hover { transform: translateY(-4px); }
.to-top svg { width: 100%; height: 100%; }

/* Apparition au défilement */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ak-ease), transform .7s var(--ak-ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   Responsive (mêmes paliers logiques que l'original)
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  :root { --ak-gutter: 130px; }
  .steps { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 991.98px) {
  :root { --ak-gutter: 120px; }
  .side-sticky { position: static; }
  .savoir { padding-left: var(--ak-gutter); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .side-card { margin-left: var(--ak-gutter); }
}
@media (max-width: 767.98px) {
  :root { --ak-gutter: 20px; }
  .indent { padding-left: 8px; padding-right: 8px; }
  .ak-intro .inner { padding-left: 0; min-height: 0; }
  .service .icon-wrap { width: 96px; }
  .service .duo { grid-template-columns: 1fr; }
  .savoir { grid-template-columns: 1fr; padding-left: 8px; }
  .side-card { margin-left: 0; }
  .steps { grid-template-columns: 1fr; }
  .ak-works .section-head { padding-left: 0; }
}
@media (max-width: 480px) {
  .cube-list { grid-template-columns: 1fr; }
  .ak-hero { padding-top: 3rem; }
}

/* Cubes des engagements : variante sarcelle */
.ethic-item svg { --c-top: #e6f2f2; --c-left: var(--ak-teal); --c-right: var(--ak-teal-dark); --c-line: rgba(255,255,255,.15); }
.ethic-item:nth-child(2) svg { --c-left: var(--ak-red); --c-right: var(--ak-red-dark); --c-top: #fde4e6; }
.ethic-item:nth-child(3) svg { --c-left: var(--ak-orange); --c-right: var(--ak-orange-dark); --c-top: #fee8e0; }
.was-validated .form-control:invalid { box-shadow: 0 0 0 3px var(--ak-ink); }

/* --------------------------------------------------------------------------
   Parcours (timeline)
   -------------------------------------------------------------------------- */
.ak-about { padding: 5rem 0 3rem; background: #f3f5f6; }
.ak-works + .ak-about { background: var(--ak-paper); }
.indent-lg { padding-left: var(--ak-gutter); }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--ak-grey); margin-top: 1.5rem; }
.stats > div { background: #fff; padding: 1rem; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ak-muted); line-height: 1.3; }
.stats b { display: block; font: 600 2.6rem/1 var(--ak-font-cond); color: var(--ak-red); letter-spacing: 0; margin-bottom: .2rem; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 2rem; position: relative; }
.timeline::before { content: ""; position: absolute; left: 7px; top: .4rem; bottom: .4rem; width: 2px; background: var(--ak-grey); }
.timeline li { position: relative; padding-bottom: 1.4rem; }
.timeline li::before { /* petit cube losange */
  content: ""; position: absolute; left: -2rem; top: .25rem; width: 16px; height: 16px;
  background: linear-gradient(90deg, var(--ak-teal-dark) 0 50%, var(--ak-teal-light) 50% 100%);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.timeline li:first-child::before { background: linear-gradient(90deg, var(--ak-red-fold) 0 50%, var(--ak-red-soft) 50% 100%); }
.timeline .when { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .14em; color: var(--ak-red); margin-bottom: .15rem; }
.timeline h3 { font-size: 1.2rem; text-transform: uppercase; margin-bottom: .25rem; color: var(--ak-navy); }
.timeline p { font-size: .93rem; margin: 0; color: #444; }
@media (max-width: 991.98px) { .indent-lg { padding-left: 0; } }

/* ==========================================================================
   v2 — Plis fidèles aux assets d'origine
   Géométrie relevée au pixel sur bkck_title_left.png, bkck_title_right.png,
   debord_red.png, bkcg_sub-wrapper_*.png et bkcg_footer_*.png
   ========================================================================== */

/* ---------- Cube logo fixe : il reste à l'écran et passe SOUS les bandeaux ---------- */
.logo-fixed { position: fixed; top: 104px; left: 0; right: 0; z-index: 9; pointer-events: none; }
.logo-fixed a { display: block; width: 100px; height: 115.47px; margin-left: 25px; pointer-events: auto; }
.logo-fixed svg { width: 100px; height: 115.47px; display: block; }
.hero-cube-mobile { width: 90px; height: 104px; margin-bottom: 1.25rem; }
@media (min-width: 992px) {
  .gutter-lg { padding-left: var(--ak-gutter); }
  .hero-text { padding-left: var(--ak-gutter); }
}
@media (max-width: 991.98px) { .logo-fixed { display: none; } }

/* ---------- Bandeau gauche : bande de 40px + cube « troué » en V ----------
   La bande est percée d'un triangle (25,0)-(75,30)-(125,0) : on y voit ce qui
   passe dessous (le cube logo). Les deux faces (sombre / claire) pendent
   jusqu'à 70px et habillent les flancs du cube quand il est aligné. */
.band {
  --band: var(--ak-teal); --band-dark: var(--ak-teal-dark); --band-light: var(--ak-teal-light);
  position: relative; z-index: 10; isolation: isolate;
  color: var(--ak-light);
  font: 300 clamp(1.2rem, 2.2vw, 1.6rem)/1.15 var(--ak-font-cond);
  text-transform: uppercase; letter-spacing: .04em;
  min-height: 40px; display: flex; align-items: center;
  padding: .3rem 1rem .3rem var(--ak-gutter);
  margin: 0 0 3rem;
}
.band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--band);
  clip-path: polygon(0 0, 25px 0, 75px 28.87px, 125px 0, 100% 0, 100% 100%, 0 100%);
}
.band::after {
  content: ""; position: absolute; left: 25px; top: 0; width: 100px; height: 86.6px; z-index: -1;
  background: linear-gradient(90deg, var(--band-dark) 0 50px, var(--band-light) 50px 100%);
  clip-path: polygon(0 0, 50px 28.87px, 100px 0, 100px 57.74px, 50px 86.6px, 0 57.74px);
}

/* ---------- Bloc intro : prisme rouge vertical (debord_red.png, 125×200) ---------- */
.ribbon-v {
  position: absolute; z-index: 10; left: 25px; top: 50%; width: 100px; height: 200px; margin-top: -100px;
  background: linear-gradient(90deg, #dd2432 0 50px, #f63342 50px 100%);
  clip-path: polygon(0 0, 50px 28.87px, 100px 0, 100px 171.13px, 50px 200px, 0 171.13px);
}

/* ---------- Page de droite pliée (bkcg_sub-wrapper : bord gris de 50px) ---------- */
.ak-content { position: relative; padding-top: 32px; background: var(--ak-paper); overflow-x: clip; }
.ak-content::before { /* liseré sombre sous le bloc rouge (3px) */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--ak-red-fold);
}
.side-page { position: relative; padding-top: 0; }
.side-page::before { /* bord plié de la page : 50px gris */
  content: ""; position: absolute; top: -32px; bottom: 0; left: calc(var(--bs-gutter-x) * .5); width: 50px;
  background: linear-gradient(90deg, #dddddd 0 49px, #fbfbfb 49px);
}
.page-flap { /* rabat rouge qui descend du bloc intro et passe sur le bord plié */
  position: absolute; top: -32px; height: 32px; left: calc(var(--bs-gutter-x) * .5); right: -100vw; z-index: 2;
}
.page-flap::before, .page-flap::after { content: ""; position: absolute; inset: 0; }
.page-flap::before { background: var(--ak-red-fold); clip-path: polygon(0 0, 100% 0, 100% 100%, 50px 100%); }
.page-flap::after  { background: var(--ak-red); clip-path: polygon(5px 0, 100% 0, 100% 100%, 55px 100%); }

/* ---------- Titre de droite : ruban qui s'enroule sur le bord plié (bkck_title_right) ---------- */
.band-right {
  position: relative; z-index: 3; margin: 0 0 1.75rem; padding-top: 30px;
  font: 400 1rem/40px var(--ak-font); text-transform: uppercase; letter-spacing: .08em; color: #fff;
}
.band-right::before {
  content: ""; position: absolute; left: 0; top: 0; width: 50px; height: 70px; background: var(--ak-red-fold);
  clip-path: polygon(0 0, 50px 30px, 50px 70px, 0 40px);
}
.band-right > span { display: block; margin-left: 50px; height: 40px; padding-left: 10px; background: var(--ak-red); }
.side-page .savoir { padding-left: 75px; }
.side-page .side-card { margin-left: 50px; }

/* ---------- Pied de page : le bord plié se prolonge en ombre (bkcg_footer) ---------- */
.ak-footer { overflow-x: clip; }
.foot-fold { position: absolute; inset: 0; pointer-events: none; }
.foot-fold .container, .foot-fold .row { height: 100%; }
.foot-fold .fold-col { position: relative; }
.foot-fold .fold-col::before { /* ombre du pli, toute la hauteur */
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--bs-gutter-x) * .5); width: 50px; background: #0c1a20;
}
.foot-fold .fold-col::after { /* la bande du dessus (rouge du contact) déborde de 31px et se replie */
  content: ""; position: absolute; top: 0; height: 31px; left: calc(var(--bs-gutter-x) * .5); right: -100vw;
  background: var(--fold-above, var(--ak-red));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50px 100%);
}

@media (max-width: 991.98px) {
  .side-page::before, .page-flap, .foot-fold { display: none; }
  .band-right::before { display: none; }
  .band-right { padding-top: 0; }
  .band-right > span { margin-left: 0; padding-left: 20px; }
  .side-page .savoir { padding-left: var(--ak-gutter); }
  .side-page .side-card { margin-left: 0; }
}
@media (max-width: 767.98px) {
  .band { padding-left: 20px; margin-left: -12px; margin-right: -12px; }
  .band::after { display: none; }
  .band::before { clip-path: none; }
  .ribbon-v { display: none; }
}

/* ---------- Vignettes réelles des projets ---------- */
.work-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.savoir .item svg { width: 170px; height: 170px; margin: -20px 0 -25px; }
.service .icon-wrap { width: 170px; margin: -20px -10px 0 1rem; }
@media (max-width: 991.98px) { .side-page .savoir { grid-template-columns: 1fr; max-width: 420px; } }