/* Page projet Kidy Clic — styles propres à la page (le cadre vient de base.css + projet.css) */
/* =====================================================================
   UNIVERS KIDY CLIC — un blanc rosé, le rose vif du logo (#F72959), les pastels rose (#FFA5FC) et bleu (#A2D5D8)
   Grille 12 col. Chaque bloc = filet + rubrique, texte (4 col) / visuels (8 col).
   ===================================================================== */
html{overflow-x:clip}
.page-projet{--fond-projet:#FAF6F7;--texte-projet:#1B1B1B;--accent-projet:#F72959;--rose:#FFA5FC;--bleu:#A2D5D8;--trait-projet:rgba(27,27,27,.18);--doux-projet:#77696D;--tuile:#FAF6F7;--ink:27,27,27}
.planche{color:var(--texte-projet)}
.mono{color:inherit;font-size:max(11px,calc(11px*var(--k)))}
.bloc-tete,.chap .num,figure.f figcaption .leg,.credit{color:var(--doux-projet)!important}

/* --- hero : la paire d'affiches en situation --- */
.p-hero{height:min(calc(100vh - var(--barre) - var(--cadre-l)),760px);min-height:560px}
.p-hero::after{display:none}
.p-hero .fondu{position:absolute;top:0;bottom:0;right:0;width:64%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 18%,#000 46%),linear-gradient(0deg,transparent 0%,rgba(0,0,0,.5) 12%,#000 34%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 18%,#000 46%),linear-gradient(0deg,transparent 0%,rgba(0,0,0,.5) 12%,#000 34%);mask-composite:intersect}
.p-hero .fondu img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;animation:h-lent 22s linear both}
@keyframes h-lent{from{transform:scale(1.1)}to{transform:scale(1)}}
.p-hero .p-titre{font-size:min(13vw,190px);line-height:.82;white-space:nowrap;max-width:none}

/* --- intro --- */
.p-meta dl{border-top-color:var(--texte-projet)}
.p-meta dt{color:var(--doux-projet)}
.p-texte p+p{color:var(--texte-projet);font-size:16px}
.p-texte p+p+p{margin-top:12px}
.p-texte .lab{color:var(--doux-projet)}

/* --- chapitre --- */
.chap{display:grid;grid-template-columns:repeat(12,1fr);gap:0 var(--gouttiere);padding:120px var(--m) 64px;border-top:1px solid var(--texte-projet)}
.chap .num{grid-column:1/-1;display:flex;justify-content:space-between;margin-bottom:26px}
.chap h2{grid-column:1/8;font-weight:900;font-stretch:25%;text-transform:uppercase;line-height:.84;font-size:min(8vw,112px);text-wrap:balance}
.chap h2 span{color:var(--accent-projet)}
.chap p{grid-column:9/13;align-self:end;font-size:17px;line-height:1.55}

/* --- bloc --- */
.bloc{display:grid;grid-template-columns:repeat(12,1fr);gap:0 var(--gouttiere);padding:0 var(--m) 96px}
.bloc-tete{grid-column:1/-1;display:flex;justify-content:space-between;border-top:1px solid var(--trait-projet);padding-top:10px;margin-bottom:30px}
.bloc .tx{grid-column:1/5;align-self:start}
.bloc .vis{grid-column:5/13;min-width:0}
.bloc.inv .tx{grid-column:9/13;grid-row:2}
.bloc.inv .vis{grid-column:1/9;grid-row:2}
.bloc.plein .tx{grid-column:1/6;margin-bottom:34px}
.bloc.plein .vis{grid-column:1/-1}
.tx h3{font-size:34px;font-weight:800;font-stretch:32%;text-transform:uppercase;line-height:.92;margin-bottom:16px;text-wrap:balance}
.tx p{font-size:16px;line-height:1.6;max-width:40ch;text-wrap:pretty}
.tx p+p{margin-top:12px}
.tx ul{list-style:none;margin-top:18px;border-top:1px solid var(--texte-projet);max-width:40ch}
.tx li{display:grid;grid-template-columns:34px 1fr;padding:10px 0;border-bottom:1px solid var(--trait-projet);font-size:15px}
.tx li span{font-family:var(--mono);font-size:10px;color:var(--doux-projet);padding-top:4px}
.tx .aide{display:flex;align-items:flex-start;gap:8px;margin-top:22px;color:var(--accent-projet)}
.tx .aide::before{content:"";width:18px;height:1px;background:currentColor;flex:none;margin-top:.62em}

/* apparition légère + repères qui se tracent */
.monte{opacity:0;transform:translateY(22px);transition:opacity .9s var(--machine),transform 1.1s var(--machine)}
.monte.vu{opacity:1;transform:none}
figure.f.rv::before{clip-path:inset(0 100% 100% 0);transition:clip-path 1.1s var(--machine)}
figure.f.rv::after,figure.f.rv figcaption{opacity:0;transition:opacity .6s var(--doux) .5s}
figure.f.rv>.tuile{clip-path:inset(100% 0 0 0);transition:clip-path 1.2s var(--machine) .25s}
figure.f.rv.vu::before{clip-path:inset(0)}
figure.f.rv.vu::after,figure.f.rv.vu figcaption{opacity:1}
figure.f.rv.vu>.tuile{clip-path:inset(0)}

/* repère d'imprimeur (DA du site) : filet tireté + traits de coupe aux 4 coins + étiquettes mono */
.tuile{position:relative;overflow:hidden}
.tuile img{display:block;width:100%;height:auto}
figure.f{position:relative;display:flex;flex-direction:column;min-width:0;padding:22px;--cdc:rgba(var(--ink),.6)}
figure.f::before{content:"";position:absolute;inset:10px;border:1px dashed var(--trait-projet);pointer-events:none;z-index:2}
figure.f::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:
  linear-gradient(var(--cdc),var(--cdc)) left 0 top 10px/6px 1px no-repeat,linear-gradient(var(--cdc),var(--cdc)) left 10px top 0/1px 6px no-repeat,
  linear-gradient(var(--cdc),var(--cdc)) right 0 top 10px/6px 1px no-repeat,linear-gradient(var(--cdc),var(--cdc)) right 10px top 0/1px 6px no-repeat,
  linear-gradient(var(--cdc),var(--cdc)) left 0 bottom 10px/6px 1px no-repeat,linear-gradient(var(--cdc),var(--cdc)) left 10px bottom 0/1px 6px no-repeat,
  linear-gradient(var(--cdc),var(--cdc)) right 0 bottom 10px/6px 1px no-repeat,linear-gradient(var(--cdc),var(--cdc)) right 10px bottom 0/1px 6px no-repeat}
