/* Extension V4 · direction A « Le Repère » — diapositives 13 à 24 (la campagne et les déclinaisons).
   S'ajoute à assets/presentation.css sans le modifier. Claude Opus 5.5, bras d'Opus 5.5 Pilot, 24/09/2026. */

.partie{color:var(--fumee);letter-spacing:.18em}
.x-sous{font-size:clamp(13.5px,1.08vw,17px);color:var(--ivoire-2);max-width:70ch;line-height:1.4}
.x-sous b{color:var(--ivoire);font-weight:600}
.x-titre{font-family:"Unbounded";font-weight:300;font-size:clamp(22px,2.5vw,40px);line-height:1.08;letter-spacing:-.01em}
.x-titre strong{font-weight:500}
.x-note{font-size:var(--t-petit);color:var(--fumee);line-height:1.4}
.x-note b{color:var(--ivoire-2);font-weight:600}
.x-tag{display:inline-block;font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--fumee);border:1px solid rgba(139,133,124,.6);padding:2px 7px;border-radius:2px;margin-left:8px;vertical-align:.1em}
.x-fig{min-height:0}
.x-fig.contain .vis img{object-fit:contain;background:#141311}
.x-fig .cap span{text-align:right}
.x-grid{flex:1;min-height:0;display:grid;gap:clamp(8px,1.1vw,16px)}

/* 13 · la campagne */
.camp{grid-template-columns:1.6fr 1fr;grid-template-rows:1fr 1fr}
.camp .a43{grid-row:span 2}
.bans{background:var(--graphite);border:1px solid rgba(238,233,225,.07);border-radius:4px;display:flex;flex-direction:column;min-height:0}
.bans .zone{flex:1;min-height:0;display:flex;gap:12px;align-items:center;justify-content:center;padding:6px;overflow:hidden}
.ban{position:relative;overflow:hidden;flex:none;background:#000;border-radius:2px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.ban iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0}
.bans .cap{padding:8px 10px;font-size:var(--t-label);letter-spacing:.06em;color:var(--ivoire-2);display:flex;justify-content:space-between;gap:8px}
.bans .cap b{color:var(--ivoire);font-weight:600}

/* 14 · le réel */
.reel-g{flex:1;min-height:0;display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,3vw,54px);align-items:center}
.reel-g video{height:calc(100vh - var(--top) - var(--bas) - 120px);max-height:760px;width:auto;aspect-ratio:9/16;background:#000;border-radius:6px;display:block}
.reel-n{display:grid;gap:12px;max-width:560px}
.reel-n ol{list-style:none;display:grid;gap:6px;font-size:var(--t-petit);color:var(--ivoire-2)}
.reel-n li span{color:var(--laiton);font-variant-numeric:tabular-nums;margin-right:8px}
.reel-n li em{color:var(--fumee);font-style:normal}
.reel-img{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;max-width:500px}
.reel-img .app .vis{aspect-ratio:9/16}
.reel-img .app .vis img{left:0;top:0;width:100%;height:100%;border-radius:0}
.reel-img .app .cap{display:none}

/* 15 · les réseaux */
.res-g{grid-template-columns:2.35fr 1fr}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;align-content:center}
.posts .app .vis{aspect-ratio:4/5}
.posts .app .vis img{left:0;top:0;width:100%;height:100%;border-radius:0}

/* 16 · la papeterie · 17 · sur la route · 18 · préparée, puis remise */
.pap-g{grid-template-columns:1.9fr 1fr;grid-template-rows:1fr}
.pap-v{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:8px;min-height:0}
.route-g{grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:1fr 1fr}
.route-g .hero{grid-row:span 2}
.lieu-g{grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto auto;align-content:center}
.lieu-g .app{aspect-ratio:3/2.26}
.lieu-g .txt{font-size:var(--t-petit);color:var(--ivoire-2);line-height:1.38}
.lieu-g .txt b{color:var(--ivoire);font-weight:600;display:block;font-family:"Unbounded";font-weight:400;font-size:clamp(13px,1.05vw,16px);margin-bottom:3px}

/* 19 · Genius poussé plus loin */
.gen-g{flex:1;min-height:0;display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(14px,2.4vw,40px);align-items:center}
.etats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1vw,14px)}
.etat{background:var(--graphite);border:1px solid rgba(238,233,225,.07);border-radius:5px;padding:10px 12px 12px;display:grid;gap:4px}
.etat svg{width:100%;height:auto;aspect-ratio:3/2;display:block}
.etat b{font-family:"Unbounded";font-weight:400;font-size:clamp(12.5px,1vw,15.5px)}
.etat b i{font-style:normal;color:var(--laiton);font-family:"Archivo";font-weight:600;font-size:.78em;margin-right:6px}
.etat p{font-size:clamp(11px,.8vw,12.5px);color:var(--fumee);line-height:1.35}
.tailles-g{display:flex;gap:14px;align-items:flex-end;margin-top:10px;flex-wrap:wrap}
.tailles-g figure{display:grid;gap:3px;justify-items:center}
.tailles-g figcaption{font-size:var(--t-label);color:var(--fumee)}
.chat2{display:flex;flex-direction:column;gap:clamp(6px,1vh,10px);background:var(--graphite);border-radius:6px;padding:clamp(12px,1.4vw,22px);max-height:100%;overflow:auto}
.chat2 .msg{max-width:92%}
.chat2 .msg.genius{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start}
.chat2 .msg.genius img{width:30px;height:30px}
.chat2 .tag{align-self:center;font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--fumee)}

