/* apropos2.css — styles de la page (refonte « carnet + cinéma ») */
/* « Qui sommes-nous » : bloc « Nos réseaux » (qui-sommes-nous.js, section .qs-res).
   Une table sombre bordée de perforations de film ; dessus, un billet « séance TikTok » (l'intégration officielle,
   seulement avec l'accord) et une étiquette de bagage Instagram. Le reste de la page garde ses styles d'origine. */

.qs-res{
  --qs-fond:var(--cine-nuit,#0b131c);
  --qs-papier:#f3ede2;
  --qs-papier2:#fbf8f2;
  --qs-encre:#1b2433;
  --qs-gris:#5b6370;
  --qs-corde:#d8c49b;
  --qs-perfo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='12'%3E%3Crect x='7' y='2' width='12' height='8' rx='2' fill='%23f3ede2' fill-opacity='.78'/%3E%3C/svg%3E");
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--qs-fond);color:var(--cine-creme,#f3ede2);
  padding:clamp(70px,8vw,112px) 0 clamp(70px,8vw,108px);
}
/* perforations de pellicule, en haut et en bas de la table */
.qs-res:before,.qs-res:after{content:"";position:absolute;left:0;right:0;height:12px;background:var(--qs-perfo) repeat-x 0 0;opacity:.32;pointer-events:none}
.qs-res:before{top:14px}
.qs-res:after{bottom:14px}
html[data-theme=dark] .qs-res{--qs-fond:#070d14;--qs-papier:#e9e1d2;--qs-papier2:#efe8db}

.qs-res .qs-res-in{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;padding-top:0;padding-bottom:0}
@media (min-width:960px){
  .qs-res .qs-res-in{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"tete tt" "ig tt";column-gap:clamp(40px,5vw,76px);row-gap:34px;align-items:start}
  .qs-res-tete{grid-area:tete;padding-top:6px}
  .qs-tt{grid-area:tt}
  .qs-ig-zone{grid-area:ig}
}

/* --- en-tête */
.qs-res-tete .cine-clap{margin-bottom:16px}
.qs-res .qs-res-tete h2{font-family:var(--f-display);font-weight:400;font-size:clamp(2.05rem,4.1vw,3.35rem);line-height:1.04;letter-spacing:-.02em;color:var(--cine-creme,#f3ede2);margin:0 0 16px}
.qs-res .qs-res-tete h2 em{color:var(--cine-saumon,#f6a27a);font-style:italic}
.qs-res .qs-res-tete p{margin:0;max-width:40ch;color:#c9d0da;font-size:clamp(1rem,1.3vw,1.1rem);line-height:1.6}
.qs-res .qs-res-tete p b{color:var(--cine-creme,#f3ede2);font-weight:600}

/* --- le billet « séance TikTok » */
.qs-tt{position:relative;background:var(--qs-papier);color:var(--qs-encre);border-radius:16px;box-shadow:6px 6px 0 var(--orange,#c94d23)}
.qs-tt-bande{position:relative;display:flex;align-items:center;gap:14px;padding:16px 20px 18px;background:var(--qs-encre);color:var(--cine-creme,#f3ede2);border-radius:16px 16px 0 0}
/* encoches du billet, sur la ligne de découpe */
.qs-tt-bande:before,.qs-tt-bande:after{content:"";position:absolute;bottom:-11px;width:22px;height:22px;border-radius:50%;background:var(--qs-fond);z-index:1}
.qs-tt-bande:before{left:-11px}
.qs-tt-bande:after{right:-11px}
.qs-tt-logo{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--qs-papier);color:var(--qs-encre)}
.qs-tt-logo .ico{width:22px;height:22px}
.qs-res .qs-tt-bande h3{margin:0;font-family:var(--f-display);font-weight:500;font-size:clamp(1.12rem,1.6vw,1.3rem);line-height:1.15;color:var(--cine-creme,#f3ede2)}
.qs-tt-bande h3 small{display:block;margin-top:5px;font-family:var(--cine-mono);font-size:.66rem;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--cine-or,#f2b33d)}
.qs-tt-corps{container-type:inline-size;padding:14px;border-top:2px dashed #1b243340}

/* la place du module TikTok est réservée (hauteur mesurée selon la largeur) : rien ne saute au chargement */
.qs-tt-hote{display:grid;min-height:410px}
.qs-tt-hote>*{grid-area:1/1;min-width:0}
@container (min-width:376px){.qs-tt-hote{min-height:460px}}
@container (min-width:420px){.qs-tt-hote{min-height:484px}}

/* façade (avant l'accord) */
.qs-tt-facade{align-self:center;display:flex;flex-direction:column;align-items:center;gap:12px;padding:10px 6px;text-align:center;transition:opacity .22s ease,visibility 0s}
.qs-tt[data-etat=charge] .qs-tt-facade{opacity:0;visibility:hidden;transition:opacity .22s ease,visibility 0s .22s}
.qs-res .qs-tt-titre{margin:4px 0 0;font-family:var(--f-display);font-weight:500;font-size:clamp(1.12rem,2.4cqw,1.3rem);line-height:1.2;color:var(--qs-encre)}
.qs-res .qs-tt-txt{margin:0;max-width:44ch;font-size:.9rem;line-height:1.5;color:var(--qs-gris)}
.qs-tt-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 16px;margin-top:4px}
.qs-res .qs-tt-btn{min-height:44px;padding:10px 20px;border:0;border-radius:999px;background:var(--qs-encre);color:var(--cine-creme,#f3ede2);font:600 .92rem/1.2 var(--f-body);cursor:pointer}
.qs-res .qs-tt-btn:focus-visible{outline:3px solid var(--orange,#c94d23);outline-offset:3px}
.qs-res .qs-tt-lien{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 4px;color:var(--qs-encre);font-weight:600;font-size:.92rem;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.qs-res .qs-tt-lien:hover{color:var(--orange,#c94d23)}
.qs-res .qs-tt-lien:focus-visible{outline:3px solid var(--orange,#c94d23);outline-offset:2px;border-radius:4px}

/* amorce de film (compte à rebours 3-2-1) — au repos : le triangle « lecture » */
.qs-tt-amorce{position:relative;flex:none;width:min(100%,360px);height:clamp(100px,26cqw,150px);border-radius:8px;overflow:hidden;color:var(--cine-creme,#f3ede2);
  background:linear-gradient(#f3ede22e,#f3ede22e) center/100% 1px no-repeat,linear-gradient(#f3ede22e,#f3ede22e) center/1px 100% no-repeat,#0b131c}
.qs-tt-amorce:before,.qs-tt-amorce:after{content:"";position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%)}
.qs-tt-amorce:before{height:82%;aspect-ratio:1;border:2px solid #f3ede28c}
.qs-tt-amorce:after{height:62%;aspect-ratio:1;border:1px solid #f3ede247}
.qs-tt-balai{position:absolute;left:50%;top:50%;height:82%;aspect-ratio:1;margin:0;border-radius:50%;transform:translate(-50%,-50%);opacity:0;
  background:conic-gradient(from 0deg,#f3ede238 0 25%,transparent 0)}
.qs-tt-amorce b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-poster);font-weight:400;font-size:clamp(2.6rem,9cqw,4.4rem);line-height:1;opacity:0}
.qs-tt-lecture{position:absolute;left:50%;top:50%;width:0;height:0;margin:-15px 0 0 -9px;border-style:solid;border-width:15px 0 15px 26px;border-color:transparent transparent transparent var(--cine-creme,#f3ede2)}
/* sous l'écran au montage : on prépare le « 3 » ; à l'écran : le compte à rebours, une fois */
.qs-tt-amorce.qs-pret .qs-n3{opacity:1}
.qs-tt-amorce.qs-pret .qs-tt-lecture{opacity:0}
.qs-tt-amorce.qs-joue .qs-tt-balai{animation:qs-balai .5s linear 0s 3,qs-allume 1.5s linear 0s 1}
.qs-tt-amorce.qs-joue .qs-n3{animation:qs-allume .5s linear 0s 1}
.qs-tt-amorce.qs-joue .qs-n2{animation:qs-allume .5s linear .5s 1}
.qs-tt-amorce.qs-joue .qs-n1{animation:qs-allume .5s linear 1s 1}
.qs-tt-amorce.qs-joue .qs-tt-lecture{animation:qs-lecture .32s var(--cine-ressort,cubic-bezier(.34,1.56,.64,1)) 1.5s both}
@keyframes qs-balai{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(1turn)}}
@keyframes qs-allume{0%,100%{opacity:1}}
@keyframes qs-lecture{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}

/* module TikTok (après l'accord) */
.qs-tt-embed{align-self:center;width:100%;min-width:0}
.qs-tt-embed blockquote.tiktok-embed{margin:0 auto}
.qs-res .qs-tt-echec{margin:12px auto 0;max-width:44ch;text-align:center;font-size:.9rem;line-height:1.5;color:var(--qs-gris)}
.qs-res .qs-tt-echec a{color:var(--qs-encre);font-weight:600}

/* --- l'étiquette de bagage Instagram */
.qs-ig-zone{position:relative;padding-top:44px}
.qs-ig-note{position:absolute;top:0;left:62px;font-family:var(--f-hand);font-size:1.55rem;line-height:1;color:var(--cine-saumon,#f6a27a);transform:rotate(-4deg);white-space:nowrap}
.qs-ig-note:after{content:"";position:absolute;left:-40px;top:8px;width:34px;height:30px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 30'%3E%3Cpath d='M32 4C20 2 9 7 6 24M6 24l-3-8M6 24l7-5' fill='none' stroke='%23f6a27a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain}
.qs-res .qs-ig{position:relative;display:flex;align-items:stretch;width:100%;max-width:470px;min-height:150px;
  background:var(--qs-papier);color:var(--qs-encre);border-radius:16px 10px 10px 16px;text-decoration:none;
  box-shadow:0 1px 0 #0000002e,0 22px 34px -18px #000000d9;
  transform:rotate(-2deg);transform-origin:24px 50%;transition:transform .28s var(--cine-ressort,cubic-bezier(.34,1.56,.64,1))}
@media (hover:hover) and (pointer:fine){.qs-res .qs-ig:hover{transform:translateY(-3px) rotate(-.6deg)}}
.qs-res .qs-ig:active{transform:translateY(1px) rotate(-2deg) scale(.992);transition-duration:.08s}
.qs-res .qs-ig:focus-visible{outline:3px solid var(--cine-or,#f2b33d);outline-offset:5px}
/* œillet + ficelle */
.qs-ig-oeil{position:relative;flex:none;width:48px}
.qs-ig-oeil:before{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--qs-fond);border:4px solid #c9b48a;box-shadow:inset 0 1px 0 #0006}
.qs-ig-oeil:after{content:"";position:absolute;left:50%;bottom:50%;width:22px;height:calc(50% + 40px);margin-left:-11px;border:2px solid var(--qs-corde);border-bottom:0;border-radius:14px 14px 0 0;transform:rotate(9deg);transform-origin:50% 100%;z-index:-1}
.qs-ig-corps{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:3px;padding:16px 14px 14px 6px}
.qs-ig-sur{font-family:var(--cine-mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--orange,#c94d23)}
.qs-ig-nom{font-family:var(--f-poster);font-weight:400;font-size:clamp(2.3rem,5.2vw,3.05rem);line-height:.98;letter-spacing:.005em;color:var(--qs-encre)}
.qs-ig-dit{font-family:var(--f-display);font-style:italic;font-size:1.02rem;line-height:1.25;color:var(--qs-gris)}
.qs-ig-code{display:block;width:min(150px,80%);height:20px;margin-top:9px;opacity:.82;
  background:repeating-linear-gradient(90deg,var(--qs-encre) 0 2px,transparent 2px 4px,var(--qs-encre) 4px 5px,transparent 5px 8px,var(--qs-encre) 8px 11px,transparent 11px 12px,var(--qs-encre) 12px 13px,transparent 13px 17px)}
.qs-ig-talon{flex:none;width:84px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:var(--orange,#c94d23);color:#fbf8f2;border-left:2px dashed #fbf8f2b3;border-radius:0 10px 10px 0;font-weight:700;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase}
.qs-ig-talon .ico{width:28px;height:28px}
.qs-ig-talon span[aria-hidden]{font-size:1rem;letter-spacing:0;transition:transform .2s ease}
@media (hover:hover) and (pointer:fine){.qs-res .qs-ig:hover .qs-ig-talon span[aria-hidden]{transform:translate(2px,-2px)}}
html[data-theme=dark] .qs-ig-talon{background:#b4401b}

/* l'étiquette tombe sur la table (une fois, si elle était sous l'écran au montage) */
.qs-res .qs-ig.qs-leve{transform:translateY(-16px) rotate(-8deg) scale(1.04);opacity:0;transition:none}
.qs-res .qs-ig.qs-pose{animation:qs-pose .74s cubic-bezier(.2,.9,.25,1) both}
@keyframes qs-pose{
  0%{opacity:0;transform:translateY(-16px) rotate(-8deg) scale(1.04)}
  22%{opacity:1}
  58%{transform:translateY(1px) rotate(-1.2deg) scale(.995)}
  78%{transform:translateY(0) rotate(-2.5deg) scale(1)}
  100%{opacity:1;transform:rotate(-2deg)}
}

@media (max-width:959px){
  .qs-tt{margin-right:6px}
  .qs-ig-zone{padding-top:40px}
}
@media (max-width:420px){
  .qs-tt-bande{padding:14px 16px 16px;gap:12px}
  .qs-tt-corps{padding:12px 10px}
  .qs-res .qs-ig{min-height:136px}
  .qs-ig-oeil{width:42px}
  .qs-ig-talon{width:72px}
  .qs-ig-note{left:54px;font-size:1.4rem}
}
@media (prefers-reduced-motion:reduce){
  .qs-res .qs-ig,.qs-tt-facade{transition:none}
}