/* ─────────────────────────────────────────────────────────────────────────────
   sections/trier.css — Section 3 · Trier (notes, raisons, mode suppression).
   Tout est rangé sous .trier. S'appuie sur sections.css (.sx, .lo, .mock) et
   maquettes.css (.mq, .s2, .mq-why) sans les modifier.
     UN ÉCRAN       sur ordinateur, la section tient dans la hauteur de la
                    fenêtre (88px libres en haut pour le menu, 24px en bas) :
                    titre et écran suivent la hauteur, la liste se resserre
     .trier__rep    repères mono de l'élément 01, en liste à points
     .tm            calque 01 : le tamis (planche notée d'un clic), piloté par trier.js
     .trier__h      hôte d'une maquette (remplit son calque)
     .trier__nt     calque 02 : la grille notée, et sous 900px la carte « Pourquoi ? »
     .cull          démo du mode suppression (calque 03), pilotée par trier.js
   Les tailles des démos suivent l'écran .mock (cqw, cqh = 1 % de sa largeur,
   de sa hauteur). Pas de bouton « Rejouer » : chaque démo se rejoue seule.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Texte ───────────────────────────────────────────────────────────────── */
.trier__rep{--sep:1.6em;list-style:none;margin-right:0;margin-bottom:0;margin-left:calc(-1 * var(--sep));padding:0;display:flex;flex-wrap:wrap;row-gap:2px;clip-path:inset(-4px -4px -4px var(--sep))}
.trier__rep li{position:relative;margin-left:var(--sep)}
/* Un point devant chaque repère ; celui qui ouvre une ligne sort du cadre, rogné. */
.trier__rep li::before{content:'';position:absolute;left:calc(var(--sep) / -2 - 2px);top:calc(50% - 2px);width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.55}
.trier .lo__note{max-width:48ch}

/* ── Un écran (ordinateur) ───────────────────────────────────────────────────
   La section tient dans la fenêtre : 88px libres en haut (le menu peut revenir
   par-dessus quand on remonte), 24px en bas. Le titre reste grand mais suit
   aussi la hauteur ; l'écran prend toute la hauteur qui reste sous le titre
   (--t-dispo) et sa colonne ne dépasse pas 1,5 fois cette hauteur : sur un
   écran large et bas, c'est le texte qui gagne la largeur. La liste se
   resserre (marges, pas le corps du texte). Mesures : voir le rapport. */
@media(min-width:901px){
  .trier{
    --sx-y:88px;
    --t-h2:min(clamp(36px,4.6vw,72px),7.4vh);
    --t-gap:clamp(18px,3vh,32px);
    --t-col:clamp(24px,3.2vw,56px);
    /* 88px en haut, 24px en bas, 4px de sécurité ; la pastille (32px + 12px de
       marge) et deux lignes de titre (interligne 1,02) */
    --t-dispo:calc(100vh - 116px - 44px - 2.04 * var(--t-h2) - var(--t-gap));
  }
  .trier .gp{margin-bottom:12px}
  .trier .sx__head h2{font-size:var(--t-h2)}
  .trier .sx__body{grid-template-columns:minmax(0,1fr) min(calc((700% - 5 * var(--t-col)) / 12),calc(var(--t-dispo) * 1.5));column-gap:var(--t-col);margin-top:var(--t-gap)}
  .trier .sx__txt{grid-column:1}
  .trier .sx__vis{grid-column:2;container-type:inline-size}
  .trier .mock__vp{aspect-ratio:auto;height:min(calc(100cqw / 1.45),max(320px,var(--t-dispo)))}   /* 320px au moins : la démo reste lisible sur une fenêtre très basse */
  .trier .lo{--lo-px:16px;--lo-n:26px;--lo-gap:12px}
  .trier .lo__b{min-height:54px;font-size:clamp(18px,1.45vw,20px)}
  .trier .lo__it.on .lo__b{padding-top:16px;padding-bottom:8px}
  .trier .lo__p{padding-bottom:16px}
  .trier .lo__p>*+*{margin-top:10px}
  .trier .sx__txt>.go{margin-top:20px}
}
/* À partir de 1200px, l'en-tête prend les mêmes colonnes que le corps : le
   chapeau s'aligne sur l'écran (plus étroit, le titre garderait mal ses deux lignes). */
