/* Les pages de l'espace membre (15/10/2026), dans le langage de l'accueil v2 validé (base.css).
   Une famille = un gabarit : rubriques Pour Claude (un seul pour les quatre, ses mots du 14/10), fiche, catégorie,
   actu, formations, formation, tutoriels, mots de l'IA, prompts, images, vidéo, recherche, objectif, Moi, onglets.
   Images générées retirées (ses mots du 15/10) : affiches typographiques dans la couleur de l'univers, logos réels. */

/* ---------- Ce qui change sur toutes les pages ---------- */
.lueur{display:none}
[data-page=accueil] .lueur{display:block}
.mq .rejouer{display:none}
[data-page=accueil] .mq .rejouer{display:inline-flex;align-items:center;gap:5px}
@media (max-width:1280px){[data-page=accueil] .mq .rejouer{display:none}}
.vue{position:relative;z-index:1}
.vue.part{animation:vue-part .33s var(--doux) forwards;pointer-events:none}
.vue.arrive{animation:vue-arrive .95s var(--ressort) both}
@keyframes vue-part{to{opacity:0;transform:translateY(-22px) scale(.985);filter:blur(7px)}}
@keyframes vue-arrive{from{opacity:0;transform:translateY(64px) rotate(.7deg) scale(.985)}}
.sec{position:relative;z-index:1;padding:0 var(--marge);margin-top:clamp(76px,6.2vw,150px)}
.sec.serre{margin-top:clamp(44px,3.6vw,84px)}
.p-haut{position:relative;z-index:1;padding:clamp(30px,2.8vw,68px) var(--marge) 0}
.fil{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.875rem;color:var(--gris);margin-bottom:clamp(16px,1.4vw,28px)}
.fil a{transition:color .25s}
.fil a:hover{color:var(--cadre)}
.fil .fl{font-size:.8rem;opacity:.6}
.titre-p{font:900 clamp(46px,4.5vw,112px)/.96 var(--titre);letter-spacing:-.026em}
.chapo{font-size:clamp(17px,1.2vw,29px);line-height:1.4;color:var(--gris);margin-top:clamp(12px,1vw,22px);max-width:54ch}
h2.t2{font-size:clamp(30px,2.5vw,58px);line-height:1.02;font-weight:800;letter-spacing:-.016em}
.tete .compte-t{font:800 .46em/1 var(--titre);color:var(--gris);vertical-align:.5em;margin-left:.4em}
.vide{padding:28px;border-radius:var(--r-carte);background:var(--beige);color:#3c3f52}
.vide b{display:block;font:800 1.25rem/1.2 var(--titre);color:var(--encre);margin-bottom:6px}

/* Formes molles (La Manna), qui suivent la souris dans un bloc [data-suit] */
.mo{position:absolute;z-index:-1;aspect-ratio:1;border-radius:42% 58% 63% 37%/45% 38% 62% 55%;background:rgba(255,255,255,.22);pointer-events:none;transform:translate(var(--px,0px),var(--py,0px)) rotate(var(--pr,0deg));transition:transform 1s var(--doux)}
.mo.b{background:rgba(17,20,46,.08);border-radius:58% 42% 37% 63%/55% 62% 38% 45%;transform:translate(calc(var(--px,0px) * -.6),calc(var(--py,0px) * -.6)) rotate(calc(var(--pr,0deg) * -1))}
.sombre .mo{background:rgba(255,255,255,.13)}
.sombre .mo.b{background:rgba(0,0,0,.16)}

/* Logos réels (Simple Icons) dans une pastille blanche */
.lg{width:var(--lt,3.25rem);height:var(--lt,3.25rem);border-radius:calc(var(--lt,3.25rem) * .32);display:grid;place-items:center;background:#fff;box-shadow:0 0 0 1px var(--filet),0 8px 20px rgba(17,20,46,.12);flex:none;transition:transform .6s var(--rebond)}
.lg img{width:56%;height:56%}
.lgs{display:flex;gap:8px}

/* La vidéo d'Indiana, en bulle ronde, avec son anneau de texte (sa photo : la seule image gardée) */
.bulle{position:relative;display:grid;justify-items:center;gap:14px;text-align:center;color:inherit;flex:none}
.bulle .rond{position:relative;width:clamp(150px,11.5vw,270px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:#0d1a2b;box-shadow:0 0 0 7px #fff,0 24px 60px rgba(17,20,46,.28);transition:transform .7s var(--rebond)}
.bulle .rond img{width:100%;height:100%;object-fit:cover;object-position:49% 30%;transform:scale(1.5);transform-origin:49% 33%;transition:transform 1s var(--doux)}
.bulle .jouer{position:absolute;right:7%;bottom:7%;width:30%;aspect-ratio:1;border-radius:50%;background:var(--encre);color:#fff;display:grid;place-items:center;font-size:clamp(1rem,1.2vw,1.6rem);box-shadow:0 0 0 4px #fff;transition:transform .5s var(--rebond)}
.bulle .anneau-t{position:absolute;left:50%;top:0;width:calc(clamp(150px,11.5vw,270px) + 66px);aspect-ratio:1;translate:-50% -33px;pointer-events:none;animation:tourne 26s linear infinite;animation-play-state:paused}
.bulle:hover .anneau-t{animation-play-state:running}
.bulle .anneau-t text{font:400 12.5px/1 var(--ultra);letter-spacing:.14em;fill:currentColor}
.bulle:hover .rond{transform:rotate(-5deg) scale(1.04)}
.bulle:hover .rond img{transform:scale(1.58)}
.bulle:hover .jouer{transform:scale(1.12)}
.bulle b{display:block;font:800 clamp(16px,1.05vw,25px)/1.2 var(--titre);margin-top:26px}
.bulle small{display:block;font-size:.875rem;opacity:.78;margin-top:2px}
@keyframes tourne{to{rotate:360deg}}

/* Bouton « Prendre », repris de l'accueil, posable partout */
.mettre{display:inline-flex;align-items:center;gap:8px}
.mettre.ok{background:var(--cadre)!important;color:#fff!important;box-shadow:none}

/* ---------- Les couvertures d'univers (Arc : une teinte par page) ---------- */
.couv{--in:clamp(12px,1vw,22px);position:relative;z-index:1;isolation:isolate;overflow:hidden;margin:var(--in) var(--in) 0;border-radius:calc(var(--r-feuille) - 6px);padding:clamp(38px,3.4vw,84px) calc(var(--marge) - var(--in)) clamp(30px,2.6vw,60px);background-color:var(--u);background-image:var(--grain),radial-gradient(70% 90% at 92% 0%,rgba(255,255,255,.22),transparent 60%);background-size:180px,100% 100%;color:var(--ut)}
.couv .l{position:relative}
.couv-g{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,3.4vw,90px);align-items:center}
.couv h1{font:900 clamp(60px,6.4vw,164px)/.88 var(--titre);letter-spacing:-.032em}
.couv .clair{display:inline-block;font:400 clamp(17px,1.25vw,30px)/1 var(--ultra);letter-spacing:.01em;margin-top:clamp(12px,1vw,22px);padding:.42em .7em .38em;border-radius:999px;background:var(--ut);color:var(--u);transform:rotate(-2deg)}
.couv .quoi{font-size:clamp(18px,1.32vw,32px);line-height:1.36;max-width:42ch;margin-top:clamp(16px,1.4vw,28px)}
.couv .quoi b{font-family:var(--titre);font-weight:800}
.couv-pas{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(16px,1.4vw,26px)}
.couv-pas li{display:flex;align-items:center;gap:9px;padding:7px 15px 7px 7px;border-radius:999px;background:rgba(255,255,255,.55);font-size:clamp(14.5px,.92vw,21px);font-weight:500}
.sombre .couv-pas li{background:rgba(255,255,255,.2)}
.couv-pas li span{width:1.75em;height:1.75em;border-radius:50%;background:var(--encre);color:#fff;display:grid;place-items:center;font:800 .82em/1 var(--titre)}
.sombre .couv-pas li span{background:#fff;color:var(--u)}
.couv-note{display:inline-flex;align-items:center;gap:10px;margin-top:16px;padding:10px 16px;border-radius:16px;background:var(--encre);color:#fff;font-size:.9375rem}
.couv-note a{color:var(--jaune);font-weight:650}
.couv-cats{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(28px,2.6vw,52px)}
.couv-cats a{display:inline-flex;align-items:center;gap:9px;height:clamp(40px,2.7vw,56px);padding:0 clamp(15px,1.1vw,24px);border-radius:999px;background:#fff;color:var(--encre);font-weight:600;font-size:clamp(14.5px,.95vw,22px);box-shadow:0 6px 18px rgba(17,20,46,.1);transition:transform .45s var(--ressort),box-shadow .45s}
.couv-cats a i{font-style:normal;font:800 .82em/1 var(--titre);color:var(--gris)}
.couv-cats a:hover{transform:translateY(-3px) rotate(-1.5deg);box-shadow:0 12px 28px rgba(17,20,46,.18)}
.h1-w{position:relative;display:inline-block}
.couv .etoile{--t:clamp(92px,6.4vw,140px);right:calc(-1 * clamp(96px,6.8vw,150px));top:-14px;font-size:clamp(.7rem,.62vw,.95rem)}
.couv .etoile b{font-size:1.7em}
/* « Bleu, blanc, beige » : toutes les couvertures en bleu */
[data-couleurs=trois] .couv,[data-couleurs=trois] .actu-p{--u:var(--cadre)!important;--ut:#fff!important;--ua:#fff!important}
[data-couleurs=trois] .couv-pas li{background:rgba(255,255,255,.14)}
[data-couleurs=trois] .couv-pas li span{background:#fff;color:var(--cadre)}
[data-couleurs=trois] .couv .mo{background:rgba(255,255,255,.13)}
[data-couleurs=trois] .couv .mo.b{background:rgba(0,0,0,.14)}

/* ---------- Les cartes (skills, mods, plugins, connecteurs) ---------- */
.cartes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.5vw,30px)}
.carte{position:relative;display:flex;flex-direction:column;border-radius:var(--r-carte);background:#fff;box-shadow:0 0 0 1px var(--filet),var(--ombre);transition:transform .6s var(--ressort),box-shadow .6s var(--doux)}
.carte:hover{transform:translateY(-6px) rotate(-.5deg);box-shadow:0 0 0 1px var(--filet),var(--ombre-haute)}
.carte:active{transform:scale(.985)}
.carte .vis{margin:6px 6px 0;border-radius:calc(var(--r-carte) - 5px);aspect-ratio:16/10}
.carte .cc{padding:clamp(14px,1vw,22px) clamp(16px,1.2vw,26px) clamp(16px,1.2vw,26px);display:flex;flex-direction:column;gap:6px;flex:1}
.carte .ou{font-size:clamp(13px,.82vw,19px);color:var(--gris);font-weight:500}
.carte b{font-size:clamp(17px,1.12vw,27px);line-height:1.24;font-weight:650;letter-spacing:-.006em}
.carte p{font-size:clamp(14.5px,.94vw,22px);line-height:1.42;color:var(--gris)}
.carte .n{margin-top:auto;padding-top:10px;font-size:clamp(13px,.82vw,19px);color:var(--gris)}
.carte .n em{font-style:normal;font-weight:650;color:var(--encre)}
.carte .etoile{--t:clamp(70px,4.8vw,104px);right:-12px;top:-16px;font-size:clamp(.62rem,.5vw,.8rem)}
.carte:hover .etoile{transform:rotate(12deg) scale(1.1)}
.carte.vieux .vis{filter:grayscale(.85);opacity:.7}
.carte.vieux b{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--rouge)}

/* L'image de la carte : une affiche dans la couleur de la catégorie, différente pour chaque famille */
.vis{position:relative;overflow:hidden;isolation:isolate;background-color:var(--c);background-image:var(--grain);background-size:180px;color:var(--ct)}
.vis .mot{position:absolute;z-index:1;left:6%;bottom:-.1em;font:400 clamp(46px,4.2vw,104px)/.84 var(--ultra);letter-spacing:-.02em;white-space:nowrap;transition:transform 1s var(--doux)}
.carte:hover .vis .mot,.tilt:hover .vis .mot{transform:translateX(-3%)}
.vis .lgs{position:absolute;z-index:2;left:6%;top:9%}
.vis .lg{--lt:clamp(42px,3vw,70px)}
.carte:hover .vis .lg{transform:rotate(-8deg)}
.vis .mo{width:68%;right:-14%;top:-30%}
.vis .mo.b{width:46%;right:auto;left:30%;top:auto;bottom:-34%}
.vis.v2 .mo{right:auto;left:-18%;top:-34%}
.vis.v2 .mo.b{left:auto;right:-6%;bottom:-26%}
.vis.v3 .mo{top:40%;right:-22%}
.vis.v3 .mo.b{left:-10%;bottom:auto;top:-28%}
/* Mod : l'élément qu'il ajoute à Claude Code, posé comme un autocollant */
.ap{position:absolute;z-index:2;left:50%;top:50%;translate:-50% -50%;max-width:86%;color:var(--encre);transition:transform .7s var(--rebond)}
.carte:hover .ap,.tilt:hover .ap{transform:rotate(-2deg) scale(1.04)}
.arr-g .vis .ap,.podium .vis .ap{scale:1.3}
.choix .vis .ap{scale:1.5}
.f-vis .ap{scale:1.7}
.g-vis .vis .ap{scale:1.4}
.ap.barre{display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:12px;background:var(--encre);color:#fff;font-size:clamp(13px,.86vw,20px);white-space:nowrap;box-shadow:0 14px 30px rgba(17,20,46,.28);transform:rotate(-3deg)}
.ap.barre i{width:8px;height:8px;border-radius:50%;background:var(--menthe);flex:none;animation:battre 1.8s var(--doux) infinite}
.ap.barre span+span{opacity:.7}
@keyframes battre{50%{opacity:.35}}
.ap.alerte{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:center;padding:12px 18px 12px 12px;border-radius:18px;background:#fff;box-shadow:0 16px 36px rgba(17,20,46,.22);transform:rotate(2deg);min-width:min(260px,80%)}
.ap.alerte .ic{grid-row:span 2;width:2.6em;height:2.6em;border-radius:50%;display:grid;place-items:center;background:var(--jaune);font-size:clamp(15px,1vw,24px)}
.ap.alerte b{font-size:clamp(14px,.9vw,21px);font-weight:700}
.ap.alerte span{font-size:clamp(12.5px,.8vw,19px);color:var(--gris)}
.ap.panneau{display:grid;gap:7px;padding:14px 18px;border-radius:16px;background:#fff;box-shadow:0 16px 36px rgba(17,20,46,.2);min-width:min(240px,78%);transform:rotate(-2deg);font-size:clamp(13px,.86vw,20px)}
.ap.panneau div{display:flex;justify-content:space-between;gap:18px}
.ap.panneau span{color:var(--gris)}
.ap.panneau b{font-weight:650}
.ap.commande{display:flex;align-items:center;gap:2px;padding:12px 20px;border-radius:14px;background:var(--encre);color:#fff;font:500 clamp(16px,1.25vw,30px)/1 ui-monospace,"SF Mono",Menlo,monospace;box-shadow:0 16px 36px rgba(17,20,46,.28);transform:rotate(-2deg)}
.ap.commande::before{content:"›";color:var(--menthe);margin-right:10px}
.ap.commande::after{content:"";width:.55em;height:1.05em;background:var(--menthe);margin-left:4px;animation:battre 1s steps(2) infinite}
/* Plugin : la boîte et ce qu'elle contient, en éventail */
.boite{position:absolute;z-index:2;left:50%;top:52%;translate:-50% -50%;width:74%;height:62%}
.boite span{position:absolute;left:50%;top:50%;padding:.55em 1.05em;border-radius:999px;background:#fff;color:var(--encre);font:800 clamp(13px,.92vw,22px)/1 var(--titre);white-space:nowrap;box-shadow:0 10px 24px rgba(17,20,46,.16);translate:-50% -50%;transition:transform .7s var(--rebond)}
.boite span:nth-child(1){transform:translate(-34%,-110%) rotate(-9deg)}
.boite span:nth-child(2){transform:translate(14%,-8%) rotate(5deg);background:var(--encre);color:#fff}
.boite span:nth-child(3){transform:translate(-22%,96%) rotate(-3deg)}
.carte:hover .boite span:nth-child(1),.tilt:hover .boite span:nth-child(1){transform:translate(-52%,-150%) rotate(-14deg)}
.carte:hover .boite span:nth-child(2),.tilt:hover .boite span:nth-child(2){transform:translate(34%,-8%) rotate(9deg)}
.carte:hover .boite span:nth-child(3),.tilt:hover .boite span:nth-child(3){transform:translate(-36%,140%) rotate(-6deg)}
/* Connecteur : Claude branché sur le service (l'accueil v2) */
.vis .branche{position:absolute;z-index:2;left:50%;top:50%;translate:-50% -50%;width:min(78%,420px)}
.vis .branche .lg{--lt:clamp(54px,4vw,92px)}
.vis .branche .fil{max-width:none}
.carte:hover .fil,.tilt:hover .fil{animation:courant 1s linear infinite}

/* ---------- 1. Rubrique (Skills, Mods, Plugins, Connecteurs) ---------- */
.arr-g{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:clamp(16px,1.5vw,30px)}
.arr-g[style*="--n:1"]{grid-template-columns:minmax(0,1fr)}
.arr-g[style*="--n:1"] .carte{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.arr-g[style*="--n:1"] .carte .vis{margin:6px;aspect-ratio:auto;min-height:clamp(260px,18vw,420px)}
.arr-g[style*="--n:1"] .carte .cc{justify-content:center;padding:clamp(22px,2vw,44px)}
.arr-g[style*="--n:1"] .carte b{font-size:clamp(22px,1.6vw,38px)}
.jours{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,2vw,44px);margin-top:clamp(30px,2.6vw,56px)}
.jours h3{font:800 clamp(18px,1.2vw,28px)/1.1 var(--titre);margin-bottom:12px}
.lignes-c{list-style:none;padding:0;display:grid;gap:8px}
.lignes-c a{display:grid;grid-template-columns:clamp(64px,4.6vw,104px) 1fr auto;gap:16px;align-items:center;padding:8px 16px 8px 8px;border-radius:20px;transition:background .3s var(--doux),transform .45s var(--ressort)}
.lignes-c a:hover{background:var(--beige);transform:translateX(4px)}
.lignes-c .vis{aspect-ratio:1;border-radius:14px}
.lignes-c .vis .mot,.suivants .vis .mot{font-size:clamp(40px,3vw,72px);left:-4%;bottom:-.18em;opacity:.92}
.lignes-c .vis .lgs,.lignes-c .vis .boite,.lignes-c .vis .ap,.lignes-c .vis .branche{display:none}
.lignes-c b{display:block;font-size:clamp(15.5px,1vw,24px);font-weight:650;line-height:1.28}
.lignes-c p{font-size:clamp(13.5px,.86vw,20px);color:var(--gris);margin-top:2px}
.lignes-c .fl{color:var(--gris)}
.lignes-c a:hover .fl{transform:translateX(4px);color:var(--cadre)}
.lignes-c .mini-lg{display:grid;place-items:center;aspect-ratio:1;border-radius:14px;background:var(--c);background-image:var(--grain);background-size:180px}
.lignes-c .mini-lg .lg{--lt:62%}

/* Le choix d'Indiana */
.choix{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(20px,2.4vw,56px);align-items:center;padding:clamp(14px,1.2vw,24px);border-radius:calc(var(--r-grand) + 8px);background:var(--beige)}
.choix .vis{border-radius:var(--r-grand);min-height:clamp(320px,24vw,560px);transform:perspective(1300px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--doux)}
.choix .vis .mot{font-size:clamp(70px,7vw,170px)}
/* Page Vidéo (bug relevé par lui le 15/10) : l'écran 16/9 garde la hauteur minimale des autres visuels et débordait sur le texte ; ici sa largeur commande */
.choix .cine.vis{min-height:0;width:100%}
.choix-c{padding:clamp(8px,1.4vw,36px) clamp(8px,1.6vw,40px) clamp(8px,1.4vw,36px) 0}
.choix-c h2{font-size:clamp(28px,2.3vw,54px);line-height:1.02;font-weight:800;letter-spacing:-.018em;max-width:16ch}
.choix-nom{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(16px,1.4vw,28px);font:900 clamp(22px,1.7vw,40px)/1.1 var(--titre);letter-spacing:-.014em}
.choix-nom:hover .fl{transform:translateX(5px)}
.choix-c>p{font-size:clamp(16px,1.08vw,25px);color:#3c3f52;margin-top:8px;max-width:62ch}
.parole{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;margin-top:clamp(18px,1.6vw,30px);padding:clamp(16px,1.2vw,24px);border-radius:20px;background:#fff}
.parole .av{width:clamp(48px,3.4vw,76px);aspect-ratio:1;border-radius:50%;overflow:hidden}
.parole .av img{width:100%;height:100%;object-fit:cover;object-position:49% 30%;transform:scale(1.5);transform-origin:49% 33%}
.parole p{font-size:clamp(15.5px,1.02vw,24px);line-height:1.42}
.parole cite{display:block;font:800 .875rem/1 var(--titre);font-style:normal;color:var(--gris);margin-top:8px}
.choix .oui-non{margin-top:clamp(18px,1.6vw,30px)}

/* Ce que tout le monde prend : le premier en grand, les quatre suivants en liste */
.podium{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(16px,1.6vw,34px);align-items:stretch}
.podium .premier{position:relative;display:flex;flex-direction:column;border-radius:var(--r-grand);background:#fff;box-shadow:0 0 0 1px var(--filet),var(--ombre);overflow:hidden;transition:transform .6s var(--ressort),box-shadow .6s}
.podium .premier:hover{transform:translateY(-5px) rotate(-.4deg);box-shadow:0 0 0 1px var(--filet),var(--ombre-haute)}
.podium .premier .vis{flex:1;min-height:clamp(240px,15vw,360px);margin:6px;border-radius:calc(var(--r-grand) - 5px)}
.podium .premier .cc{padding:clamp(18px,1.4vw,30px);display:grid;grid-template-columns:auto 1fr;gap:4px 18px;align-items:center}
.rang{font:400 clamp(54px,4.4vw,110px)/.8 var(--ultra);color:transparent;-webkit-text-stroke:2px var(--encre);transition:color .4s var(--doux)}
.podium .premier .rang{grid-row:span 3}
.podium .premier:hover .rang,.suivants a:hover .rang{color:var(--u-on,var(--jaune))}
.podium b{font-size:clamp(18px,1.25vw,30px);font-weight:650;line-height:1.22}
.suivants b,.suivants small{display:block}
.suivants small{margin-top:3px}
.podium small{font-size:clamp(13.5px,.86vw,20px);color:var(--gris)}
.podium small em{font-style:normal;font-weight:650;color:var(--encre)}
.suivants{list-style:none;padding:0;display:grid;gap:clamp(6px,.5vw,10px);align-content:start}
.suivants a{display:grid;grid-template-columns:clamp(54px,4vw,96px) clamp(58px,4vw,92px) 1fr auto;gap:clamp(12px,1vw,22px);align-items:center;padding:clamp(10px,.8vw,16px) clamp(14px,1vw,22px) clamp(10px,.8vw,16px) clamp(12px,.9vw,20px);border-radius:22px;transition:background .3s var(--doux),transform .45s var(--ressort)}
.suivants a:hover{background:var(--beige);transform:translateX(5px)}
.suivants .rang{font-size:clamp(40px,3vw,74px);text-align:center}
.suivants .vis{aspect-ratio:1;border-radius:16px}
.suivants .vis .lgs,.suivants .vis .boite,.suivants .vis .ap,.suivants .vis .branche{display:none}
.suivants .mini-lg{display:grid;place-items:center;aspect-ratio:1;border-radius:16px;background:var(--c);background-image:var(--grain);background-size:180px}
.suivants .mini-lg .lg{--lt:60%}
.suivants .fl{color:var(--gris)}

/* Mis à jour ou dépassé */
.maj{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(16px,1.6vw,34px);align-items:start}
.maj.seul{grid-template-columns:minmax(0,1fr)}
.maj.seul .maj-l{grid-template-columns:repeat(3,minmax(0,1fr))}
.depasse{display:grid;gap:12px}
.dep{position:relative;padding:clamp(20px,1.6vw,34px);border-radius:var(--r-carte);background:var(--rose-pale);overflow:hidden}
.dep .tampon-i{right:16px;top:16px}
.dep .quoi-d{font:800 .875rem/1 var(--titre);color:var(--rouge)}
.dep b{display:block;font-size:clamp(17px,1.15vw,27px);font-weight:650;margin-top:10px;text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--rouge);max-width:80%}
.dep p{font-size:clamp(14.5px,.94vw,22px);color:#4a4458;margin-top:8px;line-height:1.45;max-width:52ch}
.dep .par{display:flex;align-items:center;gap:12px;margin-top:14px;padding:12px 14px;border-radius:16px;background:#fff}
.dep .par span{flex:1;font-size:.9375rem}
.dep .par span b{display:inline;text-decoration:none;font-size:inherit;margin:0}
.maj-l{display:grid;gap:12px}
.mj{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;align-items:start;padding:clamp(18px,1.4vw,30px);border-radius:var(--r-carte);background:#fff;box-shadow:0 0 0 1px var(--filet),var(--ombre)}
.mj .date{grid-row:span 3;display:grid;place-items:center;text-align:center;width:clamp(62px,4.4vw,100px);aspect-ratio:1;border-radius:18px;background:var(--u);background-image:var(--grain);background-size:180px;color:var(--ut);font:400 clamp(20px,1.5vw,36px)/.9 var(--ultra)}
.mj .date small{display:block;font:800 .38em/1 var(--titre);letter-spacing:.06em}
.mj b{font-size:clamp(16.5px,1.08vw,26px);font-weight:650}
.mj p{font-size:clamp(14.5px,.94vw,22px);color:var(--gris)}
.mj .lien{margin-top:8px;font-size:clamp(14px,.9vw,21px)}
[data-couleurs=trois] .mj .date{background-color:var(--cadre);color:#fff}

/* Rangés par catégorie : une mosaïque, chaque tuile dans sa couleur */
.cats{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.1vw,22px)}
.cat{position:relative;grid-column:span var(--s,4);isolation:isolate;overflow:hidden;display:flex;flex-direction:column;min-height:clamp(260px,17vw,400px);padding:clamp(86px,6.6vw,160px) clamp(20px,1.7vw,38px) clamp(20px,1.7vw,38px);border-radius:var(--r-grand);background-color:var(--c);background-image:var(--grain);background-size:180px;color:var(--ct);transition:transform .6s var(--ressort),box-shadow .6s var(--doux)}
.cat:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:var(--ombre-haute)}
.cat .nb{position:absolute;z-index:0;right:clamp(14px,1.2vw,26px);top:clamp(4px,.4vw,10px);font:400 clamp(70px,6vw,150px)/1 var(--ultra);opacity:.9;transition:transform .7s var(--rebond)}
.cat:hover .nb{transform:rotate(-8deg) scale(1.06)}
.cat h3{position:relative;font:800 clamp(24px,1.8vw,44px)/1.02 var(--titre);letter-spacing:-.016em;margin-top:auto;max-width:12ch}
.cat p{position:relative;font-size:clamp(14.5px,.94vw,22px);line-height:1.4;margin-top:8px;opacity:.86;max-width:36ch}
.cat ul{position:relative;list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.cat li{padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.55);color:var(--encre);font-size:clamp(12.5px,.8vw,19px);font-weight:500}
.cat .mo{width:56%;right:-12%;bottom:-30%}
.cat .mo.b{width:38%;left:-8%;top:-24%}
[data-couleurs=trois] .cat{--c:var(--beige)!important;--ct:var(--encre)!important}
[data-couleurs=trois] .cat:nth-child(3n+1){--c:var(--cadre)!important;--ct:#fff!important}
[data-couleurs=trois] .cat:nth-child(3n+2){--c:#fff!important;box-shadow:0 0 0 1.5px var(--filet),var(--ombre)}
[data-couleurs=trois] .vis{--c:var(--beige)!important;--ct:var(--encre)!important}
[data-couleurs=trois] .carte:nth-child(3n+1) .vis,[data-couleurs=trois] .vis.bleu{--c:var(--cadre)!important;--ct:#fff!important}

/* ---------- 2. Une catégorie ---------- */
.cat-tete{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;padding:clamp(28px,2.6vw,60px);border-radius:var(--r-grand);background-color:var(--c);background-image:var(--grain);background-size:180px;color:var(--ct)}
.cat-tete h1{font:900 clamp(44px,4.2vw,104px)/.94 var(--titre);letter-spacing:-.026em}
.cat-tete p{font-size:clamp(17px,1.2vw,29px);margin-top:12px;max-width:44ch;opacity:.9}
.cat-tete .nb{font:400 clamp(90px,8vw,200px)/.8 var(--ultra)}
.cat-tete .nb small{display:block;font:800 clamp(14px,.9vw,21px)/1 var(--titre);text-align:right;margin-top:8px}
.cat-tete .mo{width:40%;right:12%;top:-50%}
.outils{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 24px;align-items:center;margin-top:clamp(20px,1.8vw,36px)}
.pastilles{display:flex;flex-wrap:wrap;gap:6px}
.pastilles a,.pastilles button{display:inline-flex;align-items:center;gap:7px;height:clamp(38px,2.5vw,52px);padding:0 clamp(14px,1vw,22px);border-radius:999px;background:var(--beige);font-size:clamp(14px,.9vw,21px);font-weight:550;transition:background .3s var(--doux),color .3s,transform .4s var(--ressort)}
.pastilles a:hover,.pastilles button:hover{background:#e9e4d9}
.pastilles [aria-current=true],.pastilles [aria-pressed=true]{background:var(--encre);color:#fff}
.pastilles .nb{font:800 .8em/1 var(--titre);opacity:.6}
.trier{display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:999px;background:var(--beige)}
.trier span{font-size:.875rem;color:var(--gris);padding:0 8px 0 10px}
.trier a,.trier button{white-space:nowrap;padding:8px 14px;border-radius:999px;font-size:clamp(13.5px,.86vw,20px);font-weight:550;color:var(--gris);transition:background .3s,color .3s}
.trier [aria-current=true],.trier [aria-pressed=true]{background:#fff;color:var(--encre);box-shadow:0 1px 4px rgba(17,20,46,.14)}
.groupe+.groupe{margin-top:clamp(44px,3.6vw,80px)}
.groupe h2{font:800 clamp(24px,1.8vw,42px)/1.05 var(--titre);letter-spacing:-.014em;margin-bottom:clamp(16px,1.4vw,28px)}
.groupe h2 span{font-size:.55em;color:var(--gris);font-weight:800;margin-left:.3em}

/* ---------- 3. La fiche ---------- */
.f-hero{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(24px,3.2vw,80px);align-items:center}
.f-vis{border-radius:var(--r-grand);aspect-ratio:4/3.1;transform:perspective(1300px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--doux);box-shadow:var(--ombre)}
.f-vis .mot{font-size:clamp(80px,8vw,200px)}
.f-vis .boite{width:70%}
.f-vis .boite span{font-size:clamp(15px,1.15vw,28px)}
.f-vis .lgs{top:7%;left:5%}
.f-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.f-tags .t-doux{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:var(--beige);font-size:.78rem;font-weight:600;color:#3c3f52}
.f-hero h1{font:900 clamp(38px,3.4vw,86px)/1 var(--titre);letter-spacing:-.024em;margin-top:clamp(14px,1.2vw,24px);text-wrap:balance}
.f-lead{font-size:clamp(18px,1.3vw,31px);line-height:1.4;color:#3c3f52;margin-top:clamp(12px,1vw,22px);max-width:38ch}
.f-notes{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(18px,1.6vw,30px)}
.f-notes p{display:flex;align-items:baseline;gap:9px;padding:12px 16px;border-radius:16px;background:var(--beige);font-size:clamp(14px,.9vw,21px);color:#3c3f52;max-width:100%}
.f-notes b{font:400 clamp(22px,1.6vw,38px)/1 var(--ultra);color:var(--encre)}
.f-src{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:16px;font-size:clamp(14px,.9vw,21px);color:var(--gris)}
.f-src .gh{display:inline-flex;align-items:center;gap:8px;color:var(--encre);font-weight:550}
.f-src .gh img{width:18px;height:18px}
.verif{display:flex;align-items:flex-start;gap:8px;margin-top:10px;font-size:clamp(14px,.9vw,21px);color:var(--vert);font-weight:550}
.verif i{font-size:1.15em;margin-top:.05em}
.verif.non{color:var(--rouge)}
.f-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(20px,1.8vw,34px)}
.alerte-v{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:clamp(18px,1.6vw,32px);border-radius:var(--r-grand);background:var(--rose-pale);margin-bottom:clamp(20px,1.8vw,36px)}
.alerte-v .tampon-i{position:static;transform:rotate(-8deg)}
.alerte-v b{font:800 clamp(18px,1.25vw,30px)/1.15 var(--titre)}
.alerte-v p{font-size:clamp(14.5px,.94vw,22px);color:#4a4458;margin-top:6px;max-width:60ch}

/* Le pas-à-pas : une étape à la fois */
.guide{border-radius:calc(var(--r-grand) + 8px);background:var(--beige);padding:clamp(22px,2.4vw,58px)}
.guide-t{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px}
.guide-t h2{font-size:clamp(28px,2.3vw,54px);font-weight:800;letter-spacing:-.016em;line-height:1.02}
.g-ong{display:inline-flex;gap:2px;padding:4px;border-radius:999px;background:#fff}
.g-ong button{padding:9px 16px;border-radius:999px;font-size:clamp(13.5px,.88vw,20px);font-weight:600;color:var(--gris);transition:background .3s var(--doux),color .3s}
.g-ong [aria-selected=true]{background:var(--encre);color:#fff}
.g-intro{margin-top:14px;font-size:clamp(14.5px,.94vw,22px);color:#3c3f52;max-width:70ch}
.g-barre{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;margin:clamp(18px,1.6vw,30px) 0}
.g-barre i{height:6px;border-radius:6px;background:rgba(17,20,46,.12);transition:background .5s var(--doux)}
.g-barre i.on{background:var(--encre)}
.g-corps{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(20px,2.4vw,56px);align-items:center}
.g-scene{display:grid}
.g-vis{grid-area:1/1;min-height:clamp(230px,16vw,380px);border-radius:var(--r-grand);background:#fff;display:grid;place-items:center;padding:clamp(20px,2vw,44px);box-shadow:var(--ombre);overflow:hidden;position:relative}
.g-vis.part{animation:part-d .5s var(--ressort) forwards}
.g-vis.arrive{animation:arrive-d .8s var(--ressort) both}
.chemin{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}
.chemin span{padding:.6em 1em;border-radius:12px;background:var(--beige);font-weight:600;font-size:clamp(14px,1vw,24px);animation:arrive .6s var(--ressort) both;animation-delay:calc(var(--i) * 110ms)}
.chemin span:last-child{background:var(--encre);color:#fff}
.chemin .fl{font-size:1.1rem;color:var(--gris);animation:none}
.cmd{display:flex;align-items:center;gap:14px;width:100%;max-width:620px;padding:16px 16px 16px 20px;border-radius:16px;background:var(--encre);color:#fff;font:500 clamp(13px,.92vw,21px)/1.4 ui-monospace,"SF Mono",Menlo,monospace}
.cmd code{flex:1;overflow-wrap:anywhere}
.cmd code::before{content:"› ";color:var(--menthe)}
.cmd .copier{flex:none}
.fichier{display:flex;align-items:center;gap:14px;padding:16px 22px 16px 16px;border-radius:18px;background:var(--beige);font-weight:650;font-size:clamp(15px,1.05vw,25px)}
.fichier i{font-size:2em;color:var(--cadre)}
.fichier small{display:block;font-weight:500;color:var(--gris);font-size:.8em}
.g-txt .etape{font:800 clamp(14px,.9vw,21px)/1 var(--titre);color:var(--gris)}
.g-txt p{font-size:clamp(18px,1.32vw,32px);line-height:1.38;margin-top:12px;max-width:30ch}
.g-txt .oui-non{margin-top:clamp(18px,1.6vw,30px)}
.g-rep{margin-top:16px;padding:16px 18px;border-radius:18px;background:#fff;font-size:clamp(15px,1vw,24px);animation:arrive .6s var(--ressort) both}
.g-maj{margin-top:clamp(18px,1.6vw,30px);font-size:clamp(13.5px,.86vw,20px);color:var(--gris)}
.copier{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:999px;background:#fff;color:var(--encre);font-weight:650;font-size:.875rem;transition:background .3s,color .3s,transform .3s var(--ressort)}
.copier:active{transform:scale(.94)}
.copier.ok{background:var(--menthe);color:var(--encre)}
.copier.clair{background:var(--encre);color:#fff}
.copier.clair.ok{background:var(--vert);color:#fff}

/* Ce qu'il fait, en trois temps */
.trois-t{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.3vw,28px);position:relative}
.temps{position:relative;display:flex;flex-direction:column;gap:12px}
.temps .scene-t{position:relative;display:grid;place-items:center;min-height:clamp(220px,14vw,320px);padding:20px;border-radius:var(--r-grand);background-color:var(--c);background-image:var(--grain);background-size:180px;overflow:hidden}
.temps h3{font:800 clamp(19px,1.3vw,31px)/1.1 var(--titre);margin-top:6px}
.temps p{font-size:clamp(14.5px,.94vw,22px);color:var(--gris);line-height:1.42}
.temps+.temps::before{content:"→";position:absolute;z-index:3;left:calc(-1 * clamp(14px,1.3vw,28px) / 2);top:clamp(110px,7vw,160px);translate:-50% -50%;width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:var(--ombre);display:grid;place-items:center;font:700 1.2rem/1 var(--titre)}
.tas{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}
.tas div{padding:12px 10px;border-radius:14px;background:#fff;text-align:center;font-size:.8125rem;line-height:1.3}
.tas div b{display:block;font:800 .95rem/1 var(--titre);margin-bottom:6px}
.tas .c1 b{color:var(--rouge)}.tas .c3 b{color:var(--vert)}
.lignes-test{display:grid;gap:6px;width:100%}
.lignes-test span{padding:9px 12px;border-radius:12px;background:#fff;font-size:.8125rem}
.lignes-test span:nth-child(2){margin-left:16px}.lignes-test span:nth-child(3){margin-left:32px}

/* Un exemple, en bulles */
.bulles{display:grid;gap:14px;max-width:min(980px,100%)}
.bulle-t{max-width:78%;padding:clamp(16px,1.3vw,28px) clamp(18px,1.5vw,32px);border-radius:24px;font-size:clamp(16px,1.08vw,25px);line-height:1.45}
.bulle-t small{display:block;font:800 .8rem/1 var(--titre);opacity:.65;margin-bottom:8px}
.bulle-t.moi{justify-self:end;background:var(--encre);color:#fff;border-bottom-right-radius:8px}
.bulle-t.lui{background:var(--beige);border-bottom-left-radius:8px}
.bulle-t.lui small{color:var(--cadre);opacity:1}
.questions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.3vw,26px)}
.questions .q-r{display:grid;gap:10px;align-content:start}
.questions .bulle-t{max-width:none;font-size:clamp(15px,1vw,23px)}

/* Il vous faut */
.besoins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.1vw,22px)}
.besoins li{list-style:none;display:flex;gap:12px;align-items:flex-start;padding:clamp(18px,1.4vw,28px);border-radius:var(--r-carte);background:var(--beige);font-size:clamp(15px,1vw,24px);line-height:1.4}
.besoins i{font-size:1.4em;color:var(--cadre);flex:none}
.besoins{padding:0}

/* Pour aller plus loin : la formation qui va avec */
.offres.deux{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.1vw,22px)}
.offre-f{display:grid;grid-template-columns:clamp(150px,11vw,260px) 1fr;gap:clamp(18px,1.8vw,40px);align-items:center;padding:clamp(14px,1.1vw,22px);border-radius:calc(var(--r-grand) + 6px);background:var(--rose-pale);transition:transform .5s var(--ressort),box-shadow .5s}
.offre-f:hover{transform:translateY(-4px);box-shadow:var(--ombre)}
.offre-f .aff-p{aspect-ratio:3/4;border-radius:var(--r-carte)}
.offre-f .aff-p{--mfb:clamp(21px,1.55vw,38px)}
.offre-f h3{font:800 clamp(22px,1.6vw,38px)/1.08 var(--titre);letter-spacing:-.014em;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.offre-f p{font-size:clamp(15px,1vw,24px);color:#3c3f52;margin-top:10px;max-width:56ch}
.offre-f .lien{margin-top:14px}
.details{border-radius:var(--r-carte);background:var(--beige);overflow:hidden}
.details summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:20px 24px;font:800 clamp(17px,1.1vw,26px)/1 var(--titre)}
.details summary::-webkit-details-marker{display:none}
.details summary i{transition:transform .5s var(--ressort)}
.details[open] summary i{transform:rotate(45deg)}
.details dl{display:grid;grid-template-columns:auto 1fr;gap:10px 28px;padding:0 24px 24px;font-size:clamp(14.5px,.94vw,22px)}
.details dt{color:var(--gris)}

/* ---------- 4. L'actu ---------- */
.actu-p{--s:9px;position:relative;z-index:1;isolation:isolate;overflow:hidden;padding:clamp(40px,3.6vw,90px) var(--marge) clamp(86px,6.6vw,150px);background-color:var(--u);background-image:var(--grain),radial-gradient(70% 60% at 82% 8%,#17564b,transparent 70%);background-size:180px,100% 100%;color:#fff;
  -webkit-mask:linear-gradient(#000 0 0) 0 0/100% calc(100% - var(--s)) no-repeat,radial-gradient(var(--s) at 50% var(--s),#000 98%,#0000 101%) 50% 100%/calc(2 * var(--s)) calc(2 * var(--s)) repeat-x;
  mask:linear-gradient(#000 0 0) 0 0/100% calc(100% - var(--s)) no-repeat,radial-gradient(var(--s) at 50% var(--s),#000 98%,#0000 101%) 50% 100%/calc(2 * var(--s)) calc(2 * var(--s)) repeat-x}
[data-couleurs=trois] .actu-p{background-image:var(--grain),radial-gradient(70% 60% at 82% 8%,var(--cadre-clair),transparent 70%)}
.actu-p .fil{color:rgba(255,255,255,.7)}
.actu-p .titre-p{color:var(--ua)}
.actu-p .chapo{color:rgba(255,255,255,.82)}
.actu-p .tete-a{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px}
.seg{display:inline-flex;gap:2px;padding:4px;border-radius:999px;background:rgba(255,255,255,.12)}
.seg button{padding:9px 16px;border-radius:999px;font-size:clamp(13.5px,.88vw,20px);font-weight:600;color:rgba(255,255,255,.84);transition:background .3s var(--doux),color .3s}
.seg button[aria-pressed=true]{background:#fff;color:var(--encre)}
.seg .nb{font:800 .8em/1 var(--titre);opacity:.6;margin-left:4px}
.trio{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(14px,1.3vw,26px);margin-top:clamp(28px,2.6vw,56px)}
.aff{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;min-height:clamp(470px,33vw,800px);padding:clamp(20px,1.7vw,38px);border-radius:var(--r-grand);background-color:var(--c);background-image:var(--grain);background-size:180px;color:var(--ct);transform:perspective(1300px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--doux),box-shadow .6s;box-shadow:0 30px 70px rgba(0,0,0,.22)}
.aff .mot{position:absolute;z-index:0;left:5%;top:5%;font:400 clamp(64px,5.6vw,140px)/.82 var(--ultra);letter-spacing:-.02em;transition:transform 1.1s var(--doux)}
.aff:hover .mot{transform:translateY(-6px) rotate(-2deg)}
.aff .mo{width:78%;right:-24%;top:18%}
.aff .mo.b{width:52%;left:-14%;top:auto;bottom:22%}
.aff .lgs,.aff .branche{position:relative;z-index:1}
.aff .branche .lg{width:var(--lt);height:var(--lt);border-radius:calc(var(--lt) * .3)}
.aff .branche .fil{max-width:80px}
.aff:hover .fil{animation:courant 1s linear infinite}
.aff .lg{--lt:clamp(54px,4vw,92px)}
.aff:hover .lg:first-child{transform:rotate(-8deg)}
.aff .bas{position:relative;z-index:1;margin-top:auto}
.aff .src{font-size:clamp(13px,.82vw,19px);font-weight:600;opacity:.8}
.aff h3{font:900 clamp(24px,1.85vw,46px)/1.04 var(--titre);letter-spacing:-.016em;margin:10px 0 14px;max-width:18ch}
.aff .verdict{background:#fff;color:var(--encre)}
.aff .verdict .fl{color:var(--cadre)}
.aff.grande h3{font-size:clamp(30px,2.4vw,60px)}
.fil-j{display:grid;grid-template-columns:clamp(130px,11vw,260px) minmax(0,1fr);gap:clamp(16px,2vw,48px)}
.jour{display:contents}
.jour .date{position:sticky;top:30px;align-self:start;font:400 clamp(36px,3vw,74px)/.86 var(--ultra);letter-spacing:-.01em;padding-top:12px}
.jour .date small{display:block;font:800 clamp(13px,.82vw,19px)/1 var(--titre);color:var(--gris);margin-top:8px;letter-spacing:0}
.nvs{list-style:none;padding:0;display:grid;gap:6px;margin-bottom:clamp(30px,2.6vw,56px)}
.nv a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(14px,1.2vw,26px);align-items:start;padding:clamp(14px,1.1vw,24px);border-radius:22px;transition:background .3s var(--doux),transform .45s var(--ressort)}
.nv a:hover{background:var(--beige)}
.nv .lg{--lt:clamp(46px,3.2vw,72px)}
.nv a:hover .lg{transform:rotate(-8deg)}
.nv .lg.u{background:var(--c);box-shadow:none;font:400 1.1rem/1 var(--ultra);color:var(--ct)}
.nv b{display:block;font-size:clamp(17px,1.15vw,28px);line-height:1.25;font-weight:650}
.nv p{font-size:clamp(14.5px,.94vw,22px);color:var(--gris);margin-top:4px;line-height:1.42}
.nv .src{display:block;font-size:.8125rem;color:var(--gris);margin-top:6px}
.vd{display:inline-flex;align-items:flex-start;gap:8px;margin-top:10px;padding:8px 13px;border-radius:14px;background:var(--peche);color:var(--encre);font-size:clamp(14px,.9vw,21px);line-height:1.38}
.vd em{font-style:normal;font-weight:700;white-space:nowrap}
.vd.rien{background:var(--beige);color:#4a4458}
[data-couleurs=trois] .vd{background:rgba(37,89,236,.12)}
.nv .fl{color:var(--gris);padding-top:4px}
.nv a:hover .fl{transform:translateX(4px);color:var(--cadre)}
.fil-j[data-vue=vous] .nv.rien,.fil-j[data-vue=rien] .nv:not(.rien){display:none}
.fil-j[data-vue=vous] .jour.sans-vous,.fil-j[data-vue=rien] .jour.sans-rien{display:none}
.nv.anim{animation:arrive .6s var(--ressort) both;animation-delay:calc(var(--i) * 50ms)}
.poubelle{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.3vw,26px)}
.ign{position:relative;padding:clamp(22px,1.8vw,40px);border-radius:var(--r-grand);background:var(--beige);min-height:clamp(200px,13vw,300px);display:flex;flex-direction:column;overflow:hidden}
.ign b{font-size:clamp(17px,1.15vw,28px);line-height:1.25;font-weight:650;text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--rouge);max-width:84%;margin-top:clamp(36px,3vw,64px)}
.ign p{font-size:clamp(14.5px,.94vw,22px);color:#4a4458;margin-top:10px;line-height:1.45}
.tampon-i{position:absolute;right:18px;top:18px;padding:.5em .75em .4em;border:3px solid var(--rouge);border-radius:12px;color:var(--rouge);font:400 clamp(13px,.9vw,21px)/1 var(--ultra);letter-spacing:.06em;transform:rotate(-11deg);opacity:.88;transition:transform .5s var(--rebond)}
.ign:hover .tampon-i{transform:rotate(-4deg) scale(1.16)}
/* Une nouvelle */
.n-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,3vw,72px);align-items:start}
.n-hero .aff{min-height:clamp(420px,30vw,700px)}
.n-hero h1{font:900 clamp(34px,3vw,74px)/1.02 var(--titre);letter-spacing:-.022em;text-wrap:balance}
.passe{list-style:none;padding:0;counter-reset:p;display:grid;gap:10px;margin-top:clamp(18px,1.6vw,30px)}
.passe li{counter-increment:p;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;font-size:clamp(16px,1.08vw,25px);line-height:1.42}
.passe li::before{content:counter(p);display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:50%;background:var(--sapin);color:var(--peche);font:800 .8em/1 var(--titre)}
[data-couleurs=trois] .passe li::before{background:var(--cadre);color:#fff}
.pour-vous{margin-top:clamp(20px,1.8vw,34px);padding:clamp(20px,1.6vw,34px);border-radius:var(--r-carte);background:var(--peche)}
.pour-vous.rien{background:var(--beige)}
[data-couleurs=trois] .pour-vous{background:var(--beige)}
.pour-vous h2{font:800 clamp(20px,1.4vw,34px)/1.1 var(--titre)}
.pour-vous p{font-size:clamp(16px,1.08vw,25px);margin-top:8px;line-height:1.42}

/* ---------- 5. Formations : le mur d'affiches ---------- */
.encours{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:clamp(110px,7.6vw,180px) minmax(0,1fr) auto;gap:clamp(16px,1.8vw,40px);align-items:center;padding:clamp(14px,1.1vw,22px) clamp(22px,2vw,44px) clamp(14px,1.1vw,22px) clamp(14px,1.1vw,22px);border-radius:calc(var(--r-grand) + 6px);background-color:var(--violet);background-image:var(--grain);background-size:180px;color:#fff;margin-top:clamp(24px,2.2vw,44px)}
[data-couleurs=trois] .encours{background-color:var(--cadre)}
.encours .aff-p{aspect-ratio:3/4;border-radius:18px;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.encours .aff-p{--mfb:clamp(22px,1.6vw,40px)}
.encours .qui{font:800 clamp(13px,.86vw,20px)/1 var(--titre);color:var(--jaune)}
[data-couleurs=trois] .encours .qui{color:#fff}
.encours h2{font:900 clamp(22px,1.7vw,42px)/1.06 var(--titre);letter-spacing:-.016em;margin-top:8px}
.encours p{font-size:clamp(15px,1vw,24px);opacity:.88;margin-top:6px}
.encours .jauge{max-width:360px;margin-top:12px;background:rgba(255,255,255,.24)}
.encours .jauge i{background:#fff}
.encours .mo{width:24%;right:16%;top:-60%}
.aff-p{position:relative;isolation:isolate;overflow:hidden;background-color:var(--fc);background-image:var(--grain);background-size:180px;color:var(--ft)}
.aff-p .mo{width:80%;right:-30%;top:-18%}
.aff-p .mo.b{width:56%;left:-20%;right:auto;top:auto;bottom:16%}
.aff-p.v2 .mo{right:auto;left:-26%;top:-12%}
.aff-p.v2 .mo.b{left:auto;right:-12%;bottom:30%}
.aff-p.v3 .mo{top:34%;right:-36%}
.aff-p .mot-f{position:absolute;z-index:1;left:8%;right:5%;bottom:8%;font:400 calc(var(--mfb,clamp(38px,3.1vw,78px)) * min(1, calc(6.4 / var(--l,6))))/.84 var(--ultra);letter-spacing:-.02em;transition:transform 1s var(--doux)}
.aff-p .lgs{position:absolute;z-index:1;left:8%;top:8%}
.aff-p .lg{--lt:clamp(38px,2.6vw,60px)}
.aff-p .pro{position:absolute;z-index:2;right:7%;top:7%}
.encours .aff-p .pro,.encours .aff-p .lgs,.mf .aff-p .pro,.mf .aff-p .lgs,.offre-f .aff-p .pro,.offre-f .aff-p .lgs{display:none}
.aff-p .etoile{--t:clamp(72px,5vw,110px);left:-8px;top:-12px;font-size:clamp(.6rem,.48vw,.78rem);z-index:3}
.mur{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(230px,15.5vw,360px),1fr));gap:clamp(26px,2.2vw,48px) clamp(14px,1.3vw,28px);margin-top:clamp(22px,2vw,40px)}
.poster{position:relative;display:flex;flex-direction:column;gap:14px}
.poster .aff-p{aspect-ratio:3/4;border-radius:var(--r-carte);transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .7s var(--ressort),box-shadow .7s;box-shadow:var(--ombre)}
.poster:hover .aff-p{transform:translateY(-8px) rotate(-1.4deg);box-shadow:var(--ombre-haute)}
.poster:hover .mot-f{transform:translateY(-4px)}
.poster:hover .mo{--pr:24deg}
.poster b{font-size:clamp(17px,1.12vw,27px);font-weight:650;line-height:1.24;padding:0 4px}
.poster small{font-size:clamp(13.5px,.86vw,20px);color:var(--gris);padding:0 4px;margin-top:-8px}
.poster.cache{display:none}
.poster.anim{animation:arrive .7s var(--ressort) both;animation-delay:calc(var(--i) * 55ms)}
[data-couleurs=trois] .aff-p{--fc:var(--beige)!important;--ft:var(--encre)!important}
[data-couleurs=trois] .poster:nth-child(3n+1) .aff-p,[data-couleurs=trois] .aff-p.bleu{--fc:var(--cadre)!important;--ft:#fff!important}

/* ---------- 6. Une formation ---------- */
.fo-g{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(300px,.78fr);gap:clamp(24px,3vw,72px);align-items:start}
.fo-ecran{position:relative;aspect-ratio:16/9;border-radius:var(--r-grand);cursor:pointer;box-shadow:var(--ombre);transform:perspective(1300px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--doux)}
.fo-ecran{--mfb:clamp(70px,7vw,176px)}
.fo-ecran .lire-e{position:absolute;z-index:3;left:clamp(18px,2vw,40px);bottom:clamp(18px,2vw,40px);display:flex;align-items:center;gap:14px}
.fo-ecran .lire-e>span:last-child{font-size:.9375rem;font-weight:550;color:var(--ft)}
.fo-ecran .mot-f{left:auto;right:5%;bottom:auto;top:9%;text-align:right}
.fo-ecran .lgs{top:9%}
.fo-tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:clamp(20px,1.8vw,36px)}
.fo-g h1{font:900 clamp(38px,3.4vw,86px)/1 var(--titre);letter-spacing:-.024em;margin-top:14px;text-wrap:balance}
.fo-g .chapo{margin-top:12px}
.savoir{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:clamp(22px,2vw,40px)}
.savoir li{padding:clamp(16px,1.3vw,28px);border-radius:var(--r-carte);background:var(--beige);font-size:clamp(15px,1vw,24px);line-height:1.4}
.savoir li::before{content:"✓";display:grid;place-items:center;width:1.8em;height:1.8em;border-radius:50%;background:var(--fc);color:var(--ft);font-weight:800;margin-bottom:12px}
.prog{list-style:none;padding:0;display:grid;gap:8px;margin-top:clamp(18px,1.6vw,30px)}
.prog li{display:grid;grid-template-columns:clamp(46px,3.2vw,72px) 1fr auto;gap:clamp(12px,1.1vw,24px);align-items:center;padding:clamp(12px,1vw,20px) clamp(16px,1.2vw,26px) clamp(12px,1vw,20px) clamp(12px,1vw,20px);border-radius:22px;background:#fff;box-shadow:0 0 0 1px var(--filet);transition:transform .45s var(--ressort),box-shadow .45s}
.prog li:hover{transform:translateX(5px);box-shadow:0 0 0 1px var(--filet),var(--ombre)}
.prog .no{display:grid;place-items:center;aspect-ratio:1;border-radius:16px;background:var(--beige);font:400 clamp(20px,1.5vw,36px)/1 var(--ultra)}
.prog li.libre .no{background:var(--fc);color:var(--ft)}
.prog b{font-size:clamp(16px,1.08vw,26px);font-weight:600;line-height:1.3}
.prog .st{display:block;font-size:.8125rem;font-weight:650;color:var(--vert);margin-top:4px}
.prog .st.refait::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--jaune);margin-right:6px;box-shadow:0 0 0 1.5px var(--encre)}
.prog .st.refait{color:var(--encre)}
.prog .d{font-size:clamp(13.5px,.86vw,20px);color:var(--gris);white-space:nowrap}
/* 16/10 : le vrai plan, vidéo pas tournée. L'étiquette « Vidéo à venir » prend la place du bouton de lecture (comme les tutos) ;
   chaque module dit ce qu'on y montre et son exercice */
.fo-ecran .a-venir{height:auto;padding:.6em 1em;font-size:clamp(12px,.8vw,19px)}
.fo-ecran:not([data-video]){cursor:auto}
.prog li:has(.m-t){align-items:start}
.prog .m-t{display:block;margin-top:6px;font-size:clamp(14px,.9vw,21px);line-height:1.45;color:#3c3f52}
.achat{position:sticky;top:30px;padding:clamp(22px,1.8vw,40px);border-radius:calc(var(--r-grand) + 4px);background:#fff;box-shadow:0 0 0 1px var(--filet),var(--ombre-haute)}
.achat h2{font:800 clamp(20px,1.4vw,34px)/1.1 var(--titre);letter-spacing:-.012em}
.achat ul{list-style:none;padding:0;display:grid;gap:10px;margin-top:16px}
.achat li{display:flex;gap:10px;align-items:flex-start;font-size:clamp(14.5px,.94vw,22px);line-height:1.4}
.achat li i{color:var(--vert);font-size:1.15em;margin-top:.12em}
.prix{display:flex;align-items:baseline;gap:12px;margin-top:clamp(18px,1.6vw,30px);font:400 clamp(56px,4.2vw,104px)/1 var(--ultra)}
.prix small{font:500 clamp(13px,.82vw,19px)/1.3 var(--texte);color:var(--gris)}
.achat .btn{width:100%;margin-top:16px;height:56px;font-size:1.0625rem}
.achat .gratuit-f{margin-top:12px;font-size:.875rem;color:var(--gris);text-align:center}
.achat.fait{background:var(--menthe);box-shadow:none}
.achat.fait .prix{font-size:clamp(34px,2.4vw,58px)}

/* ---------- 7. Tutoriels : le lecteur et sa liste ---------- */
.lect{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:clamp(16px,1.8vw,40px);align-items:start;margin-top:clamp(24px,2.2vw,44px)}
.lect-s{display:grid}
.ecran{grid-area:1/1;position:relative;isolation:isolate;overflow:hidden;aspect-ratio:16/9;border-radius:var(--r-grand);background-color:var(--c);background-image:var(--grain);background-size:180px;color:var(--ct);box-shadow:var(--ombre)}
.ecran.part{animation:part-d .5s var(--ressort) forwards}
.ecran.arrive{animation:arrive-d .85s var(--ressort) both}
.flux{position:absolute;left:50%;top:40%;translate:-50% -50%;display:flex;align-items:center;gap:clamp(8px,.8vw,16px)}
.flux .lg{--lt:clamp(64px,5vw,120px)}
.flux .fil{width:clamp(40px,4vw,100px);height:3px;background:repeating-linear-gradient(90deg,currentColor 0 8px,transparent 8px 16px);background-size:32px 3px;opacity:.6;animation:courant 1.2s linear infinite}
@keyframes courant3{to{background-position:32px 0}}
.ecran .bas-e{position:absolute;z-index:2;left:clamp(20px,2vw,44px);right:clamp(20px,2vw,44px);bottom:clamp(18px,1.8vw,40px);display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.ecran h2{font:900 clamp(24px,2vw,50px)/1.04 var(--titre);letter-spacing:-.018em;max-width:20ch}
.ecran .dur{font:400 clamp(40px,3.6vw,90px)/.8 var(--ultra);white-space:nowrap}
.jouer-g{display:inline-grid;place-items:center;width:clamp(56px,4vw,90px);aspect-ratio:1;border-radius:50%;background:var(--encre);color:#fff;font-size:clamp(1.3rem,1.5vw,2.2rem);position:absolute;z-index:2;right:clamp(20px,2vw,44px);top:clamp(18px,1.8vw,40px);transition:transform .5s var(--rebond)}
.ecran:hover .jouer-g{transform:scale(1.12) rotate(-6deg)}
.ch-t{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ch-t li{display:flex;align-items:center;gap:9px;padding:7px 15px 7px 7px;border-radius:999px;background:var(--beige);font-size:clamp(14px,.9vw,21px);font-weight:500}
.ch-t li span{width:1.8em;height:1.8em;border-radius:50%;background:var(--encre);color:#fff;display:grid;place-items:center;font:800 .8em/1 var(--titre)}
/* 16/10 : tuto pas encore tourné. L'étiquette prend la place du bouton de lecture ; dessous, ce que la vidéo montre et sa page */
.ecran .a-venir{position:absolute;z-index:2;right:clamp(20px,2vw,44px);top:clamp(18px,1.8vw,40px);height:auto;padding:.6em 1em;font-size:clamp(12px,.8vw,19px)}
.ch-h{font:800 clamp(15px,1vw,24px)/1 var(--titre);margin-top:clamp(18px,1.6vw,34px)}
.pg-t:not(:empty){margin-top:16px}
.liste-t{list-style:none;padding:0;display:grid;gap:6px}
.liste-t h2{font:800 clamp(18px,1.2vw,28px)/1 var(--titre);margin:4px 8px 12px}
.liste-t button{width:100%;display:grid;grid-template-columns:clamp(96px,7vw,170px) 1fr;gap:14px;align-items:center;padding:8px;border-radius:20px;transition:background .3s var(--doux),box-shadow .3s,transform .45s var(--ressort)}
.liste-t button:hover{background:var(--beige)}
.liste-t button[aria-selected=true]{background:#fff;box-shadow:0 0 0 1px var(--filet),var(--ombre)}
.liste-t .mini-e{aspect-ratio:16/10;border-radius:14px;display:grid;place-items:center;background-color:var(--c);background-image:var(--grain);background-size:180px;color:var(--ct);font:400 clamp(18px,1.3vw,32px)/1 var(--ultra)}
.liste-t b{display:block;font-size:clamp(15px,.98vw,23px);font-weight:650;line-height:1.28}
.liste-t small{font-size:clamp(12.5px,.8vw,19px);color:var(--gris)}
.tutos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,1.6vw,34px) clamp(14px,1.3vw,28px)}
.tuto{display:flex;flex-direction:column;gap:12px}
.tuto .ecran{aspect-ratio:16/10;transition:transform .6s var(--ressort),box-shadow .6s}
.tuto:hover .ecran{transform:translateY(-6px) rotate(-.6deg);box-shadow:var(--ombre-haute)}
.tuto .flux .lg{--lt:clamp(46px,3.2vw,76px)}
.tuto .ecran .dur{position:absolute;left:clamp(14px,1.2vw,26px);bottom:clamp(12px,1vw,22px);font-size:clamp(34px,2.6vw,64px)}
.tuto b{font-size:clamp(17px,1.12vw,27px);font-weight:650;line-height:1.24;padding:0 4px}
.tuto small{font-size:clamp(13.5px,.86vw,20px);color:var(--gris);padding:0 4px;margin-top:-6px}
.tuto.cache{display:none}
.tuto.anim{animation:arrive .7s var(--ressort) both;animation-delay:calc(var(--i) * 55ms)}
[data-couleurs=trois] .ecran{--c:var(--beige)!important;--ct:var(--encre)!important}
[data-couleurs=trois] .tuto:nth-child(3n+1) .ecran,[data-couleurs=trois] .lect .ecran,[data-couleurs=trois] .liste-t .mini-e{--c:var(--cadre)!important;--ct:#fff!important}

/* ---------- 8. Les mots de l'IA ---------- */
.mots-g{display:grid;grid-template-columns:clamp(220px,17vw,400px) minmax(0,1fr);gap:clamp(24px,3vw,72px);align-items:start}
.mots-nav{position:sticky;top:30px;display:grid;gap:18px}
.compris{padding:clamp(20px,1.6vw,34px);border-radius:var(--r-grand);background-color:var(--indigo);background-image:var(--grain);background-size:180px;color:#fff}
[data-couleurs=trois] .compris{background-color:var(--cadre)}
.compris b{display:block;font:400 clamp(54px,4.4vw,110px)/.86 var(--ultra);transition:transform .5s var(--rebond)}
.compris b.bouge{transform:scale(1.14) rotate(-4deg)}
.compris span{display:block;font-size:clamp(14.5px,.94vw,22px);margin-top:10px;opacity:.86}
.mots-nav nav{display:grid;gap:4px}
.mots-nav nav a{padding:10px 14px;border-radius:14px;font-weight:600;font-size:clamp(14.5px,.94vw,22px);transition:background .3s}
.mots-nav nav a:hover{background:var(--beige)}
.groupe-m+.groupe-m{margin-top:clamp(48px,4vw,96px)}
.groupe-m>h2{font:800 clamp(26px,2vw,48px)/1.04 var(--titre);letter-spacing:-.016em;margin-bottom:clamp(16px,1.4vw,28px);scroll-margin-top:30px}
.mots-l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.1vw,22px)}
.mot-c{position:relative;display:flex;flex-direction:column;padding:clamp(22px,1.8vw,40px);border-radius:var(--r-grand);background:#fff;box-shadow:0 0 0 1px var(--filet),var(--ombre);transition:transform .6s var(--ressort),box-shadow .6s,background .5s var(--doux)}
.mot-c:hover{transform:translateY(-4px)}
.mot-c dt b{display:block;font:900 clamp(32px,2.6vw,64px)/1 var(--titre);letter-spacing:-.022em}
.mot-c .clair-m{display:inline-block;margin-top:12px;padding:.5em .8em .42em;border-radius:999px;background:var(--mc,var(--menthe));font:400 clamp(12px,.82vw,19px)/1 var(--ultra);letter-spacing:.02em;transform:rotate(-2deg)}
.mot-c dd{margin:14px 0 0;font-size:clamp(15.5px,1.04vw,25px);line-height:1.45;color:#3c3f52}
.mot-c .ex{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:clamp(14px,.9vw,21px);font-weight:600;color:var(--cadre)}
.mot-c .oui-non{margin-top:auto;padding-top:18px}
.mot-c .oui-non .btn{height:42px;padding:0 18px;font:700 .9375rem/1 var(--titre)}
.mot-c .ok-m{position:absolute;right:18px;top:18px;width:46px;height:46px;border-radius:50%;background:var(--menthe);display:grid;place-items:center;font-size:1.3rem;transform:scale(0);transition:transform .5s var(--rebond)}
.mot-c.connu{background-color:var(--mc,var(--beige));background-image:var(--grain);background-size:180px;box-shadow:none}
.mot-c.connu .clair-m{background:#fff}
.mot-c.connu .ok-m{background:#fff}
[data-couleurs=trois] .mot-c{--mc:var(--beige)!important}
.mot-c.connu .ok-m{transform:scale(1)}
.mot-c.connu dd{color:var(--encre)}

/* ---------- 9. Prompts ---------- */
.pj{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(20px,2.4vw,56px);align-items:center;margin-top:clamp(28px,2.4vw,52px);padding:clamp(22px,2vw,48px);border-radius:calc(var(--r-grand) + 8px);background-color:var(--vert);background-image:var(--grain);background-size:180px;color:#fff;position:relative;isolation:isolate;overflow:hidden}
[data-couleurs=trois] .pj{background-color:var(--cadre)}
.pj .qui{font:800 clamp(14px,.95vw,22px)/1 var(--titre);color:#fff;opacity:.92}
[data-couleurs=trois] .pj .qui{color:#fff}
.pj h2{font:900 clamp(30px,2.6vw,64px)/1 var(--titre);letter-spacing:-.022em;margin-top:12px}
.pj>div>p{font-size:clamp(16px,1.08vw,25px);opacity:.86;margin-top:12px;max-width:40ch}
.pj .mo{width:34%;left:-8%;bottom:-40%}
.prompt-b{border-radius:var(--r-carte);background:#fff;color:var(--encre);padding:clamp(16px,1.4vw,30px)}
.champ{display:grid;gap:6px}
.champ label{font:800 .8125rem/1 var(--titre);color:var(--gris)}
.champ input{font:inherit;font-size:clamp(15px,1vw,24px);letter-spacing:var(--ls);padding:11px 14px;border-radius:12px;border:0;background:var(--beige);color:var(--encre);outline:none;box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .3s}
.champ input:focus{box-shadow:inset 0 0 0 2px var(--cadre)}
.prompt-b q,.ticket q{display:block;quotes:none;margin-top:14px;font-size:clamp(15px,1vw,24px);line-height:1.55}
.prompt-b mark,.ticket mark{background:var(--jaune);color:var(--encre);border-radius:6px;padding:.05em .3em;transition:background .4s}
/* 16/10 : les vrais prompts ont plusieurs lignes et plusieurs mots à changer ; le mot que la case change est cerclé */
.prompt-b q,.ticket q{white-space:pre-line}
.prompt-b mark[data-trou],.ticket mark[data-trou]{cursor:pointer}
.prompt-b mark.on,.ticket mark.on{box-shadow:0 0 0 2px var(--encre)}
.prompt-b .pied,.ticket .pied{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px}
.prompt-b .pied small,.ticket .pied small{font-size:.8125rem;color:var(--gris)}
.tickets{columns:3 clamp(280px,20vw,480px);column-gap:clamp(14px,1.3vw,28px);margin-top:clamp(20px,1.8vw,36px)}
.ticket{break-inside:avoid;margin-bottom:clamp(14px,1.3vw,28px);display:flex;flex-direction:column;padding:clamp(18px,1.5vw,32px);border-radius:var(--r-grand);background:#fff;box-shadow:0 0 0 1px var(--filet),var(--ombre);transition:transform .6s var(--ressort),box-shadow .6s}
.ticket:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:0 0 0 1px var(--filet),var(--ombre-haute)}
.ticket .types{display:flex;flex-wrap:wrap;gap:6px}
.ticket h3{font:800 clamp(19px,1.3vw,31px)/1.12 var(--titre);letter-spacing:-.012em;margin-top:10px}
.ticket q{padding:14px 16px;border-radius:16px;background:var(--beige);font-size:clamp(14.5px,.94vw,22px)}
.ticket .champ{margin-top:14px}
.ticket.cache{display:none}
.ticket.anim{animation:arrive .7s var(--ressort) both;animation-delay:calc(var(--i) * 45ms)}
.renvoi{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(28px,2.4vw,52px)}
.renvoi a{display:inline-flex;align-items:center;gap:10px;padding:14px 20px;border-radius:20px;background:var(--beige);font-weight:600;font-size:clamp(14.5px,.94vw,22px);transition:transform .45s var(--ressort)}
.renvoi a:hover{transform:translateY(-3px)}
.renvoi a:hover .fl{transform:translateX(4px)}

/* ---------- 10. Images : chaque style a son dessin en attendant les vraies images ---------- */
.gal.cinq{grid-template-columns:repeat(5,minmax(0,1fr))}
.gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,1.6vw,34px) clamp(14px,1.3vw,28px)}
.img-c{display:flex;flex-direction:column;gap:12px}
.img-c .st45{aspect-ratio:4/5;border-radius:var(--r-carte);transition:transform .6s var(--ressort),box-shadow .6s;box-shadow:var(--ombre)}
.img-c:hover .st45{transform:translateY(-6px) rotate(-.8deg);box-shadow:var(--ombre-haute)}
.img-c b{font-size:clamp(16px,1.05vw,25px);font-weight:650;line-height:1.24;padding:0 4px}
.img-c small{font-size:clamp(13px,.82vw,19px);color:var(--gris);padding:0 4px;margin-top:-6px}
.img-c.cache{display:none}
.img-c.anim{animation:arrive .7s var(--ressort) both;animation-delay:calc(var(--i) * 45ms)}
.st45{position:relative;isolation:isolate;overflow:hidden;background-color:var(--c);background-image:var(--grain);background-size:180px;color:var(--ct,var(--encre))}
.st45 .mot{position:absolute;z-index:2;font:400 clamp(34px,2.7vw,68px)/.86 var(--ultra);letter-spacing:-.02em}
.st45 .etoile{--t:clamp(66px,4.4vw,96px);right:-8px;top:-12px;font-size:clamp(.58rem,.46vw,.76rem);z-index:4}
.st-produit .socle{position:absolute;left:14%;right:14%;bottom:16%;height:14%;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 18px 30px rgba(17,20,46,.12)}
.st-produit .objet{position:absolute;left:30%;right:30%;bottom:22%;height:30%;border-radius:38% 38% 30% 30%/40% 40% 26% 26%;background:#fff;box-shadow:inset -14px -10px 0 rgba(17,20,46,.06);transition:transform .8s var(--rebond)}
.img-c:hover .st-produit .objet,.tilt:hover .st-produit .objet{transform:translateY(-8px) rotate(-4deg)}
.st-produit .rayon{position:absolute;left:-10%;top:-10%;width:90%;height:70%;background:linear-gradient(135deg,rgba(255,255,255,.55),transparent 60%);transform:rotate(-8deg)}
.st-produit .mot{left:8%;top:7%}
.st-portrait .lumiere{position:absolute;inset:0;background:radial-gradient(70% 90% at 0% 40%,rgba(255,236,190,.9),transparent 62%)}
.st-portrait .ombre{position:absolute;right:-20%;top:10%;width:80%;height:100%;border-radius:50% 50% 0 0;background:rgba(17,20,46,.16);transition:transform .9s var(--doux)}
.img-c:hover .st-portrait .ombre,.tilt:hover .st-portrait .ombre{transform:translateX(-8px)}
.st-portrait .mot{left:8%;bottom:8%;font-size:clamp(40px,3.2vw,80px)}
.st-portrait.neon{--c:#2b1b9c!important;--ct:#fff}
.st-portrait.neon .lumiere{background:radial-gradient(60% 70% at 20% 30%,rgba(255,47,142,.55),transparent 65%)}
.st-portrait.neon .mot{color:#fff;text-shadow:0 0 6px #ff2f8e,0 0 22px #ff2f8e,0 0 44px rgba(255,47,142,.7)}
.st-affiche .mot{left:-4%;top:6%;font-size:clamp(70px,5.6vw,140px);line-height:.8;transform:rotate(-6deg);transition:transform .9s var(--doux)}
.img-c:hover .st-affiche .mot{transform:rotate(-2deg) scale(1.05)}
.st-affiche .coupe{position:absolute;left:24%;right:24%;top:40%;bottom:16%;border-radius:20px;background:var(--encre);transform:rotate(4deg)}
.st-affiche .coupe::after{content:"";position:absolute;inset:18% 16%;border-radius:50%;background:var(--jaune)}
.st-illu .trait{position:absolute;border:3px dashed rgba(17,20,46,.5);border-radius:50%}
.st-illu .trait.a{left:10%;top:16%;width:46%;aspect-ratio:1}
.st-illu .trait.b{right:8%;top:36%;width:38%;aspect-ratio:1;border-style:solid;border-color:rgba(17,20,46,.35)}
.st-illu .trait.c{left:20%;bottom:24%;width:60%;height:3px;border-radius:0;border-width:3px 0 0}
.st-illu .mot{font-family:Titre;font-weight:300;font-style:italic;left:8%;bottom:8%;letter-spacing:-.01em;font-size:clamp(34px,2.6vw,64px)}
.st-3d .mot{left:8%;top:30%;color:#fff;text-shadow:1px 1px 0 #0a7a43,2px 2px 0 #0a7a43,3px 3px 0 #0a7a43,4px 4px 0 #0a7a43,5px 5px 0 #0a7a43,6px 6px 0 #0a7a43;font-size:clamp(40px,3.2vw,80px);transition:transform .8s var(--rebond)}
.img-c:hover .st-3d .mot{transform:translateY(-6px) rotate(-3deg)}
.st-3d .boule{position:absolute;right:12%;bottom:12%;width:34%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 34% 30%,#fff,rgba(255,255,255,.4) 40%,rgba(10,122,67,.35))}
.st-cine{--ct:#fff}
.st-cine .ciel{position:absolute;inset:0;background:linear-gradient(180deg,#1d2366 0%,#2b1b9c 50%,#d33a2a 120%)}
.st-cine .pluie{position:absolute;inset:0;background:repeating-linear-gradient(104deg,rgba(255,255,255,.16) 0 1px,transparent 1px 13px);transition:background-position 2s linear}
.img-c:hover .st-cine .pluie,.tilt:hover .st-cine .pluie{background-position:-60px 120px}
.st-cine .noir{position:absolute;left:0;right:0;height:12%;background:var(--encre);z-index:3}
.st-cine .noir.h{top:0}.st-cine .noir.b{bottom:0}
.st-cine .parapluie{position:absolute;left:58%;top:52%;width:20%;aspect-ratio:2/1;border-radius:100px 100px 0 0;background:var(--rouge);box-shadow:0 30px 0 -14px rgba(211,58,42,.35)}
.st-cine .mot{left:8%;bottom:16%;z-index:2}
.st-cine.bougie .ciel{background:radial-gradient(60% 50% at 50% 70%,#f2b483 0%,#8a3b1f 40%,#1d1222 85%)}
.st-cine.bougie .pluie{display:none}
.st-cine.bougie .parapluie{left:46%;top:56%;width:8%;aspect-ratio:1/2.4;border-radius:40% 40% 10% 10%;background:#fff3d6;box-shadow:0 -24px 30px #ffd23f}
/* Une image : le dessin, le prompt, comprendre le prompt */
.im-g{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,3vw,72px);align-items:start}
.im-g .st45{border-radius:var(--r-grand);transform:perspective(1300px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--doux);box-shadow:var(--ombre)}
.im-g .st45 .mot{font-size:clamp(60px,5.6vw,140px)}
.im-g .st-affiche .mot{font-size:clamp(110px,10vw,250px)}
.im-g h1{font:900 clamp(36px,3.2vw,80px)/1 var(--titre);letter-spacing:-.022em;margin-top:12px}
.morceaux{margin-top:clamp(18px,1.6vw,30px);padding:clamp(18px,1.6vw,34px);border-radius:var(--r-grand);background:var(--beige);font-size:clamp(17px,1.2vw,29px);line-height:1.8}
.morceaux span{padding:.12em .35em;border-radius:8px;transition:background .35s,box-shadow .35s;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.morceaux span[data-m]{background:color-mix(in srgb,var(--mc) 55%,white)}
.morceaux span.fort{background:var(--mc);box-shadow:0 0 0 2px var(--encre)}
.cles{display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(170px,11vw,260px),1fr));gap:10px;margin-top:14px}
.cles button{display:grid;gap:6px;padding:16px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--filet);text-align:left;transition:transform .45s var(--ressort),box-shadow .45s}
.cles button:hover,.cles button.fort{transform:translateY(-3px);box-shadow:0 0 0 2px var(--encre),var(--ombre)}
.cles b{display:flex;align-items:center;gap:8px;font:800 clamp(15px,1vw,24px)/1.1 var(--titre)}
.cles b::before{content:"";width:14px;height:14px;border-radius:4px;background:var(--mc)}
.cles span{font-size:clamp(13.5px,.86vw,20px);color:var(--gris);line-height:1.4}

/* ---------- 11. Vidéo ---------- */
.salle+.salle{margin-top:clamp(56px,4.6vw,110px)}
.salle-t{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 30px;margin-bottom:clamp(18px,1.6vw,32px)}
.salle-t h2{font:400 clamp(48px,4.4vw,110px)/.86 var(--ultra);letter-spacing:-.016em}
.salle-t p{font-size:clamp(16px,1.08vw,25px);color:var(--gris);max-width:62ch}
.salle-t p b{color:var(--encre);font-weight:650}
.films{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.3vw,28px)}
.film{display:flex;flex-direction:column;gap:12px}
.cine{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:16/9;border-radius:var(--r-carte);background:var(--encre);color:#fff;box-shadow:var(--ombre);transition:transform .6s var(--ressort),box-shadow .6s}
.film:hover .cine{transform:translateY(-6px) rotate(-.5deg);box-shadow:var(--ombre-haute)}
.cine .noir{position:absolute;left:0;right:0;height:11%;background:var(--encre);z-index:4}
.cine .noir.h{top:0}.cine .noir.b{bottom:0}
.cine .ciel{position:absolute;inset:0}
.cine .pluie{position:absolute;inset:0;background:repeating-linear-gradient(104deg,rgba(255,255,255,.16) 0 1px,transparent 1px 13px);transition:background-position 2.2s linear}
.film:hover .pluie,.tilt:hover .pluie{background-position:-80px 160px}
.cine .jouer-f{position:absolute;z-index:5;right:5%;bottom:17%;width:clamp(48px,3.4vw,76px);aspect-ratio:1;border-radius:50%;background:#fff;color:var(--encre);display:grid;place-items:center;font-size:1.3rem;transition:transform .5s var(--rebond)}
.film:hover .jouer-f{transform:scale(1.14)}
.v-g .cine .jouer-f,.choix .cine .jouer-f{right:auto;left:50%;top:50%;bottom:auto;translate:-50% -50%}
.cine .titre-c{position:absolute;z-index:5;left:6%;bottom:14%;font:400 clamp(22px,1.7vw,42px)/.88 var(--ultra);letter-spacing:-.01em;max-width:80%}
.cine.pluie-c .ciel{background:linear-gradient(180deg,#121a4f 0%,#2b1b9c 55%,#5a2a6e 100%)}
.cine.pluie-c .manteau{position:absolute;z-index:2;left:56%;top:34%;width:20%;aspect-ratio:2/1;border-radius:999px 999px 0 0;background:var(--rouge);transform:rotate(8deg);transform-origin:50% 100%;transition:transform 1.2s var(--doux)}
.cine.pluie-c .manteau::after{content:"";position:absolute;left:calc(50% - 1.5px);top:100%;width:3px;height:120%;background:#fff;border-radius:2px;opacity:.85}
.film:hover .manteau,.tilt:hover .manteau{transform:rotate(-8deg) translateX(-6px)}
.cine.cafe-c .ciel{background:linear-gradient(180deg,#ffd23f 0%,#f2b483 45%,#d97a4a 100%)}
.cine.cafe-c .tasse{position:absolute;z-index:2;left:44%;bottom:18%;width:14%;aspect-ratio:1.1;border-radius:6px 6px 40% 40%;background:#fff}
.cine.cafe-c .vapeur{position:absolute;z-index:2;left:46%;bottom:44%;width:8%;aspect-ratio:1/2;border-radius:50%;background:rgba(255,255,255,.55);filter:blur(4px);transition:transform 1.4s var(--doux),opacity 1.4s}
.film:hover .vapeur,.tilt:hover .vapeur{transform:translateY(-24px) scale(1.3);opacity:.3}
.cine.voiture-c .ciel{background:linear-gradient(180deg,#0f1438 0%,#1d2366 70%,#2b1b9c 100%)}
.cine.voiture-c .phare{position:absolute;z-index:2;bottom:30%;width:7%;aspect-ratio:1;border-radius:50%;background:#ffd23f;box-shadow:0 0 40px 10px rgba(255,210,63,.55);transition:transform 1.4s var(--doux)}
.cine.voiture-c .phare.a{left:30%}.cine.voiture-c .phare.b{left:42%}
.film:hover .phare,.tilt:hover .phare{transform:translateX(60px)}
.cine.duo-c .ciel{background:var(--indigo)}
.cine.duo-c .avant{position:absolute;z-index:2;left:6%;top:18%;font:400 clamp(26px,2vw,50px)/1 var(--ultra);color:rgba(255,255,255,.35);text-decoration:line-through;text-decoration-thickness:3px}
.cine.duo-c .apres{position:absolute;z-index:2;left:6%;top:38%;font:400 clamp(40px,3.2vw,80px)/1 var(--ultra);color:var(--jaune);transition:transform .8s var(--rebond)}
.film:hover .apres,.tilt:hover .apres{transform:translateX(10px) rotate(-3deg)}
.cine.duo-c .titre-c{font:600 clamp(14px,.92vw,21px)/1.3 var(--texte);bottom:14%}
.cine.motion-c .ciel{background:var(--vert)}
.cine.motion-c .formes{position:absolute;z-index:2;left:50%;top:46%;translate:-50% -50%;display:flex;gap:.3em;font:900 clamp(40px,3.4vw,84px)/1 Titre;color:#fff}
.cine.motion-c .formes span{display:inline-block;transition:transform .8s var(--rebond)}
.film:hover .formes span:nth-child(1){transform:translateY(-14px) rotate(-40deg)}
.film:hover .formes span:nth-child(2){transform:scale(1.3)}
.film:hover .formes span:nth-child(3){transform:translateY(12px) rotate(90deg)}
.cine.motion-c .attente{position:absolute;z-index:5;left:6%;top:15%;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.18);font-size:.75rem;font-weight:600}
.film b{font-size:clamp(16px,1.05vw,25px);font-weight:650;line-height:1.24;padding:0 4px}
.film small{font-size:clamp(13px,.82vw,19px);color:var(--gris);padding:0 4px;margin-top:-6px}
.film details{padding:0 4px}
.film summary{cursor:pointer;font-size:.875rem;font-weight:650;color:var(--cadre);list-style:none}
.film summary::-webkit-details-marker{display:none}
.film details q{display:block;quotes:none;margin-top:8px;padding:12px 14px;border-radius:14px;background:var(--beige);font-size:.875rem;line-height:1.5}
.film details mark{background:var(--jaune);border-radius:5px;padding:0 .25em}
.vers-pro{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;margin-top:clamp(16px,1.4vw,28px);padding:clamp(16px,1.3vw,26px) clamp(18px,1.5vw,30px);border-radius:var(--r-carte);background:var(--rose-pale);transition:transform .45s var(--ressort)}
.vers-pro:hover{transform:translateY(-3px)}
.vers-pro b{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font:800 clamp(17px,1.15vw,28px)/1.15 var(--titre)}
.vers-pro p{font-size:clamp(14.5px,.94vw,22px);color:#4a4458;margin-top:6px}
.vers-pro:hover .fl{transform:translateX(4px)}
.v-g{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,3vw,72px);align-items:start}
.v-g .cine{aspect-ratio:2.2/1;border-radius:var(--r-grand)}
.v-g .cine .jouer-f{width:clamp(64px,5vw,110px);font-size:2rem}
.v-g .cine .titre-c{font-size:clamp(34px,3vw,74px)}

/* ---------- 12. Recherche ---------- */
.res-g{display:grid;gap:clamp(36px,3vw,64px)}
.res-g h2{font:800 clamp(22px,1.6vw,38px)/1.05 var(--titre);letter-spacing:-.014em;display:flex;align-items:baseline;gap:10px}
.res-g h2 span{font-size:.6em;color:var(--gris)}
.res-l{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}
.res-l a{display:grid;grid-template-columns:clamp(70px,5vw,110px) 1fr auto;gap:16px;align-items:center;padding:10px 16px 10px 10px;border-radius:22px;background:#fff;box-shadow:0 0 0 1px var(--filet);transition:transform .45s var(--ressort),box-shadow .45s}
.res-l a:hover{transform:translateY(-3px);box-shadow:0 0 0 1px var(--filet),var(--ombre)}
.res-l .vg{aspect-ratio:1;border-radius:14px;display:grid;place-items:center;background-color:var(--c);background-image:var(--grain);background-size:180px;color:var(--ct);font:400 clamp(16px,1.1vw,26px)/1 var(--ultra);overflow:hidden}
.res-l .vg .lg{--lt:60%}
.res-l b{display:block;font-size:clamp(15.5px,1vw,24px);font-weight:650;line-height:1.28}
.res-l small{font-size:clamp(12.5px,.8vw,19px);color:var(--gris)}
.res-l mark{background:var(--jaune);border-radius:4px;padding:0 .15em}
.res-vide{display:grid;gap:clamp(20px,1.8vw,36px)}
.res-vide>*,.res-g>*{min-width:0}
.cherche-p{position:relative;margin-top:clamp(18px,1.6vw,30px);max-width:760px}
.cherche-p input{width:100%;font:inherit;font-size:clamp(18px,1.3vw,31px);letter-spacing:var(--ls);padding:18px 22px 18px 58px;border-radius:999px;border:0;background:var(--beige);outline:none;box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .3s}
.cherche-p input:focus{box-shadow:inset 0 0 0 2px var(--cadre)}
.cherche-p i{position:absolute;left:22px;top:50%;transform:translateY(-50%);font-size:1.4rem;color:var(--gris)}
.objs-m{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(180px,12vw,280px),1fr));gap:10px}
.objs-m a{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(120px,8vw,180px);padding:18px;border-radius:var(--r-carte);background:var(--c);color:var(--ct);transition:transform .5s var(--ressort),box-shadow .5s}
.objs-m a:hover{transform:translateY(-4px) rotate(-.8deg);box-shadow:var(--ombre-haute)}
.objs-m span{font:800 .8125rem/1 var(--titre);opacity:.8}
.objs-m b{font:800 clamp(19px,1.35vw,32px)/1.04 var(--titre);margin-top:4px;letter-spacing:-.014em}
.objs-m .mo{width:70%;right:-24%;top:-40%}
[data-couleurs=trois] .objs-m a{--c:var(--beige)!important;--ct:var(--encre)!important}
[data-couleurs=trois] .objs-m a:nth-child(3n+1){--c:var(--cadre)!important;--ct:#fff!important}

/* ---------- 13. Je veux… (un objectif) ---------- */
.obj-couv{min-height:clamp(320px,24vw,560px);display:flex;flex-direction:column;justify-content:flex-end}
.obj-couv .l{width:100%}
.obj-couv .je{font:800 clamp(18px,1.3vw,32px)/1 var(--titre);opacity:.85}
.obj-couv h1{margin-top:10px;font:400 clamp(60px,6vw,150px)/.88 var(--ultra);letter-spacing:-.014em;color:var(--ut);text-shadow:1px 1px 0 var(--rel),2px 2px 0 var(--rel),3px 3px 0 var(--rel),4px 4px 0 var(--rel),5px 5px 0 var(--rel),6px 6px 0 var(--rel),7px 7px 0 var(--rel),8px 8px 0 var(--rel)}
.obj-couv .quoi{max-width:40ch}
.obj-couv .mo{width:40%;right:-6%;top:-30%}
.obj-couv .mo.b{width:26%;left:auto;right:30%;top:auto;bottom:-30%}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(clamp(270px,20vw,460px),1fr);gap:clamp(14px,1.3vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 6px 14px;margin:0 -6px}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start}
.rail .poster .aff-p{aspect-ratio:4/3}

/* ---------- 14. Moi ---------- */
.moi-t{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,1.6vw,34px)}
.moi-t .av-g{width:clamp(84px,6.4vw,150px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:var(--jaune);font:900 clamp(30px,2.4vw,58px)/1 var(--titre);transition:transform .6s var(--rebond)}
.moi-t .av-g:hover{transform:rotate(-10deg) scale(1.05)}
.moi-t p{font-size:clamp(15px,1vw,24px);color:var(--gris);margin-top:6px}
.etat{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(16px,1.6vw,34px);padding:clamp(14px,1.2vw,24px);border-radius:calc(var(--r-grand) + 8px);background:var(--rose-pale)}
.etat-r{padding:clamp(14px,1.4vw,32px)}
.etat-r b{display:block;font:400 clamp(60px,5vw,124px)/.86 var(--ultra);color:var(--rouge)}
.etat-r h2{font:800 clamp(24px,1.8vw,44px)/1.04 var(--titre);letter-spacing:-.016em;margin-top:10px}
.etat-r p{font-size:clamp(15px,1vw,24px);color:#4a4458;margin-top:10px;max-width:40ch}
.etat-l{display:grid;gap:10px}
.etat-l .dep{background:#fff}
.a-jour{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.a-jour span{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.7);font-size:.8125rem;font-weight:550}
.a-jour i{color:var(--vert)}
.mes-f{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.3vw,28px)}
.mf{display:grid;grid-template-columns:clamp(84px,6vw,140px) 1fr;gap:16px;align-items:center;padding:10px 18px 10px 10px;border-radius:var(--r-grand);background:#fff;box-shadow:0 0 0 1px var(--filet),var(--ombre);transition:transform .5s var(--ressort)}
.mf:hover{transform:translateY(-4px)}
.mf .aff-p{aspect-ratio:3/4;border-radius:16px}
.mf .aff-p{--mfb:clamp(16px,1.1vw,27px)}
.mf .aff-p .mot-f{left:7%;right:3%}
.mf b{display:block;font-size:clamp(15.5px,1vw,24px);font-weight:650;line-height:1.26}
.mf small{display:block;font-size:.8125rem;color:var(--gris);margin-top:4px}
.mf .jauge{margin-top:10px;color:var(--encre)}
.compte-l{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.compte-l a{display:flex;flex-direction:column;gap:6px;padding:clamp(18px,1.4vw,30px);border-radius:var(--r-carte);background:var(--beige);transition:transform .45s var(--ressort)}
.compte-l a:hover{transform:translateY(-3px)}
.compte-l i{font-size:1.5rem;color:var(--cadre)}
.compte-l b{font-size:clamp(16px,1.05vw,25px);font-weight:650}
.compte-l span{font-size:clamp(13.5px,.86vw,20px);color:var(--gris)}
.mail-f{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-top:12px;padding:clamp(18px,1.5vw,32px);border-radius:var(--r-carte);background:#fff;box-shadow:0 0 0 1px var(--filet)}
.mail-f b{font-size:clamp(16px,1.05vw,25px);font-weight:650}
.mail-f p{font-size:clamp(13.5px,.86vw,20px);color:var(--gris);margin-top:4px}
.cote{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.3vw,28px)}

/* ---------- 15. Les onglets du téléphone (Pour Claude, Créer, Apprendre) ---------- */
.hub{display:grid;gap:12px;margin-top:clamp(22px,2vw,40px)}
.hub a{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:center;padding:clamp(22px,1.8vw,38px);border-radius:var(--r-grand);background-color:var(--c);background-image:var(--grain);background-size:180px;color:var(--ct);transition:transform .5s var(--ressort)}
.hub a:hover{transform:translateY(-3px) rotate(-.4deg)}
.hub b{font:900 clamp(30px,2.4vw,58px)/1 var(--titre);letter-spacing:-.022em}
.hub small{grid-column:1;font-size:clamp(14.5px,.94vw,22px);opacity:.86}
.hub .fl{grid-row:1/span 2;grid-column:2;font-size:1.6rem}
.hub .point{position:absolute;right:62px;top:22px;background:var(--encre)}
.hub .mo{width:30%;right:10%;top:-50%}
[data-couleurs=trois] .hub a{--c:var(--beige)!important;--ct:var(--encre)!important}
[data-couleurs=trois] .hub a:nth-child(2n+1){--c:var(--cadre)!important;--ct:#fff!important}

/* ---------- Menu : la rubrique ouverte montre ses catégories (Skills de la v3 : « C'est parfait ») ---------- */
.nav .sous{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ressort)}
.nav .sous.ouvert{grid-template-rows:1fr}
.nav .sous>div{overflow:hidden;display:grid;gap:1px;padding-left:34px}
.nav .sous a{padding:5px 10px;font-size:.875rem;color:rgba(255,255,255,.8);border-radius:999px}
.nav .sous a:first-child{margin-top:4px}
.nav .sous a:last-child{margin-bottom:6px}
.nav .sous a[aria-current]{background:rgba(255,255,255,.2);color:#fff;font-weight:600;box-shadow:none}
.nav .sous a i{font-style:normal;margin-left:auto;font-size:.75rem;opacity:.7}

/* ---------- Petits compléments ---------- */
.seg.clair{background:var(--beige)}
.seg.clair button{color:var(--gris)}
.seg.clair button[aria-pressed=true]{background:var(--encre);color:#fff}
.vis .branche .lg,.g-vis .branche .lg{width:var(--lt);height:var(--lt);border-radius:calc(var(--lt) * .3)}
.couv button.etoile{cursor:pointer}
[data-couleurs=trois] .salle-t h2{color:var(--cadre)!important}
.toast{position:fixed;z-index:60;left:calc(50% + var(--menu) / 2);bottom:84px;translate:-50% 20px;opacity:0;pointer-events:none;padding:12px 20px;border-radius:999px;background:var(--encre);color:#fff;font-size:.9375rem;font-weight:500;box-shadow:0 14px 40px rgba(17,20,46,.3);transition:opacity .35s var(--doux),translate .5s var(--ressort);white-space:nowrap}
.toast.vu{opacity:1;translate:-50% 0}
.titre-p:focus,.couv h1:focus,h1:focus{outline:none}
@media (max-width:820px){.toast{left:50%;bottom:calc(150px + env(safe-area-inset-bottom));white-space:normal;max-width:calc(100vw - 32px);text-align:center}}

/* ---------- Écran moyen ---------- */
@media (max-width:1280px){
  .gal,.gal.cinq{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cote{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ---------- Tablette ---------- */
@media (max-width:1180px){
  .couv-g{grid-template-columns:1fr}
  .couv .bulle{justify-self:start;grid-template-columns:auto 1fr;justify-items:start;text-align:left;align-items:center;gap:22px}
  .couv .bulle .rond{width:120px}
  .couv .bulle .anneau-t{display:none}
  .couv .bulle b{margin-top:0}
  .cartes,.arr-g,.tutos,.films,.poubelle,.questions,.besoins,.savoir,.mes-f,.compte-l{grid-template-columns:repeat(2,minmax(0,1fr))}
  .arr-g[style*="--n:1"] .carte{grid-template-columns:1fr}
  .jours,.choix,.podium,.maj,.f-hero,.n-hero,.fo-g,.lect,.mots-g,.pj,.im-g,.v-g,.etat{grid-template-columns:minmax(0,1fr)}
  .maj.seul .maj-l{grid-template-columns:1fr}
  .choix-c{padding:8px}
  .cat{grid-column:span 6!important}
  .trio{grid-template-columns:1fr 1fr}
  .trio .aff.grande{grid-column:span 2;min-height:420px}
  .fil-j{grid-template-columns:1fr}
  .jour .date{position:static;padding:0}
  .achat{position:static}
  .mots-nav{position:static}
  .gal,.gal.cinq{grid-template-columns:repeat(2,minmax(0,1fr))}
  .res-l{grid-template-columns:1fr}
  .trois-t{grid-template-columns:1fr}
  .temps+.temps::before{left:50%;top:calc(-1 * clamp(14px,1.3vw,28px) / 2);content:"↓"}
}
/* ---------- Téléphone ---------- */
@media (max-width:820px){
  .couv{--in:8px;padding:30px 16px 26px;border-radius:20px}
  .couv h1{font-size:3.4rem}
  .couv .etoile{--t:76px;right:-84px;top:-18px}
  .couv-cats{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:-16px;margin-right:-16px;padding:0 16px 4px}
  .couv-cats::-webkit-scrollbar{display:none}
  .couv-cats a{flex:none}
  .titre-p{font-size:2.75rem}
  .sec{margin-top:64px}
  .cartes,.arr-g,.tutos,.poubelle,.questions,.besoins,.savoir,.mes-f,.compte-l,.mots-l{grid-template-columns:minmax(0,1fr)}
  .films{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -16px;padding:0 16px 6px}
  .films::-webkit-scrollbar{display:none}
  .film{scroll-snap-align:start}
  .lignes-c a{grid-template-columns:64px 1fr}
  .lignes-c .fl{display:none}
  .suivants a{grid-template-columns:44px 56px 1fr}
  .suivants .fl{display:none}
  .cat{grid-column:span 12!important;min-height:200px}
  .trio{grid-template-columns:1fr}
  .trio .aff.grande{grid-column:auto}
  .aff{min-height:380px}
  .nv a{grid-template-columns:auto 1fr}
  .nv .fl{display:none}
  .mur{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
  .encours{grid-template-columns:76px 1fr;padding:12px 16px 12px 12px}
  .encours>.btn{grid-column:1/-1}
  .gal,.gal.cinq{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 10px}
  .tickets{columns:1}
  .cote{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mf{grid-template-columns:72px 1fr}
  .cat-tete{grid-template-columns:1fr}
  .cat-tete .nb{font-size:5rem}
  .g-corps{grid-template-columns:1fr}
  .alerte-v{grid-template-columns:1fr}
  .offre-f{grid-template-columns:96px 1fr}
  .offres.deux{grid-template-columns:1fr}
  .prog li{grid-template-columns:44px 1fr}
  .prog .d{grid-column:2}
  .bulle-t{max-width:92%}
  .ecran .dur{display:none}
  .liste-t button{grid-template-columns:96px 1fr}
  .outils{flex-direction:column;align-items:flex-start}
  .pastilles{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%;padding-bottom:4px}
  .pastilles::-webkit-scrollbar{display:none}
  .pastilles a,.pastilles button{flex:none}
  .obj-couv h1{font-size:3.6rem}
  .seg{flex-wrap:wrap}
  .rail{grid-auto-columns:80%}
  .details dl{grid-template-columns:1fr;gap:2px}
  .details dd{margin:0 0 10px}
}

/* ============ Le Pro et le gratuit (15/10, après-midi) : v2/offre.js ============ */
.gratuit a{display:inline-block;margin-top:4px;color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.mq-l{padding:6px 12px;border-radius:999px;font-size:.8125rem;font-weight:650;color:var(--cadre);white-space:nowrap;transition:background .3s}
.mq-l:hover{background:rgba(37,89,236,.1)}
/* La page Pro du membre */
.periode{margin-bottom:clamp(18px,1.6vw,32px)}
.pro-offres{display:grid;gap:clamp(12px,1.1vw,22px)}
.pro-offres.n1{grid-template-columns:minmax(0,1fr)}
.pro-offres.n2{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}
.pro-offres.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.po{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;padding:clamp(24px,2vw,46px);border-radius:calc(var(--r-grand) + 4px);background-color:var(--c);background-image:var(--grain);background-size:180px;color:var(--ct);transition:transform .6s var(--ressort),box-shadow .6s}
.po:hover{transform:translateY(-4px);box-shadow:var(--ombre-haute)}
.po.fort{box-shadow:0 0 0 3px var(--encre),var(--ombre)}
.po-tag{align-self:flex-start;margin-bottom:14px;padding:6px 12px;border-radius:999px;background:var(--ct);color:var(--c);font:800 .8125rem/1 var(--titre);transform:rotate(-2deg)}
.po h3{font:900 clamp(34px,2.9vw,72px)/.95 var(--titre);letter-spacing:-.024em}
.po-d{margin-top:12px;font-size:clamp(15px,1vw,24px);line-height:1.4;max-width:38ch;opacity:.88}
.po .prix{color:var(--ct)}
.po .prix small{color:var(--ct);opacity:.78}
.po .prix{flex-wrap:wrap;row-gap:6px}
.barre{font-size:.42em;opacity:.6;text-decoration:line-through;text-decoration-thickness:.09em;margin-right:.25em}
.po ul{list-style:none;padding:0;display:grid;gap:10px;margin:clamp(18px,1.6vw,30px) 0 0}
.po li{display:flex;gap:10px;align-items:flex-start;font-size:clamp(14.5px,.94vw,22px);line-height:1.4}
.po li i{margin-top:.18em}
.po-b{margin-top:auto;padding-top:clamp(22px,1.8vw,36px)}
.po-b .btn{width:100%;height:54px;font-size:1.0625rem}
.pro-offres.n1 .po{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(24px,3vw,72px)}
.pro-offres.n1 .po>*{grid-column:1}
.pro-offres.n1 .po>ul,.pro-offres.n1 .po>.po-b{grid-column:2}
.pro-offres.n1 .po>ul{grid-row:1/span 3;align-self:center;margin:0}
.pro-offres.n1 .po>.po-b{grid-row:4;padding-top:0;align-self:end}
.sans-p{margin-top:16px;color:var(--gris);font-size:clamp(14.5px,.94vw,22px)}
.avant{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,3vw,72px);align-items:center;padding:clamp(24px,2.2vw,52px);border-radius:calc(var(--r-grand) + 8px);background:var(--beige)}
.avant h2{font:800 clamp(30px,2.5vw,58px)/1.02 var(--titre);letter-spacing:-.016em}
.avant p{margin-top:12px;font-size:clamp(16px,1.08vw,25px);color:#3c3f52;max-width:44ch}
.avant .btn{margin-top:clamp(18px,1.6vw,30px)}
.avant .aff-p{aspect-ratio:4/3;border-radius:var(--r-grand);--mfb:clamp(60px,5vw,120px);transform:perspective(1300px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--doux)}
.faq{display:grid;gap:10px}
.faq .details p{padding:0 24px 22px;font-size:clamp(15px,1vw,24px);line-height:1.45;color:#3c3f52;max-width:70ch}
.vers-travail{margin-top:clamp(28px,2.4vw,48px)}
/* Le bloc d'achat selon la formule */
.achat .opt{display:grid;gap:6px;margin-top:12px;padding:16px 18px;border-radius:20px;background:var(--beige)}
.achat .opt b{font:800 clamp(17px,1.15vw,27px)/1.1 var(--titre)}
.achat .opt .p{font:400 clamp(34px,2.4vw,58px)/1 var(--ultra)}
.achat .opt .p small{font:500 .4em/1 var(--texte)}
.achat .opt>small{font-size:.875rem;line-height:1.4;color:var(--gris)}
.achat .opt .btn{margin-top:8px;height:48px}
.achat .opt.fort{background-color:var(--violet);background-image:var(--grain);background-size:180px;color:#fff}
.achat .opt.fort>small{color:rgba(255,255,255,.82)}
.achat .voir-p{display:flex;justify-content:center;margin-top:14px;font-size:.9375rem}
/* Paliers : l'installation fermée sur une fiche */
.verrou{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(16px,1.8vw,40px);align-items:center;padding:clamp(22px,2vw,44px);border-radius:var(--r-grand);background-color:var(--jaune);background-image:var(--grain);background-size:180px;color:var(--encre)}
.verrou>i{font-size:clamp(34px,2.6vw,60px)}
.verrou h2{font:800 clamp(22px,1.6vw,38px)/1.08 var(--titre);letter-spacing:-.012em;max-width:26ch}
.verrou p{margin-top:8px;font-size:clamp(15px,1vw,24px);line-height:1.4;max-width:56ch}
.verrou-b{display:grid;justify-items:center;gap:12px}
/* La page de travail */
.travail{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;background:var(--encre);color:var(--jaune);font:800 .875rem/1 var(--titre)}
.p-haut .parole{max-width:880px;background:var(--beige)}
.qv{display:grid;gap:6px}
.qv-l{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:6px}
.qv-t{display:flex;align-items:center;padding:14px 18px;border-radius:16px;background:var(--beige);font-weight:600;font-size:clamp(14.5px,.94vw,22px);line-height:1.3}
.qv-c{display:flex;align-items:center;padding:12px 14px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px var(--filet);transition:background .4s,box-shadow .4s}
.qv-f{display:grid;gap:3px;justify-items:start;text-align:left;padding:14px 16px;border-radius:16px;background:var(--beige);font:900 clamp(19px,1.35vw,32px)/1 var(--titre);letter-spacing:-.012em;transition:background .35s,color .35s,transform .45s var(--ressort)}
.qv-f small{font:500 .8125rem/1 var(--texte);color:var(--gris)}
.qv-f:hover{transform:translateY(-2px)}
.qv-f[aria-pressed=true]{background:var(--encre);color:#fff}
.qv-f[aria-pressed=true] small{color:var(--jaune)}
.qv[data-sel=unite] .qv-c[data-col=unite],.qv[data-sel=paliers] .qv-c[data-col=paliers],.qv[data-sel=deux] .qv-c[data-col=deux]{box-shadow:inset 0 0 0 2px var(--encre)}
.qv-g,.qv-p{display:inline-flex;align-items:flex-start;gap:7px;font-size:clamp(14px,.9vw,21px);line-height:1.3}
.qv-g{color:var(--vert);font-weight:600}
.qv-p{color:var(--encre);font-weight:650}
.qv-p i{color:var(--violet);margin-top:.12em}
.qv-g i{margin-top:.12em}
.voir-m{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;margin-top:clamp(18px,1.6vw,30px);color:var(--gris);font-size:clamp(14.5px,.94vw,22px)}
.pc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.1vw,22px)}
.pc-c{position:relative;padding:clamp(22px,1.8vw,40px);border-radius:var(--r-grand);background-color:var(--c);background-image:var(--grain);background-size:180px;color:var(--ct)}
.pc-c.sel{box-shadow:0 0 0 3px var(--encre)}
.pc-c.ecarte{opacity:.55;filter:saturate(.4)}
.tampon-d{position:absolute;top:18px;right:18px;padding:6px 11px;border-radius:999px;background:var(--encre);color:#fff;font:800 .78rem/1 var(--titre);transform:rotate(3deg)}
.tampon-d.ok{background:var(--jaune);color:var(--encre)}
.qv-c[data-col=paliers],.qv-f[data-col=paliers]{opacity:.5}
.trancher li.fait{background:#fff;box-shadow:inset 0 0 0 1px var(--filet)}
.trancher li.fait .no{background:var(--vert)}
.trancher li.fait p{color:var(--gris)}
.pc-c.sombre.sel{box-shadow:0 0 0 3px var(--jaune)}
.pc-c h3{font:900 clamp(28px,2.2vw,52px)/1 var(--titre);letter-spacing:-.02em}
.pc-c h4{margin-top:18px;font:800 .9rem/1 var(--titre);opacity:.7}
.pc-c ul{list-style:none;padding:0;display:grid;gap:8px;margin-top:8px}
.pc-c li{font-size:clamp(14.5px,.94vw,22px);line-height:1.4;padding-left:16px;position:relative}
.pc-c li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.6}
.avis{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,1.6vw,36px);align-items:start;margin-top:clamp(14px,1.2vw,24px);padding:clamp(22px,1.8vw,40px);border-radius:var(--r-grand);background:var(--encre);color:#fff}
.avis-t{padding:7px 13px;border-radius:999px;background:var(--jaune);color:var(--encre);font:800 .8125rem/1 var(--titre);white-space:nowrap;transform:rotate(-2deg)}
.avis p{font-size:clamp(17px,1.2vw,29px);line-height:1.42;max-width:64ch}
.avis b{font:900 1.15em/1 var(--titre);color:var(--jaune)}
.calc{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(16px,2vw,48px);align-items:start}
.rgs{display:grid;gap:8px;padding:clamp(18px,1.6vw,34px);border-radius:var(--r-grand);background:var(--beige)}
.rg{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:4px 14px;padding:10px 6px}
.rg label{font-weight:600;font-size:clamp(14.5px,.94vw,22px)}
.rg output{font:400 clamp(26px,1.9vw,46px)/1 var(--ultra);color:var(--cadre)}
.rg input{grid-column:1/-1;width:100%;accent-color:var(--cadre);height:28px;cursor:pointer}
.res{display:grid;gap:clamp(10px,1vw,20px)}
.res-c{padding:clamp(20px,1.7vw,38px);border-radius:var(--r-grand);background-color:var(--c);background-image:var(--grain);background-size:180px;color:var(--ct)}
.res-c h3{font:900 clamp(22px,1.6vw,38px)/1 var(--titre);letter-spacing:-.014em;margin-bottom:6px}
.res-c p{margin-top:10px;font-size:clamp(14.5px,.94vw,22px);line-height:1.35}
.res-c p{display:flex;justify-content:space-between;align-items:baseline;gap:6px 18px;flex-wrap:wrap;padding-top:10px;border-top:1px solid color-mix(in srgb,var(--ct) 14%,transparent)}
.res-c h3+p{border-top:0;padding-top:0}
.res-c p>span{max-width:30ch}
.res-c b{font:400 clamp(20px,1.45vw,36px)/1.1 var(--ultra);white-space:nowrap}
.res-p{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:10px 16px;align-items:baseline;margin-top:12px;font-size:clamp(13.5px,.86vw,20px);line-height:1.3}
.res-p>span{opacity:.75}
.res-p .res-n{font:800 clamp(15px,1vw,24px)/1.1 var(--titre)}
.res-p b.num{font-size:clamp(16px,1.1vw,27px);white-space:normal}
.note-c{margin-top:clamp(16px,1.4vw,28px);font-size:clamp(13.5px,.86vw,20px);line-height:1.5;color:var(--gris);max-width:110ch}
.routines .ticket{transform:none}
.tickets.routines{columns:2 clamp(280px,20vw,480px)}
.r-ou{display:grid;gap:6px;margin-top:16px;font-size:.875rem;color:var(--gris)}
.r-ou span{display:flex;justify-content:space-between;gap:10px;padding:7px 12px;border-radius:12px;background:var(--beige)}
.r-ou b{color:var(--encre);font-weight:650}
.r-ou .ici{background:var(--encre);color:#fff}
.r-ou .ici b{color:var(--jaune)}
.cinquante{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.1vw,22px)}
.cq{padding:clamp(18px,1.5vw,32px);border-radius:var(--r-grand);background:var(--beige)}
.cq h3{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background-color:var(--c);background-image:var(--grain);background-size:180px;color:var(--ct);font:900 clamp(18px,1.25vw,30px)/1 var(--titre);letter-spacing:-.012em}
.cq h3 span{font:400 1.1em/1 var(--ultra)}
.cq ol{list-style:none;padding:0;display:grid;gap:2px;margin-top:10px;counter-reset:cq}
.cq li{counter-increment:cq;display:grid;grid-template-columns:1.6em minmax(0,1fr);gap:6px;padding:7px 4px;font-size:clamp(14px,.9vw,21px);line-height:1.35}
.cq li::before{content:counter(cq);font:800 .85em/1.6 var(--titre);color:var(--gris)}
.cq li.ici a{display:block;font-weight:650}
.cq li.ici a:hover{color:var(--cadre)}
.cq li.ici i{color:var(--cadre);margin-right:5px}
.cq li small{margin-left:6px;padding:2px 7px;border-radius:999px;background:#fff;font-size:.75rem;font-weight:600;color:var(--vert)}
.trancher{list-style:none;padding:0;display:grid;gap:8px}
.trancher li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;padding:14px 18px;border-radius:18px;background:var(--beige)}
.trancher .no{display:grid;place-items:center;width:2.2em;height:2.2em;border-radius:50%;background:var(--encre);color:#fff;font:800 1rem/1 var(--titre)}
.trancher p{font-size:clamp(15px,1vw,24px);line-height:1.4}
.trancher b{font-family:var(--titre);font-weight:800}
.remarques{display:grid;gap:10px;margin-top:clamp(18px,1.6vw,30px)}
.remarques p{display:flex;gap:12px;align-items:flex-start;font-size:clamp(14.5px,.94vw,22px);line-height:1.45;color:#3c3f52;max-width:100ch}
.remarques i{color:var(--cadre);font-size:1.2em;margin-top:.1em}
/* « Bleu, blanc, beige » : les cartes colorées passent au beige, la carte forte au bleu */
[data-couleurs=trois] .po,[data-couleurs=trois] .pc-c,[data-couleurs=trois] .res-c,[data-couleurs=trois] .cq h3{--c:var(--beige)!important;--ct:var(--encre)!important}
[data-couleurs=trois] .po.fort,[data-couleurs=trois] .achat .opt.fort{--c:var(--cadre)!important;--ct:#fff!important;background-color:var(--cadre)}
[data-couleurs=trois] .po:not(.fort) .mo{background:rgba(17,20,46,.05)}
/* Moi : l'abonnement et le parrainage (15/10) */
.abo-g{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);gap:clamp(12px,1.1vw,22px)}
.abo-b{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:auto;padding-top:clamp(22px,1.8vw,36px)}
.abo-b small{flex-basis:100%;font-size:clamp(13px,.82vw,19px);opacity:.78}
.parrain h3{font-size:clamp(30px,2.3vw,56px)}
.parrain-b{margin-top:auto;padding-top:clamp(22px,1.8vw,36px)}
.lien-p{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 18px;border-radius:999px;background:#fff;color:var(--encre);box-shadow:0 8px 22px rgba(17,20,46,.1)}
.lien-p span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(14px,.9vw,21px);font-weight:600}
.lien-p .copier{height:clamp(36px,2.4vw,52px);padding:0 clamp(14px,1vw,22px)}
.parrain-n{margin-top:12px;font-size:clamp(13.5px,.86vw,20px);opacity:.78}
@media (max-width:560px){.lien-p{flex-wrap:wrap;border-radius:22px;padding:14px 14px 10px}.lien-p span{flex-basis:100%;white-space:normal;overflow-wrap:anywhere}.lien-p .copier{width:100%;justify-content:center}}
[data-couleurs=trois] .po.abo-pro{--c:var(--cadre)!important;--ct:#fff!important;background-color:var(--cadre)}
@media (max-width:1280px){
  .cinquante{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pro-offres.n3{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1600px){.mq>span{display:none}.mq{gap:7px}.mq-l{padding:6px 9px}}
@media (max-width:1180px){.mq .offre-m,.mq-l{display:none}}
@media (max-width:820px){
  .pro-offres.n2,.pc,.calc,.avant,.abo-g{grid-template-columns:minmax(0,1fr)}
  .pro-offres.n1 .po{display:flex}
  .pro-offres.n1 .po>ul{margin:clamp(18px,1.6vw,30px) 0 0}
  .pro-offres.n1 .po>.po-b{padding-top:22px}
  .verrou{grid-template-columns:minmax(0,1fr)}
  .verrou-b{justify-items:start}
  .qv-l.qv-h{grid-template-columns:repeat(3,minmax(0,1fr))}
  .qv-h>div{display:none}
  .res-p{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 14px}
  .res-p>span:first-child{display:none}
  .res-p .res-n{grid-column:1/-1;margin-top:10px}
  .qv-f{font-size:1rem;padding:12px}
  .qv-l{grid-template-columns:minmax(0,1fr);gap:4px;margin-bottom:8px}
  .qv-c::before{content:attr(data-nom);margin-right:auto;padding-right:12px;font-size:.8125rem;color:var(--gris)}
  .qv-c{justify-content:space-between}
  .avis{grid-template-columns:minmax(0,1fr)}
  .avis-t{justify-self:start}
  .cinquante{grid-template-columns:minmax(0,1fr)}
}

/* ---------- 16. Le compte (15/10, vers 14 h 40) : sans compte (inscription, connexion, code, bienvenue) et les pages de Moi ---------- */
/* Sans compte : pas de menu, la feuille prend toute la largeur du cadre */
[data-page=auth]{--menu:var(--bord)}
[data-page=auth] .side,[data-page=auth] .mobile-haut,[data-page=auth] .onglets{display:none}
[data-page=auth] .feuille{padding-bottom:0}
[data-page=auth] body{min-height:0}
/* Maquette : la barre de réglages passe en haut, pour ne pas cacher le texte sur la photo */
@media (min-width:821px){[data-page=auth] .mq{bottom:auto;top:22px}}
.auth{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:calc(100dvh - 2 * var(--bord));padding:12px}
.auth-v{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:40px;min-height:540px;padding:clamp(24px,2.4vw,56px);border-radius:calc(var(--r-feuille) - 8px);color:#fff}
.auth-v img{position:absolute;inset:-3%;z-index:-2;width:106%;height:106%;object-fit:cover;object-position:50% 40%;transform:translate(calc(var(--px,0px) * -.4),calc(var(--py,0px) * -.4)) scale(1.02);transition:transform 1.4s var(--doux)}
.auth-v:hover img{transform:translate(calc(var(--px,0px) * -.4),calc(var(--py,0px) * -.4)) scale(1.06)}
.auth-v .voile{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(9,20,40,.5) 0%,rgba(9,20,40,0) 26%,rgba(9,20,40,.08) 52%,rgba(9,20,40,.86) 100%)}
.auth-v .marque{color:inherit}
.auth-v-t .grand{font:900 clamp(40px,3.7vw,96px)/.95 var(--titre);letter-spacing:-.028em;max-width:11ch;text-wrap:balance}
.auth-v-t p:not(.grand){margin-top:16px;font-size:clamp(16px,1.1vw,26px);line-height:1.4;max-width:34ch;opacity:.92}
.auth-v.couleur{background-color:var(--jaune);background-image:var(--grain);background-size:180px;color:var(--encre)}
.auth-v.couleur .marque .sceau{background:var(--encre);color:var(--jaune)}
.auth-v.couleur .mo{background:rgba(255,255,255,.4)}
[data-couleurs=trois] .auth-v.couleur{background-color:var(--cadre);color:#fff}
[data-couleurs=trois] .auth-v.couleur .marque .sceau{background:var(--jaune);color:var(--cadre)}
.auth-f{display:grid;place-items:center;padding:clamp(36px,4vw,100px) clamp(20px,3.4vw,80px)}
.auth-b{width:100%;max-width:clamp(380px,27vw,540px)}
.auth-bienvenue .auth-b{max-width:clamp(460px,34vw,700px)}
.auth-bienvenue .q-b{margin-top:clamp(20px,1.6vw,34px)}
.auth-b h1{font:900 clamp(38px,3vw,74px)/1 var(--titre);letter-spacing:-.025em}
.auth-s{margin-top:12px;font-size:clamp(16px,1.05vw,24px);line-height:1.45;color:var(--gris)}
.auth-s b{color:var(--encre);font-weight:650}
.etape{margin-bottom:12px;font-size:.875rem;font-weight:650;color:var(--cadre)}
.btn.large{width:100%;height:56px;font-size:1.0625rem}
.auth-b>.btn.contour{margin-top:clamp(26px,2.2vw,44px)}
.btn.contour .ph-google-logo{font-size:1.25rem}
.ou{display:flex;align-items:center;gap:14px;margin:22px 0;font-size:.875rem;color:var(--gris)}
.ou::before,.ou::after{content:"";flex:1;height:1px;background:var(--filet)}
.chp{display:grid;gap:8px;margin-bottom:18px}
.chp label{font-size:.9375rem;font-weight:600}
.chp input{width:100%;height:56px;padding:0 18px;border:1.5px solid var(--gris-clair);border-radius:var(--r-petit);background:#fff;font:inherit;font-size:1.0625rem;color:var(--encre);transition:border-color .3s var(--doux),box-shadow .4s var(--doux),padding-left .5s var(--ressort)}
.chp input:hover{border-color:var(--gris)}
.chp-i{position:relative}
.chp .av-i{position:absolute;left:12px;top:50%;width:34px;height:34px;margin-top:-17px;display:grid;place-items:center;border-radius:50%;background:var(--jaune);font:900 15px/1 var(--titre);color:var(--encre);transform:scale(0) rotate(-40deg);transition:transform .55s var(--rebond);pointer-events:none}
.chp.a-nom .av-i{transform:none}
.chp.a-nom input{padding-left:56px}
.chp .ok-i{position:absolute;right:16px;top:50%;margin-top:-.62em;font-size:1.3rem;color:var(--vert);opacity:0;transform:scale(.4) rotate(-30deg);transition:opacity .3s,transform .55s var(--rebond);pointer-events:none}
.chp.ok .ok-i{opacity:1;transform:none}
.chp.ok input{padding-right:48px}
.sugg{display:flex;flex-wrap:wrap;gap:6px}
.sugg:empty{display:none}
.sugg button{height:34px;padding:0 12px;border-radius:999px;background:var(--beige);font-size:.875rem;font-weight:600;color:var(--encre);transition:background .3s var(--doux),transform .45s var(--ressort);animation:sug .4s var(--doux) backwards;animation-delay:calc(var(--i,0) * 45ms)}
.sugg button:hover{background:#e6e0d2;transform:translateY(-2px)}
.sugg .corr{font-size:.875rem;color:var(--encre);animation:sug .4s var(--doux)}
.sugg .corr button{margin:0 2px;background:var(--jaune)}
.sugg .corr b{font-weight:800}
@keyframes sug{from{opacity:0;transform:translateY(6px)}}
.auth-b h1.change{animation:salut .55s var(--ressort)}
@keyframes salut{from{opacity:.15;transform:translateY(10px)}}
.chp input:focus{outline:none;border-color:var(--cadre);box-shadow:0 0 0 4px rgba(37,89,236,.16)}
.chp input[aria-invalid=true]{border-color:var(--rouge);box-shadow:0 0 0 4px rgba(211,58,42,.12)}
.aide{font-size:.875rem;line-height:1.45;color:var(--gris)}
.erreur{display:flex;gap:6px;font-size:.875rem;font-weight:600;color:var(--rouge);animation:monte .45s var(--doux)}
.erreur:empty{display:none}
form.secoue{animation:secoue .5s var(--doux)}
@keyframes secoue{20%{transform:translateX(-9px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
.auth-autre{margin-top:24px;font-size:.9375rem;color:var(--gris)}
.auth-legal{margin-top:16px;font-size:.8125rem;line-height:1.5;color:var(--gris)}
.auth-autre a,.auth-legal a,.moi-note a{font-weight:600;color:var(--cadre);background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .4s var(--doux)}
.auth-autre a:hover,.auth-legal a:hover,.moi-note a:hover{background-size:100% 1.5px}
.lien-b{font-size:.9375rem;font-weight:600;color:var(--cadre);transition:color .3s var(--doux)}
.lien-b:not(:disabled):hover{color:var(--encre)}
.lien-b:disabled{color:var(--gris);cursor:default}
/* Le code à 6 chiffres : un seul champ, six cases dessinées */
.code{position:relative;margin-top:clamp(26px,2.2vw,44px)}
.code input{position:absolute;inset:0;z-index:1;width:100%;height:100%;opacity:0;font-size:16px;cursor:text}
.cases{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(8px,.7vw,14px)}
.case{display:grid;place-items:center;aspect-ratio:4/5;border:1.5px solid var(--gris-clair);border-radius:var(--r-petit);background:#fff;font:800 clamp(28px,2.2vw,50px)/1 var(--titre);transition:border-color .3s var(--doux),box-shadow .4s var(--doux),background .4s var(--doux),color .4s,transform .5s var(--rebond)}
.code:hover .case:not(.pleine){border-color:var(--gris)}
.case.pleine{border-color:var(--encre);animation:case .4s var(--rebond)}
.case.ici{border-color:var(--cadre);box-shadow:0 0 0 4px rgba(37,89,236,.16)}
.case.ici:not(.pleine)::after{content:"";width:2px;height:42%;background:var(--cadre);animation:clignote 1s steps(1) infinite}
.code.bon .case{border-color:var(--vert);background:#e7f5ed;color:var(--vert);transform:translateY(-4px)}
.code.bon .case:nth-child(2){transition-delay:40ms}.code.bon .case:nth-child(3){transition-delay:80ms}.code.bon .case:nth-child(4){transition-delay:120ms}.code.bon .case:nth-child(5){transition-delay:160ms}.code.bon .case:nth-child(6){transition-delay:200ms}
@keyframes case{from{transform:scale(.84)}}
@keyframes clignote{50%{opacity:0}}
.code-l{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:20px}
/* Les questions de la première visite (et de Mon profil) */
.q-b{min-width:0;margin:clamp(24px,2vw,40px) 0 0;padding:0;border:0}
.q-b legend{padding:0;font:800 clamp(19px,1.3vw,31px)/1.15 var(--titre);letter-spacing:-.01em}
.q-b .aide{margin-top:6px}
.pastilles{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.pastilles+.pastilles{margin-top:8px}
.pastilles button{display:inline-flex;align-items:center;gap:0;height:46px;padding:0 18px;border-radius:999px;background:var(--beige);font-size:.9375rem;font-weight:600;color:var(--encre);transition:background .4s var(--doux),color .4s var(--doux),gap .4s var(--ressort),transform .45s var(--ressort),box-shadow .45s var(--doux)}
.pastilles button i{width:0;opacity:0;overflow:hidden;transition:width .4s var(--ressort),opacity .3s}
.pastilles button:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(17,20,46,.1)}
.pastilles button[aria-pressed=true]{gap:8px;background:var(--c,var(--encre));color:var(--ct,#fff)}
.pastilles button[aria-pressed=true] i{width:1em;opacity:1}
.pastilles button.tape{animation:tape .45s var(--rebond)}
@keyframes tape{35%{transform:scale(.93)}}
[data-couleurs=trois] .pastilles button[aria-pressed=true]{background:var(--cadre);color:#fff}
.auth-btns{display:flex;align-items:center;gap:24px;margin-top:clamp(30px,2.6vw,52px)}
.auth-btns .btn{height:56px;padding:0 30px;font-size:1.0625rem}

/* Moi : les onglets du compte, les blocs, les interrupteurs */
.moi-nav{display:flex;gap:4px;width:max-content;max-width:100%;margin-top:clamp(24px,2vw,42px);padding:5px;border-radius:999px;background:var(--beige);overflow-x:auto;scrollbar-width:none}
.moi-nav::-webkit-scrollbar{display:none}
.moi-nav a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;white-space:nowrap;font-size:clamp(14px,.9vw,21px);font-weight:600;color:var(--gris);transition:background .4s var(--doux),color .3s var(--doux),box-shadow .4s var(--doux)}
.moi-nav a:hover{background:rgba(255,255,255,.65);color:var(--encre)}
.moi-nav a[aria-current]{background:#fff;color:var(--encre);box-shadow:0 1px 4px rgba(17,20,46,.14)}
.moi-nav i{font-size:1.15em;transition:transform .5s var(--rebond)}
.moi-nav a:hover i{transform:rotate(-8deg) scale(1.1)}
.moi-s{margin-bottom:clamp(14px,1.2vw,26px);font:800 clamp(22px,1.6vw,40px)/1.1 var(--titre);letter-spacing:-.014em}
.moi-g{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(14px,1.3vw,28px);align-items:start}
.bloc-c{padding:clamp(22px,1.9vw,44px);border-radius:var(--r-grand);background:#fff;box-shadow:0 0 0 1px var(--filet),var(--ombre)}
.bloc-c.danger{grid-column:1/-1}
.inter{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;padding:16px 0}
.inter+.inter{border-top:1px solid var(--filet)}
.inter b{display:flex;align-items:center;gap:10px;font-size:clamp(15.5px,1vw,24px);font-weight:650}
.inter b i{font-size:1.25em;color:var(--cadre)}
.inter p{max-width:52ch;margin-top:4px;font-size:clamp(13.5px,.86vw,20px);color:var(--gris)}
.inter.part{animation:sort .42s var(--doux) forwards}
@keyframes sort{to{opacity:0;transform:translateX(26px)}}
.etat-t{padding:6px 12px;border-radius:999px;background:var(--beige);font-size:.8125rem;font-weight:600;color:var(--gris)}
.etat-t.vert{background:#e7f5ed;color:var(--vert)}
.btn.petit{height:40px;padding:0 18px;font-size:.9375rem}
.btn.rouge{background:var(--rouge);color:#fff}
.btn.rouge:hover{box-shadow:0 10px 26px rgba(211,58,42,.3)}
.moi-b{margin-top:18px}
.moi-note{margin-top:18px;font-size:.9375rem;color:var(--gris)}
.switch{flex:none;position:relative;width:52px;height:30px;border-radius:999px;background:var(--gris-clair);transition:background .4s var(--doux),box-shadow .3s}
.switch span{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:999px;background:#fff;box-shadow:0 1px 3px rgba(17,20,46,.28);transition:transform .5s var(--rebond),width .3s var(--doux)}
.switch:hover:not(:disabled){box-shadow:0 0 0 5px rgba(17,20,46,.07)}
.switch:active:not(:disabled) span{width:30px}
.switch[aria-checked=true]{background:var(--vert)}
.switch[aria-checked=true] span{transform:translateX(22px)}
.switch[aria-checked=true]:active:not(:disabled) span{transform:translateX(16px)}
.switch:disabled{opacity:.5;cursor:default}
.adr{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:14px 14px 14px 18px;border-radius:var(--r-carte);background:var(--beige)}
.adr i{font-size:1.4rem;color:var(--cadre)}
.adr b{flex:1;min-width:0;font-weight:650;overflow-wrap:anywhere}
.change{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ressort)}
.change>div{overflow:hidden;visibility:hidden;transition:visibility 0s .55s}
.change.ouvert{grid-template-rows:1fr}
.change.ouvert>div{visibility:visible;transition:visibility 0s}
.change form{display:grid;padding-top:20px}
.change .btn{justify-self:start}
.vous{display:grid;gap:20px}
.vous .av-g{width:84px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:var(--jaune);font:900 30px/1 var(--titre);transition:transform .6s var(--rebond)}
.vous .av-g:hover{transform:rotate(-10deg) scale(1.05)}
form.deux{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 12px}
.q-moi .q-b:first-child{margin-top:0}
/* Achats et reçus */
.ach-tete{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px;padding:clamp(24px,2.2vw,48px);border-radius:var(--r-grand);background-color:var(--beige);background-image:var(--grain);background-size:180px}
.ach-tot b{display:block;font:400 clamp(66px,5.6vw,136px)/.86 var(--ultra)}
.ach-tot p{max-width:44ch;margin-top:12px;font-size:clamp(15px,1vw,24px);color:#4a4458}
.carte-p{display:flex;align-items:center;gap:14px;padding:14px 14px 14px 18px;border-radius:var(--r-carte);background:#fff;box-shadow:var(--ombre)}
.carte-p i{font-size:1.8rem;color:var(--cadre)}
.carte-p small{display:block;margin-top:2px;font-size:.8125rem;color:var(--gris)}
.ach-tete+.moi-s{margin-top:clamp(44px,3.6vw,84px)}
.recus{display:grid;gap:10px;padding:0;list-style:none}
.recus button{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;align-items:center;gap:clamp(14px,1.4vw,34px);width:100%;padding:12px clamp(18px,1.4vw,30px) 12px 12px;border-radius:var(--r-grand);background:#fff;box-shadow:0 0 0 1px var(--filet);text-align:left;transition:transform .5s var(--ressort),box-shadow .5s var(--doux)}
.recus button:hover{transform:translateY(-3px);box-shadow:0 0 0 1px var(--filet),var(--ombre-haute)}
.recus button:hover .fl{transform:translateX(4px)}
.vign{display:grid;place-items:center;width:clamp(58px,4.2vw,96px);aspect-ratio:1;padding:6px;overflow:hidden;border-radius:14px;background-color:var(--c);background-image:var(--grain);background-size:180px;color:var(--ct);font:400 clamp(10px,.7vw,15px)/.9 var(--ultra);text-align:center;transition:transform .6s var(--rebond)}
.recus button:hover .vign{transform:rotate(-6deg)}
.vign.pro-v{background-color:var(--encre)}
.r-t b{display:block;font-size:clamp(15.5px,1vw,24px);font-weight:650}
.r-t small{display:block;margin-top:3px;font-size:.8125rem;color:var(--gris)}
.r-d{font-size:.9375rem;color:var(--gris)}
.r-m{font:800 clamp(18px,1.2vw,29px)/1 var(--titre)}
.r-v{display:inline-flex;align-items:center;gap:6px;font-size:.9375rem;font-weight:600;color:var(--cadre)}
/* La fenêtre : le reçu, la confirmation */
.dlg{width:100%;max-width:min(520px,calc(100vw - 32px));margin:auto;padding:0;border:0;background:transparent;overflow:visible}
.dlg::backdrop{background:rgba(17,20,46,.5)}
.dlg[open]{animation:dlg .55s var(--ressort)}
.dlg[open]::backdrop{animation:fondu .4s var(--doux)}
@keyframes dlg{from{opacity:0;transform:translateY(26px) scale(.97)}}
@keyframes fondu{from{opacity:0}}
.recu-p{padding:clamp(26px,2.2vw,46px);border-radius:var(--r-grand);background:#fff;color:var(--encre);box-shadow:var(--ombre-haute)}
.recu-h{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.875rem;color:var(--gris)}
.recu-h .marque{font-size:1.0625rem;color:var(--encre)}
.recu-pay{display:flex;align-items:center;gap:8px;margin-top:30px;font-weight:600;color:var(--vert)}
.recu-m{display:block;margin-top:8px;font:400 clamp(58px,4.4vw,100px)/.9 var(--ultra)}
.recu-l{display:grid;gap:14px;margin:26px 0 0}
.recu-l div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px}
.recu-l dt{font-size:.875rem;color:var(--gris)}
.recu-l dd{margin:0;font-weight:550}
.recu-l small{font-weight:400;color:var(--gris)}
.recu-b{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.recu-n{margin-top:16px;font-size:.75rem;color:var(--gris)}
.conf>i{font-size:2.6rem;color:var(--rouge)}
.conf h2{margin-top:10px;font:800 clamp(24px,1.8vw,40px)/1.1 var(--titre)}
.conf p{margin-top:10px;color:var(--gris)}

@media (max-width:1100px){
  .moi-g{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:820px){
  .auth{grid-template-columns:minmax(0,1fr);min-height:0;padding:8px}
  .auth-v{min-height:0;height:clamp(210px,34vh,300px);gap:16px;padding:22px}
  .auth-v-t .grand{font-size:clamp(30px,8.4vw,40px)}
  .auth-v-t p:not(.grand){display:none}
  .auth-f{padding:30px 14px calc(140px + env(safe-area-inset-bottom))}
  .auth-btns .btn{flex:1}
  .ach-tete{grid-template-columns:minmax(0,1fr)}
  .recus button{grid-template-columns:auto minmax(0,1fr) auto;gap:14px}
  .r-d,.r-v{display:none}
  form.deux{grid-template-columns:minmax(0,1fr)}
  .recu-l div{grid-template-columns:minmax(0,1fr);gap:2px}
  .inter:has(.switch){flex-wrap:nowrap}
  .inter .trier{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .adr{display:grid;grid-template-columns:auto minmax(0,1fr)}
  .adr .btn{grid-column:1/-1;justify-self:start}
}

/* Survols (mesure du 15/10 : quatre règles changeaient une couleur d'un coup) */
.fl{transition:transform .45s var(--ressort),color .3s var(--doux)}
.cq li a{transition:color .3s var(--doux),background .3s var(--doux)}

/* ---------- 17. L'agent des Pro : « Posez votre question » (15/10, vers 16 h) : v2/agent.js ---------- */
.case-q{--c:var(--violet);--ct:#fff;position:relative;isolation:isolate;overflow:hidden;border-radius:calc(var(--r-grand) + 6px);background-color:var(--c);background-image:var(--grain);background-size:180px;color:var(--ct);padding:clamp(26px,2.6vw,62px)}
[data-couleurs=trois] .case-q{--c:var(--cadre)}
.case-q .mo{background:rgba(255,255,255,.12)}
.case-q .mo.b{background:rgba(0,0,0,.16)}
.cq-g{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,3vw,76px);align-items:end}
.cq-txt h2{font:900 clamp(34px,3vw,76px)/.96 var(--titre);letter-spacing:-.026em;max-width:13ch}
.cq-txt p{font-size:clamp(16px,1.1vw,26px);line-height:1.42;opacity:.88;margin-top:clamp(10px,.9vw,18px);max-width:40ch}
.cq-txt .pro{margin-bottom:14px;background:var(--jaune);color:var(--encre)}
.cq-txt .lien{color:var(--jaune);margin-top:clamp(16px,1.3vw,26px)}
.cq-pied{margin-top:clamp(18px,1.6vw,30px)}
.cq-pied .lien{color:#fff}
/* Le champ : une pilule blanche, le bouton d'envoi rond */
.champ-q{display:flex;align-items:center;gap:8px;padding:7px 7px 7px clamp(18px,1.4vw,30px);border-radius:999px;background:#fff;color:var(--encre);box-shadow:0 14px 40px rgba(17,20,46,.22);transition:box-shadow .3s var(--doux)}
.champ-q:focus-within{box-shadow:0 0 0 3px var(--jaune),0 14px 40px rgba(17,20,46,.22)}
.champ-q input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:clamp(17px,1.2vw,28px);letter-spacing:var(--ls);height:clamp(46px,3.1vw,64px);color:var(--encre)}
.champ-q input::placeholder{color:#686c80}
.champ-q button{width:clamp(46px,3.1vw,64px);height:clamp(46px,3.1vw,64px);border-radius:50%;background:var(--encre);color:#fff;display:grid;place-items:center;font-size:clamp(1.15rem,1.2vw,1.6rem);flex:none;transition:transform .45s var(--rebond),background .3s var(--doux)}
.champ-q button:hover{transform:scale(1.07) rotate(-8deg)}
.champ-q button:active{transform:scale(.94)}
.sugg-q{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.sugg-q button{min-height:clamp(36px,2.4vw,50px);padding:7px clamp(13px,.95vw,21px);line-height:1.2;text-align:left;border-radius:999px;background:rgba(255,255,255,.16);color:inherit;font-size:clamp(14px,.9vw,21px);font-weight:550;transition:background .3s var(--doux),transform .45s var(--ressort)}
.sugg-q button:hover{background:rgba(255,255,255,.3);transform:translateY(-2px)}
/* L'échange : la question en encre, la réponse en blanc, les moments dessous */
.fil-q{display:grid;gap:clamp(18px,1.6vw,32px)}
.case-q .fil-q:not(:empty){margin-top:clamp(22px,2vw,40px)}
.ech{display:grid;gap:12px}
.ech .bulle-t{max-width:min(78%,980px)}
.ech .bulle-t.moi{animation:q-in .5s var(--ressort) both}
.case-q .bulle-t.moi{background:var(--encre);box-shadow:0 10px 30px rgba(17,20,46,.25)}
.ag-r{background:#fff!important;color:var(--encre);box-shadow:0 1px 2px rgba(17,20,46,.05),0 14px 40px rgba(17,20,46,.12);animation:q-in .55s var(--ressort) .12s both}
.q-page .ag-r,.ex-q.grand .ag-r{box-shadow:0 0 0 1px var(--filet),0 14px 40px rgba(17,20,46,.08)}
.ag-r small{color:var(--violet)!important}
[data-couleurs=trois] .ag-r small{color:var(--cadre)!important}
.ag-t{min-height:1.45em}
.ag-attente{display:none;align-items:center;gap:10px;color:var(--gris)}
.ag-r.cherche .ag-attente{display:inline-flex}
.ag-r.cherche .ag-t{display:none}
.pts{display:inline-flex;gap:4px}
.pts i{width:6px;height:6px;border-radius:50%;background:currentColor;animation:pt 1s var(--doux) infinite}
.pts i:nth-child(2){animation-delay:.15s}.pts i:nth-child(3){animation-delay:.3s}
@keyframes pt{0%,60%,100%{transform:none;opacity:.35}30%{transform:translateY(-4px);opacity:1}}
@keyframes q-in{from{opacity:0;transform:translateY(12px) scale(.98)}}
.ag-ou,.moms,.ag-suite{display:none}
.ag-r.pret .ag-ou,.ag-r.pret .ag-suite{display:block}
.ag-r.pret .moms{display:grid}
.ag-ou{font:800 .8rem/1 var(--titre);color:var(--gris);margin-top:clamp(18px,1.4vw,28px)}
.ag-suite{margin-top:14px}
.moms{list-style:none;padding:0;gap:8px;margin-top:10px}
.ag-r.pret .mom{animation:mom-in .6s var(--ressort) both;animation-delay:calc(var(--i) * 110ms)}
@keyframes mom-in{from{opacity:0;transform:translateY(10px)}}
.mom-b{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(12px,1vw,22px);align-items:center;padding:8px clamp(10px,.8vw,16px) 8px 8px;border-radius:20px;background:var(--beige);color:var(--encre);text-align:left;transition:transform .45s var(--ressort),box-shadow .45s var(--doux),background .3s var(--doux)}
.mom-b:hover{transform:translateY(-2px);box-shadow:var(--ombre);background:#ede8dd}
.mom-b .vign{width:clamp(58px,4.2vw,92px)}
.mom-b:hover .vign{transform:rotate(-6deg)}
.mom-t small{display:block;font-size:clamp(12.5px,.8vw,18px);color:var(--gris)}
.mom-t b{display:block;font-size:clamp(15px,1vw,23px);font-weight:650;line-height:1.25;margin-top:2px}
.mom-q{display:block;font-size:clamp(13.5px,.88vw,20px);color:#3c3f52;margin-top:3px;line-height:1.35}
/* Où tombe la minute dans le module : un trait, un point */
.frise{position:relative;display:block;height:2px;margin:12px 6px 4px 0;border-radius:2px;background:rgba(17,20,46,.16)}
.frise i{position:absolute;left:var(--p);top:50%;width:11px;height:11px;border-radius:50%;background:var(--violet);transform:translate(-50%,-50%);box-shadow:0 0 0 3px var(--beige)}
[data-couleurs=trois] .frise i{background:var(--cadre)}
.mom-go{display:inline-flex;align-items:center;gap:7px;height:clamp(38px,2.5vw,50px);padding:0 clamp(14px,1vw,20px);border-radius:999px;background:var(--encre);color:#fff;font:650 clamp(14px,.9vw,20px)/1 var(--texte);font-variant-numeric:tabular-nums;white-space:nowrap;transition:transform .45s var(--rebond)}
.mom-b:hover .mom-go{transform:scale(1.05)}
/* Sans Pro : l'exemple se joue en arrivant à l'écran */
.ex-q{position:relative;display:grid;gap:12px}
.ex-l{justify-self:start;font:800 .8rem/1 var(--titre);padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.18)}
.ex-q.grand .ex-l{background:var(--beige);color:var(--gris)}
.ex-q .bulle-t{max-width:92%}
.ex-q .bulle-t.moi{animation:none}
.ex-q .ag-r{animation:none}
@media (prefers-reduced-motion:no-preference){
  .js .ex-q:not(.in) .bulle-t{opacity:0}
  .js .ex-q.in .bulle-t.moi{animation:q-in .6s var(--ressort) .35s both}
  .js .ex-q.in .ag-r{animation:q-in .7s var(--ressort) 1.1s both}
  .js .ex-q.in .mom{animation:mom-in .6s var(--ressort) both;animation-delay:calc(1.7s + var(--i) * 140ms)}
}
.case-q.libre .cq-g{align-items:center}
/* La page #/question */
.q-couv .champ-q{max-width:min(980px,100%);margin-top:clamp(24px,2.2vw,44px)}
.q-couv .sugg-q{max-width:980px}
.q-couv .sugg-q button{background:rgba(255,255,255,.16)}
.q-pro{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:clamp(18px,1.6vw,30px);font-size:clamp(16px,1.1vw,26px)}
.q-pro .pro{background:var(--jaune);color:var(--encre)}
.q-page .fil-q:empty{display:none}
.q-page .ech{scroll-margin-top:24px}
.passe-q{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1vw,20px)}
.passe-q button{width:100%;height:100%;display:grid;grid-template-rows:auto 1fr auto;gap:8px;padding:clamp(18px,1.4vw,30px);border-radius:var(--r-carte);background:var(--beige);color:var(--encre);text-align:left;position:relative;transition:transform .5s var(--ressort),box-shadow .5s var(--doux),background .3s var(--doux)}
.passe-q button:hover{transform:translateY(-4px) rotate(-.6deg);box-shadow:var(--ombre);background:#ede8dd}
.passe-q span.num{font-size:.875rem;color:var(--gris)}
.passe-q b{font:800 clamp(19px,1.35vw,32px)/1.08 var(--titre);letter-spacing:-.012em;padding-right:1.4em}
.passe-q small{font-size:clamp(13.5px,.88vw,20px);color:var(--gris)}
.passe-q .fl{position:absolute;right:clamp(18px,1.4vw,30px);top:clamp(18px,1.4vw,30px);color:var(--violet)}
.passe-q button:hover .fl{transform:translateX(4px)}
.q-limite{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:clamp(18px,1.4vw,30px) clamp(20px,1.6vw,34px);border-radius:var(--r-carte);background:var(--rose-pale);font-size:clamp(15.5px,1.02vw,24px);line-height:1.42}
.q-limite>i{font-size:1.6em;color:var(--violet)}
.q-limite b{font-weight:700}
.q-libre{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,3vw,72px);align-items:start}
.q-cote h2{font:800 clamp(24px,1.8vw,42px)/1.04 var(--titre);letter-spacing:-.014em}
.q-cote ul{list-style:none;padding:0;display:grid;gap:12px;margin:16px 0 22px}
.q-cote li{display:flex;gap:10px;align-items:flex-start;font-size:clamp(15.5px,1.02vw,24px);line-height:1.4}
.q-cote li i{color:var(--violet);margin-top:.22em;flex:none}
.q-cherche{padding:clamp(24px,2.2vw,48px);border-radius:calc(var(--r-grand) + 6px);background:var(--beige)}
.q-cherche h2{font:800 clamp(26px,2vw,48px)/1.02 var(--titre);letter-spacing:-.016em}
.q-cherche p{color:var(--gris);font-size:clamp(16px,1.08vw,25px);margin-top:8px}
.q-cherche .cherche-p input{background:#fff}
@media (max-width:1100px){.cq-g,.q-libre{grid-template-columns:1fr;align-items:start}.cq-txt h2{max-width:none}}
@media (max-width:820px){
  .case-q{padding:22px 18px;border-radius:var(--r-grand)}
  .ech .bulle-t,.ex-q .bulle-t{max-width:100%}
  .mom-b{grid-template-columns:auto minmax(0,1fr);row-gap:10px}
  .mom-go{grid-column:2;justify-self:start}
  .passe-q{grid-template-columns:1fr}
  .q-limite{grid-template-columns:auto minmax(0,1fr)}
  .q-limite .lien{grid-column:2}
}

/* ---------- 18. Le live du mois (15/10, vers 16 h 30) : v2/live.js ---------- */
.l-mq{padding:clamp(14px,1.2vw,24px) var(--marge) 0}
.mq-page{display:inline-flex;align-items:center;gap:2px;padding:3px 3px 3px 12px;border-radius:999px;background:rgba(17,20,46,.06);font-size:.8125rem}
.mq-page span{color:var(--gris);font-weight:500;margin-right:6px}
.mq-page button{padding:6px 12px;border-radius:999px;font-weight:500;color:var(--gris);transition:background .3s var(--doux),color .3s}
.mq-page button[aria-pressed=true]{background:#fff;color:var(--encre);font-weight:650;box-shadow:0 1px 3px rgba(17,20,46,.16)}
.l-mq+.couv{margin-top:10px}
[data-couleurs=trois] .lv-couv{--u:var(--cadre)!important}
/* La date, en grand, comme un billet */
.lv-date{display:grid;justify-items:center;align-content:center;min-width:clamp(150px,11vw,260px);aspect-ratio:1;padding:12px;border-radius:calc(var(--r-grand) + 4px);background:#fff;color:var(--encre);box-shadow:0 18px 50px rgba(0,0,0,.22);transform:rotate(3deg);transition:transform .8s var(--rebond)}
.lv-couv:hover .lv-date{transform:rotate(-2deg) scale(1.03)}
.lv-date b{font:400 clamp(72px,6vw,150px)/.8 var(--ultra);color:var(--rouge)}
[data-couleurs=trois] .lv-date b{color:var(--cadre)}
.lv-date span{font:400 clamp(20px,1.6vw,38px)/1 var(--ultra);letter-spacing:.04em;margin-top:6px}
.lv-date small{font:800 clamp(13px,.86vw,19px)/1 var(--titre);color:var(--gris);margin-top:12px}
.lv-act{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:clamp(20px,1.8vw,36px)}
.lv-rappel{display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 9px 0 18px;border-radius:999px;background:rgba(17,20,46,.2);font-weight:600}
/* Sur l'accueil, la bande du live se range contre la case de l'agent : les deux choses du Pro ensemble */
#question-a+#live-a{margin-top:clamp(14px,1.2vw,26px)}
.lv-rappel .switch[aria-checked=true]{background:var(--jaune)}
/* Le direct */
.direct{display:inline-flex;align-items:center;gap:9px;height:34px;padding:0 14px;border-radius:999px;background:#fff;color:var(--rouge);font:400 .8rem/1 var(--ultra);letter-spacing:.06em}
.direct i{width:9px;height:9px;border-radius:50%;background:currentColor;animation:dir 1.4s var(--doux) infinite}
@keyframes dir{50%{opacity:.25;transform:scale(.7)}}
.lv-dir{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,3vw,72px);align-items:center}
.lv-dir h1{font:900 clamp(48px,4.6vw,118px)/.9 var(--titre);letter-spacing:-.03em;margin-top:16px}
.lv-ecran{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:16/9;border-radius:var(--r-grand);background-color:var(--encre);background-image:var(--grain);background-size:180px;color:#fff;cursor:pointer;box-shadow:0 24px 70px rgba(0,0,0,.3)}
.lv-ecran .mo{background:rgba(255,255,255,.07);width:60%;right:-14%;top:-30%}
.lv-ecran .mo.b{width:34%;left:-6%;bottom:-24%;top:auto;background:rgba(211,58,42,.35)}
.lv-ecran-t{position:absolute;left:clamp(18px,1.6vw,32px);bottom:clamp(16px,1.4vw,28px);font:800 clamp(18px,1.5vw,36px)/1.05 var(--titre)}
.lv-ecran .jouer-g{left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);background:#fff;color:var(--encre);transition:transform .5s var(--rebond)}
.lv-ecran:hover .jouer-g{transform:translate(-50%,-50%) scale(1.1)}
.lv-vus{position:absolute;right:clamp(14px,1.2vw,24px);top:clamp(14px,1.2vw,24px);padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.14);font-size:.875rem;font-weight:600}
/* Les questions et leurs votes */
.lv-qg{max-width:min(var(--large),1180px)}
.lv-champ{background:var(--beige);box-shadow:none;margin-bottom:clamp(16px,1.4vw,28px)}
.lv-champ:focus-within{box-shadow:0 0 0 3px var(--rouge)}
.lv-q{list-style:none;padding:0;display:grid;gap:8px}
.lv-qi{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,1.2vw,24px);align-items:center;padding:10px clamp(16px,1.4vw,28px) 10px 10px;border-radius:var(--r-carte);background:#fff;box-shadow:0 0 0 1px var(--filet);animation:mom-in .5s var(--ressort) both;animation-delay:calc(var(--i) * 50ms)}
.lv-qi p{font-size:clamp(16px,1.08vw,25px);font-weight:600;line-height:1.3}
.lv-qi small{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:clamp(13px,.84vw,19px);color:var(--gris);margin-top:4px}
.lv-qi.en-cours{background:var(--rose-pale);box-shadow:0 0 0 2px var(--rouge)}
.lv-rep-en{color:var(--rouge);font-weight:650}
.t-ag{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;background:var(--violet);color:#fff;font:800 .72rem/1 var(--titre)}
.vote{display:grid;justify-items:center;align-content:center;gap:2px;width:clamp(58px,4vw,84px);aspect-ratio:1;border-radius:18px;background:var(--beige);color:var(--encre);transition:background .3s var(--doux),color .3s,transform .45s var(--rebond)}
.vote i{font-size:1.15rem}
.vote b{font:800 clamp(16px,1.1vw,24px)/1 var(--titre)}
.vote:hover{background:#e9e4d9;transform:translateY(-2px)}
.vote.ok{background:var(--rouge);color:#fff}
.vote.tape{animation:tape .45s var(--rebond)}
/* Les replays */
.lv-reps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.3vw,28px)}
.lv-rc{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(16px,1.4vw,30px);padding:clamp(12px,1vw,20px);border-radius:calc(var(--r-grand) + 6px);background:var(--beige);color:var(--encre);transition:transform .5s var(--ressort),box-shadow .5s var(--doux)}
.lv-rc:hover{transform:translateY(-4px);box-shadow:var(--ombre)}
.lv-mini{position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;aspect-ratio:4/3;border-radius:var(--r-carte);background-color:var(--rouge);background-image:var(--grain);background-size:180px;color:#fff}
[data-couleurs=trois] .lv-mini{background-color:var(--cadre)}
.lv-mini b{font:400 clamp(26px,2.3vw,58px)/.9 var(--ultra);letter-spacing:-.01em;transition:transform .8s var(--rebond)}
.lv-rc:hover .lv-mini b{transform:rotate(-4deg) scale(1.05)}
.lv-jouer{position:absolute;right:10px;bottom:10px;width:42px;height:42px;border-radius:50%;background:#fff;color:var(--encre);display:grid;place-items:center}
.lv-rc-t small{font-size:clamp(13px,.84vw,19px);color:var(--gris)}
.lv-rc-t b{display:block;font:800 clamp(22px,1.6vw,38px)/1.04 var(--titre);letter-spacing:-.014em;margin-top:4px}
.lv-rc-t ol{list-style:none;padding:0;display:grid;gap:6px;margin:14px 0}
.lv-rc-t li{display:grid;grid-template-columns:4.2em minmax(0,1fr);gap:8px;font-size:clamp(14px,.9vw,21px);line-height:1.3}
.lv-rc-t li span{color:var(--gris);font-variant-numeric:tabular-nums}
/* Un replay : le lecteur, les chapitres */
.lv-replay{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(18px,1.8vw,40px);align-items:start}
.chap-l{list-style:none;padding:0;display:grid;gap:6px}
.chap-l button,.chap-l.libre li{width:100%;display:grid;grid-template-columns:4.4em minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;row-gap:2px;padding:12px 16px;border-radius:18px;background:var(--beige);text-align:left;color:var(--encre);transition:background .3s var(--doux),transform .45s var(--ressort)}
.chap-l button:hover{background:#e9e4d9;transform:translateX(4px)}
.chap-l span{grid-row:1/3;font:800 clamp(14px,.9vw,20px)/1.3 var(--titre);color:var(--rouge);font-variant-numeric:tabular-nums}
[data-couleurs=trois] .chap-l span{color:var(--cadre)}
.chap-l b{font-size:clamp(15px,.98vw,23px);font-weight:620;line-height:1.3}
.chap-l small{font-size:clamp(12.5px,.8vw,18px);color:var(--gris)}
/* La bande de l'accueil */
.lv-bande{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(18px,2vw,44px);align-items:center;padding:clamp(16px,1.4vw,28px) clamp(20px,1.8vw,38px) clamp(16px,1.4vw,28px) clamp(16px,1.4vw,28px);border-radius:calc(var(--r-grand) + 6px);background:var(--beige);color:var(--encre);transition:transform .5s var(--ressort),box-shadow .5s var(--doux)}
.lv-bande:hover{transform:translateY(-3px);box-shadow:var(--ombre)}
.lv-bande .lv-date{min-width:clamp(104px,7.4vw,170px);box-shadow:0 10px 30px rgba(17,20,46,.12)}
.lv-bande .lv-date b{font-size:clamp(52px,4vw,100px)}
.lv-bande .lv-date span{font-size:clamp(16px,1.2vw,28px)}
.lv-bande .lv-date small{margin-top:8px}
.lv-t small{display:block;font:800 clamp(13px,.86vw,19px)/1 var(--titre);color:var(--rouge)}
[data-couleurs=trois] .lv-t small{color:var(--cadre)}
.lv-t b{display:block;font:800 clamp(22px,1.75vw,42px)/1.06 var(--titre);letter-spacing:-.014em;margin-top:8px}
.lv-t span{display:block;font-size:clamp(15px,1vw,24px);color:#3c3f52;margin-top:8px;max-width:60ch}
.lv-bande.direct{background:var(--rouge);color:#fff}
.lv-bande.direct .lv-t small,.lv-bande.direct .lv-t span{color:#fff}
.lv-bande.direct .lv-t span{opacity:.88}
@media (max-width:1100px){.lv-dir,.lv-replay{grid-template-columns:1fr}.lv-reps{grid-template-columns:1fr}}
@media (max-width:820px){
  .lv-couv .couv-g{grid-template-columns:1fr}
  .lv-couv .lv-date{display:none}
  .lv-rc{grid-template-columns:1fr}
  .lv-bande{grid-template-columns:auto minmax(0,1fr);row-gap:14px}
  .lv-bande .btn{grid-column:1/-1;justify-self:start}
  .lv-bande .lv-date{min-width:88px}
  .lv-bande .lv-date b{font-size:44px}
  .mq-page span{display:none}
}

/* ---------- 19. La fiche gratuite vue sans compte : v2/public.js ----------
   Refaite le 15/10 vers 18 h sur ses mots de 17 h 40 (« délimiter les zones. Mieux que ça ») : quatre zones, chacune dans son bloc.
   Le haut sur la feuille ; l'exemple à la couleur de l'univers ; l'ajout en beige ; l'intérieur en bleu, la couleur du cadre de l'espace. */
[data-page=public]{--menu:var(--bord)}
[data-page=public] .side,[data-page=public] .mobile-haut,[data-page=public] .onglets{display:none}
[data-page=public] .feuille{padding-bottom:0}
/* L'en-tête reste en haut pendant toute la lecture (16/10 : « un truc tout le temps là ») ; sous les coins du cadre (z 25) */
.fs-haut{position:sticky;top:var(--bord);z-index:24;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(14px,1.2vw,24px) var(--marge);border-bottom:1px solid var(--filet);background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);transition:box-shadow .4s var(--doux)}
.fs-haut.colle{box-shadow:0 12px 30px rgba(17,20,46,.07)}
.fs-nav .btn{position:relative}
.fs-zero{position:absolute;right:-13px;top:-15px;display:grid;place-items:center;width:36px;height:36px;clip-path:var(--etoile);background:var(--jaune);color:var(--encre);font:900 10px/1 var(--titre);letter-spacing:-.02em;transform:rotate(12deg) scale(0);transition:transform .6s var(--rebond)}
.fs-haut.colle .fs-zero{transform:rotate(12deg) scale(1)}
.fs-g{display:flex;align-items:center;gap:clamp(14px,1.4vw,28px);min-width:0}
.fs-haut .marque{color:var(--encre);white-space:nowrap}
.fs-dit{display:grid;padding-left:clamp(14px,1.4vw,28px);border-left:1px solid var(--filet);color:var(--gris);font-size:clamp(13.5px,.86vw,20px);line-height:1.35;max-width:62ch}
.fs-dit>span{grid-area:1/1;align-self:center;transition:opacity .45s var(--doux),transform .6s var(--ressort)}
.fs-dit .d2{opacity:0;transform:translateY(10px);color:var(--encre);font-weight:600}
.fs-haut.colle .d1{opacity:0;transform:translateY(-10px)}
.fs-haut.colle .d2{opacity:1;transform:none}
.fs-nav{display:flex;align-items:center;gap:clamp(12px,1.4vw,28px)}
.fs-p{padding-top:clamp(30px,2.8vw,64px)}
/* 1. Le haut : ce que c'est, dit pour quelqu'un qui n'y connaît rien */
.fs-quoi{display:flex;gap:12px;align-items:flex-start;margin-top:clamp(16px,1.4vw,28px);padding:clamp(14px,1.1vw,22px) clamp(16px,1.3vw,26px);border-radius:var(--r-carte);background:var(--beige);font-size:clamp(14.5px,.94vw,22px);line-height:1.45;color:#3c3f52;max-width:60ch}
.fs-quoi i{flex:none;font-size:1.45em;color:var(--cadre);margin-top:-.05em}
.fs-quoi b{color:var(--encre)}
.fs-p .f-notes b{white-space:nowrap}
/* Les zones */
.fs-z{position:relative;isolation:isolate;overflow:hidden;padding:clamp(24px,3vw,72px);border-radius:calc(var(--r-grand) + 8px)}
.fs-z>.mo{z-index:-1}
.fs-zt h2{font:900 clamp(32px,2.9vw,72px)/.98 var(--titre);letter-spacing:-.024em;max-width:20ch}
.fs-zt p{margin-top:clamp(10px,.9vw,18px);max-width:54ch;font-size:clamp(16px,1.1vw,26px);line-height:1.42;opacity:.86}
/* 2. L'exemple : la couleur de l'univers, une vraie conversation */
.fs-ex{background-color:var(--c);background-image:var(--grain);background-size:180px;color:var(--ct)}
.fs-ex .mo{background:rgba(255,255,255,.2)}
.fs-ex .mo.b{background:rgba(17,20,46,.06)}
[data-couleurs=trois] .fs-ex{background-color:var(--cadre);color:#fff}
[data-couleurs=trois] .fs-ex .ex-pas .n{background:#fff;color:var(--cadre)}
.ex-g{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:clamp(22px,3vw,72px);align-items:center;margin-top:clamp(24px,2.4vw,52px)}
.conv{overflow:hidden;border-radius:var(--r-grand);background:#fff;color:var(--encre);box-shadow:0 2px 6px rgba(17,20,46,.08),0 30px 70px rgba(17,20,46,.22)}
.conv-haut{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:clamp(14px,1.1vw,22px) clamp(18px,1.6vw,32px);border-bottom:1px solid var(--filet)}
.conv-haut b{font:800 clamp(16px,1.05vw,25px)/1 var(--titre)}
.conv-puce{margin-left:auto;display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;background:#e6f4ec;color:var(--vert);font-weight:650;font-size:clamp(12.5px,.8vw,19px);line-height:1.25}
.conv-puce i{font-size:1.2em;flex:none}
.av-c{flex:none;display:grid;place-items:center;width:clamp(32px,2.2vw,48px);height:clamp(32px,2.2vw,48px);border-radius:50%;background:#f6e9e2}
.av-c img{width:58%;height:58%}
.conv-fil{display:grid;gap:clamp(16px,1.4vw,28px);padding:clamp(18px,1.8vw,40px)}
.msg small,.rep small{display:block;font:800 clamp(11.5px,.74vw,17px)/1 var(--titre);color:var(--gris);margin-bottom:8px}
.msg.moi{justify-self:end;display:grid;justify-items:end;gap:8px;max-width:84%}
.msg.moi p{padding:clamp(14px,1.1vw,22px) clamp(16px,1.3vw,26px);border-radius:22px 22px 8px 22px;background:var(--encre);color:#fff;font-size:clamp(15.5px,1.04vw,24px);line-height:1.45}
.pj-c{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--filet);font-weight:600;font-size:clamp(13px,.84vw,20px)}
.pj-c i{font-size:1.5em;color:var(--vert)}
.msg.lui{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(10px,.9vw,18px);align-items:start}
.rep{display:grid;gap:clamp(8px,.7vw,14px);font-size:clamp(15.5px,1.04vw,24px);line-height:1.45}
.rep>small{margin:clamp(8px,.6vw,13px) 0 0}
.tas-r{display:grid;gap:6px;justify-items:start;padding:clamp(12px,1vw,20px) clamp(14px,1.2vw,24px);border-radius:18px;background:var(--tf)}
.tas-r b{display:inline-block;padding:5px 11px;border-radius:999px;background:var(--t);color:#fff;font:800 clamp(12px,.78vw,18px)/1 var(--titre);letter-spacing:.01em}
.tas-r.couper{--t:var(--rouge);--tf:#fdeeec}
.tas-r.pousser{--t:var(--vert);--tf:#e6f4ec}
.tas-r.tester{--t:var(--encre);--tf:#fff6d6}
.tas-r.garder{--t:var(--cadre);--tf:#e9effd}
.ex-pas{list-style:none;padding:0;display:grid;gap:clamp(18px,1.6vw,34px)}
.ex-pas li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(12px,1vw,20px);align-items:start;font-size:clamp(15px,1.02vw,24px);line-height:1.42}
.ex-pas .n{display:grid;place-items:center;width:clamp(38px,2.6vw,58px);height:clamp(38px,2.6vw,58px);border-radius:50%;background:var(--ct);color:var(--c);font:400 clamp(17px,1.25vw,30px)/1 var(--ultra)}
.ex-pas b{display:block;margin-bottom:4px;font:800 clamp(18px,1.3vw,31px)/1.1 var(--titre)}
.ex-trois{margin-top:clamp(24px,2.4vw,52px)}
.fs-ex .temps p{color:inherit;opacity:.86}
.ex-boite{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.1vw,24px);margin-top:clamp(24px,2.4vw,52px)}
.ex-boite li{display:grid;gap:14px;align-content:start;padding:clamp(18px,1.6vw,34px);border-radius:var(--r-grand);background:#fff;color:var(--encre);font-size:clamp(16px,1.1vw,26px)}
.ex-boite i{font-size:2em;color:var(--cadre)}
@media (prefers-reduced-motion:no-preference){
  .js .conv:not(.in) .msg{opacity:0}
  .js .conv.in .msg{animation:q-in .7s var(--ressort) both;animation-delay:calc(.35s + var(--i) * .75s)}
}
/* 3. L'ajouter : toutes les étapes visibles d'un coup, une phrase chacune */
.fs-aj{background:var(--beige)}
.pas-intro{margin-top:14px;max-width:70ch;font-size:clamp(14.5px,.94vw,22px);color:#3c3f52}
/* L'état de vérification : en bas du bloc, en gris (sa réponse du 15/10 vers 19 h) */
.fs-aj .verif,.fs-aj .verif.non{margin-top:clamp(14px,1.2vw,24px);color:var(--gris);font-weight:500}
.pas-l{list-style:none;padding:0;display:grid;gap:clamp(10px,.9vw,18px);margin-top:clamp(22px,2.2vw,46px)}
.etp{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.15fr);gap:clamp(14px,1.8vw,40px);align-items:center;padding:clamp(16px,1.4vw,30px) clamp(18px,1.6vw,34px);border-radius:var(--r-grand);background:#fff;box-shadow:var(--ombre)}
.pas-n{display:grid;place-items:center;width:clamp(46px,3.2vw,74px);height:clamp(46px,3.2vw,74px);border-radius:50%;background:var(--encre);color:#fff;font:400 clamp(21px,1.6vw,38px)/1 var(--ultra)}
.pas-t{font-size:clamp(16.5px,1.14vw,27px);line-height:1.4;max-width:34ch}
.pas-v{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0}
.pas-v .chemin{justify-content:flex-start;gap:6px}
.pas-v .chemin span{padding:.5em .85em;font-size:clamp(13.5px,.88vw,21px)}
.pas-v .chemin .fl{padding:0;background:none;font-size:1rem}
.pas-v .cmd{max-width:100%}
.dl{display:flex;align-items:center;gap:14px;width:100%;max-width:560px;padding:12px 12px 12px 16px;border-radius:18px;background:var(--beige);text-align:left;font-weight:650;font-size:clamp(15px,1vw,23px);transition:transform .35s var(--ressort)}
.dl:active{transform:scale(.98)}
.dl>i{flex:none;font-size:2em;color:var(--cadre)}
.dl small{display:block;font-weight:500;font-size:.8em;color:var(--gris)}
.dl-b{margin-left:auto;display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 18px;border-radius:999px;background:var(--encre);color:#fff;font-size:.9375rem;font-weight:650;white-space:nowrap}
.dl:hover .dl-b{box-shadow:0 10px 26px rgba(17,20,46,.28)}
.phrase{display:grid;justify-items:start;gap:12px;width:100%}
.phrase p{padding:14px 18px;border-radius:18px 18px 18px 6px;background:var(--beige);font-size:clamp(15px,1vw,23px);line-height:1.45}
.pas-mod{display:grid;place-items:center;width:100%;min-height:120px;border-radius:18px;background:var(--menthe)}
/* Les trois façons de l'ajouter : en onglets à droite du titre (16/10) ; plus de ligne au-dessus de « Ça coince ? » */
/* Un bouton qui fait défiler jusqu'à un bloc s'arrête sous l'en-tête collé, pas dessous */
[data-page=public] .sec{scroll-margin-top:clamp(92px,6.4vw,150px)}
.fs-zh{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 28px}
.fs-ong{flex:none}
.pas-fin{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:12px clamp(20px,2vw,44px);margin-top:clamp(20px,1.8vw,36px);font-size:clamp(14.5px,.94vw,22px);line-height:1.45;color:#3c3f52}
.pas-fin b{color:var(--encre)}
/* 4. L'intérieur : la vraie maquette en petit, dans une fenêtre */
.fs-in{background-color:var(--cadre);background-image:var(--grain);background-size:180px;color:#fff}
.fs-in .mo{background:rgba(255,255,255,.1)}
.fs-in .mo.b{background:rgba(0,0,0,.14)}
.ap-ong{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:clamp(24px,2.2vw,46px)}
.ap-ong button{position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;min-height:clamp(54px,3.6vw,80px);padding:10px clamp(12px,1vw,20px);border-radius:var(--r-carte);background:rgba(255,255,255,.13);color:#fff;text-align:left;font-weight:650;font-size:clamp(14px,.92vw,21px);line-height:1.2;transition:background .3s var(--doux),color .3s var(--doux),transform .35s var(--ressort)}
.ap-ong button:hover{background:rgba(255,255,255,.22)}
.ap-ong button:active{transform:scale(.97)}
.ap-ong button i{flex:none;font-size:1.55em;color:var(--jaune)}
.ap-ong [aria-selected=true]{background:#fff;color:var(--encre)}
.ap-ong [aria-selected=true]:hover{background:#fff}
.ap-ong [aria-selected=true] i{color:var(--cadre)}
.ap-ong button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--jaune);transform:scaleX(0);transform-origin:left}
.ap-g.auto .ap-ong [aria-selected=true]::after{animation:ap-temps 6s linear forwards}
@keyframes ap-temps{to{transform:scaleX(1)}}
.ap-d{min-height:2.9em;margin-top:clamp(12px,1vw,20px);max-width:70ch;font-size:clamp(15px,1.02vw,24px);line-height:1.42}
.ap-fen{position:relative;margin:clamp(18px,1.4vw,30px) clamp(6px,.6vw,12px) clamp(6px,.6vw,12px)}
.ap-ecran{position:relative;overflow:hidden;aspect-ratio:16/10;border-radius:var(--r-grand);background:var(--cadre-fonce);box-shadow:0 0 0 clamp(6px,.6vw,12px) rgba(255,255,255,.22),0 2px 6px rgba(0,0,0,.12),0 40px 90px rgba(0,0,0,.36)}
.ap-ecran[style*=height]{aspect-ratio:auto}
.ap-ecran iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;pointer-events:none;background:var(--cadre)}
.ap-etoile{position:absolute;z-index:2;right:clamp(-8px,-.4vw,-4px);top:clamp(-30px,-1.6vw,-20px);display:grid;place-items:center;align-content:center;gap:2px;width:clamp(92px,6.6vw,150px);aspect-ratio:1;clip-path:var(--etoile);background:var(--jaune);color:var(--encre);font:800 clamp(10.5px,.7vw,16px)/1 var(--titre);letter-spacing:.04em;text-align:center;transform:rotate(12deg)}
.ap-etoile b{font:900 clamp(22px,1.6vw,38px)/1 var(--titre);letter-spacing:-.02em}
.fs-go{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:clamp(26px,2.4vw,52px)}
.fs-go p{font-size:clamp(14px,.92vw,21px);opacity:.88}
.fs-go .btn.contour{color:#fff}
.fs-go .btn.contour:hover{background:rgba(255,255,255,.12)}
.fs-garde{display:flex;align-items:flex-start;gap:10px;margin-top:clamp(14px,1.2vw,24px);font-size:clamp(14px,.92vw,21px);line-height:1.4;opacity:.92}
.fs-garde i{flex:none;font-size:1.3em;color:var(--jaune)}
/* La maquette dans la fenêtre : sans sa barre de réglages ni ses messages */
[data-apercu] .mq,[data-apercu] .toast{display:none}
.fs-pied{margin-top:clamp(76px,6.2vw,150px);padding:clamp(28px,2.4vw,52px) var(--marge);background:var(--beige)}
.fs-pied .l{display:flex;flex-wrap:wrap;align-items:center;gap:14px 32px}
.fs-pied .marque{color:var(--encre)}
.fs-pied p{flex:1;min-width:240px;color:var(--gris);font-size:clamp(14px,.9vw,20px)}
.fs-pied nav{display:flex;gap:20px;font-size:.9375rem;font-weight:600}
.fs-pied nav a:hover{color:var(--cadre)}
/* La création de compte rappelle la fiche d'où l'on vient */
.auth-depuis{display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding:12px 16px;border-radius:16px;background:var(--beige);font-size:.9375rem;line-height:1.4}
.auth-depuis i{color:var(--cadre);font-size:1.2rem;margin-top:1px}
/* L'option à trancher (#/public/…/visite) : la visite sans compte, puis le compte demandé au troisième clic */
.visite-p{position:fixed;z-index:80;left:50%;bottom:24px;translate:-50% 0;display:flex;align-items:center;gap:14px;max-width:calc(100vw - 32px);padding:8px 8px 8px 20px;border-radius:999px;background:var(--encre);color:#fff;box-shadow:var(--ombre-haute);font-weight:600;font-size:.9375rem;white-space:nowrap;animation:monte .6s var(--doux)}
.mur-ouvert{overflow:hidden}
.mur-v{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px;background:rgba(17,20,46,.62);opacity:0;transition:opacity .35s var(--doux)}
.mur-v.vu{opacity:1}
.mur-c{width:min(540px,100%);padding:clamp(28px,2.4vw,48px);border-radius:var(--r-grand);background:#fff;color:var(--encre);text-align:center;transform:translateY(24px) scale(.97);transition:transform .55s var(--ressort)}
.mur-v.vu .mur-c{transform:none}
.mur-c .sceau{display:inline-grid;place-items:center;width:52px;height:52px;clip-path:var(--etoile);background:var(--jaune);color:var(--cadre);font:400 1.3rem/1 var(--ultra)}
.mur-c h2{margin-top:16px;font:900 clamp(28px,2.2vw,46px)/1 var(--titre);letter-spacing:-.02em}
.mur-c p{margin-top:12px;color:var(--gris)}
.mur-b{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 22px;margin-top:24px}
.mur-r{display:inline-block;margin-top:18px;font-size:.9375rem;color:var(--gris);text-decoration:underline;text-underline-offset:3px}
@media (max-width:1100px){
  .fs-dit{display:none}
  .ex-g{grid-template-columns:1fr}
  .etp{grid-template-columns:auto minmax(0,1fr)}
  .pas-v{grid-column:2}
  .ap-ong{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-left:calc(-1 * clamp(24px,3vw,72px));margin-right:calc(-1 * clamp(24px,3vw,72px));padding:0 clamp(24px,3vw,72px)}
  .ap-ong::-webkit-scrollbar{display:none}
  .ap-ong button{flex:none;scroll-snap-align:start}
}
@media (max-width:820px){
  .fs-haut{top:0;padding:12px 16px}
  [data-page=public] .sec{scroll-margin-top:80px}
  .fs-zero{display:none}
  .fs-ong .pl{display:none}
  .fs-ong{flex:1 1 100%;display:flex;overflow-x:auto;scrollbar-width:none}
  .fs-ong::-webkit-scrollbar{display:none}
  .fs-ong button{flex:1 0 auto}
  .fs-nav .lien-b{display:none}
  .fs-nav .btn{height:42px;padding:0 16px}
  .fs-z{padding:24px 18px;border-radius:var(--r-grand)}
  .ap-ong{margin-left:-18px;margin-right:-18px;padding:0 18px}
  .msg.moi{max-width:94%}
  .conv-puce{margin-left:0}
  .etp{padding:16px;gap:14px}
  .pas-v{grid-column:1/-1}
  .dl{flex-wrap:wrap}
  .dl-b{margin-left:0;width:100%;justify-content:center}
  .ex-boite{grid-template-columns:1fr}
  .ap-etoile{width:80px;top:-24px;right:-4px}
  .visite-p{bottom:calc(84px + env(safe-area-inset-bottom));padding-left:16px;font-size:.875rem}
}

/* ---------- 20. La page introuvable (15/10, vers 17 h 30) : v2/introuvable.js ---------- */
/* En marge intérieure : une marge du premier bloc passait à travers la feuille et la décollait du cadre (52 px mesurés à 1440) */
.sec.perdu{margin-top:0;padding-top:clamp(30px,2.8vw,68px)}
.perdu-g{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(26px,3.4vw,90px);align-items:center}
.perdu-adr{display:inline-flex;align-items:center;gap:10px;max-width:100%;padding:8px 14px;border-radius:999px;background:var(--beige);color:var(--gris);font-size:.9375rem;margin-bottom:clamp(18px,1.6vw,32px)}
.perdu-adr code{font:500 .9375rem/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--encre);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.perdu-adr i{color:var(--rouge);flex:none}
.perdu .titre-p{max-width:14ch}
.perdu .f-btns{margin-top:clamp(24px,2.2vw,44px)}
/* L'affiche : le numéro en grand, les formes molles qui suivent la souris */
.perdu-aff{position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;aspect-ratio:4/5;border-radius:calc(var(--r-grand) + 6px);background-color:var(--jaune);background-image:var(--grain);background-size:180px;color:var(--encre);transform:rotate(2deg);transition:transform .9s var(--rebond)}
.perdu-aff:hover{transform:rotate(-1deg) scale(1.01)}
[data-couleurs=trois] .perdu-aff{background-color:var(--cadre);color:#fff}
.perdu-aff .mo{background:rgba(255,255,255,.35)}
.perdu-aff .mo.b{background:rgba(17,20,46,.1)}
.perdu-n{font:400 clamp(120px,13vw,330px)/.8 var(--ultra);letter-spacing:-.03em;transform:translate(calc(var(--px,0px) * .5),calc(var(--py,0px) * .5)) rotate(calc(var(--pr,0deg) * -.3));transition:transform 1s var(--doux)}
.perdu-m{position:absolute;left:0;right:0;bottom:8%;text-align:center;font:400 clamp(16px,1.3vw,32px)/1 var(--ultra);letter-spacing:.14em}
.perdu-l{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:clamp(22px,2vw,40px)}
@media (max-width:820px){
  .perdu-g{grid-template-columns:1fr}
  .perdu-aff{order:-1;aspect-ratio:16/10;transform:rotate(-1.5deg)}
  .perdu-n{font-size:120px}
  .perdu-l{grid-template-columns:1fr}
}

/* ---------- La marque « Le triage » (validée le 16/10/2026, planche logo-triage.html) ----------
   Ses mots : « on part sur le triage en surligné, en serré. Et le bloc un peu arrondi, c'est validé » ; la signature : le logo du site
   Tempié (carré à grain, IT penché, nom en capitales), « Je veux pas le [par]. C'est bon, je valide ». Le « ia » de tr-ia-ge dans un bloc
   jaune arrondi, penché de 2 degrés ; « Le » en graisse normale, « triage » en graisse Black. */
.marque{gap:0}
.marque .lt{font-size:1.2em}
.lt{display:inline-flex;align-items:baseline;line-height:1;white-space:nowrap;--bloc:var(--jaune);--bloc-t:var(--encre)}
.lt .le{font:400 .6em/1 var(--titre);letter-spacing:-.01em;margin-right:.16em}
.lt .mot{font-family:var(--titre);font-weight:900;letter-spacing:-.02em;display:inline-flex;align-items:baseline}
.lt .ia{display:inline-block;position:relative;color:var(--bloc-t);padding:0 .07em;margin:0 .03em;isolation:isolate}
.lt .ia::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:.06em;bottom:-.1em;background:var(--bloc);border-radius:.12em;transform:rotate(-2deg);transition:transform .5s var(--rebond)}
.marque:hover .lt .ia::before{transform:rotate(-5deg)}
.side .lt,.mobile-haut .lt{--bloc-t:var(--cadre)}
.auth-v.couleur .lt{--bloc:var(--encre);--bloc-t:var(--jaune)}
[data-couleurs=trois] .auth-v.couleur .lt{--bloc:var(--jaune);--bloc-t:var(--cadre)}
/* Version signée, en grand seulement */
.marque.grand .lt-bloc{font-size:2.2rem}
.lt-bloc{display:inline-grid;justify-items:end;row-gap:.2em;line-height:1}
.lt-bloc .lt{font-size:1em}
.lt-sig{display:inline-flex;align-items:center;gap:.36em;font:400 max(.095em,10px)/1 var(--titre);margin-right:.02em;--sig-fond:var(--cadre);--sig-it:#fff}
.lt-sig .nom{font-weight:900;text-transform:uppercase;letter-spacing:0;white-space:nowrap}
.lt-sig .it{width:1.3em;height:1.3em;flex:none;position:relative;background-color:var(--sig-fond);background-image:var(--grain);background-size:90px 90px}
.lt-sig .it::after{content:"";position:absolute;inset:0;background:var(--sig-it);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2064%2064'%3E%3Cg%20fill%3D'%23000'%3E%3Cpath%20transform%3D'translate(13.29%2046.84)%20scale(0.03909%20-0.03909)'%20d%3D'M157%20740L397%20676L211%20-20L-29%2044Z'%2F%3E%3Cpath%20transform%3D'translate(26.00%2046.84)%20scale(0.03909%20-0.03909)'%20d%3D'M222%20520L82%20557L141%20779L661%20640L601%20418L462%20455L334%20-18L95%2046Z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2064%2064'%3E%3Cg%20fill%3D'%23000'%3E%3Cpath%20transform%3D'translate(13.29%2046.84)%20scale(0.03909%20-0.03909)'%20d%3D'M157%20740L397%20676L211%20-20L-29%2044Z'%2F%3E%3Cpath%20transform%3D'translate(26.00%2046.84)%20scale(0.03909%20-0.03909)'%20d%3D'M222%20520L82%20557L141%20779L661%20640L601%20418L462%20455L334%20-18L95%2046Z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/100% 100% no-repeat}
.auth-v .lt-sig{--sig-fond:#fff;--sig-it:var(--cadre)}
.auth-v .lt-sig .it{background-image:none}
.auth-v.couleur .lt-sig{--sig-fond:var(--encre);--sig-it:var(--jaune)}
/* L'icône : le bloc « ia » sur le bleu à grain (fenêtre « Pour continuer », icônes du site) */
.lt-pastille{display:inline-grid;place-items:center;width:58px;height:58px;border-radius:15px;background-color:var(--cadre);background-image:var(--grain);background-size:90px 90px}
.lt-pastille span{background:var(--jaune);color:var(--encre);font:400 1.4rem/1 var(--ultra);padding:.02em .12em .1em;border-radius:.12em;transform:rotate(-4deg);display:inline-block}