/* Qui suis-je — l'estampe sur la gravure colorée. Écrit par _passation-qui-suis-je/bati-cime10.py */
#toile{position:fixed;inset:0;z-index:0;width:100%;height:100%;pointer-events:none}
#stage{position:relative;z-index:2}
.qs-bloc{background:var(--vf-nuit)}
.qs-tete{display:flex;align-items:center;padding:clamp(40px,7vh,72px) var(--marge) clamp(24px,4vh,40px)}
.qs-bloc--tete{--teinte:var(--vf-sable);--encre:var(--vf-sable);--teinte2:var(--vf-vert-vif);display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,3.4vw,52px);align-items:end;padding:clamp(24px,3vw,40px);width:fit-content;max-width:100%}
.photo{margin:0;display:grid;gap:10px;justify-items:start}
.cadre{width:clamp(150px,17vw,240px);aspect-ratio:4/5;overflow:hidden;border-radius:14px}
.cadre img{display:block;width:174.5%;max-width:none;height:auto;margin-left:-27.3%;margin-top:-7.8%}
.legende{display:none;font:700 1.375rem/1.2 var(--font-hand);color:var(--vf-lin)}
.qs-tete-texte{display:grid;gap:clamp(16px,2vw,26px)}
.mot{margin:0;white-space:nowrap;font:400 clamp(3rem,8.6vw,7.5rem)/.94 var(--font-display);text-transform:uppercase;color:var(--vf-sable)}
.nom-propre{margin:0;max-width:24ch;font:400 clamp(1.375rem,2vw,1.875rem)/1.3 var(--font-title);letter-spacing:-.012em;color:var(--vf-lin);text-wrap:pretty}
.qs-etiq{margin:0;font:700 clamp(1.125rem,1.2vw,1.1875rem)/1.3 var(--font-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--vf-vert-vif)}
.qs-appel{justify-self:start;display:inline-flex;align-items:center;min-height:56px;padding:0 28px;border-radius:999px;
 background:var(--vf-rose);color:var(--vf-nuit);font:700 clamp(1.0625rem,1.25vw,1.1875rem)/1 var(--font-ui);text-decoration:none}

/* ═══ TROIS TÊTES ═══ le rose est réservé à l'appel : la tête renvoie vers « Mon parcours » par une passerelle. */
.passerelle--tete{margin:0!important;padding:0;border:0}
.qs-bloc--tete .pastille{background:var(--vf-sable)}
.qs-bloc--tete .qs-souligne svg{stroke:var(--vf-sable)}
/* la tête, en estampe : « Qui suis-je » comme les stations, filet sable, sa ligne en sous-titre (choisi le 21/09). */
.mot{font:600 clamp(3rem,8vw,7rem)/.98 var(--font-title);font-variation-settings:var(--estampe);letter-spacing:-.03em;text-transform:none;color:var(--vf-lin);white-space:normal}
.mot br{display:none}
.mot::after{content:"";display:block;width:1.4em;height:.06em;min-height:3px;margin-top:.26em;background:var(--vf-sable)}
.nom-propre{font-weight:350;font-variation-settings:var(--estampe);font-size:clamp(1.5rem,2.3vw,2.125rem);max-width:22ch}
.qs-etiq{font:400 clamp(1.125rem,1.3vw,1.25rem)/1.4 var(--font-title);font-variation-settings:var(--estampe);letter-spacing:0;text-transform:none;color:color-mix(in srgb,var(--vf-lin) 78%,var(--vf-nuit))}

/* ── le seuil ── */
.st{padding:0 0 clamp(32px,4vw,64px)}
.seuil{min-height:46vh;display:flex;align-items:center}
.qs-bloc--seuil{position:relative;width:min(100%,max(calc(var(--wm,100vw) * .62),640px));padding:clamp(24px,3vw,44px) clamp(28px,3.4vw,56px) clamp(24px,3vw,44px) var(--marge)}
.titres{position:relative;display:grid;gap:clamp(16px,1.8vw,26px);justify-items:start;min-width:0}
.num{font:400 .42em/1 var(--font-display);color:var(--encre);vertical-align:.34em;margin-right:.32em;letter-spacing:0;font-variant-numeric:tabular-nums}
.nom{margin:0;max-width:100%;font:500 clamp(2.75rem,6.8vw,6rem)/1.02 var(--font-title);letter-spacing:-.03em;text-wrap:balance;color:var(--vf-lin)}
.nom::after{content:"";display:block;width:1.6em;height:.06em;min-height:3px;margin-top:.3em;background:var(--teinte)}
.sous{margin:0;max-width:min(34ch,100%);font:400 clamp(1.375rem,2.1vw,2rem)/1.32 var(--font-title);letter-spacing:-.012em;color:var(--vf-lin);text-wrap:pretty}