@media(min-width:1200px){
  .trier .sx__head{grid-template-columns:minmax(0,1fr) min(calc((700% - 5 * var(--t-col)) / 12),calc(var(--t-dispo) * 1.5));column-gap:var(--t-col)}
}
/* Fenêtre basse (portable 1366 × 768 moins la barre du navigateur) : la liste
   se resserre encore un peu. */
@media(min-width:901px) and (max-height:700px){
  .trier .lo__b{min-height:48px}
  .trier .lo__p{padding-bottom:12px}
  .trier .sx__txt>.go{margin-top:16px}
}

/* ── L'écran ─────────────────────────────────────────────────────────────── */
.trier__h{position:absolute;inset:0}
/* Les boutons des maquettes : un contour orange foncé, lisible sur le blanc. */
.trier .mq button:focus-visible{outline:2px solid var(--acc-t);outline-offset:2px}
/* 02 : le « ? » se pose en bas à gauche de sa vignette ; le motif se décale
   pour rester lisible à côté de lui. */
.trier .mq.s2 .cd[data-note="10"] em,.trier .mq.s2 .cd[data-note="50"] em{left:40px;max-width:calc(100% - 46px)}

/* Calque 02 : sur ordinateur, la maquette remplit l'écran (la carte
   « Pourquoi ? » est posée dedans) ; sous 900px, la carte passe dessous. */
.trier__nt{position:absolute;inset:0}
.trier__h--nt{position:absolute;inset:0}
.trier__pq{display:none}

/* ── 01 · Le tamis ───────────────────────────────────────────────────────────
   La planche notée d'un clic. Le HTML est l'état final ; trier.js part de la
   pile et y arrive en ne touchant qu'à transform et opacity. Sur ordinateur,
   tout suit l'écran : la grille triée (6 colonnes × 7) à gauche, le bas du
   classement à droite, et la carte « Pourquoi ? » posée près de la photo
   choisie. Une vignette prend la plus grande taille qui tienne en largeur
   (cqw) ET en hauteur (cqh) ; si c'est la hauteur qui limite, le bas du
   classement prend la largeur en trop. Sous 600px d'écran : la grille (5 × 3),
   le bas du classement (2 × 2), puis la carte, l'une sous l'autre. */
.tm{
  --p:clamp(12px,2.8cqw,22px);       /* marge intérieure */
  --g:clamp(8px,1.9cqw,16px);        /* écart entre les blocs */
  --g2:clamp(4px,.8cqw,6px);         /* écart entre vignettes */
  --rc:31cqw;                        /* colonne du bas du classement (au moins) */
  --tete:40px;                       /* en-tête (.tm__tete) */
  --lab:24px;                        /* étiquette d'une liste et sa marge (.tm__lab) */
  --cols:6;
  --rows:7;
  --cw-l:calc((100cqw - 2 * var(--p) - var(--rc) - var(--g) - (var(--cols) - 1) * var(--g2)) / var(--cols));
  --cw-h:calc((100cqh - 2 * var(--p) - var(--tete) - var(--g) - var(--lab) - (var(--rows) - 1) * var(--g2)) / var(--rows) * 1.5);
  --cw:min(var(--cw-l),var(--cw-h));
  --ch:calc(var(--cw) / 1.5);
  --rouge:#C93C3C;                   /* pastille d'une ratée : 4,6:1 avec le blanc */
  position:absolute;inset:0;display:flex;flex-direction:column;gap:var(--g);
  padding:var(--p);background:#fff;color:var(--ink);font-family:var(--s);text-align:left;overflow:hidden;
  -webkit-tap-highlight-color:transparent}
.tm *,.tm *::before,.tm *::after{box-sizing:border-box}
.tm p{margin:0}