figure.f figcaption{position:absolute;inset:0;z-index:3;pointer-events:none}
figure.f figcaption .leg{position:absolute;left:34px;top:-4px;line-height:1;white-space:nowrap}
figure.f figcaption .seg{position:absolute;right:30px;top:-12px;pointer-events:auto;background:var(--fond-projet)}
figure.f figcaption .seg.bas{top:auto;bottom:-12px}

/* rangée justifiée : même hauteur, aucun recadrage */
.rang{display:flex;gap:var(--gouttiere);align-items:flex-start}
.rang>figure{flex:var(--r) 1 0;min-width:0}

/* sélecteur de vue */
.seg{display:inline-flex;border:1px solid rgba(var(--ink),.35);border-radius:999px;padding:2px;gap:2px;flex:none}
.seg button{border:0;background:none;border-radius:999px;padding:3px 10px;min-height:22px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--doux-projet);cursor:pointer;transition:background .35s,color .35s}
.seg button[aria-pressed="true"]{background:var(--texte-projet);color:var(--fond-projet)}
.seg button:focus-visible{outline:2px solid var(--accent-projet);outline-offset:2px}

/* vues qui se remplacent par un scan (de haut en bas), la case prend la hauteur de la vue */
.scan{position:relative;margin-inline:auto;transition:height .75s var(--machine),width .75s var(--machine)}
figure.f[data-x="vues"]{transition:width .75s var(--machine);max-width:100%}
.bloc.inv figure.f[data-x="vues"]{margin-left:auto}
.scan img{position:absolute;left:0;top:0;width:100%;height:auto;clip-path:inset(0);z-index:1}
.scan img.on{z-index:2}
.scan img:not(.on):not(.reste){visibility:hidden}
.scan .scan-in{clip-path:inset(0 0 100% 0)!important}
.scan .scan-go{transition:clip-path .8s var(--machine)!important}
.scan[role="button"]{cursor:pointer}
.scan[role="button"]:focus-visible{outline:2px dashed var(--accent-projet);outline-offset:6px}