/* ═══ L'ESTAMPE ═══ Fraunces à pleine taille optique, lettres creuses pour le numéro et les écriteaux, repérage. */
:root{--estampe:"opsz" 144,"SOFT" 100,"WONK" 1}
.nom{font-weight:600;font-variation-settings:var(--estampe);letter-spacing:-.02em}
.num{color:transparent;-webkit-text-stroke:calc(.03em + .6px) var(--encre);font-size:.56em;vertical-align:.22em;margin-right:.26em}
.sous{font-weight:350;font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 0}
.nom-propre{font-weight:350;font-variation-settings:var(--estampe)}
/* « un peu empâté » : la slab creuse bouche ses contre-formes. Les écriteaux secondaires passent en Fraunces pleine,
   réglages de l'estampe ; seul le premier écriteau garde la slab, et le numéro reste creux (assez grand pour tenir). */
.creux{font-family:var(--font-title);font-weight:600;font-variation-settings:var(--estampe);letter-spacing:-.01em;color:var(--encre)}
.fait--lieux{font-family:var(--font-title);font-weight:500;font-variation-settings:var(--estampe)}
.faits{position:relative;border-right:1.5px solid var(--teinte)}
.faits::after{content:"";position:absolute;top:0;bottom:0;right:-6px;width:1.5px;background:var(--teinte)}
.cadre-wrap{position:relative;padding:0 12px 12px 0}
.cadre-wrap::after{content:"";position:absolute;inset:12px 0 0 12px;border:2px solid var(--vf-sable);border-radius:14px;pointer-events:none}
.cadre{position:relative;z-index:1}
/* le nom sous le cadre, hors du repérage : plus rien ne passe derrière lui (« visibilité du nom ») */
.legende{display:block;margin-top:14px;color:var(--vf-lin);font-size:1.625rem;line-height:1.2}

/* ── le corps : le chiffre à gauche, la prose à droite ── */
.corps{display:grid;grid-template-columns:minmax(160px,19%) minmax(0,52ch);column-gap:clamp(20px,2.6vw,40px);align-items:start;padding:0 var(--marge)}
.qs-bloc--faits{position:sticky;top:12vh;text-align:right;padding:clamp(16px,2vw,26px) 0 clamp(16px,2vw,26px) clamp(16px,2vw,26px)}
.faits{display:grid;gap:clamp(16px,2vw,28px);padding-right:clamp(16px,1.8vw,24px);border-right:3px solid var(--teinte);container-type:inline-size}
.fait{margin:0;font-family:var(--font-display);font-weight:400;line-height:.96;letter-spacing:-.012em;
 font-size:min(3.6rem,calc(100cqi / (var(--n,8) * .62)));color:var(--encre);text-wrap:balance}
.fait--lieux{font-size:min(1.75rem,calc(100cqi / 9));line-height:1.18;color:var(--vf-lin)}
.fait--lieux span{display:block}
.qs-bloc--prose{padding:clamp(22px,2.8vw,40px)}
.qs-bloc--prose p{margin:0 0 1.3em;font-size:clamp(1.25rem,1.5vw,1.375rem);line-height:1.6;text-wrap:pretty}
.qs-bloc--prose p:empty{display:none}
.qs-bloc--prose p:last-child{margin-bottom:0}
.qs-bloc--prose .chapo{font:400 clamp(1.5rem,1.9vw,1.75rem)/1.4 var(--font-title);font-variation-settings:var(--estampe);letter-spacing:-.012em;margin-bottom:1.1em}
.qs-bloc--prose h3,.qs-bloc--prose .h3{margin:1.7em 0 .6em;padding-top:.7em;border-top:3px solid var(--teinte);
 font:600 clamp(1.375rem,2vw,1.625rem)/1.22 var(--font-title);font-variation-settings:var(--estampe);letter-spacing:-.015em;color:var(--vf-lin);text-wrap:balance}
