/* ==========================================================================
   AXOLOTL — board.css : planches de marque (projets d'exemple), scène à onglets, avis en pile
   Chaque projet a son propre univers : couleurs, typo, formes des photos, palette, spécimen.
   ========================================================================== */
.board{position:relative;background:var(--b-bg);color:var(--b-fg);border-radius:var(--r-xl);padding:34px 40px 38px;display:flex;flex-direction:column;gap:18px;overflow:hidden}
.bd-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.bd-wm{font-family:var(--b-font);font-weight:var(--b-w);font-style:var(--b-fs);text-transform:var(--b-tt);letter-spacing:var(--b-ls);font-size:clamp(2.4rem,5vw,4.6rem);line-height:.95;font-variation-settings:normal;color:var(--b-fg)}
.bd-tag{font-size:1.1rem;max-width:44ch;opacity:.92}
.bd-row{display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center}
.bd-aa{font-family:var(--b-font);font-weight:var(--b-w);font-style:var(--b-fs);font-size:clamp(3.4rem,6vw,5.2rem);line-height:.9;color:var(--b-aa)}
.bd-line{font-family:var(--b-font);font-weight:var(--b-w);font-style:var(--b-fs);font-size:1.05rem;opacity:.9;max-width:22ch;margin-top:6px}
.bd-sw{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px;justify-content:flex-end}
.bd-sw li{position:relative;width:60px;height:60px}
.bd-sw li i{display:block;width:100%;height:100%;border-radius:50%;border:2px solid color-mix(in srgb,var(--b-fg) 35%,transparent)}
.bd-sw li b{position:absolute;left:-8px;right:-8px;bottom:-22px;font:600 .68rem var(--f-body);text-align:center}
.bd-imgs{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:14px}
.bd-imgs figure{margin:0;aspect-ratio:1/1.02;overflow:hidden;border-radius:var(--b-rad,16px);border:var(--b-bd,0);box-shadow:var(--b-sh,none);position:relative}
.bd-imgs figure:nth-child(2){margin-top:26px}
.bd-imgs img{width:100%;height:100%;object-fit:cover}
.bd-link{align-self:flex-start;display:inline-flex;gap:10px;align-items:center;min-height:46px;padding:12px 22px;border-radius:var(--b-btn,999px);background:var(--b-acc);color:var(--b-link);font-weight:700;font-family:var(--f-body);font-style:normal;text-transform:none;letter-spacing:0;transition:gap .3s,transform .3s var(--ease)}
.bd-link:hover{gap:16px;transform:translateX(4px)}
.board .tags li{border-color:color-mix(in srgb,var(--b-fg) 40%,transparent)}

/* scène à onglets : toute la scène change de couleurs, de typo et de formes */
.bstage-wrap{display:grid;grid-template-columns:minmax(250px,.62fr) 1.9fr;gap:30px;align-items:stretch}
.blist{display:flex;flex-direction:column;justify-content:center}
.blist button{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--pg-line);padding:16px 8px 16px 0;min-height:44px;cursor:pointer;font-family:var(--bf);font-size:clamp(1.5rem,2.4vw,2.2rem);line-height:1.02;color:var(--pg-ink);transition:transform .45s var(--ease)}
.blist button small{font-family:var(--f-body);font-size:.84rem;color:var(--pg-mute);display:flex;gap:8px;align-items:center;font-weight:600;text-transform:none;letter-spacing:0;font-style:normal}
.blist button small i{width:10px;height:10px;border-radius:50%;background:var(--bc)}
.blist button[aria-selected="true"],.blist button:hover{transform:translateX(12px)}
.blist button[aria-selected="true"]{border-bottom-width:3px}
.bstage{position:relative;min-width:0}
.bstage .bpanel+.bpanel{margin-top:22px}
.js .bstage .bpanel{display:none}
.js .bstage .bpanel.on{display:block;animation:bIn .6s var(--ease)}
@keyframes bIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (max-width:1000px){
  .bstage-wrap{grid-template-columns:1fr}
  .blist{flex-direction:row;flex-wrap:wrap;gap:8px}
  .blist button{width:auto;border:1.5px solid var(--pg-line);border-radius:999px;padding:9px 16px;font-size:1.05rem}
  .blist button small{display:none}
  .blist button[aria-selected="true"]{background:var(--pg-ink);color:var(--pg-bg);transform:none;opacity:1}
  .board{padding:28px 22px 30px}
  .bd-row{grid-template-columns:1fr;gap:16px}
  .bd-sw{justify-content:flex-start}
}
@media (max-width:600px){
  .bd-imgs{grid-template-columns:1fr 1fr}
  .bd-imgs figure:nth-child(3){display:none}
  .bd-sw li{width:48px;height:48px}
}