/* les deux logos s'écrivent l'un après l'autre : clic… clac ; un clic les réécrit */
.paire{display:grid;grid-template-columns:1fr 1fr;gap:var(--gouttiere)}
.ecrit.clic .tuile{background:var(--accent-projet)}
.ecrit.clac .tuile{background:var(--bleu)}
.logo-z{display:flex;justify-content:center;align-items:center;aspect-ratio:4/3;cursor:pointer;color:#fff}
.clac .logo-z{color:var(--accent-projet)}
.logo{width:auto;height:72%;clip-path:inset(0 100% 0 0)}
.ecrit.vu .logo{animation:ecrire 1.5s cubic-bezier(.45,.05,.4,1) .3s forwards}
.ecrit.clac.vu .logo{animation-delay:1.7s}
.logo.encore{animation:ecrire 1.5s cubic-bezier(.45,.05,.4,1) forwards!important}
.clac .logo.encore{animation-delay:1.3s!important}
@keyframes ecrire{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
.logo-z:focus-visible{outline:2px dashed currentColor;outline-offset:-10px}
.charte{list-style:none;margin-top:22px;border-top:1px solid var(--texte-projet);max-width:40ch}
.tx .charte li{display:grid;grid-template-columns:76px 1fr;align-items:center;padding:10px 0;border-bottom:1px solid var(--trait-projet);font-size:14px}
.tx .charte li span{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--doux-projet);padding:0}
.charte b{font-weight:500;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.charte i{display:inline-block;width:14px;height:14px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(17,17,17,.2)}
.charte i.dg{background:var(--dg);width:34px}


/* la planche d'autocollants : ils se collent à l'arrivée ; le coin se soulève au survol ;
   on les décolle (le coin se replie, on voit le dos blanc), on les promène en 3D, on les recolle ailleurs */
@property --s{syntax:'<length>';inherits:true;initial-value:0px}
@property --z{syntax:'<length>';inherits:false;initial-value:0px}
@property --k{syntax:'<number>';inherits:false;initial-value:1}
@property --rx{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --ry{syntax:'<angle>';inherits:false;initial-value:0deg}
.colle{display:grid;grid-template-columns:6fr 6fr;gap:var(--gouttiere);align-items:start}
.planche-s .tuile{overflow:visible}
.feuille{position:relative;aspect-ratio:1.425;background:#fff;background-image:radial-gradient(rgba(27,27,27,.09) 1px,transparent 1.3px);background-size:16px 16px;touch-action:none;overflow:hidden}
.stk{position:absolute;left:var(--x);top:var(--y);width:var(--w);cursor:grab;user-select:none;touch-action:none;
  --s:0px;--rx:0deg;--ry:0deg;--z:0px;--k:1;
  transform:perspective(700px) rotate(var(--r)) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--k));
  filter:drop-shadow(2.5px 0 0 #fff) drop-shadow(-2.5px 0 0 #fff) drop-shadow(0 2.5px 0 #fff) drop-shadow(0 -2.5px 0 #fff) drop-shadow(0 1px 1.5px rgba(27,27,27,.22));
  transition:--s .35s cubic-bezier(.3,1.3,.5,1),--z .4s cubic-bezier(.2,1.3,.4,1),--k .4s cubic-bezier(.2,1.3,.4,1),--rx .25s ease-out,--ry .25s ease-out,filter .3s}
.stk img{display:block;width:100%;height:auto;pointer-events:none;-webkit-user-drag:none}
/* la face : on lui retire le coin replié */
.stk .face{-webkit-mask-image:linear-gradient(340deg,transparent var(--s),#000 calc(var(--s) + .6px));mask-image:linear-gradient(340deg,transparent var(--s),#000 calc(var(--s) + .6px))}
/* le dos : le même coin, en blanc, retourné de l'autre côté du pli */
.stk .dos{position:absolute;left:0;top:0;transform-origin:0 0;
  transform:translate(calc((var(--s) - .342 * var(--W) - .9397 * var(--H)) * -.684),calc((var(--s) - .342 * var(--W) - .9397 * var(--H)) * -1.8794)) matrix(.766,-.6428,-.6428,-.766,0,0);
  filter:brightness(0) invert(.93) drop-shadow(0 -3px 4px rgba(27,27,27,.2));
  -webkit-mask-image:linear-gradient(340deg,#000 var(--s),transparent calc(var(--s) + .6px));mask-image:linear-gradient(340deg,#000 var(--s),transparent calc(var(--s) + .6px))}
.stk:hover{--s:calc(var(--H) * .3)}
.stk.decolle{--s:calc(var(--H) * .4);--k:1.03;cursor:grabbing;
  filter:drop-shadow(2.5px 0 0 #fff) drop-shadow(-2.5px 0 0 #fff) drop-shadow(0 2.5px 0 #fff) drop-shadow(0 -2.5px 0 #fff) drop-shadow(8px 14px 10px rgba(27,27,27,.24))}
.stk.recolle{animation:recolle .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes recolle{0%{--k:1.03}45%{--k:.97}100%{--k:1}}
.planche-s.rv .stk{opacity:0}
.planche-s.vu .stk:not(.posee){animation:pose .55s cubic-bezier(.2,1.5,.4,1) both;animation-delay:calc(.25s + var(--i) * .12s)}
.planche-s .stk.posee{opacity:1}
/* le calque de la page : un autocollant décollé de la planche peut se coller n'importe où */
.calque-stk{position:absolute;left:0;top:0;width:100%;height:0;z-index:40;pointer-events:none}
.calque-stk .stk{pointer-events:auto}
@keyframes pose{0%{opacity:0;--k:1.5;--z:120px;--s:60px}60%{opacity:1;--k:.94;--z:0px;--s:0px}100%{opacity:1;--k:1;--z:0px;--s:0px}}
figure.f figcaption .remettre{all:unset;position:absolute;right:30px;top:-6px;pointer-events:auto;background:var(--fond-projet);cursor:pointer;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--doux-projet);padding:0 8px;line-height:1}
figure.f figcaption .remettre:hover{color:var(--accent-projet)}

/* l'affiche change par un flash, comme un déclenchement */
.eclair{position:absolute;inset:0;z-index:5;background:#fff;opacity:0;pointer-events:none}
.eclair.go{animation:eclair .55s ease-out}
.sans-scan .scan-go,.sans-scan .scan-in{transition:none!important;clip-path:inset(0)!important}
@keyframes eclair{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
.flash .x-note.sol{transition:opacity .3s}
.flash[data-k="1"] .x-note.sol{opacity:0}

/* le répertoire de dessins : ils se tracent en rose à l'arrivée, et bougent au survol */
.dessins .tuile{background:#fff}
.planche-d{display:grid;grid-template-columns:repeat(9,1fr);gap:26px 22px;padding:34px 30px;align-items:center;justify-items:center;color:var(--accent-projet)}
.dd{display:block;width:100%;max-width:110px;opacity:0;transform:scale(.6) rotate(-8deg);transition:opacity .4s,transform .6s cubic-bezier(.2,1.6,.4,1);transition-delay:calc(var(--i)*45ms)}
.dessins.vu .dd{opacity:1;transform:none}
.dd svg{display:block;width:100%;height:auto;max-height:110px}
.dd:hover{animation:gigote .5s ease-in-out}
@keyframes gigote{25%{transform:rotate(-7deg) scale(1.08)}75%{transform:rotate(6deg) scale(1.08)}}

/* goodies : trois produits, chacun avec ses couleurs */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gouttiere);align-items:start}
.trio .scan{width:100%!important}
.seg.pastilles{gap:6px;padding:4px}
.seg.pastilles button{width:16px;height:16px;min-height:0;padding:0;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(27,27,27,.25)}
.seg.pastilles button[aria-pressed="true"]{background:var(--c);box-shadow:0 0 0 2px var(--fond-projet),0 0 0 3px var(--texte-projet)}
.p-citation p span{color:var(--accent-projet)}

/* vues : éléments .v (image ou bloc) ; la page entière défile dans le cadre */
.scan .v{position:absolute;left:0;top:0;width:100%;clip-path:inset(0);z-index:1}
.scan img.v{height:auto}
.scan div.v{height:100%}
.scan .v.on{z-index:2}
.scan .v:not(.on):not(.reste){visibility:hidden}
.scan.plein-l{width:100%!important}
.defile{overflow-y:auto;overscroll-behavior:contain;background:#fff;scrollbar-width:thin;scrollbar-color:var(--accent-projet) transparent}
.defile img{display:block;width:100%;height:auto;transform:translateY(0)}

/* note manuscrite */
.x-note{position:absolute;font-family:var(--hand);color:var(--rouge);font-size:32px;line-height:.9;white-space:nowrap;z-index:4;pointer-events:none}
.x-note svg{position:absolute;overflow:visible}.x-note path{fill:none;stroke:var(--rouge);stroke-width:2.2;stroke-linecap:round}

/* citation */
.p-citation{display:grid;grid-template-columns:repeat(12,1fr);gap:0 var(--gouttiere);padding:0 var(--m) 96px}
.p-citation small{grid-column:1/-1;border-top:1px solid var(--trait-projet);padding-top:10px;margin:0 0 26px;color:var(--doux-projet)}
.p-citation p,.p-citation.longue p{grid-column:1/11;font-size:min(7vw,104px);line-height:.86;color:var(--texte-projet)}
.p-citation p span{color:var(--accent-projet)}

.credit{padding:0 var(--m) 60px}
.vis>*+*{margin-top:calc(var(--gouttiere) + 22px)}
.doigt{display:none}
@media (hover:none){.souris{display:none}.doigt{display:inline}}

@media (max-width:900px){
  .trio,.colle{grid-template-columns:1fr;gap:40px}.paire{grid-template-columns:1fr}.planche-d{grid-template-columns:repeat(5,1fr)}
  .p-hero .fondu{width:100%;opacity:.55}
  .p-hero .p-titre{font-size:clamp(64px,20vw,150px)}
  .chap{padding:72px var(--m) 48px}.chap h2,.chap p{grid-column:1/-1}.chap p{margin-top:20px}
  .chap .num{flex-direction:column;align-items:flex-start;gap:4px}
  .bloc{padding-bottom:64px}.bloc .tx,.bloc .vis,.bloc.inv .tx,.bloc.inv .vis{grid-column:1/-1!important;grid-row:auto!important}
  .bloc .tx{margin-bottom:24px}
  .p-citation p,.p-citation.longue p{grid-column:1/-1;font-size:44px}
  .rang{flex-direction:column;gap:40px}.rang>figure{flex:none;width:100%}
  .x-note{font-size:26px}
}
@media (max-width:600px){
  .p-hero{height:auto;min-height:0;display:flex;flex-direction:column}
  .p-hero .fondu{position:relative;width:100%;height:68vw;opacity:1;-webkit-mask-image:linear-gradient(0deg,transparent 0%,#000 40%);mask-image:linear-gradient(0deg,transparent 0%,#000 40%)}
  .p-hero .h-in{position:relative;left:auto;right:auto;bottom:auto;padding:22px var(--m) 30px}
  figure.f figcaption .seg{right:18px}
  figure.f figcaption .seg.bas{right:auto;left:50%;transform:translateX(-50%)}
  .seg.bas button{padding:3px 6px}.seg.bas .pt{display:none}
  .x-note{display:none}
}
@media (prefers-reduced-motion:reduce){.dd{opacity:1;transform:none}.logo{clip-path:none!important;animation:none!important}.eclair{display:none}.defile.on img{animation:none}.monte{opacity:1;transform:none}.p-hero .fondu img{animation:none}.scan{transition:none}}
.scan .defile img.pg{position:static!important;visibility:visible!important;clip-path:none!important;z-index:auto!important}