/* animations des états (la page vivante ; figées en capture) */
@keyframes xBat{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
@keyframes xCran{0%,30%{transform:rotate(0)}45%,70%{transform:rotate(22.5deg)}85%,100%{transform:rotate(0)}}
@keyframes xLigne{0%,20%{stroke-dashoffset:260}55%,100%{stroke-dashoffset:0}}
@keyframes xSort{0%,25%{transform:translateX(-120px);opacity:.9}60%,100%{transform:translateX(0);opacity:1}}
@keyframes xCarte{0%,25%{opacity:0;transform:translateY(8px)}50%,100%{opacity:1;transform:none}}
.slide.on .anim-bat{animation:xBat 1s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.slide.on .anim-cran{animation:xCran 2.6s ease-in-out infinite;transform-box:view-box}
.slide.on .anim-ligne{stroke-dasharray:260;animation:xLigne 3s ease-in-out infinite alternate}
.slide.on .anim-sort{animation:xSort 3s ease-in-out infinite alternate}
.slide.on .anim-carte{animation:xCarte 3s ease-in-out infinite alternate}
.capture .slide .anim-bat,.capture .slide .anim-cran,.capture .slide .anim-ligne,.capture .slide .anim-sort,.capture .slide .anim-carte{animation:none!important}
@media (prefers-reduced-motion:reduce){.anim-bat,.anim-cran,.anim-ligne,.anim-sort,.anim-carte{animation:none!important}}

/* 20 · la charte */
.charte-g{grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr}
.regle{background:var(--graphite);border:1px solid rgba(238,233,225,.07);border-radius:4px;display:flex;flex-direction:column;overflow:hidden;cursor:zoom-in;min-height:0}
.regle .vis{flex:1;min-height:0;position:relative;background:#141311}
.regle .vis img{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);object-fit:contain}
.regle .t{padding:7px 10px 9px;display:grid;gap:3px}
.regle .t b{font-family:"Unbounded";font-weight:400;font-size:clamp(12.5px,1vw,15.5px)}
.regle .t span{font-size:clamp(11px,.8vw,12.5px);color:var(--ivoire-2);line-height:1.3}
.regle .t span.non{color:var(--fumee)}
.regle .t span i{font-style:normal;color:var(--laiton);font-weight:600;margin-right:5px}
.regle .t span.non i{color:var(--fumee)}

/* 21 · Facebook et YouTube */
.fbyt-g{grid-template-columns:1.75fr 1fr}
.fbyt-d{display:grid;grid-template-rows:auto auto 1fr;gap:10px;align-content:start;min-height:0}
.fbyt-d video{width:100%;aspect-ratio:16/9;background:#000;border-radius:4px;display:block}

/* 22 · une campagne par voiture */
.pv-g{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.6vw,26px)}
.pv{display:flex;flex-direction:column;align-items:stretch;gap:6px;min-height:0}
.fiche{background:var(--graphite);border:1px solid rgba(238,233,225,.08);border-radius:4px;padding:10px 12px;font-size:clamp(10.5px,.78vw,12px);line-height:1.45;color:var(--ivoire-2);align-self:center}
.fiche .k{color:var(--laiton);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:.86em;display:block;margin-top:5px}
.fiche .k:first-child{margin-top:0}
.fiche b{color:var(--ivoire);font-weight:600}
.pv .fiche{min-height:calc(4 * 1.45em + 20px)}
.fiche i{font-style:normal;color:var(--laiton);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.84em;margin-right:4px}
.pv .fl{text-align:center;color:var(--laiton);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;font-weight:600}
.pv .app{flex:1;min-height:0;height:auto;width:auto;aspect-ratio:9/16;align-self:center}
.pv .app .vis img{left:0;top:0;width:100%;height:100%;object-fit:cover;border-radius:0}

/* 23 · Genius en démonstration */
.demo-g{flex:1;min-height:0;display:grid;grid-template-columns:.9fr 1.3fr;gap:clamp(16px,3vw,50px);align-items:center}
.demo-g .etat-vif{display:flex;align-items:center;gap:16px}
.demo-g .etat-vif svg{width:clamp(120px,11vw,170px);height:auto;aspect-ratio:3/2}
.demo-g .etat-vif .n{font-family:"Unbounded";font-weight:400;font-size:clamp(15px,1.3vw,20px)}
.demo-g .etat-vif .n small{display:block;font-family:"Archivo";font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;color:var(--laiton);margin-bottom:4px;font-weight:600}
.questions{display:grid;gap:8px}
.questions button{text-align:left;background:none;border:1px solid rgba(238,233,225,.22);color:var(--ivoire);border-radius:999px;padding:10px 16px;font:500 clamp(13px,1vw,15.5px)/1.2 "Archivo";cursor:pointer;display:flex;align-items:center;gap:10px}
.questions button::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ivoire);flex:none}
.questions button.on{background:var(--ivoire);color:var(--nuit);border-color:var(--ivoire)}
.questions button.on::before{background:var(--nuit)}
.scenar{font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--fumee);border:1px dashed rgba(139,133,124,.6);padding:6px 10px;border-radius:3px;display:inline-block}
.demo-chat{background:var(--graphite);border-radius:6px;padding:clamp(12px,1.4vw,22px);display:flex;flex-direction:column;gap:clamp(7px,1.1vh,12px);min-height:min(430px,56vh);max-height:calc(100vh - var(--top) - var(--bas) - 150px);overflow:auto}
.demo-chat .msg{animation:xApp .35s ease both}
@keyframes xApp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.capture .demo-chat .msg{animation:none}
.demo-chat .msg.genius .qui .etat-mini{width:18px;height:18px}
.demo-chat .cur{display:inline-block;width:2px;height:1em;background:var(--ivoire);vertical-align:-.15em;margin-left:2px;animation:xClig 1s steps(2) infinite}
@keyframes xClig{50%{opacity:0}}