/* la passerelle : le mot souligné à la main du site, le trait dans la teinte de la station */
.passerelle{margin:1.6em 0 0!important;padding-top:1.1em;border-top:1px solid color-mix(in srgb,var(--vf-lin) 22%,transparent)}
.lien{display:inline-flex;align-items:center;gap:.55em;text-decoration:none;color:var(--vf-lin)}
.qs-souligne{position:relative;display:inline-block;padding-bottom:.38em;font:700 clamp(1.375rem,1.05rem + .8vw,1.75rem)/1.2 var(--font-hand)}
.qs-souligne svg{position:absolute;left:-.12em;right:-.12em;bottom:-.12em;width:calc(100% + .24em);height:.62em;fill:none;stroke:var(--teinte);stroke-width:5;stroke-linecap:round;overflow:visible}
.pastille{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:999px;background:var(--encre)}
.pastille svg{width:22px;height:22px;fill:none;stroke:var(--vf-nuit);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){
 .pastille svg{transition:transform .25s cubic-bezier(.2,.9,.3,1.2)}
 .lien:hover .pastille svg{transform:translateX(3px)}
}
.lien:focus-visible{outline:2px solid var(--teinte);outline-offset:6px;border-radius:4px}
.roles{margin:0 0 1.3em;padding:0;list-style:none;display:grid;gap:.35em}
.roles li{padding-left:2.1em;text-indent:-2.1em;font-size:clamp(1.25rem,1.5vw,1.375rem);line-height:1.5}
.roles li::before{content:"";display:inline-block;width:1.3em;height:3px;margin-right:.8em;vertical-align:.3em;background:var(--teinte)}

@media (max-width:900px){
 .corps{grid-template-columns:minmax(0,1fr);row-gap:14px}
 .qs-bloc--faits{position:static;text-align:left;padding:clamp(16px,2vw,26px)}
 .faits{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4em 1.1em;padding:0 0 .55em;border-right:0;border-bottom:1.5px solid var(--teinte);container-type:normal}
 .faits::after{top:auto;right:0;left:0;bottom:-6px;width:auto;height:1.5px}
 .fait{font-size:clamp(1.5rem,4.4vw,2.25rem)}
 .fait--lieux{font-size:1.125rem;flex-basis:100%;display:flex;flex-wrap:wrap;gap:.2em .9em}
 .fait--lieux span{display:inline}
}
@media (max-width:760px){
 :root{--marge:18px}
 .qs-bloc--tete{grid-template-columns:1fr;align-items:start;width:100%;padding:24px 18px}
 .cadre{width:min(46vw,190px)}
 .qs-bloc--seuil{grid-template-columns:1fr;row-gap:16px;max-width:100%;padding:24px 18px}
 .seuil{min-height:34vh}
 .fait{font-size:clamp(1.5rem,7vw,2rem)}
}

/* ── le montage dans le site ── */
.qs{--vf-vert-vif:#43a87c;   /* le vert vif validé n'est pas dans la palette du site : sans lui, --encre était vide et les écriteaux de 01 tombaient en lin */
 --rose-encre:color-mix(in srgb,var(--vf-rose) 62%,var(--vf-lin));--marge:clamp(20px,5vw,84px);
 --estampe:"opsz" 144,"SOFT" 100,"WONK" 1;position:relative;z-index:2;
 margin:calc(-1 * var(--gap)) calc(-1 * var(--gap)) 0;font-family:var(--font-text)}
/* La toile est DANS la scène (qui fait plan) : à -1 elle passe sous les blocs de nuit, au-dessus du fond. */
.qs #toile{z-index:-1}
/* Le halo du site (.champ) est remplacé ici par la gravure ; et le fond redevient la nuit pleine. */
.champ{display:none}
body{background:var(--vf-nuit)}
@media (max-width:1023px){ .qs{margin:-10px -10px 0} }
.qs ::selection{background:color-mix(in srgb,var(--vf-sable) 34%,transparent);color:var(--vf-lin)}
/* Le rail et la barre du haut passent devant la toile, sur fond de nuit plein. */
.rail{z-index:5;background:var(--vf-nuit)}
.topbar{background:var(--vf-nuit)}
.qs-fin{position:relative;z-index:2;padding:clamp(40px,4.8vw,90px) var(--marge) 22vh}