/* ---------- AVIS : portraits en pile, citation mot à mot, la page prend la couleur du service ---------- */
.rev{position:relative;padding:110px 0 90px;overflow:hidden;color:var(--rv-fg);--rv-fg:#241A00;--rv-mute:rgba(36,26,0,.78);--rv-bg:#F4C542;transition:color .7s}
.rev-bgs{position:absolute;inset:0;z-index:0}
.bgl{position:absolute;inset:0;display:block;opacity:0;transition:opacity .8s ease}
.bgl.on{opacity:1}
.rev .wrap{z-index:1}
.rev .pg-head{margin-bottom:24px}
.rev .pg-head h2 em,.rev .kicker{color:var(--rv-fg)}
.rev .pg-head h2 em{opacity:.55}
.rev .pg-head p{color:var(--rv-mute)}
.rev-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:64px;align-items:center}
.rev-left{display:flex;flex-direction:column;gap:30px;min-width:0}
.rev-list li{margin-bottom:22px}
.rev-list blockquote{font-family:var(--f-display);font-weight:760;font-variation-settings:"wdth" 84;font-size:clamp(1.5rem,2.6vw,2.4rem);line-height:1.1}
.rev-list p{color:var(--rv-mute);margin-top:6px}
.js .rev-list{display:none}
.rev-q{position:relative;margin-top:104px;padding-top:.3em;font-family:var(--f-display);font-weight:760;font-variation-settings:"wdth" 84;font-size:clamp(1.9rem,3.5vw,3.3rem);line-height:1.06;letter-spacing:-.02em;min-height:7.6em;transition:opacity .22s}
.rev-q[hidden]{display:none}
.js .rev-q[hidden]{display:block}
.rev-q.out{opacity:0}
.qm{position:absolute;left:-.04em;top:-.78em;font-size:3.2em;line-height:1;color:transparent;-webkit-text-stroke:2px color-mix(in srgb,var(--rv-fg) 28%,transparent);pointer-events:none}
.qw{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .12em .1em;margin:0 -.12em -.1em}
.qw>span{display:inline-block;transform:translateY(112%);transition:transform .75s var(--ease)}
.rev-q.in .qw>span{transform:none}
.rev-who{display:flex;align-items:center;gap:14px 22px;flex-wrap:wrap}
.rev-who b{font-family:var(--f-display);font-size:1.25rem;display:block;line-height:1.2}
.rev-who span.role{color:var(--rv-mute);font-size:.95rem}
.rev-chips{display:flex;gap:8px;flex-wrap:wrap}
.rev-chip{display:inline-flex;gap:8px;align-items:center;padding:7px 14px;border-radius:999px;background:color-mix(in srgb,var(--rv-fg) 12%,transparent);font-weight:700;font-size:.86rem}
.rev-chip i{width:12px;height:12px;border-radius:50%;background:var(--dc);border:2px solid color-mix(in srgb,var(--rv-fg) 30%,transparent)}
.rev-ctl{display:none;align-items:center;gap:18px}
.js .rev-ctl{display:flex}
.rbtn{position:relative;width:62px;height:62px;border-radius:50%;border:2px solid var(--rv-fg);background:transparent;color:var(--rv-fg);cursor:pointer;display:grid;place-items:center;transition:background .3s,color .3s,transform .35s var(--ease)}
.rbtn:hover{background:var(--rv-fg);color:var(--rv-bg);transform:scale(1.06)}
.rbtn.next{margin-left:6px}
.r-ring{position:absolute;inset:-9px;width:calc(100% + 18px);height:calc(100% + 18px);transform:rotate(-90deg);pointer-events:none}
.r-ring circle{fill:none;stroke-width:3}
.r-ring .t{stroke:color-mix(in srgb,var(--rv-fg) 18%,transparent)}
.r-ring .f{stroke:var(--rv-fg);stroke-linecap:round;stroke-dasharray:182.2;stroke-dashoffset:182.2}
.r-ring .f.run{animation:revT 7s linear forwards}
.rev:hover .r-ring .f,.rev.paused .r-ring .f{animation-play-state:paused}
@keyframes revT{to{stroke-dashoffset:0}}
.rev-count{font-family:var(--f-display);font-weight:800;font-size:1.1rem;font-variant-numeric:tabular-nums;margin-left:4px}
.rev-count small{font-weight:600;opacity:.65}
.rev-deck{position:relative;height:min(64vh,620px);min-height:480px;touch-action:pan-y;cursor:grab;user-select:none}
.rev-card{position:absolute;left:42%;top:50%;width:min(370px,76%);aspect-ratio:4/5;border-radius:30px;overflow:hidden;border:6px solid #fff;box-shadow:0 30px 70px rgba(27,18,51,.3);transition:transform .85s var(--ease),opacity .6s,filter .6s;will-change:transform;transform:translate(-50%,-50%)}
.rev-card[data-rel="0"]{transform:translate(-50%,-50%) rotate(-2deg)}
.rev-card[data-rel="1"]{transform:translate(calc(-50% + 46px),calc(-50% - 12px)) rotate(4deg) scale(.95);filter:brightness(.95)}
.rev-card[data-rel="2"]{transform:translate(calc(-50% + 92px),calc(-50% - 22px)) rotate(9deg) scale(.9);filter:brightness(.88)}
.rev-card[data-rel="3"]{transform:translate(calc(-50% + 92px),calc(-50% - 22px)) rotate(9deg) scale(.9);opacity:0;filter:brightness(.8)}
.rev-card.fly{transform:translate(-210%,-60%) rotate(-18deg)!important;opacity:0!important;z-index:20!important}
.rev-card.snap{transition:none!important}
.rev-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.rc-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(27,18,51,.85),rgba(27,18,51,0) 54%);pointer-events:none}
.rc-svc,.rc-brand{position:absolute;top:14px;background:#fff;color:var(--ink);padding:6px 14px 6px 10px;border-radius:999px;font-weight:700;font-size:.8rem;display:inline-flex;gap:8px;align-items:center;max-width:56%;white-space:nowrap}
.rc-svc{left:14px}
.rc-svc i{width:11px;height:11px;border-radius:50%;background:var(--dc);flex:0 0 auto;border:1px solid rgba(27,18,51,.3)}
.rc-brand{right:14px;padding:6px 14px;font-family:var(--bf);font-weight:var(--bw,700);font-style:var(--bfs,normal);text-transform:var(--btt,none);overflow:hidden;text-overflow:ellipsis;display:block}
.rc-name{position:absolute;left:18px;right:18px;bottom:16px;color:#fff;pointer-events:none}
.rc-name b{display:block;font-family:var(--f-display);font-size:1.3rem;line-height:1.1}
.rc-name span{font-size:.88rem;opacity:.92}
.rev-brands{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px 34px;margin-top:64px;padding-top:28px;border-top:1px solid color-mix(in srgb,var(--rv-fg) 26%,transparent)}
.rev-brands .lead-in{font-weight:700;font-size:.92rem;color:var(--rv-mute);margin-right:6px}
.rev-brands button{position:relative;background:none;border:0;cursor:pointer;color:var(--rv-fg);font-family:var(--bf);font-weight:var(--bw,700);font-style:var(--bfs,normal);text-transform:var(--btt,none);font-size:clamp(1.05rem,1.7vw,1.45rem);padding:4px 0;min-height:44px;transition:opacity .3s}
.rev-brands button:hover,.rev-brands button.on{opacity:1}
.rev-brands button.on::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:3px;border-radius:3px;background:var(--rv-fg)}
@media (max-width:1080px){.rev-grid{grid-template-columns:1fr;gap:40px}.rev-deck{height:480px;min-height:0}.rev-card{left:46%}}
@media (max-width:600px){.rev-q{min-height:9em;margin-top:48px}.rev-card{width:70%}.rbtn{width:54px;height:54px}}