/* 24 · le livre du vendeur */
.livre-g{flex:1;min-height:0;display:grid;grid-template-columns:1.05fr 1fr 1fr;gap:clamp(12px,1.8vw,28px);align-content:center}
.livre-col{display:grid;gap:clamp(10px,1.6vh,18px);align-content:start}
.tel-phrase{border-left:2px solid var(--braise);padding:4px 0 4px 16px}
.tel-phrase .label{margin-bottom:8px;display:block}
.tel-phrase q{font-family:"Unbounded";font-weight:300;font-size:clamp(17px,1.6vw,25px);line-height:1.25;quotes:"«\00a0" "\00a0»"}
.bloc-l{background:var(--graphite);border-radius:4px;padding:clamp(12px,1.2vw,18px);display:grid;gap:7px}
.bloc-l h3{font-family:"Unbounded";font-weight:400;font-size:clamp(13px,1.05vw,16px)}
.bloc-l ul{list-style:none;display:grid;gap:6px;font-size:clamp(12px,.9vw,14px);color:var(--ivoire-2);line-height:1.36}
.bloc-l li{padding-left:14px;position:relative}
.bloc-l li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:1px;background:var(--laiton)}
.bloc-l.non li::before{background:var(--fumee);height:1px;width:8px}
.bloc-l.non li{color:var(--fumee)}
.bloc-l.non li s{color:var(--ivoire-2);text-decoration-color:rgba(216,64,30,.0);text-decoration:none}
.bloc-l .g{color:var(--jaune)}