/* En-tête (décor) : la collection, le compteur, « Noter les photos ». */
.tm__tete{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px 16px;min-width:0;height:var(--tete)}
.tm__col{display:grid;gap:3px;min-width:0}
.tm__nom{font-size:max(14px,min(2.1cqw,16px));font-weight:600;letter-spacing:-.02em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm__cpt{display:grid;font-size:13px;line-height:1.25;color:var(--soft);font-variant-numeric:tabular-nums;white-space:nowrap}
.tm__cpt>span{grid-area:1/1}
.tm__cpt-a{opacity:0}
.tm__go{display:flex;align-items:center;gap:12px;min-width:0}
.tm__fs{font:600 12px/1.2 var(--m);letter-spacing:.1em;color:var(--soft);white-space:nowrap}
/* Les trois libellés occupent la même case : le bouton ne change pas de taille. */
.tm__bt{position:relative;display:grid;place-items:center;min-height:36px;padding:0 15px;border:1px solid var(--line);border-radius:10px;background:var(--paper);font:600 14px/1 var(--s);letter-spacing:-.01em;white-space:nowrap}
.tm__bt>span{grid-area:1/1;position:relative}
.tm__bt-f{position:absolute;inset:-1px;border-radius:inherit;background:var(--acc);opacity:0}
.tm__bt-a,.tm__bt-b{color:var(--ink);opacity:0}   /* encre sur l'orange : 6,6:1 */
.tm__bt-c{color:#0F7D46}
.tm__an{position:absolute;inset:-4px;border:2px solid var(--acc);border-radius:13px;opacity:0;pointer-events:none}

/* La planche : la grille triée et le bas du classement. */
.tm__corps{position:relative;flex:1 1 auto;min-height:0}
.tm__choix{display:grid;grid-template-columns:auto minmax(var(--rc),1fr);column-gap:var(--g)}
.tm__haut,.tm__bas{display:flex;flex-direction:column;min-width:0}
.tm__lab{flex:none;height:16px;margin-bottom:8px;font:600 12px/16px var(--m);letter-spacing:.12em;text-transform:uppercase;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm__g{display:grid;grid-template-columns:repeat(var(--cols),var(--cw));grid-auto-rows:var(--ch);gap:var(--g2)}
.tm__l{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-between;gap:var(--g2);margin:0;padding:0;list-style:none}

/* Une vignette : une case de la planche (6 × 4 vignettes de 150 × 100). */
.tm__c{position:relative;width:var(--cw);height:var(--ch);border-radius:6px}
.tm__in{position:absolute;inset:0;overflow:hidden;border-radius:inherit;background:#EDE8DD}
.tm__im{position:absolute;left:calc(var(--x,0) * -100%);top:calc(var(--y,0) * -100%);width:600%;height:400%;max-width:none;display:block}
.tm__sc{position:absolute;z-index:2;top:4px;right:4px;padding:3px 5px;border-radius:5px;background:rgba(26,21,16,.8);color:#fff;font:600 12px/1 var(--m);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.tm__sc--haut{background:var(--acc);color:var(--ink)}
.tm__sc--bas{background:var(--rouge)}
/* Les meilleures, cerclées d'orange. */
.tm__or{position:absolute;inset:-3px;border:2px solid var(--acc);border-radius:9px;pointer-events:none}

/* Le bas du classement : la vignette, puis sa raison principale. */
.tm__r{position:relative;display:flex;align-items:center;gap:10px;min-width:0;height:var(--ch);border-radius:8px}
.tm__r .tm__c{flex:none}
.tm__ra{display:grid;gap:3px;min-width:0}
.tm__ra span{font-size:max(12px,min(1.8cqw,14px));font-weight:500;line-height:1.2;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tm__ra b{font:600 12px/1 var(--m);color:#B42323}

/* Choisir une photo (trier.js : groupe de boutons radio, un seul arrêt de tabulation). */
.tm [role="radio"]{cursor:pointer;outline:none}
.tm__c[role="radio"]:focus-visible,.tm__r[role="radio"]:focus-visible{outline:2px solid var(--acc-t);outline-offset:4px}
.tm:not(.tm--anim) .tm__c.sel::after,.tm--why .tm__c.sel::after,
.tm:not(.tm--anim) .tm__r.sel .tm__c::after{content:'';position:absolute;z-index:3;inset:-4px;border:2px solid var(--ink);border-radius:10px;pointer-events:none}
.tm:not(.tm--anim) .tm__r.sel{background:#F6F2EB;box-shadow:0 0 0 4px #F6F2EB}

/* De la pile à la fin du tri : des cartes, avec leur ombre (calques composés
   seulement pendant qu'elles bougent). */
.tm--anim .tm__c{box-shadow:0 8px 18px -10px rgba(26,21,16,.55)}
.tm--joue .tm__c,.tm--joue .tm__in{will-change:transform}

/* « Pourquoi N ? » : les critères qui s'additionnent (comme la carte de l'onglet 02). */
.tm-why{position:absolute;z-index:30;left:0;top:calc(var(--lab) + var(--ch) + 2 * var(--g2));width:clamp(240px,42cqw,272px);padding:12px 14px 10px;border-radius:14px;background:#fff;box-shadow:0 26px 50px -22px rgba(43,24,16,.55),0 0 0 1px rgba(43,24,16,.08);pointer-events:none}
.tm-why__t{margin-bottom:8px;font:600 12px/1.2 var(--m);letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.tm-why ul{display:grid;gap:3px;margin:0;padding:0;list-style:none}
.tm-why li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13px;line-height:1.3;color:var(--soft)}
.tm-why li b{flex:none;font:600 13px/1.3 var(--m);color:var(--ink)}
.tm-why li.p b{color:#0F7D46}
.tm-why li.m b{color:#B42323}
.tm-why__n{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px;padding-top:7px;border-top:1px solid var(--line);font-size:14px;font-weight:600}
.tm-why__n b{font-size:24px;letter-spacing:-.04em;line-height:1;color:var(--acc-d)}
.tm-why__aide{margin-top:8px;font-size:12px;line-height:1.35;color:var(--soft)}
.tm-why__doigt{display:none}
@media(hover:none),(pointer:coarse){.tm-why__souris{display:none}.tm-why__doigt{display:inline}}
html:not(.js) .tm-why__aide{display:none}

/* Le curseur qui clique « Noter les photos » (décor). */
.tm__curseur{position:absolute;left:0;top:0;z-index:400;width:22px;height:auto;overflow:visible;pointer-events:none;opacity:0;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}
.tm__curseur path{fill:#fff;stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round}

/* Écran étroit (fenêtre d'ordinateur de 900 à 1000px, et téléphone) : six
   rangées, une carte « Pourquoi ? » plus petite. */
@container mock (max-width:559px){
  .tm{--rows:6}
  .tm__g>.tm__c:nth-child(n+37){display:none}
  .tm-why{padding:10px 12px 9px}
  .tm-why ul{gap:2px}
  .tm-why li,.tm-why li b{font-size:12px}
  .tm-why__n{margin-top:6px;padding-top:5px}
  .tm-why__n b{font-size:22px}
}
/* Sur ordinateur seulement, elle se resserre encore (sans l'aide) pour tenir
   sous la photo choisie. */
@media(min-width:901px){
  @container mock (max-width:559px){
    .tm-why{width:clamp(210px,46cqw,240px)}
    .tm-why__t{margin-bottom:5px}
    .tm-why ul{gap:1px}
    .tm-why li,.tm-why li b{line-height:1.2}
    .tm-why__n{margin-top:5px;padding-top:4px}
    .tm-why__n b{font-size:20px}
    .tm-why__aide{display:none}
  }
}

/* ── Démo du mode suppression ────────────────────────────────────────────── */
.cull{
  --cp:clamp(12px,2.6cqw,22px);      /* marge intérieure */
  --cg:clamp(10px,1.8cqw,16px);      /* écart entre en-tête, grille, barre */
  --cg2:clamp(6px,1.25cqw,10px);     /* écart entre vignettes */
  --rk:clamp(30px,4.6cqw,38px);      /* colonne des cases de rangée */
  --or:#F97708;                      /* contour des photos cochées */
  --case:#D96200;                    /* case cochée : 3,7:1 avec la coche blanche */
  position:absolute;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:var(--cg);
  padding:var(--cp);background:#fff;color:var(--ink);font-family:var(--s);text-align:left;
  -webkit-tap-highlight-color:transparent}
.cull *,.cull *::before,.cull *::after{box-sizing:border-box}
.cull p{margin:0}
.cull [hidden]{display:none!important}

/* En-tête : titre, pastille « Démo », consigne (le texte de l'application). */
.cull__tete{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 12px;min-width:0}
.cull__t{display:flex;align-items:center;gap:8px;min-width:0;font-size:16px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.cull__t svg{flex:none;width:18px;height:18px;fill:none;stroke:#B42323;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cull__demo{justify-self:end;display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:100px;background:#FFF1E2;color:var(--acc-t);font:600 12px/1.2 var(--m);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.cull__demo::before{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:var(--or);box-shadow:0 0 0 3px rgba(249,119,8,.18)}
.cull__aide{grid-column:1/-1;font-size:13px;line-height:1.4;color:var(--soft)}

/* Grille : rangées de 4 (3 sous 900px), une case par rangée. */
.cull__g{display:grid;grid-template-rows:repeat(var(--rangs,3),minmax(0,1fr));gap:var(--cg2);min-height:0}
.cull__r{display:grid;grid-template-columns:var(--rk) repeat(var(--par,4),minmax(0,1fr));gap:var(--cg2);min-height:0}
.cull__rk{display:flex;align-items:center;justify-content:center;border-radius:10px;cursor:pointer;transition:background-color .2s}
.cull__rk:hover{background:#F6F2EB}

/* Les cases : celles de l'application (20px, orange une fois cochées). */
.cull__cb{-webkit-appearance:none;appearance:none;flex:none;display:block;width:20px;height:20px;margin:0;border:2px solid #C9C2B6;border-radius:5px;background:#fff center/14px no-repeat;cursor:pointer;transition:background-color .15s,border-color .15s}
.cull__cb:checked{border-color:var(--case);background-color:var(--case);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.5l4.2 4.2 8.8-9.4' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.cull__cb:indeterminate{border-color:var(--case);background-color:#F5B37A;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12h11' fill='none' stroke='%231A1510' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E")}
.cull__cb:focus-visible{outline:2px solid var(--acc-t);outline-offset:2px}
.cull__ph .cull__cb{position:absolute;z-index:3;top:6px;left:6px;box-shadow:0 1px 4px rgba(0,0,0,.4)}

/* Une vignette : toute la photo coche ou décoche. */
.cull__ph{position:relative;display:block;min-width:0;min-height:0;overflow:hidden;border-radius:8px;background:#EDE8DD;cursor:pointer;container-type:inline-size}
.cull__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:opacity .2s}
.cull__ph::after{content:'';position:absolute;inset:0;z-index:2;border-radius:inherit;box-shadow:inset 0 0 0 3px transparent;pointer-events:none;transition:box-shadow .15s}
.cull__ph.on::after{box-shadow:inset 0 0 0 3px var(--or)}
.cull__ph.on img{opacity:.8}
.cull__sc{position:absolute;z-index:3;right:6px;bottom:6px;padding:4px 6px;border-radius:5px;background:rgba(20,17,15,.74);color:#fff;font:600 12px/1 var(--m);letter-spacing:.02em;font-variant-numeric:tabular-nums}
/* Les libellés de l'application, au survol et au clavier : garder ou cocher. */
.cull__tip{position:absolute;z-index:4;left:50%;top:50%;width:max-content;max-width:calc(100% - 14px);padding:6px 10px;border:1px solid;border-radius:100px;transform:translate(-50%,-50%);font:600 12px/1.25 var(--s);letter-spacing:-.005em;text-align:center;opacity:0;pointer-events:none;transition:opacity .18s;box-shadow:0 8px 20px -10px rgba(0,0,0,.6)}
.cull__tip--k{background:#F0FDF4;border-color:#BBF7D0;color:#166534}
.cull__tip--s{background:#FEF2F2;border-color:#FECACA;color:#B91C1C}
@media(hover:hover) and (pointer:fine){
  .cull__ph.on:hover .cull__tip--k,.cull__ph:not(.on):hover .cull__tip--s{opacity:1}
  .cull__g:hover .cull__ph[data-guide]:not(:hover) .cull__tip{opacity:0}
}
.cull__ph.on:has(.cull__cb:focus-visible) .cull__tip--k,.cull__ph:not(.on):has(.cull__cb:focus-visible) .cull__tip--s{opacity:1}
/* Le premier coup d'œil : une photo cochée montre qu'on peut la garder. */
.cull--guide .cull__ph[data-guide].on .cull__tip--k{opacity:1}
@container (max-width:124px){.cull__tip{display:none}}

/* Entrée, une fois : les vignettes arrivent en cascade. */
.cull--pret:not(.cull--vu) .cull__ph{opacity:0;transform:translateY(8px)}
.cull--vu .cull__ph{transition:opacity .45s ease calc(var(--k,0) * 35ms),transform .45s cubic-bezier(.2,.8,.2,1) calc(var(--k,0) * 35ms)}

/* Suppression : les cochées tombent, puis laissent leur place vide. */
.cull__ph.tombe>*{transform:translateY(30px);opacity:0;transition:transform .42s cubic-bezier(.55,0,.8,.3) var(--d,0ms),opacity .42s ease var(--d,0ms)}
.cull__ph.tombe{background:transparent;transition:background-color .2s ease var(--d,0ms)}
.cull__ph.tombe::after{opacity:0;transition:opacity .3s ease var(--d,0ms)}
.cull--efface .cull__tip{display:none}
.cull__ph.parti{background:transparent;cursor:default;pointer-events:none}
.cull__ph.parti>*,.cull__ph.parti::after{visibility:hidden}
.cull__ph.parti::before{content:'';position:absolute;inset:0;border:1.5px dashed #D6CDBE;border-radius:inherit;background:var(--paper)}
.cull__rk.vide{visibility:hidden}

/* Barre du bas : comme celle de l'application (compteur, bouton rouge). */
.cull__bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-width:0;padding:7px 7px 7px 18px;border-radius:18px;background:#1A1510;color:#F0EDE4;box-shadow:0 18px 34px -22px rgba(26,21,16,.9)}
.cull__n{flex:1 1 auto;min-width:0;font-size:14px;font-weight:500;line-height:1.3;font-variant-numeric:tabular-nums}
.cull__n.ok{color:#7EE8AE;font-weight:600;font-size:15px}
.cull__sup,.cull__re,.cull__non,.cull__oui{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:0;border:0;font:600 14px/1.1 var(--s);letter-spacing:-.01em;white-space:nowrap;cursor:pointer;transition:background-color .2s,transform .15s}
.cull__sup{flex:none;min-height:40px;padding:0 18px;border-radius:12px;background:#C93C3C;color:#fff}
.cull__sup:hover{background:#B42323}
.cull__sup:active,.cull__re:active,.cull__oui:active,.cull__non:active{transform:scale(.97)}
.cull__sup[aria-disabled="true"]{cursor:default}
.cull__sup:focus-visible,.cull__re:focus-visible{outline:2px solid #FFB36B;outline-offset:2px}
.cull__fin{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cull__dl{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 11px;border:1px solid rgba(240,237,228,.2);border-radius:10px;font:500 12px/1.2 var(--m);color:rgba(240,237,228,.86);white-space:nowrap;cursor:default}
.cull__dl svg{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.cull__re{min-height:40px;padding:0 16px;border-radius:12px;background:#F0EDE4;color:var(--ink)}
.cull__re:hover{background:#fff}
.cull__re i{font-style:normal;font-size:16px}
@media(min-width:901px){
  .cull--fin .cull__bar{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:12px 12px 12px 18px}
  .cull--fin .cull__fin{display:contents}
  .cull--fin .cull__n{grid-column:1/4;grid-row:1}
  .cull--fin .cull__dl{grid-row:2}
  .cull--fin .cull__re{grid-column:4;grid-row:1/3}
}

/* Les deux confirmations, dans l'écran. */
.cull__voile{position:absolute;inset:0;z-index:6;background:rgba(26,21,16,.42);opacity:0;transition:opacity .2s}
.cull__voile.on{opacity:1}
.cull__dlg{position:absolute;z-index:7;left:50%;top:50%;width:min(390px,calc(100% - 2 * var(--cp)));padding:18px 18px 14px;border-radius:16px;background:#fff;box-shadow:0 30px 60px -20px rgba(26,21,16,.6),0 0 0 1px rgba(26,21,16,.08);transform:translate(-50%,-46%) scale(.97);opacity:0;transition:opacity .2s,transform .22s cubic-bezier(.2,.8,.2,1)}
.cull__dlg.on{opacity:1;transform:translate(-50%,-50%)}
.cull__etape{display:block;margin-bottom:8px;font:600 12px/1 var(--m);letter-spacing:.14em;color:var(--soft)}
.cull__q{font-size:15px;line-height:1.45;color:var(--ink)}
.cull__dlg.dur .cull__q{color:#9E1F1F;font-weight:500}
.cull__dlg.dur .cull__etape{color:#9E1F1F}
.cull__dlgb{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-top:14px}
.cull__non,.cull__oui{min-height:40px;padding:0 16px;border-radius:10px}
.cull__non{background:#F2EEE6;color:var(--ink)}
.cull__non:hover{background:#E9E3D8}
.cull__oui{background:#C93C3C;color:#fff}
.cull__oui:hover{background:#B42323}
.cull__dlg.dur .cull__oui{background:#9E1F1F}
.cull__dlg.dur .cull__oui:hover{background:#861818}

/* ── Téléphone ───────────────────────────────────────────────────────────── */
/* 01 : le calque prend la hauteur de son contenu (data-r-m="auto"). Écran de
   600px et plus (tablette) : la disposition d'ordinateur, au format 16/11
   (sans mesure de hauteur : l'écran n'a pas de hauteur propre ici).
   En dessous : tout s'empile, 19 vignettes (les 15 premières et 4 ratées),
   et une carte « Pourquoi ? » resserrée. */
@media(max-width:900px){
  .tm{position:relative;inset:auto;aspect-ratio:16/11;--cw:var(--cw-l)}
  @container mock (max-width:599px){
    .tm{--p:12px;--g:10px;--g2:5px;--cols:5;--cw:calc((100cqw - 2 * var(--p) - 4 * var(--g2)) / 5);aspect-ratio:auto}
    /* En-tête : « FAST SCORE · GRATUIT » au-dessus ; la collection à gauche, le bouton à droite. */
    .tm__tete{height:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"fs fs" "col bt";align-items:end;gap:6px 12px}
    .tm__go{display:contents}
    .tm__fs{grid-area:fs}
    .tm__col{grid-area:col}
    .tm__bt{grid-area:bt}
    /* Cinq colonnes : la première rangée, cerclée, compte cinq photos. */
    .tm__g>.tm__c:nth-child(6) .tm__or{display:none}
    .tm__g>.tm__c:nth-child(6) .tm__sc--haut{background:rgba(26,21,16,.8);color:#fff}
    .tm__choix{display:block}
    .tm__g>.tm__c[data-bureau],.tm__l>.tm__r[data-bureau],.tm__g>.tm__c:nth-child(n+16){display:none}
    .tm__bas{margin-top:12px}
    .tm__l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px}
    .tm__r{gap:8px}
    .tm-why{position:relative;left:auto;top:auto;width:auto;margin-top:12px;padding:10px 12px 9px;box-shadow:0 0 0 1px var(--line);pointer-events:auto}
    .tm-why__t{margin-bottom:6px}
    .tm-why ul{gap:2px}
    .tm-why li{line-height:1.25}
    .tm-why__n{margin-top:6px;padding-top:5px}
    .tm-why__n b{font-size:21px}
    /* L'aide passe sur la ligne du titre, à droite : une ligne de gagnée. */
    .tm-why__aide{position:absolute;top:10px;right:12px;margin:0;line-height:1.2}
  }
}
/* Téléphone : la section reste compacte (marges resserrées, repères sur deux lignes). */
@media(max-width:900px){
  .trier .lo__b{padding-top:9px;padding-bottom:9px}
  .trier .lo__it.on .lo__b{padding-top:16px;padding-bottom:8px}
  .trier .lo>.lo__vis{margin:10px 0 14px}
  .trier__rep{letter-spacing:.07em}
}
@media(max-width:900px){
  /* 02 : la grille en carré, la carte « Pourquoi ? » dessous. */
  .trier__nt,.trier__h--nt{position:relative;inset:auto}
  .trier__h--nt{aspect-ratio:1/1}
  .trier__pq{display:flex;flex-direction:column;padding:14px 14px 16px;background:var(--paper);border-top:1px solid var(--line)}
  .trier__pq .mq-why{width:100%;box-shadow:0 0 0 1px var(--line)}
  .trier__pq-aide{order:2;margin:10px 0 0;font-size:14px;line-height:1.4;color:var(--soft)}
  .trier .mq.s2 .cd b{font-size:13px}

  /* 03 : en-tête resserré, bouton pleine largeur de 48px. */
  .cull{--cp:12px;--cg:10px;--cg2:6px;--rk:32px}
  .cull__t{gap:6px;font-size:15px}
  .cull__t svg{width:16px;height:16px}
  .cull__demo{gap:5px;padding:4px 8px;letter-spacing:.05em}
  .cull__aide{font-size:12.5px}
  /* Le compteur reste lu (aria-live), le bouton porte le nombre. */
  .cull__n{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .cull:not(.cull--fin) .cull__bar{display:block;padding:0;background:none;box-shadow:none}
  .cull__sup{width:100%;min-height:48px;font-size:15px}
  /* Le résultat : le compteur et « Recommencer », puis les deux fichiers. */
  .cull--fin .cull__bar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:8px;padding:10px;border-radius:14px}
  .cull--fin .cull__fin{display:contents}
  .cull--fin .cull__n{position:static;width:auto;height:auto;overflow:visible;clip-path:none;grid-column:1;grid-row:1;padding-left:4px;white-space:normal}
  .cull--fin .cull__re{grid-column:2;grid-row:1;justify-self:end;min-height:44px;padding:0 14px}
  .cull--fin .cull__dl{grid-row:2;justify-content:center;min-height:40px;padding:5px 8px;white-space:normal;text-align:left;font-family:var(--s);font-weight:500;line-height:1.25}
  .cull__dlg{top:auto;bottom:var(--cp);transform:translate(-50%,8px);width:calc(100% - 2 * var(--cp))}
  .cull__dlg.on{transform:translate(-50%,0)}
  .cull__dlgb>*{flex:1 1 0;min-height:44px}
}
@media(pointer:coarse){.cull__non,.cull__oui,.cull__re{min-height:44px}}
/* Écran très étroit (téléphone de 360px) : la pastille « Démo » passe sous le titre. */
@container mock (max-width:338px){
  .cull__tete{grid-template-columns:minmax(0,1fr)}
  .cull__demo{justify-self:start}
}

/* ── « Réduire les animations » ──────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .cull *,.cull *::before,.cull *::after{transition:none!important;animation:none!important}
  .cull--pret:not(.cull--vu) .cull__ph{opacity:1;transform:none}
  /* 01 : l'état final, d'emblée (trier.js ne pose pas la pile). */
}