/* Page projet Carta — styles propres à la page (le cadre vient de base.css + projet.css) */
/* =====================================================================
   UNIVERS CARTA — beaucoup de blanc, le cyan #009FE3 (100 % C) et l'orange #F37127 ; Ridley Grotesk côté projet
   Grille 12 col. Chaque bloc = filet + rubrique, texte (4 col) / visuels (8 col).
   ===================================================================== */
html{overflow-x:clip}
.page-projet{--fond-projet:#F5F7F8;--texte-projet:#1A1A1A;--accent-projet:#009FE3;--orange:#F37127;--trait-projet:rgba(26,26,26,.18);--doux-projet:#6E7377;--tuile:#F5F7F8;--ink:26,26,26}
.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 série en galerie, fondue dans le blanc --- */
.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% 45%;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(16vw,230px);line-height:.8;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}

/* le logo : le carré cyan se décale de son tracé à l'apparition ; au survol il revient dessus */
.logo-z{display:flex;justify-content:center;padding:48px 0}
.logo{width:min(64%,420px);height:auto;overflow:visible}
.logo .aplat{fill:var(--ed,#009FE3);transform:translate(-26.75px,-26.74px);transition:transform 1.1s var(--machine),fill .6s var(--doux)}
figure.vu .logo .aplat,.editions .logo .aplat{transform:none}
figure.marque:hover .logo .aplat{transform:translate(-26.75px,-26.74px)}
.nuancier{list-style:none;margin-top:22px;border-top:1px solid var(--texte-projet);max-width:40ch}
.tx .nuancier li{display:grid;grid-template-columns:30px 1fr;align-items:center;padding:10px 0;border-bottom:1px solid var(--trait-projet);font-size:14px}
.nuancier i{width:20px;height:20px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(26,26,26,.18)}
.tx .nuancier li span{font-family:var(--mono);font-size:11px;color:var(--doux-projet);padding:0}
.nuancier b{display:block;font-family:var(--flex);font-size:15px;color:var(--texte-projet);font-weight:700}

/* 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)}

/* les éditions : une couleur par édition, le logo et l'affiche suivent */
.ed-z{grid-column:1/-1;display:grid;grid-template-columns:5fr 7fr;gap:var(--gouttiere);align-items:center}
.ed-d{min-width:0}
.ed-g{display:flex;flex-direction:column;align-items:flex-start}
.ed-logo{width:100%;display:flex;justify-content:flex-start;padding:10px 0 28px}
.ed-logo .logo{width:min(58%,280px)}
.ed-choix{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;width:100%;border-top:1px solid var(--texte-projet)}
.ed-choix button{all:unset;cursor:pointer;display:grid;grid-template-columns:22px 1fr;column-gap:12px;padding:12px 0;border-bottom:1px solid var(--trait-projet);opacity:.5;transition:opacity .3s}
.ed-choix button i{grid-row:span 2;width:16px;height:16px;margin-top:3px;background:var(--c);transition:transform .45s var(--machine)}
.ed-choix button b{font-size:16px;font-weight:700}
.ed-choix button small{font-family:var(--mono);font-size:11px;color:var(--doux-projet)}
.ed-choix button:hover,.ed-choix button[aria-pressed="true"]{opacity:1}
.ed-choix button[aria-pressed="true"] i{transform:rotate(45deg) scale(.85)}
.ed-choix button:focus-visible{outline:2px solid var(--texte-projet);outline-offset:2px}
.ed-g .aide{color:var(--texte-projet)!important}
.carte{background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px var(--trait-projet)}
.carte-in{display:flex;flex-direction:column;align-items:center;gap:26px;width:62%}
.carte-in .logo{width:100%}
.carte-in span{color:var(--doux-projet)}

/* motions : format panneau urbain, côte à côte */
.rang.etroit{max-width:var(--mw,720px);margin-inline:auto}
.motion video{display:block;width:100%;height:auto;background:var(--fond-projet)}

/* 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){
  .ed-z{grid-template-columns:1fr;gap:40px}
  .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){
  .ed-choix{grid-template-columns:1fr}
  .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){.logo .aplat{transition: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}