/* -------- téléphone -------- */
@media (max-width:760px){
  .x-titre{font-size:clamp(19px,5.6vw,24px)}
  .x-sous{font-size:12.5px;line-height:1.35}
  .x-note{font-size:11px}
  .x-grid{gap:7px}
  .camp{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto}
  .camp .a43{grid-row:auto;grid-column:1 / -1;aspect-ratio:3/2.15}
  .camp .presse{aspect-ratio:3/2.6}
  .camp .bans{grid-column:auto}
  .bans .zone{gap:6px;padding:4px}
  .bans .cap,.x-fig .cap{padding:4px 6px;font-size:9.5px}
  .camp .ban.l{display:none}
  .reel-g{grid-template-columns:1fr;gap:8px;justify-items:center;align-content:start}
  .reel-g video{height:min(62svh,560px)}
  .reel-n{max-width:none;gap:6px}
  .reel-n ol,.reel-img{display:none}
  .res-g{grid-template-columns:1fr}
  .res-g .desk-only{display:none}
  .res-tel{display:grid;grid-template-columns:auto 1fr;gap:8px;min-height:0;align-items:start}
  .res-tel img.p{height:min(56svh,480px);width:auto;border-radius:18px}
  .res-tel .st{display:grid;gap:6px}
  .res-tel .st img{height:min(17.6svh,150px);width:auto;border-radius:8px}
  .pap-g{grid-template-columns:1fr;grid-template-rows:auto auto}
  .pap-g .scene{aspect-ratio:3/2.1}
  .pap-v{grid-template-columns:repeat(4,1fr);grid-template-rows:none;height:150px}
  .route-g{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto}
  .route-g .hero{grid-row:auto;grid-column:1 / -1;aspect-ratio:3/1.85}
  .route-g .app{aspect-ratio:3/2.2}
  .lieu-g{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;align-content:start}
  .lieu-g .trois{order:-1;grid-column:1 / -1;aspect-ratio:3/2.2}
  .lieu-g .app{aspect-ratio:3/2.45}
  .lieu-g .txt{grid-column:1 / -1;font-size:11.5px}
  .lieu-g .txt.t1,.lieu-g .txt.t2{display:none}
  .gen-g{grid-template-columns:1fr;gap:8px;align-items:start}
  .etats{grid-template-columns:repeat(3,1fr);gap:5px}
  .etat{padding:5px 6px 6px;gap:2px}
  .etat p{display:none}
  .etat b{font-size:10.5px}
  .tailles-g{display:none}
  .chat2{max-height:34svh;padding:9px;gap:5px}
  .chat2 .msg{font-size:11.5px;padding:6px 9px}
  .chat2 .msg.genius{grid-template-columns:22px 1fr;gap:6px}
  .chat2 .msg.genius img{width:22px;height:22px}
  .charte-g{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr)}
  .regle .t{padding:4px 6px 6px}
  .regle .t b{font-size:10.5px}
  .regle .t span{display:none}
  .fbyt-g{grid-template-columns:1fr;grid-template-rows:auto auto}
  .fbyt-d{grid-template-rows:auto}
  .fbyt-d .x-note{display:none}
  .pv-g{grid-template-columns:repeat(3,1fr);gap:6px}
  .pv{gap:4px}
  .pv .fiche,.pv .fl{display:none}
  .pv .app{flex:none;width:100%;height:auto;aspect-ratio:9/17.1;align-self:stretch}
  .pv .app{height:auto;width:100%}
  .pv .cap{padding:3px 5px;font-size:9px}
  .demo-g{grid-template-columns:1fr;gap:8px;align-items:start}
  .demo-g .etat-vif svg{width:84px}
  .demo-g .etat-vif .n{font-size:13px}
  .questions{grid-template-columns:1fr 1fr 1fr;gap:5px}
  .questions button{padding:7px 8px;font-size:11px;border-radius:14px;gap:5px}
  .questions button::before{display:none}
  .demo-chat{max-height:44svh;min-height:0;padding:9px;gap:6px}
  .demo-chat .msg{font-size:11.5px;padding:6px 9px}
  .livre-g{grid-template-columns:1fr;gap:8px;align-content:start}
  .tel-phrase q{font-size:15px}
  .bloc-l{padding:8px 10px;gap:4px}
  .bloc-l h3{font-size:12.5px}
  .bloc-l ul{font-size:11px;gap:3px}
  .livre-col{gap:8px}
}
@media (min-width:761px){.tel-only{display:none!important}}

/* 24 · onglets du livre, sur téléphone seulement */
.livre-tabs{display:flex;gap:5px;flex-wrap:wrap}
@media (max-width:760px){
  .bloc-l[data-onglet]:not(.on){display:none}
  .livre-tabs button{padding:5px 10px}
}
