/* TafStand — feuille de style du site (index.html). v254 : sortie de index.html pour que le
navigateur la garde en cache entre les visites (le HTML, lui, est relu à chaque fois). Le nom
porte la version : à chaque nouvelle version, renommer le fichier ET le dans index.html
(voir NOTES-V255.md), sinon un navigateur pourrait garder l'ancienne feuille après une mise à jour.
v256d : style-v255.css → style-v256.css; v256f : → style-v257.css; v256g : → style-v258.css; v270 : → style-v270.css. */
/* v230 — lisibilité (une personne de 73 ans doit lire le site sans effort) : plus aucun
texte sous 13 px. Les étiquettes (11 à 11,5 px) passent à 13 px, les petites lignes
(12 à 13,5 px) à 13,5 et 14,5 px; ce qui faisait 14 px et plus ne bouge pas. */
:root{
--fond:#F4F1EA; --papier:#FCFAF4; --encre:#141311; --charbon:#1D1C19;
--jaune:#FFC53D; --jaune-f:#DFA00F; --jaune-pale:#FFF0C8;
--neige:#E7E1D4; --ligne:#D8D1C2; --ligne-forte:#141311; --marge:#5F5A50;
--c-aines:#C9B3D9;--c-cuisine:#F2C57C;--c-piscine:#9CD3E0;--c-toiture:#B8A99A;
--ombre-basse:2px 2px 0 var(--ligne-forte);
--ok:#2F7D46; --ok-pale:#DFF0E2; --attente:#8A5A00; --alerte:#B5341C; --etoile:#DFA00F;
--c-deneigement:#2563EB; --c-bacs:#0D9488; --c-pelouse:#16A34A; --c-prephiver:#4F46E5;
--c-feuilles:#EA580C; --c-desencombrement:#8B5CF6; --c-autre:#D6336C;
--c-peinture:#DC2626; --c-menuiserie:#92400E; --c-entretien:#0369A1;
--c-menage:#059669; --c-jardinage:#65A30D; --c-demenagement:#7C2D12;
--c-montage:#4F46E5; --c-nettoyage:#0891B2; --c-animaux:#DB2777;
--c-informatique:#475569; --c-couture:#BE185D; --c-livraison:#B45309; --c-outil:#0F766E;
--stencil:'Saira Stencil One',impact,sans-serif;
--display:'Bricolage Grotesque',system-ui,sans-serif;
--corps:'Public Sans','Helvetica Neue',system-ui,sans-serif;
--mono:'IBM Plex Mono',ui-monospace,monospace;
--hasard:repeating-linear-gradient(-45deg,var(--charbon) 0 14px,var(--jaune) 14px 28px);
--ombre:5px 5px 0 var(--ligne-forte);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--corps);background:var(--fond);color:var(--encre);line-height:1.5;font-size:16px;padding-bottom:70px}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font:inherit;color:inherit;width:100%}
:focus-visible{outline:3px solid var(--jaune-f);outline-offset:2px}
.env{max-width:600px;margin:0 auto;padding:0 16px}
#decor{position:fixed;inset:0;z-index:-1;pointer-events:none}
#decor svg{width:100%;height:100%;display:block}
#app{position:relative;z-index:1}
/* Entête charbon + bande hasard */
/* v272 — --sat : la hauteur de la barre d'état d'iOS quand le site est installé sur l'écran d'accueil
(0 dans Safari, sur Android et sur ordinateur). L'entête la porte en bordure haute (voir la fin du
fichier), donc --entete-h — la hauteur sur laquelle s'alignent les onglets collants, la colonne de
droite et la carte — la comprend. */
:root{--sat:env(safe-area-inset-top,0px);--entete-h:calc(66px + var(--sat))}
@media(min-width:760px){:root{--entete-h:calc(120px + var(--sat))}}
.entete{background:var(--charbon);color:#F4EFE4;position:sticky;top:0;z-index:50;padding:12px 0 16px}
.entete::after{content:"";position:absolute;left:0;right:0;bottom:0;height:7px;background:var(--hasard)}
.entete .env{display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{font-family:var(--stencil);font-weight:400;font-size:27px;letter-spacing:.04em;line-height:1;color:var(--jaune);text-transform:uppercase}
.logo span{color:#F4EFE4}
.lieu{font-size:13px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:#B8B0A0;margin-top:4px}
.moi{font-size:14px;text-align:right;line-height:1.35;color:#E4DDCE}
.moi button{text-decoration:underline;font-size:13px;color:#CFC7B4}
/* Onglets */
.onglets{background:var(--papier);position:sticky;top:var(--entete-h);z-index:40;padding:8px 0;border-bottom:1px solid var(--ligne)}
.onglets .env{display:flex;gap:8px;max-width:568px;align-items:center}
@media(min-width:760px){.onglets .env{max-width:none;padding:0 clamp(16px,4vw,80px);justify-content:center}}
.barre-action{display:flex;align-items:center;gap:8px;background:var(--papier);border:2px solid var(--ligne);border-radius:12px;padding:4px 16px;margin:0 0 24px}
.barre-loupe{font-size:20px;color:var(--marge);flex:none;line-height:1}
.barre-champ{flex:1;border:0;background:transparent;font-family:inherit;font-size:16px;color:var(--encre);padding:12px 0;outline:none;min-width:0}
.barre-champ::placeholder{color:var(--marge);opacity:1}
.acc-cat{text-align:left;margin-bottom:24px}
.glisse{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding:4px 16px 12px;margin:0 -16px;scrollbar-width:none}
.glisse::-webkit-scrollbar{display:none}
.glisse>.carte{flex:0 0 82%;width:auto;max-width:310px;scroll-snap-align:start;margin:0}
@media(min-width:560px){.glisse>.carte{flex:0 0 46%}}
.acc-tete{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:12px}
.acc-titre{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--marge)}
.acc-tout{font-size:14px;font-weight:800;color:var(--encre);text-decoration:underline;background:none;border:0;padding:0}
.acc-sep{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--marge);margin:0 0 20px}
.acc-sep::before,.acc-sep::after{content:"";flex:1;height:2px;background:var(--ligne)}
.voir-libre{margin:0 0 20px}
.invite-visiteur{background:var(--ok-pale);border:2px solid var(--ok);border-radius:8px;padding:12px;margin-bottom:16px;font-size:14.5px;color:var(--encre);text-align:left}
.bilan{background:transparent;border:0;border-left:4px solid var(--jaune);border-radius:0;padding:4px 0 4px 16px;margin:0 0 24px;text-align:left}
.bilan-tete{font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--marge);margin-bottom:12px}
.bilan-ligne{display:flex!important;flex-direction:column;align-items:flex-start;gap:4px;width:100%;flex:none!important;text-align:left!important;text-transform:none!important;letter-spacing:0!important;margin-bottom:8px;padding:8px 0!important;font-size:16px!important;color:var(--encre)!important;border:0!important;background:transparent!important;box-shadow:none!important}
.bilan-quoi{font-weight:800;font-size:16px}
.bilan-etat{font-weight:400;font-size:14.5px;color:var(--marge);line-height:1.35}
.bilan-etat strong{color:var(--encre);font-weight:800}
.bilan-cloche{margin:4px 0 0;font-size:15px}
.ong{flex:1;padding:12px 10px;font-size:14px;font-weight:800;letter-spacing:.03em;color:var(--marge);border:2px solid transparent;border-radius:12px;background:transparent;text-align:center}
@media(min-width:760px){.ong{flex:0 0 auto;min-width:160px}}
.ong[aria-selected="true"]{color:var(--encre);background:var(--jaune);border-color:var(--ligne-forte);box-shadow:var(--ombre)}
/* v156 — le nombre sous le libellé de l'onglet */
.ong-compte{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.ong-titre{display:inline}
.ong-nb{display:inline-block;min-width:24px;padding:1px 8px;border-radius:999px;font-size:14.5px;letter-spacing:0;background:var(--encre);color:var(--papier);line-height:1.5}
.ong[aria-selected="true"] .ong-nb{background:var(--encre);color:var(--jaune)}
.vue{display:none;padding-top:18px}
.vue.active{display:block;animation:apparait .2s ease}
/* v256f — l'entrée d'un écran ne joue plus sur l'opacité : vu sur le téléphone de LP, page ouverte depuis
un texto, l'animation restée figée sur sa première image (contenu délavé, entête et barre normales)
jusqu'au rechargement. Un petit glissement figé, lui, ne se voit pas. */
@keyframes apparait{from{transform:translateY(5px)}to{transform:none}}
h2.titre{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:.01em;margin-bottom:8px;position:relative;display:inline-block}
h2.titre::after{content:"";position:absolute;left:-3px;right:-8px;bottom:1px;height:9px;background:var(--jaune);z-index:-1;transform:skewX(-12deg)}
.sous{color:var(--marge);font-size:14.5px;margin-bottom:16px}
/* Accueil */
.accueil{padding:48px 0 20px;text-align:center;position:relative}
.accueil>*{position:relative;z-index:1}
.accueil .marque-img{display:block;width:min(150px,34vw);height:auto;margin:0 auto 4px}
.logo-img{display:block;height:56px;width:auto}
.picto{width:1em;height:1em;flex:none;color:currentColor}
.marque-bloc{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:4px}
.marque-bloc .picto{width:.78em;height:.78em;font-size:clamp(56px,16vw,76px);color:var(--encre)}
.marque-mots{display:flex;flex-direction:column;line-height:.82;text-align:left}
.m-taf,.m-stand{font-family:var(--stencil);font-weight:400;text-transform:uppercase;letter-spacing:.02em;display:block}
.m-taf{font-size:clamp(40px,11vw,54px);color:var(--encre);text-shadow:4px 4px 0 var(--jaune)}
.m-stand{font-size:clamp(28px,7.6vw,37px);color:var(--marge)}
.logo-bloc{display:flex;align-items:center;gap:8px}
.logo-bloc .picto{width:26px;height:26px;color:var(--jaune)}
.logo-mots{display:flex;flex-direction:column;line-height:.82;text-align:left;font-family:var(--stencil);font-weight:400;text-transform:uppercase;letter-spacing:.04em}
.logo-mots span:first-child{font-size:19px;color:var(--jaune)}
.logo-mots span:last-child{font-size:14.5px;color:var(--papier);opacity:.82}
.marque{font-family:var(--stencil);font-weight:400;font-size:clamp(56px,16vw,76px);letter-spacing:.02em;line-height:.95;text-transform:uppercase;display:inline-block;color:var(--encre);text-shadow:5px 5px 0 var(--jaune)}
.accueil .secteur{font-size:13.5px;letter-spacing:.34em;font-weight:800;color:var(--marge);margin-top:16px}
.accueil .bande{background:var(--charbon);position:relative;overflow:hidden;text-align:left;
width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);margin-bottom:32px;
padding:56px 16px 52px}
.bande-fond{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.28;filter:grayscale(.25)}
.bande::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--charbon) 0%,rgba(29,28,25,.86) 46%,rgba(29,28,25,.55) 100%)}
.bande::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;background:repeating-linear-gradient(135deg,var(--jaune) 0 12px,var(--charbon) 12px 24px)}
.bande-in{position:relative;z-index:1;max-width:600px;margin:0 auto;padding:0 4px}
.bande-logo{display:block;height:64px;width:auto;margin:0 0 20px}
.bande .accroche{color:#F7F4EC;margin:0 0 12px;max-width:none}
.bande .accroche em{font-style:normal;color:var(--jaune)}
.bande .accroche-sous{color:#B9B2A4;margin:0 0 20px;max-width:none}
.bande .barre-action{background:#FCFAF4;border-color:#FCFAF4;margin:0;box-shadow:0 6px 0 rgba(0,0,0,.25)}
.bascule{display:flex;gap:8px;margin:0 0 16px}
.bsc{flex:1;padding:12px 4px;font-size:14px;font-weight:800;letter-spacing:.05em;color:var(--marge);border:2px solid var(--ligne);border-radius:8px;background:var(--papier)}
.bsc.on{color:var(--encre);background:var(--jaune);border-color:var(--ligne-forte);box-shadow:var(--ombre)}
.carte-accueil{height:min(56vh,440px);border-radius:14px}
@media(min-width:760px){
.acc-carte-tete{max-width:900px;margin-left:auto;margin-right:auto}
.carte-accueil{width:min(100vw - 32px,900px);margin-left:calc(50% - min(50vw - 16px,450px));
margin-right:calc(50% - min(50vw - 16px,450px))}
.carte-note{max-width:900px;margin-left:auto;margin-right:auto}
}
.acc-carte-tete{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 12px}
.carte-jobs{height:340px;border:1px solid var(--ligne-forte);border-radius:12px;box-shadow:var(--ombre);margin:0 0 8px;background:var(--neige);z-index:1}
.carte-note{font-size:14.5px;color:var(--marge);margin:0 0 16px;text-align:left}
.carte-mot{display:flex;align-items:center;justify-content:center;height:100%;margin:0;padding:24px;
text-align:center;font-size:14.5px;color:var(--marge);line-height:1.5}
.pin-vide{background:none;border:0}
/* Sa propre annonce : reconnaissable d'un coup d'oeil sur la carte, sans
avoir a survoler. Fond encre, prix en jaune, et une etiquette au-dessus. */
.pin-mienne{background:var(--encre);color:var(--jaune);border-color:var(--encre)}
.pin-etq{display:block;margin:0 auto 3px;width:max-content;padding:1px 6px;
background:var(--encre);color:var(--jaune);border-radius:5px;
font-family:var(--corps);font-size:11.5px;font-weight:800;
letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
box-shadow:1px 1px 0 var(--ligne-forte)}
/* Le meme rappel dans l'infobulle et dans la fiche */
.tt-mienne,.pop-mienne{display:inline-block;margin-bottom:5px;padding:2px 7px;
background:var(--encre);color:var(--jaune);border-radius:5px;
font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
white-space:nowrap}
.pin{display:inline-flex;align-items:center;justify-content:center;min-width:50px;height:28px;padding:0 8px;background:var(--papier);border:2.5px solid var(--encre);border-radius:8px;font-family:var(--corps);font-size:14.5px;font-weight:800;color:var(--encre);box-shadow:2px 2px 0 var(--ligne-forte);white-space:nowrap}
.leaflet-popup-content-wrapper{border-radius:10px;border:1px solid var(--ligne-forte);box-shadow:var(--ombre)}
.leaflet-popup-content{margin:12px;min-width:190px;max-width:250px;max-height:300px;overflow-y:auto}
.pop{display:flex;flex-direction:column;gap:4px;text-align:left}
.pop-cat{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.pop-titre{font-size:16px;color:var(--encre)}
.pop-prix{font-size:19px;font-weight:800;color:var(--encre)}
.pop-lieu,.pop-cote{font-size:14.5px;color:var(--marge)}
.pop-desc{font-size:14px;color:var(--encre);line-height:1.4}
.pop-livs{margin:4px 0 0;padding:0 0 0 16px;font-size:14.5px;color:var(--encre);line-height:1.45}
.pop-livs li{margin-bottom:2px}
.pop-plus{color:var(--marge);list-style:none;margin-left:-16px}
.pop-et{color:var(--etoile)}
.pop-bt{margin-top:8px;padding:8px 12px;background:var(--jaune);border:1px solid var(--ligne-forte);border-radius:8px;font-weight:800;font-size:14px;color:var(--encre);width:100%}
.bloc-terminee{border:2px solid #2E7D4F;background:#EEF7F1} /* v221 */
.grille-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 28px;text-align:center}
@media(min-width:520px){.grille-cats{grid-template-columns:repeat(3,1fr)}}
.tuile-cat{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 4px;background:transparent;border:0;border-radius:12px;color:var(--encre)}
.tuile-cat:active{background:var(--neige)}
.tuile-ico{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:16px;color:var(--encre)}
.tuile-ico-plus{background:var(--neige);font-size:26px;font-weight:800;color:var(--marge)}
.ico{width:27px;height:27px}
.tuile-nom{font-size:13.5px;font-weight:700;line-height:1.2;color:var(--marge)}
.accroche{font-family:var(--display);font-size:clamp(30px,8.2vw,42px);line-height:1.08;font-weight:800;letter-spacing:-.015em;margin:20px auto 12px;max-width:460px;color:var(--encre)}
.accroche-sous{font-size:16.5px;line-height:1.45;color:var(--marge);max-width:400px;margin:0 auto 24px}
.accueil .detail{color:var(--marge);font-size:15px;max-width:430px;margin:0 auto 32px}
.choix{background:var(--papier);border:1px solid var(--ligne-forte);border-radius:8px;padding:24px 20px;text-align:left;width:100%;margin-bottom:16px;box-shadow:var(--ombre);transition:transform .1s,box-shadow .1s;position:relative;overflow:hidden}
.choix::after{font-family:var(--stencil);font-size:96px;line-height:1;color:var(--encre);opacity:.07;position:absolute;right:6px;bottom:-14px;pointer-events:none}
.choix:nth-of-type(1)::after{content:"01"}
.choix:nth-of-type(2)::after{content:"02"}
.choix:hover{transform:translate(-1px,-1px);box-shadow:var(--ombre)}
.choix:active{transform:translate(4px,4px);box-shadow:var(--ombre-basse)}
.choix .ctexte{display:block;position:relative;z-index:1}
.choix .quoi{display:block;font-family:var(--display);font-size:19px;font-weight:800;letter-spacing:.01em;margin-bottom:8px}
.choix .pourquoi{display:block;color:var(--marge);font-size:14.5px}
.choix .cout{display:inline-block;background:transparent;border:2px solid var(--jaune-f);color:#7A5600;font-family:var(--mono);font-size:13.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-top:12px;padding:4px 12px;border-radius:4px;transform:rotate(-1.5deg)}
/* Cartes de jobs */
.carte{background:var(--papier);border:1px solid var(--ligne-forte);border-radius:8px;margin-bottom:12px;display:flex;overflow:hidden;width:100%;text-align:left;box-shadow:var(--ombre);transition:transform .1s,box-shadow .1s}
.carte:hover{transform:translate(-1px,-1px);box-shadow:var(--ombre)}
.carte:active{transform:translate(4px,4px);box-shadow:var(--ombre-basse)}
.dos{width:11px;flex:none}
.corps{padding:12px 16px;flex:1;min-width:0}
.cat{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px}
.tete{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.nom{font-weight:700;font-size:16.5px;line-height:1.25}
.prix{font-family:var(--mono);font-weight:700;font-size:18px;white-space:nowrap;font-variant-numeric:tabular-nums}
.meta{color:var(--marge);font-size:14.5px;margin-top:4px;display:flex;flex-wrap:wrap;gap:4px 10px}
.etq{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:4px;margin-top:8px;transform:rotate(-1.5deg);background:transparent;border:2px solid var(--marge);color:var(--marge)}
.e-ouvert{border-color:var(--jaune-f);color:#7A5600;background:var(--jaune-pale)}
.e-attente{border-color:#C98F1E;color:var(--attente)}
/* Sa propre annonce dans la liste : reconnaissable d'un coup d'oeil,
sans crier plus fort que les jobs sur lesquelles on peut postuler. */
.e-mienne{border-color:var(--encre);color:var(--encre);background:var(--neige)}
.e-pris{border-color:var(--ok);color:var(--ok);background:var(--ok-pale)}
/* Filtres */
.puces{display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;margin-bottom:4px;-webkit-overflow-scrolling:touch}
.geo-ligne{display:flex;gap:8px;align-items:center;margin-bottom:12px}
.sel-rayon{width:auto;padding:8px 12px;border:1px solid var(--ligne-forte);border-radius:8px;background:var(--papier);font-size:14.5px;font-weight:800}
.note-geo{background:var(--jaune-pale);border:2px solid var(--jaune-f);border-radius:8px;padding:12px;font-size:14.5px;margin-bottom:12px}
.pub-carte{display:block;background:var(--neige);border:2px dashed var(--marge);border-radius:8px;padding:12px 16px;margin-bottom:12px;cursor:pointer}
.pub-carte:hover{border-color:var(--ligne-forte)}
.pub-etq{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--marge);border:1.5px solid var(--marge);border-radius:4px;padding:2px 8px;margin-bottom:8px}
.pub-nom{display:block;font-weight:800;font-size:15.5px}
.pub-texte{display:block;font-size:14.5px;color:var(--marge);margin-top:2px}
.soc-ligne{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:8px 0 12px}
/* v223 — le menu « Partager » sur ordinateur */
.partage-ancre{position:relative;float:right}
.partage-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:min(320px,90vw);background:var(--papier);border:1px solid var(--ligne-forte);border-radius:14px;padding:14px;box-shadow:0 14px 40px rgba(20,19,17,.18);text-align:left}
.partage-menu strong{display:block;font-family:var(--display);font-size:17px;margin-bottom:6px}
.partage-menu .aide{margin:6px 0 0}
.soc-en-liste{flex-direction:column;align-items:stretch;gap:6px;margin:4px 0 0}
.soc-en-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;justify-content:stretch;margin:4px 0 0}
@media(min-width:760px){.soc-en-grille{grid-template-columns:repeat(3,minmax(0,1fr))}}
.soc{width:46px;height:46px;border:1px solid var(--ligne-forte);border-radius:8px;background:var(--papier);display:flex;align-items:center;justify-content:center;transition:transform .1s,box-shadow .1s}
.soc svg{width:23px;height:23px;flex:none}
/* v235 (audit, bogue 5) — ces deux règles passaient AVANT .soc, qui reprenait
46 × 46 px : dans « Faire circuler ma job », les mots débordaient de petites
cases. Elles viennent après, et pèsent plus lourd (.soc.soc-liste). */
.soc.soc-liste{width:auto;height:auto;min-height:46px;justify-content:flex-start;gap:12px;padding:9px 12px;font:inherit;font-size:15px;font-weight:700;color:var(--encre);white-space:nowrap}
.soc.soc-liste:hover{background:var(--jaune-pale)}
.soc-en-grille .soc.soc-liste{white-space:normal;text-align:left;line-height:1.2}
.soc:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ligne-forte)}
#demo{display:none;position:fixed;inset:0;z-index:200;background:rgba(20,19,17,.7);align-items:center;justify-content:center;padding:20px}
.demo-boite{position:relative;background:var(--fond);border:1px solid var(--ligne-forte);border-radius:12px;box-shadow:var(--ombre);max-width:430px;width:100%;padding:24px 20px 16px}
.demo-x{position:absolute;top:8px;right:10px;font-size:19px;font-weight:800;padding:8px}
.demo-titre{font-family:var(--display);font-size:16px;font-weight:800;text-align:center;margin-bottom:16px}
.demo-zone{min-height:190px;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center}
.demo-points{display:flex;gap:8px;justify-content:center;margin:16px 0 12px}
.demo-pt{width:9px;height:9px;border-radius:50%;background:var(--ligne);border:1.5px solid var(--ligne-forte)}
.demo-pt.on{background:var(--jaune)}
.demo-nav{display:flex;gap:12px;justify-content:center}
.d-pop{animation:dpop .45s cubic-bezier(.2,1.4,.4,1) both}
.d-pop2{animation:dpop .45s .45s cubic-bezier(.2,1.4,.4,1) both}
.d-pop3{animation:dpop .45s .9s cubic-bezier(.2,1.4,.4,1) both}
@keyframes dpop{from{opacity:0;transform:scale(.6) translateY(14px)}to{opacity:1;transform:none}}
.d-carte{position:relative;background:var(--papier);border:1px solid var(--ligne-forte);border-radius:8px;box-shadow:var(--ombre);padding:16px;width:100%;max-width:320px}
.d-cat{font-size:13px;font-weight:800;letter-spacing:.12em}
.d-tete{display:flex;justify-content:space-between;align-items:baseline;margin-top:4px}
.d-prix{font-family:var(--mono);font-weight:700}
.d-meta{display:block;font-size:14px;color:var(--marge);margin-top:4px}
.d-etamp{position:absolute;top:-10px;right:-8px;background:var(--jaune);border:1px solid var(--ligne-forte);border-radius:4px;font-size:12.5px;font-weight:800;text-transform:uppercase;padding:4px 8px;transform:rotate(4deg)}
.d-mini{background:var(--papier);border:1px solid var(--ligne-forte);border-radius:8px;padding:12px;width:100%;max-width:300px;font-weight:800;display:flex;justify-content:space-between;align-items:center;gap:8px}
.d-et{font-size:14.5px;color:var(--etoile);font-weight:700}
.d-choisi{border-color:var(--ok);background:var(--ok-pale)}
.d-check{color:var(--ok);font-weight:800;font-size:14.5px}
.d-verrou{font-size:40px;animation:dpop .45s both, dsecoue .5s .8s}
@keyframes dsecoue{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg)}75%{transform:rotate(12deg)}}
.d-coord{font-family:var(--mono);font-size:14.5px;background:var(--ok-pale);border:2px solid var(--ok);border-radius:8px;padding:12px 16px;text-align:center}
.d-etoiles{display:flex;gap:8px;font-size:36px;color:var(--etoile)}
.d-etoiles span{animation:dpop .3s both}
.d-etoiles span:nth-child(2){animation-delay:.15s}.d-etoiles span:nth-child(3){animation-delay:.3s}
.d-etoiles span:nth-child(4){animation-delay:.45s}.d-etoiles span:nth-child(5){animation-delay:.6s}
.puce{flex:none;padding:8px 12px;font-size:14.5px;font-weight:800;letter-spacing:.06em;border:2px solid var(--ligne);border-radius:8px;background:var(--papier);color:var(--marge)}
.puce.on{background:var(--charbon);color:var(--jaune);border-color:var(--ligne-forte)}
/* Blocs */
.retour{font-size:14px;font-weight:800;letter-spacing:.05em;color:var(--encre);margin-bottom:12px;display:inline-block;border-bottom:3px solid var(--jaune);padding-bottom:1px}
.bloc{background:var(--papier);border:2px solid var(--ligne);border-radius:8px;padding:16px;margin-bottom:12px}
.bloc h3{font-family:var(--display);font-size:13.5px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--marge);margin-bottom:12px}
.masque{background:var(--neige);border:2px dashed #B7AE99;border-radius:8px;padding:16px;text-align:center;color:var(--marge);font-size:14px}
.masque strong{display:block;color:var(--encre);margin-bottom:4px;text-transform:uppercase;font-size:13.5px;letter-spacing:.06em}
.avis-clore{border-color:var(--attente)}
.apercu-pub{font-size:14px;color:var(--marge);line-height:1.45;margin:-8px 0 16px;min-height:1px}
.apercu-pub b{color:var(--encre)}
.photos-zone{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.photo-vign{position:relative;width:96px;height:96px;border:1px solid var(--ligne-forte);border-radius:8px;overflow:hidden;background:var(--neige)}
.photo-vign img{width:100%;height:100%;object-fit:cover;display:block}
.photo-x{position:absolute;top:4px;right:4px;width:26px;height:26px;border:1px solid var(--ligne-forte);border-radius:50%;background:var(--papier);font-size:16px;font-weight:800;line-height:1;color:var(--encre);padding:0}
.galerie{display:flex;gap:8px;margin:12px 0}
.galerie-vue{flex:1;max-width:50%;border:1px solid var(--ligne-forte);border-radius:8px;overflow:hidden;box-shadow:var(--ombre);display:block}
.galerie-vue img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover}
.lien-signal{display:block;margin:16px auto 0;font-size:14.5px;color:var(--marge);text-decoration:underline;background:none;border:0;padding:8px}
.raisons{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.raison-bt{text-align:left;font-size:15px;text-transform:none;letter-spacing:0;padding:12px 16px}
.avis{background:var(--jaune-pale);border:1px solid var(--ligne-forte);border-left:12px solid transparent;border-image:var(--hasard) 2 2 2 12;border-radius:0 10px 10px 0;padding:16px;margin-bottom:12px;font-size:14.5px;line-height:1.5}
.avis strong{display:block;font-family:var(--display);font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:#6B4B00;margin-bottom:4px}
.avis .gros{font-family:var(--mono);font-size:23px;font-weight:700;display:block;margin:4px 0}
.avis .dest{font-family:var(--mono);font-size:14px;font-weight:400;word-break:break-all}
.coord{font-family:var(--mono);font-size:16px;font-weight:400;background:var(--ok-pale);border:2px solid var(--ok);border-radius:8px;padding:12px;margin-top:8px}
.liv{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid var(--ligne);font-size:15px}
.liv:last-child{border-bottom:none}
.liv::before{content:"■";color:var(--jaune-f);flex:none;font-size:13px;line-height:1.9}
/* Fiches */
.etq-retrait{display:inline-block;margin-top:8px;font-size:13.5px;font-weight:800;color:var(--attente);background:#FBEFD6;border:1.5px solid var(--attente);border-radius:4px;padding:4px 8px}
.cand{background:var(--papier);border:2px solid var(--ligne);border-radius:8px;padding:12px 16px;margin-bottom:12px}
.cand-tete{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:4px}
.cand-nom{font-weight:800;font-size:16px}
.mini-etoiles{color:var(--etoile);font-size:14.5px;font-weight:700;white-space:nowrap}
.cand-msg{font-size:14.5px;color:var(--marge);margin:8px 0 12px}
.neuf{display:inline-block;border:2px solid var(--ligne);color:var(--marge);font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:4px}
/* Formulaire */
.champ{margin-bottom:16px}
.champ label{display:block;font-size:13.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;margin-bottom:8px}
.champ .aide{font-weight:400;color:var(--marge);font-size:15px;display:block;margin-top:4px;text-transform:none;letter-spacing:0}
.champ input,.champ select,.champ textarea{padding:12px;border:2px solid var(--ligne);border-radius:8px;background:var(--papier);font-size:16px;}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--jaune-f);box-shadow:inset 3px 3px 0 rgba(20,19,17,.06),0 0 0 3px var(--jaune-pale);outline:none}
.champ textarea{resize:vertical;min-height:74px}
.duo{display:flex;gap:12px}
.duo .champ{flex:1}
.lig{display:flex;gap:8px;margin-bottom:8px}
.lig input{flex:1}
.moins{width:44px;flex:none;border:1px solid var(--ligne-forte);border-radius:8px;color:var(--marge);font-size:20px;background:var(--papier)}
.plus{font-size:14.5px;font-weight:800;letter-spacing:.04em;color:var(--encre);padding:8px 0;border-bottom:3px solid var(--jaune);display:inline-block}
.auto-boite{position:relative}
.suggestions{position:absolute;left:0;right:0;top:100%;margin-top:4px;background:var(--papier);border:2px solid var(--ligne);border-radius:8px;z-index:60;max-height:230px;overflow:auto}
.suggestions button{display:block;width:100%;text-align:left;padding:12px;font-size:15px;border-bottom:1px solid var(--ligne)}
.suggestions button:last-child{border-bottom:none}
.suggestions button:active{background:var(--jaune-pale)}
.sugg-cp{float:right;font-family:var(--mono);font-size:14.5px;color:var(--marge);border:1.5px solid var(--ligne);border-radius:4px;padding:2px 8px;margin-left:8px}
.etoiles{display:flex;gap:8px;font-size:34px;line-height:1;margin:4px 0}
.et{color:#CFC7B4;padding:2px}
.et.on{color:var(--etoile)}
.bt{display:block;width:100%;background:var(--jaune);color:var(--encre);padding:16px;border:1px solid var(--ligne-forte);border-radius:8px;font-weight:800;font-size:15px;letter-spacing:.05em;text-align:center;box-shadow:var(--ombre);transition:transform .1s,box-shadow .1s,background .15s}
.bt:hover{background:var(--jaune-f)}
.bt:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ligne-forte)}
.bt.pale{background:var(--papier)}
.bt.pale:hover{background:var(--neige)}
.bt.vert{background:var(--ok);color:#fff}
.bt.vert:hover{background:#256B3A}
.bt+.bt{margin-top:12px}
.bt.mini{display:inline-block;width:auto;padding:12px 16px;font-size:14px}
.vide-bt{margin-top:16px;max-width:280px}
.sugg-cats{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.sugg-cat{display:flex;align-items:center;gap:8px;padding:8px 12px 8px 8px;background:var(--papier);border:2px solid var(--ligne);border-radius:20px;font-size:14px;font-weight:700;color:var(--encre)}
.sugg-cat:active{background:var(--neige)}
.sugg-pastille{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;color:var(--encre)}
.sugg-pastille .ico{width:17px;height:17px}
.vide{text-align:center;padding:40px 20px;color:var(--marge)}
.vide strong{display:block;color:var(--encre);font-size:16px;letter-spacing:.04em;margin-bottom:8px;font-family:var(--display)}
.joe img,.joe svg{display:block;width:100%;height:auto;filter:drop-shadow(5px 5px 0 var(--ligne-forte))}
.bulle{position:relative;flex:1;background:transparent;border:0;border-radius:0;padding:12px 16px;font-size:14.5px;line-height:1.45;box-shadow:var(--ombre);margin-bottom:20px}
.bulle strong{font-family:var(--display);font-size:18px;letter-spacing:-.01em}
.bulle::after,.bulle::before{display:none}
.pied{padding:16px;font-size:14px;color:var(--marge);line-height:1.5;background:rgba(252,250,244,.92);border:2px solid var(--ligne);border-radius:8px;margin-top:16px}
.chargement{text-align:center;padding:40px;color:var(--marge)}
.lien-legal{display:inline;font-size:inherit;font-weight:700;color:var(--encre);text-decoration:underline;text-decoration-color:var(--jaune-f);text-underline-offset:2px;padding:0;text-transform:none;letter-spacing:0}
.cgu-ligne{display:flex;gap:12px;align-items:flex-start;font-size:14px;margin:4px 0 16px;line-height:1.45}
.cgu-ligne input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--jaune-f)}
#avis-stockage{position:fixed;left:12px;right:12px;bottom:12px;z-index:100;background:var(--charbon);color:#F4EFE4;border:1px solid var(--ligne-forte);border-radius:8px;box-shadow:var(--ombre);padding:16px;display:flex;gap:12px;align-items:center;max-width:576px;margin:0 auto}
#avis-stockage[hidden]{display:none}
#avis-stockage p{font-size:14.5px;line-height:1.45;flex:1}
#avis-stockage .lien-legal{color:var(--jaune);text-decoration-color:var(--jaune)}
#avis-stockage .bt.mini{flex:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* ===== Refonte accueil v61 (maquette) ===== */
:root{
--doux-ligne:#E8E3D8; --doux-fond:#FFFFFF;
--doux-ombre:0 1px 2px rgba(20,19,17,.05),0 10px 28px rgba(20,19,17,.07);
--rayon-doux:16px;
}
.bande{padding-bottom:56px}
.bande-pastille{display:inline-block;background:var(--jaune);color:var(--encre);
font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
padding:7px 14px;border-radius:999px;margin:0 0 16px}
/* Barre de recherche flottante, chevauchant le bas de la bande */
.barre-flottante{position:relative;z-index:3;margin:-34px 0 32px}
.barre-flottante .barre-action{background:var(--doux-fond);border:1px solid var(--doux-ligne);
border-radius:var(--rayon-doux);box-shadow:var(--doux-ombre);padding:8px 8px 8px 18px;margin:0;gap:12px}
.barre-bt{flex:none;background:var(--jaune);color:var(--encre);font-weight:800;font-size:15px;
padding:13px 22px;border-radius:12px;white-space:nowrap}
.barre-bt:hover{background:var(--jaune-f)}
@media(max-width:479px){
.barre-flottante .barre-action{flex-wrap:wrap;padding:12px}
.barre-flottante .barre-champ{flex:1 1 auto}
.barre-bt{flex:1 1 100%;text-align:center}
}
/* En-tete de section, style maquette */
.sec-tete{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 16px}
.sec-titre{font-family:var(--display);font-size:22px;font-weight:800;letter-spacing:-.01em;color:var(--encre)}
/* Quatre grandes cartes de categorie */
.grille-cats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:0 0 32px;text-align:left}
@media(min-width:700px){.grille-cats{grid-template-columns:repeat(4,1fr)}}
.grille-cats .tuile-cat{align-items:flex-start;gap:22px;padding:18px 16px;background:var(--doux-fond);
border:1px solid var(--doux-ligne);border-radius:var(--rayon-doux);box-shadow:var(--doux-ombre);
transition:transform .12s ease,box-shadow .12s ease}
.grille-cats .tuile-cat:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(20,19,17,.06),0 14px 32px rgba(20,19,17,.10)}
.grille-cats .tuile-cat:active{transform:translateY(0)}
.grille-cats .tuile-ico{width:42px;height:42px;border-radius:12px}
.grille-cats .tuile-nom{font-size:15px;font-weight:700;color:var(--encre)}
/* Carte avec etiquette flottante */
.carte-enveloppe{position:relative}
.carte-etiquette{position:absolute;top:20px;left:20px;z-index:2;max-width:250px;pointer-events:none;
background:var(--doux-fond);border:1px solid var(--doux-ligne);border-radius:14px;
box-shadow:var(--doux-ombre);padding:16px 18px;text-align:left}
.carte-etiquette strong{display:block;font-family:var(--display);font-size:19px;line-height:1.15;margin-bottom:6px}
.carte-etiquette span{display:block;font-size:14.5px;line-height:1.4;color:var(--marge)}
@media(max-width:479px){.carte-etiquette{top:12px;left:12px;max-width:200px;padding:12px 14px}
.carte-etiquette strong{font-size:16px}}
/* Annonces en grille, photo en haut */
.grille-annonces{display:grid;grid-template-columns:1fr;gap:16px;margin:0 0 20px}
@media(min-width:620px){.grille-annonces{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.grille-annonces{grid-template-columns:repeat(3,1fr)}}
.annonce{display:flex;flex-direction:column;text-align:left;background:var(--doux-fond);
border:1px solid var(--doux-ligne);border-radius:var(--rayon-doux);box-shadow:var(--doux-ombre);
overflow:hidden;width:100%;transition:transform .12s ease,box-shadow .12s ease}
.annonce:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(20,19,17,.06),0 14px 32px rgba(20,19,17,.10)}
.annonce-photo{display:flex;align-items:center;justify-content:center;height:150px;
background:var(--neige) center/cover no-repeat;flex:none}
.annonce-ico .ico{width:40px;height:40px;opacity:.55}
.annonce-corps{display:flex;flex-direction:column;gap:8px;padding:16px}
.annonce-tete{display:flex;align-items:center;justify-content:space-between;gap:8px}
.annonce-chip{background:var(--fond);border-radius:999px;padding:5px 11px;font-size:13px;
font-weight:700;color:var(--marge);line-height:1.2}
.annonce-prix{font-weight:800;font-size:16px;white-space:nowrap}
.annonce-nom{font-weight:700;font-size:16px;line-height:1.3;color:var(--encre)}
.annonce-meta{font-size:14.5px;color:var(--marge)}
.annonce-cta{display:block;margin-top:4px;text-align:center;border:1px solid var(--doux-ligne);
border-radius:10px;padding:11px;font-weight:700;font-size:14.5px}
.annonce:hover .annonce-cta{background:var(--fond)}
/* ===== Bande double role v62 ===== */
.bande-roles{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
background:var(--doux-fond);border:1px solid var(--doux-ligne);border-radius:var(--rayon-doux);
box-shadow:var(--doux-ombre);padding:26px 28px;margin:0 0 28px;text-align:left}
.bande-roles-txt{flex:1 1 260px}
.bande-roles-txt strong{display:block;font-family:var(--display);font-size:24px;font-weight:800;
letter-spacing:-.01em;line-height:1.15;margin-bottom:6px}
.bande-roles-txt span{display:block;font-size:14.5px;color:var(--marge);line-height:1.45}
.bande-roles-bts{display:flex;gap:12px;flex-wrap:wrap;flex:none}
.bt-role{font-weight:700;font-size:15px;padding:14px 22px;border-radius:12px;white-space:nowrap;
border:1px solid var(--doux-ligne);background:var(--doux-fond);color:var(--encre)}
.bt-role.plein{background:var(--jaune);border-color:var(--jaune)}
.bt-role.plein:hover{background:var(--jaune-f)}
.bt-role:not(.plein):hover{background:var(--fond)}
@media(max-width:559px){.bande-roles{padding:22px 20px}.bande-roles-bts{width:100%}.bt-role{flex:1 1 100%;text-align:center}}
/* ===== Hero pleine page v64 ===== */
.bande::after{display:none}
.bande{padding-top:64px;padding-bottom:72px}
.bande-fond{position:absolute;inset:0;background-size:cover;background-position:center;
background-attachment:fixed;filter:none;opacity:0;transition:opacity 1.4s ease}
.bande-fond.on{opacity:.45}
@media(hover:none){.bande-fond{background-attachment:scroll}}
.bande::before{background:linear-gradient(90deg,rgba(20,19,17,.92) 0%,rgba(20,19,17,.78) 52%,rgba(20,19,17,.48) 100%)}
.bande .accroche{font-size:clamp(38px,8.6vw,92px);line-height:1.02;letter-spacing:-.025em;margin:0 0 16px}
.bande .accroche-sous{font-size:clamp(16px,2vw,19px);max-width:520px}
.bande-in{max-width:820px}
/* La carte des jobs en bandeau pleine largeur d'ecran */
.carte-enveloppe{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);margin-bottom:20px}
.carte-accueil{width:100%;margin-left:0;margin-right:0;height:min(62vh,540px);
border-radius:0;border-left-width:0;border-right-width:0}
/* ===== Vraie page couverture v65 ===== */
.entete::after{display:none}
.bande{min-height:100vh;min-height:100svh;display:flex;align-items:center;
padding-top:40px;padding-bottom:120px}
.bande-in{width:100%}
.bande .accroche{font-size:clamp(44px,10vw,116px)}
/* Fleche d'invitation a defiler, au bas de la couverture */
.couv-fleche{position:absolute;left:0;right:0;bottom:26px;z-index:2;text-align:center;
color:#F7F4EC;font-size:14.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
opacity:.75;pointer-events:none}
.couv-fleche span{display:block;font-size:26px;line-height:1;margin-top:6px;
animation:couvBas 2.2s ease-in-out infinite}
@keyframes couvBas{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@media(max-height:560px){.bande{min-height:0;padding-top:56px;padding-bottom:72px}
.couv-fleche{display:none}}
/* ===== Fondu de la photo vers le noir v66 ===== */
/* La photo se dissout dans le fond : franche a droite et au centre,
effacee vers la gauche (ou est le texte) et vers le bas. */
.bande-fond{
-webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 58%, transparent 97%);
mask-image:linear-gradient(to bottom, #000 0%, #000 58%, transparent 97%);
}
.bande-fond.on{opacity:1}
/* Voile leger : l'image porte deja son propre fondu vers la gauche */
.bande::before{background:linear-gradient(90deg,rgba(20,19,17,.88) 0%,rgba(20,19,17,.42) 44%,rgba(20,19,17,0) 76%)}
/* ===== Controle de rayon sur la carte v69 ===== */
.carte-rayon{position:absolute;top:20px;right:20px;z-index:3;display:flex;align-items:center;
gap:10px;flex-wrap:wrap;background:var(--doux-fond);border:1px solid var(--doux-ligne);
border-radius:999px;box-shadow:var(--doux-ombre);padding:9px 14px}
.rayon-tete{font-size:14.5px;font-weight:800;color:var(--encre);white-space:nowrap}
.rayon-sel{font-family:inherit;font-size:14px;font-weight:800;color:var(--encre);
background:var(--jaune);border:0;border-radius:999px;padding:7px 12px;cursor:pointer}
.rayon-n{font-size:13.5px;color:var(--marge);white-space:nowrap}
.rayon-bt{font-size:14px;font-weight:800;color:var(--encre);background:var(--jaune);
border:0;border-radius:999px;padding:10px 16px;white-space:nowrap}
.rayon-bt:hover{background:var(--jaune-f)}
@media(max-width:700px){
.carte-rayon{top:auto;bottom:16px;right:12px;left:12px;justify-content:center;
border-radius:14px;padding:10px 12px}
.rayon-tete{display:none}
}
/* ===== Infobulle des epingles v70 ===== */
.leaflet-tooltip.tt-job{background:var(--doux-fond);border:1px solid var(--doux-ligne);
border-radius:14px;box-shadow:var(--doux-ombre);padding:12px 14px;
min-width:190px;max-width:260px;
white-space:normal;text-align:left;font-family:inherit;color:var(--encre)}
.leaflet-tooltip.tt-job::before{border-top-color:var(--doux-ligne)}
.tt-job .tt-cat{display:block;font-size:13px;font-weight:800;letter-spacing:.06em;
text-transform:uppercase;margin-bottom:4px}
.tt-job .tt-titre{display:block;font-size:15px;font-weight:700;line-height:1.25;margin-bottom:5px}
.tt-job .tt-desc{display:block;font-size:14.5px;line-height:1.4;color:var(--marge);margin-bottom:6px}
.tt-job .tt-pied{display:block;font-size:13.5px;font-weight:700;color:var(--encre)}
/* ===== Signature visuelle unifiee v72 =====
On redefinit les jetons de base : tout le site bascule d'un coup,
au lieu de patcher une centaine de regles une par une. */
:root{
--ligne-forte:#E4DED2;
--ligne:#E8E3D8;
--ombre:0 1px 2px rgba(20,19,17,.05),0 10px 28px rgba(20,19,17,.07);
--ombre-basse:0 1px 2px rgba(20,19,17,.06);
--display:'Fraunces','Iowan Old Style',Georgia,serif;
}
/* Le serif respire mieux avec un interlignage un peu plus serre */
h1,h2,h3,.sec-titre,.accroche{font-family:var(--display);letter-spacing:-.015em}
.sec-titre,h2.titre{font-weight:700}
/* Coins plus generereux sur les surfaces principales */
.bloc,.carte,.choix,.annonce,.tuile-cat,.modale-in,.champ input,.champ select,
.champ textarea,.vide,.avis,.masque,.bulle{border-radius:14px}
.bt,.puce,.ong,.plus,.retour,.bsc{border-radius:12px}
/* Les boutons perdent leur ombre decalee */
.bt,.choix,.puce,.ong,.plus,.bsc{box-shadow:none}
.bt:hover,.puce:hover,.ong:hover{box-shadow:var(--ombre-basse)}
/* Le ruban de chantier ne sert plus nulle part */
.entete::after,.bande::after{display:none}
/* ===== Sortie vers l'accueil v73 ===== */
.onglets .env{position:relative}
.ong-accueil{position:static;transform:none;flex:none;font-size:18px;font-weight:700;
color:var(--marge);padding:8px 14px;border-radius:12px;white-space:nowrap;
border:1px solid var(--doux-ligne);background:var(--doux-fond);margin-right:8px;
align-self:stretch;display:flex;align-items:center}
/* v233 : le mot « Accueil » est dans le bouton (traduisible), plus en CSS; sur téléphone,
la rangée pleine largeur disait seulement « ← » : on lit maintenant « ← Accueil », centré. */
.ong-accueil .oa-txt{font-size:14px;margin-left:6px}
@media(max-width:640px){.ong-accueil{margin-right:6px;padding:6px 12px;justify-content:center}}
.ong-accueil:hover{color:var(--encre);background:rgba(20,19,17,.05)}
#btn-accueil{cursor:pointer;border-radius:10px;padding:2px 6px;margin-left:-6px;
transition:background .12s ease}
#btn-accueil:hover{background:rgba(255,255,255,.09)}
@media(max-width:640px){
.ong-accueil{position:static;transform:none;order:-1;flex:1 1 100%;text-align:center;
margin-bottom:6px}
.onglets .env{flex-wrap:wrap}
}
/* ===== Bandeau du haut v74 ===== */
/* v183 — le bandeau noir respire : plus haut, logo plus grand, textes plus grands sur ordinateur */
.entete{padding:16px 0}
/* v187 — sur ordinateur, le bandeau prend toute la largeur : logo à gauche, modes au centre, nom à droite; plus haut, plus gros */
@media(min-width:760px){.entete{padding:24px 0 26px}.entete .env{max-width:none;padding:0 clamp(16px,4vw,80px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;position:relative}.entete .marque-bt{justify-self:start}header.entete .env>.entete-droite{display:contents!important}header.entete .entete-droite .modes{justify-self:center}header.entete .entete-droite .moi-bt{justify-self:end}.entete .profil-menu{right:clamp(16px,4vw,80px);top:calc(100% - 10px)}.logo-img{height:70px!important}.lieu{font-size:14.5px;margin-top:6px;letter-spacing:.26em}.mode{font-size:18px;padding:12px 20px 14px}.mode-ico{width:26px;height:26px}.moi-bt{font-size:16.5px}.mode-etat{font-size:14px;padding:4px 16px}}
.entete .env{align-items:center}
.marque-bt{text-align:left;display:block;border-radius:10px;padding:4px 8px;margin-left:-8px}
.marque-bt:hover{background:rgba(255,255,255,.09)}
.logo-img{height:46px;width:auto;display:block}
.entete-droite{position:relative;display:flex;align-items:center;gap:12px}
.bascule{display:flex;background:rgba(255,255,255,.10);border-radius:999px;padding:3px}
.basc{font-size:14.5px;font-weight:700;color:#CFC8B8;padding:8px 14px;border-radius:999px;white-space:nowrap}
.basc:hover{color:#F4EFE4}
.basc.on{background:var(--jaune);color:var(--encre)}
.moi-bt{font-size:14px;font-weight:700;color:#F4EFE4;padding:8px 12px;border-radius:10px;white-space:nowrap}
.moi-bt:hover{background:rgba(255,255,255,.10)}
.profil-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:60;width:270px;
display:flex;flex-direction:column;gap:8px;text-align:left;
background:var(--papier);color:var(--encre);border:1px solid var(--doux-ligne);
border-radius:14px;box-shadow:var(--doux-ombre);padding:16px}
.pm-nom{font-weight:800;font-size:15px}
.pm-tel{font-size:14.5px;color:var(--marge);margin-top:-4px}
.pm-lien{text-align:left;font-size:14.5px;font-weight:700;text-decoration:underline;padding:4px 0}
.pm-avis{font-size:13.5px;line-height:1.45;color:var(--marge);border-top:1px solid var(--doux-ligne);padding-top:10px}
.pm-danger{font-size:14.5px;font-weight:700;color:var(--alerte);text-align:left;
border:1px solid var(--alerte);border-radius:10px;padding:9px 12px}
.pm-danger:hover{background:#FDECE9}
/* v185 — sur téléphone, le bandeau tient sur UNE ligne : logo, les deux modes, le nom (demande de LP) */
@media(max-width:640px){
.entete{padding:10px 0 12px}
.entete .env{flex-wrap:nowrap;gap:6px;align-items:center}
.logo-img{height:40px}
.lieu{display:none}
.marque-bt{padding:2px 4px;margin-left:-4px;flex:none}
.entete-droite{flex:1;min-width:0;justify-content:flex-end;gap:4px}
.modes{gap:10px;flex:1;justify-content:center;min-width:0}
.mode{padding:8px 8px 10px;font-size:14px;gap:5px}
.mode::after{left:8px;right:8px}
.mode-ico{width:18px;height:18px}
.mode-col{min-width:0}
.mode-etat{font-size:13px;padding:2px 8px;margin:-3px 0 4px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* v235 : texte court (.b-court) sous 900 px */
.moi-bt{font-size:14px;padding:8px 6px;flex:none;max-width:88px;overflow:hidden;text-overflow:ellipsis}
.basc{font-size:13.5px;padding:8px 11px}
.profil-menu{width:calc(100vw - 32px)}
}
@media(max-width:380px){.mode{font-size:14.5px;padding:8px 6px 10px}.moi-bt{max-width:70px}}
/* ===== Barre de recherche descendue v75 ===== */
.barre-cherche{margin:0 0 20px}
.barre-cherche .barre-action{background:var(--doux-fond);border:1px solid var(--doux-ligne);
border-radius:var(--rayon-doux);box-shadow:var(--ombre-basse);padding:8px 8px 8px 18px;margin:0;gap:12px}
@media(max-width:479px){
.barre-cherche .barre-action{flex-wrap:wrap;padding:12px}
.barre-cherche .barre-champ{flex:1 1 auto}
.barre-cherche .barre-bt{flex:1 1 100%;text-align:center}
}
/* La couverture reprend toute sa place */
.bande{padding-bottom:96px}
/* ===== Bascule libellee v76 ===== */
.bascule-bloc{display:flex;align-items:center;gap:10px}
.basc-avant{font-size:14.5px;font-weight:700;color:#B8B0A0;white-space:nowrap}
.b-court{display:none}
@media(max-width:900px){
.b-long{display:none} .b-court{display:inline}
}
@media(max-width:520px){
.basc-avant{display:none}
}
/* ===== Bandeau visiteur sur la couverture v77 ===== */
.bandeau-visiteur{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;
align-items:center;justify-content:space-between;gap:16px;padding:20px 28px}
.bv-marque{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.bv-logo{height:40px;width:auto;display:block}
.bv-lieu{font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;
color:#B8B0A0;padding-left:2px}
.bv-droite{display:flex;align-items:center;gap:14px}
.bv-lien{font-size:14.5px;font-weight:700;color:#DED7C7;text-decoration:underline;white-space:nowrap}
.bv-lien:hover{color:#F7F4EC}
.bv-bt{font-size:14px;font-weight:800;color:var(--encre);background:var(--jaune);
border-radius:999px;padding:10px 20px;white-space:nowrap}
.bv-bt:hover{background:var(--jaune-f)}
.accueil{position:relative}
.bande{padding-top:104px}
@media(max-width:560px){
.bandeau-visiteur{padding:14px 16px}
.bv-logo{height:32px}
.bv-lieu{display:none}
.bv-lien{font-size:13.5px} /* v251 (Mathieu, bogue 13) : « J'ai déjà un compte » et English restent visibles sur téléphone */
.bv-droite{gap:10px}
.bv-bt{padding:9px 14px;font-size:14.5px}
.bande{padding-top:88px}
}
/* ===== Arguments en deux colonnes v78 ===== */
.grille-arg{display:grid;grid-template-columns:1fr;gap:14px;margin-top:4px}
@media(min-width:620px){.grille-arg{grid-template-columns:1fr 1fr;gap:16px 24px}}
.arg{display:flex;flex-direction:column;gap:4px}
.arg strong{font-size:15px;font-weight:700;line-height:1.3}
.arg span{font-size:14px;line-height:1.45;color:var(--marge)}
.bulle{padding:0 0 4px;box-shadow:none;margin-bottom:16px}
/* ===== Chiffres en pastille v79 ===== */
.grille-chiffres{display:grid;grid-template-columns:1fr;gap:18px;margin:4px 0 26px;
padding-bottom:24px;border-bottom:1px solid var(--doux-ligne)}
@media(min-width:620px){.grille-chiffres{grid-template-columns:repeat(3,1fr);gap:22px}}
.chif{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.chif-n{font-family:var(--display);font-size:26px;font-weight:800;line-height:1;
background:var(--jaune);color:var(--encre);border-radius:999px;padding:10px 20px;margin-bottom:3px}
.chif strong{font-size:15px;font-weight:700;line-height:1.3}
.chif-d{font-size:14px;line-height:1.45;color:var(--marge)}
/* ===== Bandeau visiteur corrige v80 ===== */
.accueil{padding-top:0}
.bande{margin-top:0}
/* un voile en haut pour que le bandeau reste lisible sur une photo claire */
.bande-voile-haut{position:absolute;top:0;left:0;right:0;height:150px;z-index:4;
pointer-events:none;background:linear-gradient(to bottom,rgba(20,19,17,.75),transparent)}
/* ===== Logo agrandi v81 ===== */
.bandeau-visiteur{padding:26px 36px}
.bv-logo{height:82px}
.bv-lieu{font-size:13px;letter-spacing:.26em;padding-left:3px}
.bv-marque{gap:6px}
.bande-voile-haut{height:210px}
.bande{padding-top:150px}
@media(max-width:900px){
.bandeau-visiteur{padding:20px 22px}
.bv-logo{height:62px}
.bande{padding-top:120px}
.bande-voile-haut{height:170px}
}
@media(max-width:560px){
.bv-logo{height:50px}
.bv-lieu{display:none}
.bande{padding-top:104px}
}
/* ===== Bandeau aligne sur la colonne de contenu v82 =====
.bande-in fait 820px centres : le bandeau prend exactement la meme colonne,
pour que le logo tombe pile sur la pastille et sur le D de « Des petites jobs ». */
.bandeau-visiteur{max-width:828px;margin:0 auto;padding:26px 4px;align-items:flex-start}
.bv-droite{padding-top:10px}
@media(max-width:900px){
.bandeau-visiteur{max-width:100%;padding:20px 22px}
}
/* ===== QUEBEC centre sous le logo v83 =====
Le mot « TAF » n'occupe pas toute la largeur du fichier image : aligner
sur le bord gauche decalait QUEBEC de 15 px. On le centre sur l'image. */
.bv-marque{align-items:center}
.bv-lieu{padding-left:0;text-align:center;width:100%}
/* ===== Nettoyage sous la couverture v85 ===== */
.voir-libre{display:block;margin:0 auto 22px;font-size:14.5px;font-weight:700;
color:var(--marge);text-decoration:underline;text-underline-offset:4px;
background:none;border:0;box-shadow:none;padding:6px 4px}
.voir-libre:hover{color:var(--encre)}
.acc-carte-tete{align-items:baseline}
/* ===== Signature etendue a tout le site v86 =====
Tout ce qui suit aligne les vues Trouver, Detail, Publier, Mes jobs et
Mes candidatures sur la signature de l'accueil : surfaces blanches,
filets pales de 1 px, ombres douces, coins de 14 px, pas de majuscules. */
/* --- Cartes de job de la liste --- */
.carte{background:var(--doux-fond);border:1px solid var(--doux-ligne);border-radius:14px;
box-shadow:var(--doux-ombre);overflow:hidden;transition:transform .12s ease,box-shadow .12s ease}
.carte:hover{transform:translateY(-2px);
box-shadow:0 2px 4px rgba(20,19,17,.06),0 14px 32px rgba(20,19,17,.10)}
.carte .dos{width:4px} /* la grosse barre devient un filet */
.carte .corps{padding:16px}
.cat{font-size:13px;font-weight:700;letter-spacing:0;text-transform:none;
background:var(--fond);color:var(--marge)!important;border-radius:999px;
padding:5px 11px;display:inline-block;margin-bottom:8px}
.nom{font-size:16px;font-weight:700;line-height:1.3}
.prix{font-size:16px;font-weight:800}
.meta{font-size:14.5px;color:var(--marge)}
/* --- Etiquette d'etat : plus penchee, plus en majuscules --- */
.etq{font-size:13.5px;font-weight:700;letter-spacing:0;text-transform:none;
padding:6px 12px;border-radius:999px;transform:none;border:1px solid var(--doux-ligne);
background:var(--fond);color:var(--marge);margin-top:10px}
/* --- Encadres d'information --- */
.avis{background:var(--papier);border:1px solid var(--doux-ligne);border-left-width:1px;
border-image:none;border-radius:14px;box-shadow:var(--ombre-basse)}
.avis strong{font-size:14px;letter-spacing:0;text-transform:none;color:var(--encre)}
.bloc{border:1px solid var(--doux-ligne);border-radius:14px;box-shadow:var(--ombre-basse);padding:18px}
.bloc h3{font-size:15px;letter-spacing:0;text-transform:none;color:var(--encre)}
.masque strong{text-transform:none;font-size:14px;letter-spacing:0}
/* --- Onglets, pastilles de filtre, bascules --- */
.ong,.bsc{border:1px solid var(--doux-ligne);border-radius:12px;letter-spacing:0;font-weight:700}
.puce{border:1px solid var(--doux-ligne);border-radius:999px;letter-spacing:0;font-weight:700;
padding:9px 15px}
/* --- Boutons --- */
.bt{letter-spacing:0;border:1px solid transparent;border-radius:12px;font-weight:800}
.bt.pale{background:var(--doux-fond);border-color:var(--doux-ligne);color:var(--encre)}
.bt.pale:hover{background:var(--fond)}
/* --- Formulaires --- */
.champ label{text-transform:none;letter-spacing:0;font-size:14px;font-weight:700;margin-bottom:6px}
.champ input,.champ select,.champ textarea{border:1px solid var(--doux-ligne);border-radius:12px;
background:var(--doux-fond);padding:13px 14px}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--jaune-f)}
/* ===== En-tete de carte sans compte v87 ===== */
.carte-tete-nue{justify-content:flex-end;margin-bottom:10px}
/* ===== Vignette photo dans la liste v88 ===== */
.carte{display:flex;align-items:stretch;text-align:left;width:100%}
.carte .dos{flex:none}
.vignette{flex:none;width:104px;align-self:stretch;display:flex;align-items:center;
justify-content:center;background:var(--neige) center/cover no-repeat;margin:12px 0 12px 12px;
border-radius:12px;min-height:104px}
.vignette-ico .ico{width:34px;height:34px;opacity:.5}
.carte .corps{flex:1;min-width:0;padding:14px 16px}
.carte .tete{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.carte .meta{display:flex;flex-wrap:wrap;gap:4px 10px}
@media(max-width:479px){
.vignette{width:78px;min-height:78px;margin:10px 0 10px 10px}
.carte .corps{padding:12px 12px 12px 14px}
}
/* ===== Sorties evidentes v89 ===== */
.entete-in{position:relative}
/* v235 (audit, bogue 7) — sur ordinateur, l'entête est une grille 1fr auto 1fr :
ses enfants s'étiraient sur toute leur colonne (un « ← Accueil » et un
« S'inscrire » de 600 px). Chacun garde la largeur de son texte. */
@media(min-width:760px){
.entete-in{justify-items:start}
.entete-in > .logo-bt{justify-self:center}
.entete-in > .bt{justify-self:end;width:auto}
}
.fleche-retour{font-size:14px;font-weight:700;color:#DED7C7;padding:9px 14px;border-radius:10px;
white-space:nowrap;background:rgba(255,255,255,.10)}
.fleche-retour:hover{background:rgba(255,255,255,.18);color:#F7F4EC}
/* Le bouton retour des sous-pages devient visible au lieu d'un lien discret */
.retour{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:700;
color:var(--encre);background:var(--doux-fond);border:1px solid var(--doux-ligne);
border-radius:999px;padding:10px 18px;box-shadow:var(--ombre-basse);margin-bottom:16px}
.retour:hover{background:var(--fond)}
@media(max-width:520px){.fleche-retour{padding:9px 11px}}
/* ===== Ordre de l'accueil v90 ===== */
.bande-roles{margin:4px 0 30px}
/* ===== Liste au large v91 =====
Le site est bati sur un ruban de 600 px. Sur grand ecran, la liste des jobs
sort du ruban et passe en grille, pendant que les textes de lecture et les
formulaires restent etroits pour rester lisibles. */
@media(min-width:900px){
.grille-jobs{
width:min(1160px, calc(100vw - 64px));
margin-left:calc(50% - min(580px, 50vw - 32px));
display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start;
}
.grille-jobs .carte{margin-bottom:0}
.vignette{width:132px;min-height:132px}
.carte .corps{padding:18px 20px}
}
@media(min-width:1360px){
.grille-jobs{grid-template-columns:repeat(3,1fr)}
.vignette{width:112px;min-height:112px}
}
/* ===== Sections pleine largeur et rythme v92 ===== */
.pleine{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
padding:48px max(16px, calc(50vw - 300px))}
@media(min-width:900px){.pleine{padding:64px max(24px, calc(50vw - 560px))}}
.bloc-blanc{background:var(--doux-fond);border-top:1px solid var(--doux-ligne);
border-bottom:1px solid var(--doux-ligne);margin-bottom:0}
/* Le jaune, assume : un vrai moment de couleur au lieu d'un simple bouton */
.bloc-jaune{background:var(--jaune);margin-top:0;margin-bottom:0}
.bloc-jaune .bande-roles{background:none;border:0;box-shadow:none;padding:0;margin:0;
max-width:1120px;margin-inline:auto}
.bloc-jaune .bande-roles-txt strong{font-size:clamp(26px,3.4vw,40px);line-height:1.1}
.bloc-jaune .bande-roles-txt span{color:rgba(20,19,17,.72);font-size:16px}
.bloc-jaune .bt-role{background:var(--encre);color:#F7F4EC;border-color:var(--encre);
padding:16px 26px;font-size:15.5px}
.bloc-jaune .bt-role:hover{background:#000}
.bloc-jaune .bt-role.plein{background:var(--doux-fond);color:var(--encre);border-color:var(--doux-fond)}
.bloc-jaune .bt-role.plein:hover{background:#fff}
/* Pourquoi TafStand : bloc encre, chiffres en jaune */
.bloc-encre{background:var(--charbon);color:#EDE7DA;margin-top:0;margin-bottom:0}
.bloc-encre .bloc{background:none;border:0;box-shadow:none;padding:0;max-width:1120px;margin-inline:auto}
.bloc-encre .bulle{color:#EDE7DA}
.bloc-encre .bulle strong{color:#fff;font-size:clamp(24px,3vw,34px)}
.bloc-encre .grille-chiffres{border-bottom-color:rgba(255,255,255,.14)}
.bloc-encre .chif-n{background:var(--jaune);color:var(--encre)}
.bloc-encre .chif strong{color:#fff}
.bloc-encre .chif-d,.bloc-encre .arg span{color:#B5AC9C}
.bloc-encre .arg strong{color:#fff}
@media(min-width:900px){
.bloc-encre .grille-chiffres{grid-template-columns:repeat(3,1fr)}
.bloc-encre .grille-arg{grid-template-columns:repeat(3,1fr)}
}
/* On casse la grille : la premiere annonce prend deux colonnes */
@media(min-width:900px){
.grille-annonces .annonce:first-child{grid-column:span 2}
.grille-annonces .annonce:first-child .annonce-photo{height:260px}
.grille-annonces .annonce:first-child .annonce-nom{font-size:20px}
}
/* ===== Garde-fou pleine largeur v93 ===== */
.pleine{max-width:none!important;box-sizing:border-box;overflow:hidden}
body{overflow-x:hidden}
/* ===== Section annonces, disposition Canva v94 ===== */
.cadre-annonces{background:var(--charbon);color:#EDE7DA;border-radius:22px;
padding:36px 28px;margin:8px 0 30px;display:grid;grid-template-columns:1fr;gap:26px}
@media(min-width:820px){
.cadre-annonces{grid-template-columns:300px 1fr;gap:44px;padding:48px 44px;align-items:start}
}
.ca-colonne{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.ca-titre{font-family:var(--display);font-size:clamp(30px,4vw,44px);line-height:1.05;
letter-spacing:-.02em;color:#fff;margin:0}
.ca-sous{font-size:15px;line-height:1.5;color:#B5AC9C;margin:0}
.ca-bt{background:var(--jaune);color:var(--encre);font-weight:800;font-size:15px;
padding:14px 22px;border-radius:12px;white-space:nowrap}
.ca-bt:hover{background:var(--jaune-f)}
/* Tuiles de hauteurs inegales, comme la maquette */
.ca-tuiles{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:560px){.ca-tuiles{grid-template-columns:1fr 1fr;gap:18px}}
.ca-tuiles .annonce{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
box-shadow:none;border-radius:16px}
.ca-tuiles .annonce:hover{background:rgba(255,255,255,.10);transform:translateY(-2px);box-shadow:none}
.ca-tuiles .annonce:first-child{grid-column:auto}
.ca-tuiles .annonce-photo{height:190px}
@media(min-width:560px){
.ca-tuiles .annonce:nth-child(2) .annonce-photo{height:250px}
.ca-tuiles .annonce:nth-child(3) .annonce-photo{height:250px}
}
.ca-tuiles .annonce-nom{color:#fff}
.ca-tuiles .annonce-meta{color:#A79E8E}
.ca-tuiles .annonce-prix{color:var(--jaune)}
.ca-tuiles .annonce-chip{background:rgba(255,255,255,.12);color:#CFC6B6}
.ca-tuiles .annonce-cta{border-color:rgba(255,255,255,.18);color:#EDE7DA}
.ca-tuiles .annonce:hover .annonce-cta{background:rgba(255,255,255,.10)}
/* ===== Corrections de largeur v95 ===== */
/* Le cadre des annonces sort du ruban de 600 px : sans ca, la colonne de
titre de 300 px ne laissait que 105 px par tuile. */
@media(min-width:900px){
.cadre-annonces{
width:min(1160px, calc(100vw - 64px));
margin-left:calc(50% - min(580px, 50vw - 32px));
grid-template-columns:320px 1fr; gap:48px; padding:52px 48px;
}
.ca-tuiles{grid-template-columns:repeat(3,1fr)}
.ca-tuiles .annonce:nth-child(4){display:none}
}
@media(min-width:1280px){
.ca-tuiles{grid-template-columns:repeat(4,1fr)}
.ca-tuiles .annonce:nth-child(4){display:flex}
}
/* Les tuiles de categorie retrouvent de la hauteur au lieu de s'aplatir */
.grille-cats .tuile-cat{min-height:132px;justify-content:space-between;padding:20px}
.grille-cats .tuile-ico{width:48px;height:48px;border-radius:14px}
.grille-cats .tuile-nom{font-size:16px}
@media(min-width:700px){
.grille-cats{max-width:1120px;margin-inline:auto;gap:18px}
.grille-cats .tuile-cat{min-height:168px;padding:24px}
.grille-cats .tuile-ico{width:54px;height:54px}
.grille-cats .tuile-nom{font-size:17px}
}
.bloc-blanc .sec-tete{max-width:1120px;margin-inline:auto}
/* ===== Ruban publicitaire jaune v96 ===== */
.ruban{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
background:var(--jaune);overflow:hidden;padding:14px 0;user-select:none}
.ruban-piste{display:flex;align-items:center;gap:22px;white-space:nowrap;width:max-content;
animation:rubanDefile 38s linear infinite}
.ruban-item{font-family:var(--display);font-size:clamp(17px,2.1vw,24px);font-weight:800;
letter-spacing:-.01em;color:var(--encre)}
.ruban-pt{font-size:9px;color:rgba(20,19,17,.45)}
@keyframes rubanDefile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ruban:hover .ruban-piste{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.ruban-piste{animation:none}}
/* ===== Tuiles de categorie centrees v96 ===== */
.grille-cats .tuile-cat{align-items:center;justify-content:center;gap:14px;text-align:center;
min-height:150px}
.grille-cats .tuile-nom{text-align:center}
@media(min-width:700px){
.grille-cats .tuile-cat{min-height:164px;gap:16px}
.grille-cats .tuile-ico{width:58px;height:58px;border-radius:16px}
}
/* ===== Tuiles de categorie, version pastel v97 ===== */
.grille-cats .tuile-ico{color:inherit} /* l'inline prend le dessus */
.grille-cats .ico{width:30px;height:30px;stroke-width:1.8}
@media(min-width:700px){.grille-cats .ico{width:32px;height:32px}}
/* ===== Tuiles de categorie illustrees v98 ===== */
.grille-cats .tuile-cat.tuile-photo{padding:0;overflow:hidden;min-height:0;
align-items:stretch;justify-content:flex-start;flex-direction:column;text-align:left}
.tc-image{display:block;width:100%;height:170px;background:var(--neige) center/cover no-repeat;
flex:none;transition:transform .35s ease}
.tuile-photo:hover .tc-image{transform:scale(1.05)}
.grille-cats .tuile-photo .tuile-nom{padding:14px 16px 16px;text-align:left;font-size:16px}
@media(min-width:700px){
.tc-image{height:200px}
.grille-cats .tuile-photo .tuile-nom{font-size:17px;padding:16px 18px 18px}
}
/* v234 — l'accueil : six tuiles (la saison, Animaux, « Toutes les catégories »).
Deux colonnes sur téléphone, trois sur tablette, six d'une rangée sur ordinateur. */
.grille-cats-accueil .tc-image{height:140px}
@media(min-width:700px){
.grille-cats-accueil{grid-template-columns:repeat(3,1fr)}
.grille-cats-accueil .tc-image{height:180px}
}
@media(min-width:1100px){
.grille-cats-accueil{grid-template-columns:repeat(6,1fr)}
.grille-cats-accueil .tc-image{height:150px}
}
.tt-icones{display:grid;grid-template-columns:repeat(3,auto);justify-content:center;align-content:center;gap:10px}
.tt-ico{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px}
.tt-ico .ico{width:24px;height:24px}
@media(min-width:1100px){.tt-icones{gap:8px}.tt-ico{width:36px;height:36px}.tt-ico .ico{width:22px;height:22px}}
/* ===== Annonces en alternance, encadrees de jaune v99 =====
Une carte sur deux inverse l'ordre : photo en haut, puis photo en bas.
Le rythme vient de l'alternance, pas de hauteurs inegales. */
.ca-tuiles{align-items:stretch}
.ca-tuiles .annonce{border:1.5px solid var(--jaune);background:rgba(255,197,61,.05);
border-radius:18px}
.ca-tuiles .annonce:hover{background:rgba(255,197,61,.11);border-color:var(--jaune)}
.ca-tuiles .annonce-photo{height:210px!important;border-radius:0}
.ca-tuiles .annonce-corps{flex:1;justify-content:flex-start}
/* Une sur deux : le descriptif passe en haut, la photo en bas */
.ca-tuiles .annonce:nth-child(even){flex-direction:column-reverse}
.ca-tuiles .annonce-chip{background:var(--jaune);color:var(--encre);font-weight:800}
.ca-tuiles .annonce-cta{border-color:rgba(255,197,61,.55);color:var(--jaune);font-weight:800}
.ca-tuiles .annonce:hover .annonce-cta{background:var(--jaune);color:var(--encre);
border-color:var(--jaune)}
@media(max-width:559px){
.ca-tuiles .annonce:nth-child(even){flex-direction:column}
}
/* ===== Inscription a l'image de la couverture v101 ===== */
.insc-fond{position:relative;width:100vw;margin-left:calc(50% - 50vw);min-height:100vh;
min-height:100svh;display:flex;align-items:center;justify-content:center;
background:var(--charbon);padding:56px 20px;overflow:hidden}
.insc-photo{position:absolute;inset:0;background:url('/fond-inscription.jpg') center/cover no-repeat;
background-attachment:fixed;opacity:.9}
@media(hover:none){.insc-photo{background-attachment:scroll}}
.insc-fond::before{content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(90deg,rgba(20,19,17,.92) 0%,rgba(20,19,17,.72) 55%,rgba(20,19,17,.42) 100%)}
.insc-boite{position:relative;z-index:2;width:100%;max-width:480px;
background:var(--papier);border:1px solid var(--doux-ligne);border-radius:20px;
box-shadow:0 4px 12px rgba(0,0,0,.18),0 24px 60px rgba(0,0,0,.28);padding:34px 30px 30px}
.insc-titre{font-family:var(--display);font-size:30px;font-weight:800;letter-spacing:-.02em;
line-height:1.1;margin:0 0 10px}
.insc-sous{font-size:14.5px;line-height:1.5;color:var(--marge);margin:0 0 22px}
.insc-boite .bloc{border:1px solid var(--doux-ligne);box-shadow:none;background:var(--doux-fond);
padding:18px;margin-bottom:16px}
.insc-boite .cgu-ligne{margin-bottom:12px;font-size:14px;line-height:1.45}
.insc-boite .bt{margin-bottom:10px}
.insc-boite .bt.pale{margin-bottom:0}
@media(max-width:520px){
.insc-fond{padding:32px 14px;min-height:0}
.insc-boite{padding:26px 20px 22px}
.insc-titre{font-size:25px}
}
/* ===== Contre-proposition de prix v105 ===== */
.contre-prix{display:flex;align-items:center;gap:0;max-width:200px;margin-bottom:4px}
.cp-dollar{font-weight:800;font-size:18px;padding:0 10px 0 4px;color:var(--marge)}
.contre-prix input{flex:1;font-size:18px;font-weight:700}
.cand-prix{font-size:14.5px;margin:4px 0 8px;padding:6px 10px;border-radius:8px;display:inline-block}
.cand-prix.ok{background:#E8F5EC;color:#1B6B3A}
.cand-prix.plus{background:#FFF3D6;color:#7A5200}
.cand-prix.moins{background:#E8F5EC;color:#1B6B3A}
.cand-prix span{color:var(--marge);font-size:13.5px}
/* ===== Montant convenu v106 ===== */
.montant-convenu{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 12px;
padding:12px 14px;background:var(--jaune);border-radius:12px;color:var(--encre)}
.montant-convenu span{font-size:13.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
color:rgba(20,19,17,.7)}
.montant-convenu strong{font-family:var(--display);font-size:24px;font-weight:800;line-height:1}
.montant-convenu em{font-style:normal;font-size:13.5px;color:rgba(20,19,17,.6)}
/* ===== Onglets de mode a la Airbnb v107 ===== */
.modes{display:flex;align-items:stretch;gap:14px}
.mode{display:flex;align-items:center;gap:9px;padding:10px 14px 12px;position:relative;
color:#CFC8B8;font-size:14.5px;font-weight:700;white-space:nowrap;border-radius:10px}
.mode:hover{color:#F7F4EC;background:rgba(255,255,255,.07)}
.mode::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:3px;border-radius:2px;
background:transparent;transition:background .15s ease}
.mode.on{color:#fff}
.mode.on::after{background:var(--jaune)}
.mode-ico{width:22px;height:22px;flex:none}
.mode.on .mode-ico{color:var(--jaune)}
/* v178 — Offrir une job selon la maquette Canva de LP */
.bandeau-afficher{min-height:230px;border-radius:24px;margin:16px 0 14px;box-shadow:0 10px 30px rgba(20,19,17,.12)}
.bandeau-afficher::after{background-image:linear-gradient(90deg,rgba(20,19,17,.28),rgba(20,19,17,0) 55%),var(--photo);background-size:cover,cover;background-position:center,var(--mire,50% 45%)}
.af-titre-zone{position:absolute;left:16px;right:16px;bottom:16px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.af-titre{margin:0;font-family:var(--display);font-weight:800;font-size:30px;line-height:1.1;color:var(--encre);background:rgba(252,250,244,.86);padding:8px 16px;border-radius:12px;box-shadow:0 6px 18px rgba(20,19,17,.18)}
.af-exemple{margin:0;font-size:14px;font-weight:600;color:#5a4306;background:var(--jaune-pale);padding:8px 14px;border-radius:10px;box-shadow:0 4px 14px rgba(20,19,17,.12)}
@media(min-width:760px){.bandeau-afficher{min-height:310px}.af-titre-zone{left:40px;top:50%;bottom:auto;transform:translateY(-50%);right:auto;max-width:56%}.af-titre{font-size:46px;padding:10px 24px}.af-exemple{font-size:15px}}
.af-panneau{padding:22px 18px 26px}
@media(min-width:760px){.af-panneau{padding:28px 36px 34px}}
.af-etapes{display:grid;grid-template-columns:1fr;gap:26px}
@media(min-width:1100px){.af-etapes{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}}
.af-etape-tete{display:flex;align-items:center;gap:10px;color:var(--encre);font-weight:800;font-size:14px;margin:0 0 18px}
.af-etape-tete>span:nth-child(3){flex:none}
.af-trait{flex:1;height:2px;background:var(--jaune);opacity:.6}
.af-num{width:30px;height:30px;border-radius:999px;background:var(--jaune);display:inline-flex;align-items:center;justify-content:center;font-weight:800;flex:none}
.af-tuiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 10px}
@media(max-width:1099px){.af-tuiles{grid-template-columns:repeat(4,minmax(0,1fr));max-width:560px}}
.af-tuile{position:relative;font:inherit;border:2px solid transparent;border-radius:12px;padding:6px;background:var(--papier);cursor:pointer;display:flex;flex-direction:column;gap:6px;box-shadow:0 2px 8px rgba(20,19,17,.06)}
.af-tuile:hover{border-color:var(--jaune-f)}
.af-tuile.on{border-color:var(--jaune);background:var(--jaune-pale)}
.af-tuile-photo{display:block;width:100%;aspect-ratio:16/11;border-radius:8px;background:var(--neige) center/cover no-repeat}
.af-tuile-nom{font-size:13.5px;font-weight:800;text-align:center;line-height:1.2}
.af-coche{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:999px;background:var(--jaune);display:none;align-items:center;justify-content:center;font-size:14.5px;font-weight:800}
.af-tuile.on .af-coche{display:inline-flex}
.af-select{margin-top:4px}
.af-montants{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px}
.af-montant{font:inherit;font-weight:800;border:1px solid var(--ligne);background:var(--papier);border-radius:999px;padding:8px 14px;cursor:pointer}
.af-montant:hover{border-color:var(--jaune)}
.af-montant.on{background:var(--jaune);border-color:var(--jaune)}
.af-montant-autre{font-size:13.5px;color:var(--marge);font-weight:700}
.af-recap{background:var(--jaune-pale);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;margin:6px 0 14px;font-size:15px}
.af-publier{width:100%;font-size:18px;padding:16px;border-radius:14px}
/* v192 — audit, paquet 1 */
.lj-prix,.vue-trouver .lj-prix{color:var(--encre)}
.lj-prix::before{content:"";display:inline-block;width:8px;height:8px;border-radius:999px;background:var(--jaune);margin-right:6px;vertical-align:middle}
.lj-cat,.vue-trouver .lj-cat,.cat{color:#7a5a00!important}
.puce,.bsc,.af-montant,.af-moment,.tr-lien-geo,.tr-sel,.nt,.ong{min-height:44px}
.lj-reperes,.vue-trouver .lj-reperes,.carte-note,.tr-col-carte .carte-note{font-size:14px!important}
@media(max-width:759px){body{font-size:17px}.sous{font-size:16px}}
.af-moments{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.af-moment{font:inherit;font-weight:700;border:1px solid var(--ligne);background:var(--papier);border-radius:999px;padding:8px 14px;cursor:pointer}
.af-moment.on{background:var(--jaune);border-color:var(--jaune)}
.af-promesse{margin:0 0 12px;font-weight:700;color:var(--encre)}
.ou-suis-je{margin:0 0 6px;font-weight:700;color:var(--encre)}
/* v193 — deux portes, bloc Vous, fiches de personnes, étapes, une étape par écran */
.portes{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:16px 0 8px}
@media(min-width:640px){.portes{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}}
.porte{font:inherit;text-align:left;border:2px solid var(--ligne);background:var(--papier);border-radius:18px;padding:18px 20px;cursor:pointer;display:flex;flex-direction:column;gap:6px;box-shadow:var(--ombre);white-space:normal;min-width:0} /* v225 : .bt-role gardait le texte sur une ligne — l'accueil faisait 476 px de large sur un iPhone de 390 */
.porte:hover{border-color:var(--jaune)}
.porte-q{font-family:var(--display);font-weight:800;font-size:22px;color:var(--encre)}
.porte-bt{display:inline-block;align-self:flex-start;background:var(--jaune);color:var(--encre);font-weight:800;border-radius:999px;padding:8px 16px;margin:4px 0}
.porte-s{color:var(--marge);font-size:14.5px}
.vous{background:var(--papier);border:2px solid var(--jaune);border-radius:18px;padding:16px 18px;margin:16px 0 8px}
.vous-tete{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 8px}.vous-tete strong{font-family:var(--display);font-size:20px}.vous-tete span{color:var(--marge)}
.vous-ligne{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--ligne)}
.vous-bts{display:flex;gap:8px;margin-top:12px}
.cand-fiche .cand-nom{font-size:19px}.cand-cote{display:block;color:var(--marge);font-weight:700}.cand-cote em{color:#7a5a00;font-style:normal}
.etapes-job{display:flex;gap:4px;margin:0 0 12px;overflow-x:auto}
.ej{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:13.5px;font-weight:700;color:var(--marge);text-align:center}
.ej-pt{width:24px;height:24px;border-radius:999px;border:2px solid var(--ligne);background:var(--papier);display:flex;align-items:center;justify-content:center;font-size:14.5px}
.ej.ok{color:var(--encre)}.ej.ok .ej-pt{background:var(--jaune);border-color:var(--jaune)}
.ej.ici .ej-pt{box-shadow:0 0 0 3px var(--jaune-pale)}
.af-nav{display:flex;justify-content:space-between;gap:10px;margin-top:14px}
.af-duree{font:inherit;font-weight:700;border:1px solid var(--ligne);background:var(--papier);border-radius:999px;padding:8px 14px;cursor:pointer;min-height:44px}
.af-duree.on{background:var(--jaune);border-color:var(--jaune)}
@media(min-width:1100px){.af-nav{display:none}}
@media(max-width:1099px){.af-col:not(.on){display:none}}
.jobs-faites{margin-top:14px}.jobs-faites summary{cursor:pointer;font-weight:800;padding:10px 0;color:var(--marge)}.jobs-faites .carte{opacity:.75}
.puce-rayon{padding:8px 12px}
/* v196 — aperçu, lignes courtes sur téléphone */
.modale-apercu{position:fixed;inset:0;z-index:100;background:rgba(20,19,17,.55);display:flex;align-items:flex-end;justify-content:center;padding:0}
.modale-apercu-in{background:var(--fond);border-radius:18px 18px 0 0;max-height:92vh;overflow:auto;width:100%;max-width:720px;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px))}
@media(min-width:760px){.modale-apercu{align-items:center;padding:24px}.modale-apercu-in{border-radius:18px}}
.modale-apercu-tete{display:flex;justify-content:space-between;align-items:center;margin:0 0 10px;font-size:18px}
@media(max-width:759px){.tr-panneau-mobile .lj-rue,.tr-panneau-mobile .outils-pastille{display:none}}
.avis-ok{border-color:var(--ok);background:var(--ok-pale)}
.mots-etoiles{margin:4px 0 8px}
/* la barre d'action fixe au bas de la fiche, sur téléphone (audit #29) */
@media(max-width:759px){
.barre-action{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;gap:12px;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));background:var(--papier);border-top:1px solid var(--ligne);box-shadow:0 -6px 20px rgba(20,19,17,.10)}
.barre-action .ba-prix{font-family:var(--display);font-weight:800;font-size:20px}
.barre-action .bt{flex:1;margin:0}
.avec-barre{padding-bottom:88px}
}
@media(min-width:760px){.barre-action{display:none}}
body.clavier .barre-action{display:none}
/* v177 — la maquette mobile de LP sur téléphone */
.titre-sur-photo{position:absolute;left:16px;bottom:12px;margin:0;color:#fff;font-family:var(--display);font-weight:800;font-size:22px;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.bandeau-mobile{min-height:150px;border-radius:14px}
.bandeau-mobile::after{background-image:linear-gradient(180deg,rgba(20,19,17,0) 40%,rgba(20,19,17,.55)),var(--photo);background-size:cover,cover;background-position:center,var(--mire,50% 45%)}
.tr-panneau-mobile{background:transparent;border:0;box-shadow:none;padding:0;border-radius:0}
.tr-barre-mobile{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.tr-barre-mobile .tr-bascule{margin-left:0}
.tr-panneau-mobile .carte-trouver{height:300px;border-radius:14px}
.tr-panneau-mobile .puces{margin:12px 0 10px}
.tr-panneau-mobile .puce-geo,.tr-panneau-mobile .geo-ligne{margin:0 0 14px}
.tr-panneau-mobile .lj-cat{display:inline}
.tr-panneau-mobile .ligne-job{background:var(--papier);border:1px solid var(--ligne);border-radius:12px;padding:10px;gap:12px}
.tr-panneau-mobile .lj-photo{width:96px;height:80px;border-radius:10px}
/* v176 — la même signature sur Offrir une job (bandeau + panneau) et le fond clair sur les pages de listes */
.vue-claire{background:#FAF8F3;min-height:calc(100vh - var(--entete-h))}
.bandeau-titre-photo{border-radius:24px;box-shadow:0 10px 30px rgba(20,19,17,.12);margin:16px 0 14px;min-height:200px}
.bandeau-titre-photo .titre-pilule{position:absolute;left:14px;right:14px;bottom:14px;background:var(--papier);border-radius:18px;padding:12px 18px;box-shadow:0 8px 24px rgba(20,19,17,.22);display:flex;flex-direction:column;gap:4px}
.bandeau-titre-photo .titre-pilule .titre::after{display:none}
@media(min-width:760px){.bandeau-titre-photo{min-height:190px}.bandeau-titre-photo .titre-pilule{right:auto;bottom:auto;top:50%;transform:translateY(-50%);left:32px;width:min(48%,560px);padding:14px 22px}}
.panneau-claire{background:#fff;border-radius:24px;padding:18px 18px 22px;box-shadow:0 10px 30px rgba(20,19,17,.07);margin:0 0 14px}
@media(min-width:760px){.panneau-claire{padding:26px 32px 30px}}
.panneau-claire .bloc{border:1px solid #EAE5D9;box-shadow:none}
.vue-afficher .env-large{max-width:600px}
@media(min-width:760px){.vue-afficher .env-large{max-width:none;padding:0 clamp(16px,4vw,80px)}}
@media(min-width:1500px){.vue-afficher .env-large{max-width:1500px}}
/* v173 — la page « Trouver une job » : le CSS de la page témoin approuvée */
.entete.entete-trouver{background:var(--papier);color:var(--encre);border-bottom:1px solid var(--ligne);padding:0}
.entete-trouver .env{height:calc(var(--entete-h) - var(--sat));display:flex;align-items:center;gap:16px;max-width:none;padding:0 clamp(14px,3.6vw,52px)}
.entete-trouver .logo-img-clair{height:54px}
.nt-sep{width:1px;height:26px;background:var(--ligne);margin:0 6px}
.entete-trouver .marque-bt:hover{background:rgba(20,19,17,.05)}
.nav-trouver{display:flex;align-items:center;gap:6px;margin:0 auto}
.nt{font:inherit;color:var(--marge);font-weight:600;padding:12px 18px;border:0;border-radius:14px;background:transparent;display:inline-flex;align-items:center;gap:10px;cursor:pointer;white-space:nowrap}
.nt:hover{background:rgba(20,19,17,.05);color:var(--encre)}
.nt.on{background:var(--jaune);color:var(--encre);font-weight:800}
.nt .ong-nb{min-width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.moi-bt-clair{color:var(--encre)}
.moi-bt-clair:hover{background:rgba(20,19,17,.06)}
.cloche-entete{position:static!important;transform:none!important;margin-left:0!important;border:0;background:transparent;color:var(--jaune-f);font-size:22px}
.vue-trouver{background:#FAF8F3}
.vue-trouver .bandeau-trouver{border-radius:24px;box-shadow:0 10px 30px rgba(20,19,17,.12);margin-top:16px}
.vue-trouver .tr-panneau{border-radius:24px;border:0;box-shadow:0 10px 30px rgba(20,19,17,.07);padding:18px 18px 20px}
@media(min-width:760px){.vue-trouver .tr-panneau{padding:22px 28px 26px}.tr-barre{margin-bottom:18px}}
.vue-trouver .tr-filtres{color:var(--marge);font-weight:600}
.vue-trouver .tr-sel{appearance:none;-webkit-appearance:none;border:0;background-color:#FFF3D6;color:var(--marge);font-weight:600;padding:10px 40px 10px 16px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23b58a17' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.vue-trouver .tr-lien-geo{border:0;background:transparent;color:var(--marge);font-weight:600;padding:8px 10px}
.vue-trouver .tr-lien-geo.on{background:#FFF3D6}
.tr-pres-pastille{display:inline-flex;align-items:center;gap:6px;background:#FFF3D6;color:#7a5a08;font:inherit;font-weight:600;border:0;border-radius:999px;padding:9px 16px;margin:0 0 14px;cursor:pointer}
@media(min-width:760px){.tr-grille.deux{grid-template-columns:minmax(0,12fr) minmax(0,11fr);gap:34px;align-items:start}.carte-trouver{height:clamp(300px,48vh,560px)!important;border-radius:14px}}
.vue-trouver{min-height:calc(100vh - var(--entete-h))}
.vue-trouver .pile-lignes{gap:14px}
.vue-trouver .ligne-job{border-radius:14px;border:1px solid #EAE5D9;box-shadow:0 3px 10px rgba(20,19,17,.05);background:#fff;gap:20px;padding:8px 22px 8px 8px}
.vue-trouver .lj-photo{width:140px;height:84px;border-radius:10px}
.vue-trouver .lj-titre{font-family:var(--display);font-size:16px}
.vue-trouver .lj-reperes{display:flex;flex-wrap:wrap;gap:4px 14px;white-space:normal;font-size:14.5px}
.vue-trouver .lj-cat{display:none}
.vue-trouver .lj-prix{font-size:17px}
.vue-trouver .tr-offre{border:0;border-radius:14px;background:#FFF3D6;color:#5a4306;font-weight:600;padding:12px 18px}
.vue-trouver .tr-offre-ico{width:32px;height:32px;border-radius:999px;background:var(--jaune);display:flex;align-items:center;justify-content:center;font-size:16px}
.vue-trouver .tr-offre strong{color:#3d2d02}
@media(max-width:759px){.vue-trouver .ligne-job{gap:12px;padding:8px 12px 8px 8px}.vue-trouver .lj-photo{width:96px;height:72px}.entete-trouver .env{height:64px;gap:8px}.entete-trouver .logo-img-clair{height:34px}.nt{padding:9px 10px;font-size:14.5px}.nav-trouver .b-long{display:none}.nav-trouver .b-court{display:inline}.moi-bt-clair{display:none}}
/* v171 — entête claire (maquette de LP) : fond papier, encre, souligné jaune */
.entete.entete-claire{background:var(--papier);color:var(--encre);border-bottom:1px solid var(--ligne)}
.entete-claire .lieu{color:var(--marge)}
.entete-claire .marque-bt:hover{background:rgba(20,19,17,.05)}
.entete-claire .mode{color:var(--marge)}
.entete-claire .mode:hover{color:var(--encre);background:rgba(20,19,17,.05)}
.entete-claire .mode.on{color:var(--encre)}
.entete-claire .mode.on .mode-ico{color:var(--jaune-f)}
.entete-claire .moi-bt{color:var(--encre)}
.entete-claire .moi-bt:hover{background:rgba(20,19,17,.06)}
.entete-claire .mode-etat{background:var(--jaune)}
.ong-cloche{flex:none;margin-left:auto;width:42px;height:42px;border-radius:999px;border:1px solid var(--ligne);background:var(--papier);font-size:18px;cursor:pointer}
.ong-cloche:hover{background:var(--jaune-pale);border-color:var(--jaune)}
@media(min-width:760px){.ong-cloche{position:absolute;right:clamp(16px,4vw,80px);top:50%;transform:translateY(-50%);margin-left:0}}
/* v166 — la page Trouver selon la maquette Canva de LP */
.vue-trouver .env-large{max-width:600px}
/* v167 : sur ordinateur, la page prend toute la largeur avec une marge, comme la maquette */
@media(min-width:760px){.vue-trouver .env-large{max-width:none;padding:0 clamp(16px,4vw,80px)}}
@media(min-width:1200px){.bandeau-trouver{min-height:270px}}
.visuellement-cache{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tr-cherche{position:absolute;left:14px;right:14px;bottom:14px;display:flex;align-items:center;gap:8px;background:var(--papier);border-radius:999px;padding:6px 6px 6px 14px;box-shadow:0 8px 24px rgba(20,19,17,.22)}
/* v222 — LP : « on dirait qu'il a la barre dans face ». Sur grand écran, la barre allait au milieu de la photo, sur les visages : elle va en bas à gauche, plus étroite (vérifié sur les quatre photos de saison). */
@media(min-width:760px){.tr-cherche{right:auto;top:auto;transform:none;left:32px;bottom:24px;width:clamp(340px,40%,540px);padding:9px 9px 9px 20px}}
@media(min-width:760px){.tr-quoi{font-size:17px}}
.tr-loupe{font-size:16px;opacity:.7}
.tr-quoi{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:16px;color:var(--encre);padding:8px 0;outline:none}
.tr-quoi::placeholder{color:var(--marge)}
/* v232 — le champ de recherche sur téléphone (avant : seulement sur ordinateur) */
.tr-cherche-mobile{position:static;left:auto;right:auto;bottom:auto;width:auto;transform:none;margin:6px 0 12px;border-radius:14px;border:2px solid var(--ligne);box-shadow:none;padding:4px 6px 4px 12px}
.tr-effacer{flex:none;border:0;background:var(--ligne);color:var(--encre);width:34px;height:34px;border-radius:999px;font:inherit;font-weight:800;cursor:pointer}
.vide-cats{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.tr-cherche-mobile .tr-quoi::-webkit-search-cancel-button{-webkit-appearance:none;display:none} /* un seul bouton pour effacer : le nôtre */
.vide-sortie{margin-top:12px}
.tr-filtre{flex:none;width:42px;height:42px;border-radius:999px;border:0;background:var(--jaune);color:var(--encre);font-size:20px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center}
.tr-filtre:hover{background:#FFD35C}
.tr-panneau{background:#fff;border:1px solid var(--ligne);border-radius:16px;padding:14px;box-shadow:0 6px 20px rgba(20,19,17,.06);margin:0 0 12px}
@media(min-width:760px){.tr-panneau{padding:16px 20px 18px}.tr-barre{margin-bottom:12px}.tr-filtres,.tr-sel,.tr-lien-geo{font-size:14.5px}.tr-sel,.tr-lien-geo{padding:7px 12px}}
.tr-barre{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 14px}
.tr-filtres{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--marge);font-weight:700}
.tr-sel{font:inherit;font-size:14px;font-weight:700;color:var(--encre);background:var(--jaune-pale);border:1px solid var(--jaune);border-radius:999px;padding:8px 14px;cursor:pointer;max-width:240px}
.tr-bascule{margin-left:auto}
@media(min-width:760px){.tr-bascule{display:none}}
.tr-geo{display:inline-flex;align-items:center;gap:8px}
.tr-lien-geo{font:inherit;font-size:14px;font-weight:800;color:var(--encre);background:var(--jaune-pale);border:1px solid var(--jaune);border-radius:999px;padding:8px 14px;cursor:pointer}
.tr-lien-geo.on{background:var(--jaune)}
@media(min-width:760px){.tr-geo,.tr-lien-geo{margin-left:auto}.tr-geo .tr-lien-geo{margin-left:0}}
.tr-grille{display:grid;gap:14px}
@media(min-width:760px){.tr-grille.deux{grid-template-columns:minmax(0,12fr) minmax(0,13fr);gap:22px;align-items:start}}
.carte-trouver{height:320px;margin:0!important;width:auto!important}
@media(min-width:760px){.carte-trouver{height:330px;margin:0!important;width:auto!important}}
.tr-col-carte .carte-note{margin:8px 0 0;font-size:14.5px}
.pile-lignes{display:flex;flex-direction:column;gap:10px}
.ligne-job{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--papier);border:1px solid var(--ligne);border-radius:12px;padding:10px;cursor:pointer;box-shadow:0 2px 8px rgba(20,19,17,.04);font:inherit;color:var(--encre)}
@media(min-width:760px){.ligne-job{padding:8px 12px 8px 8px;gap:14px}.lj-photo{width:120px;height:78px;border-radius:8px}.lj-titre{font-size:15.5px}.lj-reperes{font-size:13.5px}.lj-prix{font-size:16px}.pile-lignes{gap:8px}}
.ligne-job:hover{border-color:var(--jaune);box-shadow:0 6px 16px rgba(20,19,17,.10)}
.lj-photo{flex:none;width:84px;height:84px;border-radius:10px;background:var(--neige) center/cover no-repeat;display:flex;align-items:center;justify-content:center}
.lj-ico{font-size:30px}
.lj-corps{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.lj-titre{font-family:var(--display);font-weight:800;font-size:16px;line-height:1.25}
.lj-reperes{font-size:14.5px;color:var(--marge);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lj-etq{display:flex;flex-wrap:wrap;gap:6px;font-size:13.5px}
.lj-etq:empty{display:none}
.lj-droite{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px;padding-left:6px}
.lj-prix{font-family:var(--display);font-weight:800;font-size:17px;color:var(--jaune-f)}
.lj-cote{font-size:13.5px;color:var(--marge);white-space:nowrap}
.lj-cat{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--jaune-f)}
.tr-offre{display:flex;align-items:center;gap:12px;background:var(--jaune-pale);border:1px solid var(--jaune);border-radius:12px;padding:10px 14px;margin:0 0 12px;font-size:14.5px}
.tr-panneau .sous{font-size:14.5px}
.tr-col-carte .carte-note{font-size:13.5px}
.tr-offre-ico{flex:none;font-size:18px}
/* v162 — la bannière photo de Trouver (fond-trouver.jpg, choisie dans Canva);
sans le fichier, le bloc reste un titre sur fond sombre. */
.bandeau-trouver{position:relative;margin:0 0 14px;border-radius:14px;overflow:hidden;min-height:200px;display:flex;align-items:flex-end;padding:14px 16px;background-color:var(--encre);box-shadow:var(--ombre);isolation:isolate}
/* v174 — comme la page témoin : la photo couvre la bande, cadrée sur les visages (point de mire par saison) */
.bandeau-trouver::after{content:"";position:absolute;inset:0;background:var(--photo) var(--mire,50% 45%)/cover no-repeat;z-index:-1}
.bandeau-trouver .bandeau-titre{color:var(--papier);margin:0;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.bandeau-trouver .bandeau-titre::after{display:none}
@media(min-width:760px){.bandeau-trouver{min-height:240px;width:auto;margin-left:0;margin-right:0}}
/* v158 — offre de lancement */
.chif-offre{outline:3px solid var(--jaune);outline-offset:-3px;padding:14px 16px 16px;border-radius:14px;margin:4px 0}
.chif-offre .chif-n{margin-bottom:2px}
/* v157 — l'état sous le bouton de mode (« 1 job offerte », « 2 candidatures envoyées ») */
.mode-col{display:flex;flex-direction:column;align-items:center}
.mode-etat{font-size:14.5px;font-weight:800;color:#141311;background:var(--jaune);border:0;border-radius:999px;padding:3px 12px;margin:-4px 4px 8px;white-space:nowrap;cursor:pointer;letter-spacing:.01em;line-height:1.3;max-width:calc(100% - 8px);overflow:hidden;text-overflow:ellipsis}
.mode-etat:hover{background:#FFD35C}
@media(max-width:640px){.mode-etat{font-size:13.5px;padding:2px 10px;margin:-3px 0 7px}}
/* (v185 : les réglages du bandeau sur téléphone sont plus haut, avec la règle « une ligne ») */
/* ===== Liste degagee et groupee v108 ===== */
.tr-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
margin:8px 0 18px}
.tr-outils{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tr-outils .bt{margin:0!important;width:auto;padding:10px 14px;font-size:14.5px}
.bascule-mini .bsc{padding:9px 14px;font-size:14.5px}
.puce-geo{background:var(--jaune);border-color:var(--jaune);font-weight:800}
.puces{margin-bottom:10px}
.geo-ligne{margin-bottom:22px}
.groupe-tete{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
margin:26px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--doux-ligne)}
.groupe-tete:first-of-type{margin-top:6px}
.groupe-nom{font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:-.01em}
.groupe-n{font-size:14.5px;color:var(--marge);font-weight:700}
@media(min-width:900px){
/* v235 (audit, bogue 2) — l'en-tête de groupe s'étirait sur 1160 px depuis la
colonne de droite : la page débordait de 170 px et le compte « 3 jobs »
sortait de l'écran. Il prend maintenant la largeur de sa colonne. */
.groupe-tete{width:auto;margin-left:0}
.grille-jobs{margin-bottom:8px}
}
/* Calendrier */
.cal-bloc{display:flex;flex-direction:column;gap:6px;margin:12px 0;padding:14px;
background:var(--fond);border:1px solid var(--doux-ligne);border-radius:12px}
.cal-bloc strong{font-size:14.5px}
.cal-select{flex:1;min-width:0;font:inherit;font-size:14px;padding:10px 12px;
border:1.5px solid var(--ligne);border-radius:10px;background:var(--papier);color:var(--encre)}
.cal-ligne{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}
.cal-ligne input{flex:1 1 130px;font-size:15px;padding:10px 12px;border:1px solid var(--doux-ligne);
border-radius:10px;background:var(--doux-fond)}
.cal-ligne .bt{flex:0 0 auto;margin:0}
/* ===== Page des categories v115 : hors du ruban ===== */
.grille-cats-toutes{margin-bottom:8px}
@media(min-width:900px){
.grille-cats-toutes,.vue .sec-tete{width:min(1160px, calc(100vw - 64px));
margin-left:calc(50% - min(580px, 50vw - 32px))}
.grille-cats-toutes{grid-template-columns:repeat(3,1fr);gap:18px}
}
@media(min-width:1200px){.grille-cats-toutes{grid-template-columns:repeat(4,1fr)}}
.grille-cats-toutes .tuile-cat{min-height:168px}
.grille-cats-toutes .tc-image{height:190px}
/* v154 — relance des textos */
.alerte-textos{border-color:var(--jaune-f)}
.alerte-textos .bt.mini{margin-top:8px}
/* v141 — outils et équipement */
.outils-pastille{color:var(--jaune-f);font-weight:800}
.cand-eq{font-size:14.5px;color:var(--marge);margin:0 0 8px}
/* v138 — contenu des pages légales affiché dans l'app */
.legal h1{font-family:var(--display);font-weight:800;font-size:22px;line-height:1.2;margin:0 0 6px;letter-spacing:-.015em}
.legal h2{font-family:var(--display);font-weight:800;font-size:17px;line-height:1.25;margin:22px 0 6px;padding-top:12px;border-top:1px solid var(--ligne);letter-spacing:0;text-transform:none;color:var(--encre)}
.legal h3{font-size:15px;font-weight:800;margin:16px 0 4px;letter-spacing:0;text-transform:none;color:var(--encre)}
.legal p{margin:0 0 10px;font-size:15px;line-height:1.55}
.legal ul{margin:0 0 10px;padding-left:20px;font-size:15px;line-height:1.55}
.legal li{margin-bottom:4px}
.legal .meta{color:var(--marge);font-size:14.5px}
.legal .encadre{background:var(--jaune-pale);border-left:5px solid var(--jaune);border-radius:0 8px 8px 0;padding:10px 12px;margin:12px 0}
.legal .tableau{overflow-x:auto}
.legal table{width:100%;border-collapse:collapse;margin:6px 0 12px;font-size:14px}
.legal th,.legal td{text-align:left;vertical-align:top;padding:6px 6px;border-bottom:1px solid var(--ligne)}
.legal th{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--marge)}
.legal a{font-weight:700;color:var(--encre);text-decoration:underline;text-decoration-color:var(--jaune-f);text-underline-offset:2px}
/* v233 — la FAQ : une question par ligne, on touche et la réponse s'ouvre dessous */
.legal .en-deux-phrases{background:var(--jaune-pale);border-radius:12px;padding:12px 14px;margin:10px 0 14px;font-size:15.5px;line-height:1.5}
.legal ol{margin:0 0 10px;padding-left:22px;font-size:15px;line-height:1.55}
.legal details.q{border-bottom:1px solid var(--ligne)}
.legal details.q>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:12px 0;font-weight:700;font-size:16.5px;line-height:1.35}
.legal details.q>summary::-webkit-details-marker{display:none}
.legal details.q>summary::after{content:"+";flex:none;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:999px;background:var(--jaune-pale);font-size:22px;font-weight:700;line-height:1}
.legal details.q[open]>summary::after{content:"\2212";background:var(--jaune)}
.legal details.q .r{padding:0 0 14px}
.legal details.q .r>:last-child{margin-bottom:0}
.legal .fin{margin:22px 0 0}
.chg-tel{margin-top:12px;padding-top:12px;border-top:1px dashed var(--ligne)}
.chg-tel .champ{margin-bottom:10px}
/* ===== v236 — paquet 1 de l'audit : le premier écran ===== */
/* Le héros court : plus de pleine page, les deux portes arrivent tout de suite. */
.bande.bande-courte{min-height:0;display:block;padding-top:150px;padding-bottom:40px}
.bande-courte .bande-in{width:100%;max-width:820px}
.bande-courte .accroche{font-size:clamp(34px,7.2vw,68px);line-height:1.04;margin:0 0 12px}
.bande-courte .accroche-sous{font-size:clamp(15.5px,1.8vw,18px);max-width:520px;margin-bottom:0}
.bande-courte .bande-pastille{margin-bottom:14px}
@media(max-width:900px){.bande.bande-courte{padding-top:120px;padding-bottom:34px}}
@media(max-width:560px){.bande.bande-courte{padding-top:78px;padding-bottom:28px}
.bande-courte .accroche{font-size:clamp(31px,8.6vw,40px)}
.bande-courte .accroche-sous{font-size:15.5px}}
/* Sur un téléphone, la photo (la personne est à droite, le fondu noir à gauche)
se cadre à droite : avant, un écran étroit n'en montrait que le noir. */
@media(max-width:759px){.bande-courte .bande-fond{background-position:right center}
.bande-courte::before{background:linear-gradient(90deg,rgba(20,19,17,.9) 0%,rgba(20,19,17,.72) 45%,rgba(20,19,17,.38) 100%)}}
/* Les deux portes, collées au héros */
.portes.portes-hautes{margin-top:-18px;position:relative;z-index:3;margin-bottom:0}
/* « Comment ça marche » : trois étapes, juste sous les portes */
.bloc-etapes{padding:26px max(16px, calc(50vw - 300px)) 22px}
@media(min-width:900px){.bloc-etapes{padding:30px max(24px, calc(50vw - 560px)) 26px}}
.etapes-cc{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:12px;text-align:left}
.etapes-cc .ecc-liens{text-align:center}
@media(min-width:760px){.etapes-cc{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:start}
.etapes-cc .ecc-liens{grid-column:1 / -1}}
.ecc{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.4;color:var(--encre)}
.ecc-n{flex:none;width:32px;height:32px;border-radius:999px;background:var(--jaune);color:var(--encre);font-family:var(--display);font-weight:800;font-size:16px;display:inline-flex;align-items:center;justify-content:center}
.ecc-liens{margin:2px 0 0;font-size:14.5px;color:var(--marge)}
/* Les jobs de l'accueil : des lignes, comme dans « Trouver »; sur ordinateur le bloc
sort de la colonne de 600 px (deux lignes par rangée), comme l'ancien cadre. */
.acc-lignes{max-width:1120px;margin:0 auto}
@media(min-width:900px){.acc-cat{width:min(1160px, calc(100vw - 64px));margin-left:calc(50% - min(580px, 50vw - 32px))}}
.acc-lignes .lj-reperes{display:flex;flex-wrap:wrap;gap:4px 14px;white-space:normal;overflow:visible;text-overflow:clip}
.acc-liens{text-align:center;font-size:14.5px;color:var(--marge);margin:14px 0 0}
.acc-cat .sec-tete{max-width:1120px;margin-inline:auto}
@media(min-width:900px){.acc-lignes{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}}
/* Pendant l'offre de lancement : deux pastilles de prix, pas trois */
@media(min-width:620px){.grille-chiffres-2{grid-template-columns:repeat(2,1fr)}}
/* « Trouver » sur téléphone : une rangée de titre avec la bascule, la recherche,
une seule rangée de puces (« Près de chez moi » en premier), puis les jobs. */
.tr-titre-mobile{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0 10px}
.tr-titre-mobile h2.titre{margin:0;font-size:20px}
.tr-titre-mobile .tr-bascule{flex:none}
.tr-cherche-mobile{margin:0 0 10px}
.puces-trouver{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin:0 -16px 8px;padding-left:16px;padding-right:16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.puces-trouver::-webkit-scrollbar{display:none}
.puces-trouver .puce{flex:none;white-space:nowrap}
.tr-panneau-mobile .geo-ligne{margin:0 0 12px}
.vue-trouver .tr-panneau.tr-panneau-mobile{padding:0;box-shadow:none;background:transparent} /* la règle générale du panneau (18 px) coinçait les lignes à 322 px */
.tr-visiteuse{margin:14px 0 0}
/* ===== v241 — le formulaire : adresse unique, exemples, brouillon, bouton conditionnel ===== */
.af-exemples{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:2px 0 10px}
.af-exemples .aide{margin:0 4px 0 0;flex:1 1 100%}
.puce.puce-ex{min-height:36px;padding:6px 12px;font-size:13.5px;font-weight:700;letter-spacing:0;text-transform:none;border-color:var(--jaune);background:var(--jaune-pale)}
.af-manque{margin:8px 0 0;text-align:center;color:#7a5a08;font-weight:700}
.af-manque-lien{font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;padding:2px 0;min-height:0}
.af-brouillon{margin:10px 0 0;text-align:center}
.bt.af-publier:disabled{opacity:.55;cursor:not-allowed}
.af-moment-date{border-style:dashed}
#sugg-adresse button{display:block;width:100%;text-align:left;font:inherit;padding:10px 12px;border:0;background:var(--papier);border-bottom:1px solid var(--ligne);cursor:pointer}
#sugg-adresse button:hover{background:var(--jaune-pale)}
/* ===== v240 — les feuilles (plus de fenêtres système) ===== */
.feuille-fond{position:fixed;inset:0;z-index:300;background:rgba(20,19,17,.5);display:flex;align-items:flex-end;justify-content:center;padding:0}
.feuille{background:var(--papier);border-radius:20px 20px 0 0;padding:22px 20px calc(18px + env(safe-area-inset-bottom,0px));width:100%;max-width:600px;box-shadow:0 -12px 40px rgba(20,19,17,.28);max-height:88vh;overflow:auto}
.feuille p{font-size:16px;line-height:1.5;margin:0 0 10px;color:var(--encre)}
.feuille p.feuille-titre{font-family:var(--display);font-weight:800;font-size:19px;line-height:1.25;margin-bottom:12px}
.feuille p:only-of-type{font-family:var(--corps);font-weight:600;font-size:17px}
.feuille-bts{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.feuille-bts .bt{margin:0}
.feuille-lien{width:100%;font:inherit;font-size:15px;padding:12px;border:1px solid var(--ligne-forte);border-radius:8px;background:var(--neige)}
.bt.bt-danger{background:#B5341C;color:#fff;border-color:#B5341C}
@media(min-width:760px){.feuille-fond{align-items:center;padding:24px}.feuille{border-radius:20px;padding:26px 26px 22px;width:auto;min-width:420px}.feuille-bts{flex-direction:row-reverse;justify-content:flex-start;flex-wrap:wrap}.feuille-bts .bt{width:auto;min-width:170px}
/* v256g — une feuille à plus de deux boutons (les motifs d'annulation, par exemple) : en colonne, même sur
ordinateur. En rangée, six boutons de 170 px débordaient de la feuille et se cachaient l'un l'autre. */
.feuille-bts.feuille-bts-liste{flex-direction:column;flex-wrap:nowrap}.feuille-bts.feuille-bts-liste .bt{width:100%;min-width:0}}
/* un champ en erreur : bordure rouge et le message dessous, qui s'efface quand on corrige */
.champ-erreur input,.champ-erreur textarea,.champ-erreur select{border-color:#B5341C!important;box-shadow:0 0 0 3px rgba(181,52,28,.14)}
.erreur-champ{color:#B5341C;font-size:14.5px;font-weight:700;margin:6px 0 0}
/* ===== v239 — ordinateur : carte collante, fiche en deux colonnes ===== */
@media(min-width:760px){
.tr-grille.deux .tr-col-carte{position:sticky;top:calc(var(--entete-h) + 14px);align-self:start}
.tr-grille.deux .carte-trouver{height:calc(100vh - var(--entete-h) - 80px)!important;min-height:380px}
}
.f-cta{display:none}
@media(min-width:1000px){
.env.fiche{max-width:1180px;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"tete tete" "media droite" "corps droite" "suite droite";column-gap:40px;align-items:start}
.f-tete{grid-area:tete}
.f-media{grid-area:media}
.f-media .cat{display:block;margin:10px 0 2px}
.f-media h2.titre{display:block;margin:0 0 6px}
.f-droite{grid-area:droite;position:sticky;top:calc(var(--entete-h) + 16px);background:var(--papier);border:1px solid var(--ligne);border-radius:16px;padding:18px 20px 16px;box-shadow:0 10px 30px rgba(20,19,17,.07);max-height:calc(100vh - var(--entete-h) - 32px);overflow:auto}
.f-corps{grid-area:corps}
.f-suite{grid-area:suite}
.f-droite .fiche-prix{margin-top:0}
.f-droite .etapes-job{margin-bottom:10px}
.f-cta{display:block;margin-top:6px}
p.f-cta{margin:6px 0 0;text-align:center}
.fiche .f-droite .bloc{border-color:#EAE5D9;box-shadow:none}
.galerie.galerie-grande .galerie-vue img{max-height:520px}
}
/* ===== v238 — une seule navigation sur téléphone ===== */
.barre-onglets{display:none}
.sous-onglets{display:none}
.etats-mobile,.cloche-mobile{display:none}
@media(max-width:759px){
:root{--onglets-h:62px}
.barre-onglets{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--papier);border-top:1px solid var(--ligne);padding:5px 4px calc(5px + env(safe-area-inset-bottom,0px));justify-content:space-around;box-shadow:0 -6px 20px rgba(20,19,17,.06)}
.bo{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:2px;font:inherit;font-size:11.5px;font-weight:700;letter-spacing:.01em;color:var(--marge);background:none;border:0;padding:3px 2px 2px;min-height:48px;cursor:pointer}
.bo-ico{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:26px;border-radius:13px}
.bo svg{width:23px;height:23px}
.bo.on{color:var(--encre)}
.bo.on .bo-ico{background:var(--jaune)}
.bo-pt{position:absolute;top:-2px;right:6px;width:10px;height:10px;border-radius:999px;background:#B5341C;border:2px solid var(--papier)}
body{padding-bottom:calc(var(--onglets-h) + 24px)}
.barre-action{bottom:var(--onglets-h);padding-bottom:10px}
.onglets,.fleche-retour,.modes{display:none!important}
.sous-onglets{display:block;margin:12px 0 0}
.sous-onglets .env{display:flex;gap:8px}
.so{flex:1;font:inherit;font-size:14px;font-weight:800;padding:11px 8px;border-radius:999px;border:1px solid var(--ligne);background:var(--papier);color:var(--marge);display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px}
.so.on{background:var(--jaune);border-color:var(--jaune);color:var(--encre)}
.so .ong-nb{min-width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.etats-mobile{display:flex;flex:1;min-width:0;gap:6px;justify-content:center;flex-wrap:wrap}
.etats-mobile .mode-etat{margin:0;max-width:150px}
.cloche-mobile{display:inline-flex;position:static;transform:none;margin:0;border:0;background:transparent;color:var(--jaune);font-size:21px;padding:6px;flex:none}
.entete-droite{flex:1;gap:6px}
}
/* ===== v237 — la fiche d'une job ===== */
.galerie.galerie-grande{display:flex;gap:8px;margin:4px -16px 12px;padding:0 16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.galerie-grande::-webkit-scrollbar{display:none}
.galerie-grande .galerie-vue{flex:none;width:100%;max-width:none;scroll-snap-align:start;border-radius:14px}
.galerie-deux .galerie-vue{width:88%}
.galerie-grande .galerie-vue img{aspect-ratio:4/3;max-height:460px;object-fit:cover}
.galerie-note{font-size:13.5px;color:var(--marge);margin:-4px 0 10px}
@media(min-width:760px){.galerie.galerie-grande{margin:4px 0 14px;padding:0}}
.fiche-prix{font-family:var(--display);font-size:30px;font-weight:800;line-height:1.1;margin:6px 0 8px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.fiche-prix .aide{font-size:14px}
.fiche-prix-note{font-family:var(--corps);font-size:14.5px;font-weight:600;color:var(--marge)}
.fiche-reperes{display:flex;flex-direction:column;gap:4px;font-size:15px;color:var(--marge);margin:0 0 14px}
.fiche-reperes .mini-etoiles{color:var(--jaune-f)}
.fiche-haut{margin:0 0 6px}
/* Sur sa propre job (ou une job où l'on est en jeu), la photo est plus basse : ce qu'on
vient voir, ce sont les candidatures, les coordonnées, l'état. */
.fiche-suivi .galerie-grande .galerie-vue img{aspect-ratio:16/7;max-height:190px}
.fiche-haut .bloc:first-child,.fiche-haut .avis:first-child{margin-top:0!important}
/* Une ligne de job sur téléphone : la photo à gauche, tout le texte à droite, le
prix et la cote sur une dernière ligne — le titre garde 250 px au lieu de 101. */
@media(max-width:759px){
.ligne-job{display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;row-gap:6px;align-items:start}
.ligne-job .lj-photo{grid-row:1 / span 2;align-self:start}
.ligne-job .lj-corps{min-width:0}
.ligne-job .lj-droite{grid-column:2;display:flex;flex-direction:row;align-items:baseline;justify-content:space-between;gap:10px;text-align:left;padding-left:0}
.ligne-job .lj-photo{width:96px;height:72px}
.ligne-job .lj-prix{font-size:17px}
.ligne-job .lj-titre{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ligne-job .lj-reperes{display:flex;flex-wrap:wrap;gap:4px 12px;white-space:normal;overflow:visible;text-overflow:clip}
.grille-cats-accueil .tc-image{height:118px}
.acc-lignes .ligne-job:nth-child(n+5){display:none} /* quatre jobs sur l'accueil d'un téléphone, six sur ordinateur */
}
/* ===================== v242 — finitions (audit, paquet 3c) =====================
Les prix en police d'affichage (plus de « machine à écrire ») ; les petits textes des cartes
à 14–15 px ; Mon compte sans boîtes vertes ; le calendrier en un bouton ; la case des textos. */
.prix,.d-prix{font-family:var(--display);letter-spacing:0}
.carte .prix{font-size:17px;font-weight:800}
.etq{font-size:14.5px}
.lj-cat,.cat,.tr-panneau-mobile .lj-cat{font-size:14px;letter-spacing:.04em}
.meta,.carte .meta{font-size:15px}
.lj-reperes,.vue-trouver .lj-reperes,.acc-lignes .lj-reperes{font-size:15px!important}
@media(min-width:760px){.lj-reperes{font-size:14.5px!important}}
.annonce-chip{font-size:14px}
.af-montant-autre{font-size:14.5px}
.lj-cote{font-size:14px}
.compte-fiche{display:flex;flex-direction:column;gap:2px;margin:8px 0 10px;padding:12px 14px;background:var(--papier);border:1px solid var(--ligne);border-radius:12px;font-size:17px}
.compte-nom{font-family:var(--display);font-weight:800;font-size:20px}
.compte-tel{color:var(--marge)}
.compte-fiche-publique{display:block;font-size:16px}
.cal-ajouter{width:100%;margin:8px 0 0}
.cal-autres{display:block;margin-top:8px;text-align:center}
.cal-ligne .erreur-champ{flex:1 1 100%}
.cgu-ligne .sms-details{display:block;margin-top:4px;font-weight:400}
/* ===================== v243 — TafStand sur le téléphone (installer) ===================== */
.install-ligne{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:10px 0 0;padding:12px 14px;background:var(--jaune-pale);border:1px solid var(--jaune);border-radius:12px;font-size:15px;line-height:1.4}
.install-bts{display:flex;align-items:center;gap:14px;margin-left:auto}
.install-etapes{margin:8px 0 0 22px;padding:0;text-align:left;display:grid;gap:10px;font-size:16px}
.ico-partager{vertical-align:middle;color:#0A84FF;margin-left:4px}
/* ===================== v244 — l'en-tête visiteur : « J'ai déjà un compte » ===================== */
.ev-droite{display:flex;align-items:center;gap:14px}
.lien-entete{font:inherit;font-size:14px;font-weight:700;color:#E4DDCE;text-decoration:underline;text-underline-offset:3px;padding:8px 0;min-height:44px}
@media(max-width:420px){.lien-entete{font-size:13.5px}}
/* ===================== v246 — l'adresse choisie, avec son point sur la carte ===================== */
.adr-ok{margin:10px 0 4px;border:1.5px solid var(--ok);background:var(--ok-pale);border-radius:12px;padding:12px 14px}
.adr-tete{display:flex;align-items:flex-start;gap:10px}
.adr-coche{flex:none;width:26px;height:26px;border-radius:50%;background:var(--ok);color:#fff;font-weight:800;display:inline-flex;align-items:center;justify-content:center;font-size:15px}
.adr-texte{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.adr-texte strong{font-size:16px;line-height:1.3}
.adr-tete .lien-legal{flex:none;padding:4px 0}
.adr-num{margin:10px 0 0}
.adr-num input{max-width:160px}
.adr-carte{height:190px;margin:10px 0 0;border-radius:10px;overflow:hidden;background:#e9e4d8;border:1px solid var(--ligne)}
.adr-carte-aide{margin:6px 0 0}
.adr-carte .leaflet-marker-icon{cursor:grab}
.adr-pin{display:block;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
#sugg-adresse button{padding:12px 12px;font-size:15.5px}
/* ===================== v247 — Mes candidatures : « Retirer de ma liste » ===================== */
.cand-passee{position:relative;margin:0 0 16px}
.cand-passee .carte{margin:0}
.cand-passee .cand-oublier{display:block;margin:6px 0 0 auto;font-size:14.5px;color:var(--marge);text-decoration-color:var(--ligne)}
.jobs-faites{margin-top:8px}
.jobs-faites > summary{cursor:pointer;font-weight:700;padding:12px 0;min-height:44px}
/* ===================== v248 — les repères de vie (vrais) et l'arrivée dans le quartier ===================== */
.bloc-vie{margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:22px}
@media(min-width:900px){.bloc-vie{padding-top:0;padding-bottom:28px}}
.vie-titre{display:block;font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.02em;color:var(--marge);margin:0 0 8px}
.vie-reperes{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;padding:14px 16px;background:var(--papier);border:1px solid var(--ligne);border-radius:14px;font-size:15.5px}
.vie-reperes .vie-titre{width:100%;margin:0 0 2px}
.vie-rep strong{font-family:var(--display);font-size:20px;font-weight:800;color:var(--encre)}
.vie-lancement{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;background:var(--jaune-pale);border:1px solid var(--jaune);border-radius:14px;font-size:15.5px;line-height:1.45}
.vie-fusee{font-size:26px;line-height:1}
.vie-lancement + .vie-reperes{margin-top:10px} /* v288 : la fusée « nouveau » reste, les vrais chiffres s'affichent dessous */
.vie-recentes{margin-top:12px;padding:14px 16px;background:var(--papier);border:1px solid var(--ligne);border-radius:14px;display:grid;gap:10px}
.vie-job{display:flex;flex-direction:column;gap:2px;text-align:left;padding:8px 0;border-top:1px solid var(--ligne)}
.vie-job:first-of-type{border-top:0;padding-top:0}
.vie-cat{font-size:13.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.vie-job-titre{font-weight:700;font-size:16px}
.vie-job-meta{color:var(--marge);font-size:14.5px}
.vie-reperes{text-align:left}
.vide-bts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.vide-bts .bt{margin:0}
@media(min-width:900px){.vie-recentes{grid-template-columns:1fr 1fr;column-gap:32px}.vie-recentes .vie-titre{grid-column:1 / -1}.vie-job:nth-of-type(2){border-top:0;padding-top:0}}
/* ===================== v252 — l'Administration : la modération ===================== */
.mod-titre{margin:22px 0 6px;font-family:var(--display);font-size:13.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--marge)}
.mod-tete{display:flex;gap:12px;align-items:flex-start}
.mod-photo{width:72px;height:72px;object-fit:cover;border-radius:10px;flex:none}
.mod-motifs{margin:6px 0 0;padding-left:18px;font-size:14.5px}
.mod-bts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.mod-bts .bt.mini{width:auto}
/* ===================== v251 — les manques en rouge sur la ligne, l'avis STOP ===================== */
@media(max-width:400px){#btn-langue{display:none}} /* petits écrans : la place manque pour les deux liens */
.af-manque-lien{display:block;margin:3px auto 0}
.lig.champ-erreur{flex-wrap:wrap}
.lig .erreur-champ{flex:1 1 100%;margin:0 0 2px}
.af-publier.pale{opacity:.75}
.avis-arret{background:#FFF0C8;border:2px solid #FFC53D}
/* ===================== v249 — la photo aussi à la fin du formulaire ===================== */
.af-photo3{margin:14px 0 16px;padding:12px 14px;border:1.5px dashed var(--ligne);border-radius:12px;background:var(--papier)}
.af-photo3 .photos-zone:empty{display:none}
.af-attention{border-color:var(--jaune-f);box-shadow:0 0 0 4px var(--jaune-pale)}
/* ===================== v255 — le voile d'attente ===================== */
.voile{position:fixed;inset:0;z-index:400;background:rgba(255,252,247,.72);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:24px}
.voile[hidden]{display:none}
.voile-boite{background:var(--papier,#fff);border-radius:18px;padding:22px 26px;box-shadow:0 12px 40px rgba(20,19,17,.22);display:flex;flex-direction:column;align-items:center;gap:12px;min-width:200px;max-width:320px;text-align:center}
.voile-roue{width:38px;height:38px;border-radius:50%;border:4px solid rgba(20,19,17,.12);border-top-color:var(--jaune,#f5c400);animation:voile-tourne .9s linear infinite}
.voile-texte{margin:0;font-weight:700;font-size:16px;color:var(--encre,#141311)}
@keyframes voile-tourne{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.voile-roue{animation-duration:2s}}
body.voile-ouvert{overflow:hidden}
/* la boîte à suggestions, dans la feuille */
.feuille textarea{width:100%;min-height:120px;font:inherit;font-size:16px;padding:10px 12px;border:2px solid var(--ligne,#ddd);border-radius:12px;resize:vertical;box-sizing:border-box}
.feuille label{display:block;font-weight:700;margin:0 0 6px}
/* l'Administration : suggestions traitées en retrait, pastille de date */
.mod-sugg-traitee{opacity:.62}
.mod-sugg p{word-break:break-word}
/* ===================== v256d — la pastille de prix des candidates, et ce qui se touche se reconnaît ===================== */
/* 1. « Propose gratuit au lieu de 10 $ » s'affichait en colonne d'un mot par ligne : la pastille portait
la classe « moins » (prix plus bas que l'offre), qui est aussi celle du bouton « − » des listes
(width:44px), et « plus » (prix plus haut), celle du lien souligné « + Ajouter ». Elle a maintenant
ses propres classes (cp-moins, cp-plus — index.html). Toute contre-offre plus basse était touchée. */
.cand-prix{max-width:100%;width:auto;line-height:1.4}
.cand-prix.cp-plus{background:#FFF3D6;color:#7A5200}
.cand-prix.cp-moins{background:#E8F5EC;color:#1B6B3A}
/* L'en-tête de la candidate : le nom reste entier; la cote (« Première job sur TafStand ») passe
dessous quand la place manque, au lieu que les deux se cassent mot par mot. */
.cand-tete{flex-wrap:wrap;row-gap:2px}
/* 2. Ce qui se clique porte une ombre : boutons (jaunes et pâles), pastilles de filtre, bascules,
bouton Retour, cartes de choix. Les encadrés d'information, eux, restent à plat (leur ombre est à
peine visible) : on voit d'un coup d'œil ce qui attend un geste. Pressé : le bouton s'enfonce. */
:root{--ombre-bouton:0 1px 2px rgba(20,19,17,.14),0 4px 10px rgba(20,19,17,.16);
--ombre-bouton-haut:0 2px 3px rgba(20,19,17,.14),0 8px 18px rgba(20,19,17,.20);
--ombre-bouton-bas:0 1px 2px rgba(20,19,17,.16)}
.bt{box-shadow:var(--ombre-bouton);transition:transform .1s,box-shadow .1s,background .15s}
.bt.pale{background:#fff;border-color:var(--ligne)}
.bt:hover{box-shadow:var(--ombre-bouton-haut)}
.bt:active{transform:translateY(1px);box-shadow:var(--ombre-bouton-bas)}
.bt:disabled,.bt[aria-disabled="true"]{box-shadow:none;transform:none}
.puce,.bsc,.retour,.choix,.bt-role{box-shadow:var(--ombre-bouton)}
.puce,.bt-role:not(.plein){border-color:var(--ligne)}
.puce:hover,.bsc:hover,.retour:hover,.bt-role:hover{box-shadow:var(--ombre-bouton-haut)}
.bt-role:active{transform:translateY(1px);box-shadow:var(--ombre-bouton-bas)}
/* Deux boutons côte à côte (accueil « Vous », Administration) : le premier ne doit pas dépasser le second
(la marge d'empilement .bt+.bt ne vaut que pour les boutons les uns sous les autres). */
.vous-bts .bt,.mod-bts .bt{margin:0}
.puce.on,.bsc.on{box-shadow:var(--ombre-bouton-bas)}
.choix{transition:transform .1s,box-shadow .1s}
.choix:hover{transform:none;box-shadow:var(--ombre-bouton-haut)}
.choix:active{transform:translateY(1px);box-shadow:var(--ombre-bouton-bas)}
@media(hover:hover){.bt:hover,.choix:hover{transform:translateY(-1px)}}
/* ===================== v270 — Statistiques de l'Administration ===================== */
.st-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:12px 0}
.st-tuile{background:var(--papier);border:1px solid var(--doux-ligne);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:4px;box-shadow:var(--ombre-basse)}
.st-titre{font-size:13.5px;font-weight:700;color:var(--marge);text-transform:uppercase;letter-spacing:.04em}
.st-valeur{font-family:var(--display);font-size:32px;font-weight:800;line-height:1.1}
.st-sous{font-size:13.5px;color:var(--marge);line-height:1.45}
.st-delta{display:inline-block;font-weight:700;color:var(--marge)}
.st-delta.st-plus{color:#1B6B3A}.st-delta.st-moins{color:#B5341C}
.st-bloc{margin-top:12px}
.st-barres{display:flex;align-items:flex-end;gap:4px;height:120px;border-bottom:1px solid var(--ligne);padding-bottom:2px}
.st-jour{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
.st-colonnes{display:flex;align-items:flex-end;gap:1px;height:100px;width:100%;justify-content:center}
.st-colonnes i{display:block;width:22%;max-width:9px;min-height:1px;border-radius:2px 2px 0 0;background:var(--ligne)}
.st-colonnes i.st-jobs,.st-leg.st-jobs{background:var(--jaune);color:var(--jaune)}
.st-colonnes i.st-insc,.st-leg.st-insc{background:#2563EB;color:#2563EB}
.st-colonnes i.st-cand,.st-leg.st-cand{background:#16A34A;color:#16A34A}
.st-colonnes i.st-paie,.st-leg.st-paie{background:#141311;color:#141311}
.st-leg{background:none!important;font-size:14px}
.st-jour-nom{font-size:11.5px;color:var(--marge);margin-top:4px;white-space:nowrap}
.st-deux{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:760px){.st-deux{grid-template-columns:1fr 1fr;gap:12px}.st-deux .st-bloc{margin-top:12px}}
.st-table{width:100%;border-collapse:collapse;font-size:14.5px}
.st-table th{text-align:left;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--marge);padding:4px 6px;border-bottom:1px solid var(--ligne);white-space:nowrap}
.st-table td{padding:6px;border-bottom:1px solid var(--doux-ligne)}
.st-table td:not(:first-child),.st-table th:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
/* ===== v272 — iPhone, site installé sur l'écran d'accueil : l'entête ne passe plus sous l'heure et la pile ===== */
/* Installé comme une app (apple-mobile-web-app-status-bar-style = black-translucent, viewport-fit=cover),
le site commence SOUS la barre d'état d'iOS : l'heure se dessinait sur le logo, la pile sur le nom et la
cloche. env(safe-area-inset-top) — la variable --sat — vaut la hauteur de cette barre (0 ailleurs). On
l'ajoute en bordure haute de l'entête, couleur charbon : sur l'entête noire, c'est invisible (le bandeau
descend simplement); sur l'entête claire (tablette), c'est une bande charbon sous l'heure, qui est écrite
en blanc par iOS. Le logo, les modes, le nom et la cloche descendent en dessous. Les positions collantes
(onglets, colonne de droite, carte) suivent, --entete-h comprenant la bordure. */
.entete{border-top:var(--sat) solid var(--charbon)}
/* La couverture des visiteurs (pas connectés) n'a pas d'entête : son bandeau (logo, « J'ai déjà un compte »,
S'inscrire) est posé en haut de la photo. Même recette : une bordure charbon de la hauteur de la barre;
la photo et le bandeau (positionnés dans la boîte intérieure) commencent en dessous. */
.accueil .bande{border-top:var(--sat) solid var(--charbon)}
/* ===== v274 → v280 — la licence de la RBQ : plus rien dans le parcours (LP, 10 octobre). Il ne reste que la ligne,
chez le client, d'une licence déclarée par une candidature d'avant. ===== */
.cand-licence strong{color:var(--encre)}
/* ===== v281 — le flash de lancement : une bande jaune sous l'en-tête (ou sous la bande d'accueil), qui se ferme d'un × ===== */
.flash{background:var(--jaune);color:var(--encre);border-bottom:1px solid var(--jaune-f);position:relative;z-index:45;text-align:left}
/* sur l'accueil (visiteur), la bande d'accueil est pleine largeur : le flash aussi, avec sa propre marge */
.accueil > .flash{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);box-sizing:border-box}
.accueil > .flash .flash-in{padding-left:16px;padding-right:16px}
@media(min-width:760px){.flash .flash-in{max-width:none;padding:12px clamp(16px,4vw,80px);flex-wrap:nowrap}.flash-texte{flex:1 1 auto;font-size:15.5px}.flash-x{margin-left:8px}}
.flash-in{display:flex;align-items:center;gap:14px;padding:10px 0;flex-wrap:wrap}
.flash-fusee{font-size:24px;line-height:1;flex:none}
.flash-texte{flex:1 1 280px;font-size:14.5px;line-height:1.35;min-width:0}
.flash-texte strong{font-family:var(--display);font-size:15.5px;letter-spacing:.01em}
.flash-actions{display:flex;align-items:center;gap:16px;flex:none}
.flash-actions .bt.mini{padding:9px 14px;font-size:13.5px;background:var(--encre);color:var(--jaune);border-color:var(--encre);box-shadow:none;margin:0}
.flash-actions .bt.mini:hover{background:#000}
.flash-partage{position:relative;display:inline-block}
.flash .lien-legal{text-decoration-color:var(--encre);font-size:14px}
.flash .partage-menu{right:0;left:auto;top:calc(100% + 10px)}
@media(max-width:640px){.flash .partage-menu{left:0;right:auto}}
.flash-x{flex:none;background:none;border:0;font-size:28px;line-height:1;padding:2px 6px;color:var(--encre);opacity:.65;cursor:pointer;margin-left:auto;letter-spacing:0;text-transform:none}
.flash-x:hover{opacity:1}
@media(max-width:640px){
.flash-in{gap:6px 10px;padding:10px 0 12px}
.flash-fusee{order:1}.flash-x{order:2}
.flash-texte{order:3;flex-basis:100%;font-size:14px}
.flash-actions{order:4;width:100%;justify-content:flex-start;margin-top:4px}
}
/* le babillard vide (Trouver) : les deux gestes, et le menu de partage ancré sous son bouton */
.vide .flash-partage .partage-menu{right:auto;left:50%;transform:translateX(-50%);top:calc(100% + 8px)}
.vie-rep-seul{display:inline-block;margin-top:8px}
/* ===== v277 — l'écran d'attente, avant que le code n'arrive : le logo et « Un instant… », pas un mot gris perdu ===== */
.chargement{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:60vh;padding:40px 20px;color:var(--marge);font-weight:600;animation:chargePulse 1.4s ease-in-out infinite}
.chargement img{width:120px;height:auto;display:block}
@keyframes chargePulse{0%,100%{opacity:1}50%{opacity:.5}}
/* ===== v289 — équipement en pastilles, « pour un proche », « Il faut apporter… » en un toucher ===== */
/* Mon compte : l'équipement par groupes */
.eq-groupe{margin:0 0 14px}
.eq-titre{display:block;font-size:14px;font-weight:800;color:var(--marge);margin:0 0 6px}
.eq-puces{display:flex;flex-wrap:wrap;gap:8px}
.eq-puce{position:relative;display:inline-flex;margin:0;max-width:100%}
.eq-puce input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.eq-puce span{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 14px;border:1px solid var(--ligne);border-radius:999px;background:var(--papier);font-weight:700;font-size:15px;line-height:1.2;cursor:pointer}
.eq-puce input:checked + span{background:var(--jaune);border-color:var(--jaune)}
.eq-puce input:checked + span::before{content:"\2713";font-weight:800}
.eq-puce input:focus-visible + span{outline:3px solid var(--encre);outline-offset:2px}
.eq-ajout{display:flex;gap:8px;align-items:stretch;margin-top:10px}
.eq-ajout input{flex:1 1 auto;min-width:0;width:auto;min-height:44px;padding:10px 12px;border:1px solid var(--ligne);border-radius:12px;background:var(--papier);font-size:16px}
.eq-ajout input:focus{border-color:var(--jaune-f);box-shadow:0 0 0 3px var(--jaune-pale);outline:none}
.eq-ajout .bt{flex:none;width:auto;min-height:44px;margin:0}
/* ce que le client voit sur la fiche d'une candidature */
.eq-lib{font-weight:700}
.eq-plus{color:var(--marge);font-weight:700}
.cand-eq strong{color:var(--encre);background:var(--jaune-pale);border-radius:4px;padding:0 4px}
/* le formulaire : « Pour qui est cette job ? » et « Quoi apporter » */
.af-pour-bt,.af-eq-puce{font:inherit;font-weight:700;border:1px solid var(--ligne);background:var(--papier);border-radius:999px;padding:8px 14px;min-height:44px;cursor:pointer;color:var(--encre)}
.af-pour-bt.on,.af-eq-puce.on{background:var(--jaune);border-color:var(--jaune)}
.af-eq-puce.on::before{content:"\2713\00a0";font-weight:800}
.af-eq-puces{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.af-eq-puces:empty{display:none}
.af-proche-info{background:var(--jaune-pale);border:1px solid var(--jaune);border-radius:12px;padding:12px 14px;margin:8px 0 0;font-size:15px;line-height:1.5}
.af-proche-info[hidden],.af-proche-adr[hidden]{display:none}
.af-proche-info strong{display:block;margin-bottom:2px}
.af-proche-adr{background:var(--jaune-pale);border-radius:10px;padding:8px 12px;margin:0 0 10px;color:var(--encre)}
/* l'étiquette sur le babillard, la fiche et les cartes */
.etq.e-proche{border-color:var(--jaune-f);background:var(--jaune-pale);color:#7A5600;margin-top:0}
.proche-pastille{color:#7A5600;font-weight:800}
.avis-proche{background:var(--jaune-pale)}
.proche-note{background:var(--jaune-pale);border-radius:10px;padding:10px 12px;color:var(--encre);font-size:15px;line-height:1.45}
.proche-bloc .bt{margin:0}
/* ===== v289 — le virement Interac, visible et plus court ===== */
.pay-moyens{margin:6px 0 12px;font-size:14.5px}
.interac{border:1px solid var(--ligne);border-radius:14px;background:var(--papier);padding:14px;margin:12px 0 0}
.interac[hidden]{display:none}
.interac-etape{display:flex;gap:10px;align-items:flex-start;margin:0 0 8px;font-size:16px;line-height:1.4}
.interac-n{flex:none;width:26px;height:26px;border-radius:999px;background:var(--jaune);color:var(--encre);font-weight:800;display:inline-flex;align-items:center;justify-content:center;font-size:14px}
.interac-adresse{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--neige);border-radius:12px;padding:8px 8px 8px 12px;margin:0 0 8px}
.interac-adresse{flex-wrap:wrap} /* v289-relecture : à 360 px, le bouton passe sous l'adresse au lieu de la couper (« bonjour@tafstand.c / a ») */
.interac-adresse strong{font-family:var(--mono);font-size:16px;word-break:normal;overflow-wrap:anywhere}
.interac-adresse .bt{flex:none;width:auto;min-height:44px;margin:0}
.interac-note{margin:0 0 14px;font-size:14.5px}
.interac-plus summary{cursor:pointer;font-weight:700;font-size:14.5px;min-height:44px;display:flex;align-items:center}
.interac-plus summary::before{content:"\25B8";flex:none;margin-right:8px;color:var(--marge)} /* v289-relecture : display:flex efface le triangle natif du ; on le remet pour que la ligne ait l'air de s'ouvrir */
.interac-plus[open] summary::before{content:"\25BE"}
/* le panneau ouvert : la barre fixe du bas (« Payer 5 $ ») s'efface, elle recouvrait les consignes */
body.interac-ouvert .barre-action{display:none}
body.interac-ouvert .avec-barre{padding-bottom:16px}
/* ===== v289 — zones de toucher plus grandes, sans changer l'apparence (liens et boutons de 20 à 32 px de haut) ===== */
.bv-lien,.flash-x,.acc-tout,.bt-lien{position:relative}
.bv-lien::after,.flash-x::after,.acc-tout::after,.bt-lien::after{content:"";position:absolute;inset:-12px -8px}
/* ===== v289 — « Cette personne est au courant et d'accord » (job pour un proche) ===== */
.af-proche-ok{display:flex;align-items:center;gap:10px;margin:10px 0 0;font-weight:800;cursor:pointer;min-height:44px}
.af-proche-ok input{width:24px;height:24px;flex:none;accent-color:var(--encre);margin:0}
/* ===== v289 — audit : contraste et marges (relevés avec un contrôle automatique sur téléphone) ===== */
/* le montant et « Apporter : … » étaient en or clair sur crème (2,2 contre 4,5 demandé); « Près de chez moi » : encre sur jaune (4,3 → 11) */
.lj-prix{color:var(--encre)}
.outils-pastille{color:#7A5600}
.puce-geo{color:var(--encre)}
/* « Les jobs du quartier » touchait les bords de l'écran sur téléphone (le bloc du dessus a 16 px de marge) */
@media(max-width:899px){.acc-cat{padding-left:16px;padding-right:16px;box-sizing:border-box}}
/* le bandeau « Nouveau à Québec » collait au bord gauche hors de l'accueil; la carte du pied de page aussi (téléphone) */
@media(max-width:759px){.flash .flash-in{padding-left:16px;padding-right:16px}}
@media(max-width:899px){.accueil > .pied{margin-left:8px;margin-right:8px;padding:14px 10px}.accueil > .pied .soc-ligne{gap:8px}}
/* ===== v289 — l'en-tête claire (Trouver / Offrir / Mes jobs / Mes candidatures) sur tablette et petit portable ===== */
/* Entre 760 et ~1150 px (iPad à la verticale ou à l'horizontale, fenêtre réduite), les cinq onglets prenaient toute la place : le nom et la cloche sortaient
de l'écran (58 à 193 px de débordement), sans moyen d'y accéder puisque la barre du bas n'existe que sur téléphone. Libellés courts, marges serrées, nom qui se tronque. */
@media(min-width:760px) and (max-width:1279.98px){ /* v289-relecture-2 : jusqu'à 1280 et non 1200 — à 1200–1232 px, un nom long (« Marie-Christine D. ») ou un compteur à trois chiffres poussait encore la cloche hors de l'écran (7 à 32 px) */
.entete-trouver .env{gap:10px;padding:0 clamp(12px,2vw,28px)}
.entete-trouver .logo-img-clair{height:44px}
.nav-trouver{gap:2px;min-width:0}
.nt{padding:10px 11px;font-size:15px;gap:6px}
.nav-trouver .b-long{display:none}
.nav-trouver .b-court{display:inline}
.nt .ong-nb{min-width:22px;height:22px;padding:0 5px}
.nt-sep{margin:0 3px}
.entete-trouver .moi-bt-clair{max-width:132px;overflow:hidden;text-overflow:ellipsis;padding:8px 8px}
}
@media(min-width:760px) and (max-width:899px){
.entete-trouver .moi-bt-clair{max-width:92px}
/* iPad à la verticale (768 px) : avec les compteurs, les cinq onglets touchaient le bouton du nom — on les resserre encore un peu (même taille de texte que sur téléphone) */
.entete-trouver .logo-img-clair{height:40px}
.nav-trouver{gap:1px}
.nt{padding:10px 8px;font-size:14.5px}
.nt-sep{margin:0 1px}
}
/* v289 (relecture) — « Copier le message » est un lien dans une phrase (26 px de haut); une zone invisible l'amène à 44 px, comme les autres liens de la v289 */
#d-copier-msg-proche{position:relative}
#d-copier-msg-proche::after{content:"";position:absolute;inset:-9px -8px}
/* v289 (relecture) — le bouton du nom (« Louis-Pierre L. ▾ ») faisait 37 px de haut sur ordinateur et tablette : on vise 44 px comme le reste (téléphone inchangé : la barre du bas porte déjà « Compte ») */
@media(min-width:760px){.moi-bt{min-height:44px}}
/* ===== v291 — l'accueil allégé (LP, 18 octobre : « trop de chiffres partout ») ===== */
/* Les repères de vie tiennent sur UNE ligne discrète (fusée, deux ou trois nombres), sans boîte jaune ni gros chiffres d'affiche. */
.vie-ligne{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 14px;margin:0;padding:12px 16px;background:var(--papier);border:1px solid var(--ligne);border-radius:14px;font-size:15px;line-height:1.4;color:var(--marge);text-align:center}
.vie-ligne strong{color:var(--encre);font-weight:800}
.vie-ligne .vie-fusee{font-size:20px;line-height:1;margin-right:-6px}
.vie-ligne .vie-premiers{color:var(--encre);flex:0 0 auto}
.vie-ligne .vie-nombres{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px}
.vie-ligne .vie-premiers + .vie-nombres{flex-basis:100%} /* avec la fusée : les nombres sur leur propre ligne, sous la phrase */
.vie-ligne .vie-rep strong{font-family:var(--display);font-size:17px;font-weight:800}
.vie-ligne .vie-rep + .vie-rep::before{content:"\00b7";margin-right:14px;color:var(--ligne-forte);opacity:.5}
.vie-recentes{margin-top:10px}
.vie-recentes .vie-cat{font-size:13px}
/* « Vous » quand rien n'est en cours : seulement les deux gestes, pleine largeur */
.vous.vous-vide{padding:10px;border-color:var(--ligne);background:transparent;border-width:1px}
.vous-vide .vous-bts{margin:0;gap:10px}
.vous-vide .vous-bts .bt{flex:1;margin:0;padding:14px 10px;font-size:16.5px}
@media(min-width:760px){.vous.vous-vide{border:0;padding:0;background:transparent}.vous-vide .vous-bts .bt{flex:0 1 280px}.vous-vide .vous-bts{justify-content:center}}
/* l'invitation « sur l'écran d'accueil » vit maintenant sous les jobs, pas en haut de page */
.install-bloc[hidden]{display:none} /* v291 (revue) : .install-ligne{display:flex} l'emportait sur l'attribut hidden — sur Android, la ligne s'affichait avant (ou sans) l'invite du navigateur (bogue présent depuis la v243) */
.acc-cat + .install-ligne{margin:4px 16px 14px}
@media(min-width:900px){.acc-cat + .install-ligne{margin:4px 0 14px}}
/* le bandeau de lancement, compact hors de l'accueil (téléphone) : une ligne, pas trois */
@media(max-width:759px){
.flash.flash-compact .flash-in{flex-wrap:nowrap;gap:8px;padding:4px 6px 4px 12px}
.flash.flash-compact .flash-fusee{order:0;font-size:18px}
.flash.flash-compact .flash-texte{order:0;flex:1 1 auto;flex-basis:auto;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flash.flash-compact .flash-texte span{display:none}
.flash.flash-compact .flash-actions{order:0;width:auto;margin:0;gap:10px}
.flash.flash-compact .flash-actions .bt.mini{padding:7px 10px;font-size:13px}
.flash.flash-compact .flash-partage{display:none}
.flash.flash-compact .flash-x{order:0;flex:none;width:44px;height:44px;margin:0;padding:0;display:flex;align-items:center;justify-content:center;font-size:26px;line-height:1;overflow:hidden} /* 44 × 44 : zone de toucher pleine; le × ne se fait plus écraser (il débordait de 8 px) */
.flash.flash-compact .flash-actions .bt.mini{min-height:40px}
}
/* ===== v291 — la bande d'accueil de la personne inscrite (photo de saison, salutation, état, gestes) ===== */
.accueil .bande.bande-membre{min-height:0;display:block;padding:26px 16px 24px;margin-bottom:18px}
.bande-membre .bande-in{max-width:820px;width:100%}
.bande-membre .accroche{font-size:clamp(26px,6.4vw,38px);line-height:1.08;margin:0 0 8px}
.bande-membre .bm-etat{color:#E8E2D4;font-size:15.5px;line-height:1.45;margin:0 0 16px;max-width:560px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} /* un titre de job très long : trois lignes au plus (la carte « À faire » a tout) */
.bm-bts{display:flex;gap:10px;flex-wrap:wrap}
.bm-bts .bt{margin:0;width:auto;flex:1 1 150px;padding:13px 12px;font-size:16px;box-shadow:0 6px 0 rgba(0,0,0,.25)}
.bande-membre .bande-fond.on{opacity:.6} /* la photo un peu plus présente que sur la bande des visiteurs (le texte reste sur la partie sombre, à gauche) */
.bm-bts .bt.pale{background:#FCFAF4;border-color:#FCFAF4;color:var(--encre)}
@media(max-width:759px){.bande-membre .bande-fond{background-position:right center}
.bande-membre::before{background:linear-gradient(90deg,rgba(20,19,17,.9) 0%,rgba(20,19,17,.7) 48%,rgba(20,19,17,.28) 100%)}}
@media(min-width:760px){.accueil .bande.bande-membre{padding:40px 16px 36px;margin-bottom:26px}
.bande-membre .bande-in{display:grid;grid-template-columns:1fr auto;gap:12px 32px;align-items:center}
.bande-membre .accroche{grid-column:1}.bande-membre .bm-etat{grid-column:1;margin:0}
.bande-membre::before{background:linear-gradient(90deg,rgba(20,19,17,.92) 0%,rgba(20,19,17,.72) 50%,rgba(20,19,17,.3) 100%)}
.bm-bts{grid-column:2;grid-row:1 / span 2;flex-wrap:nowrap}.bm-bts .bt{flex:0 0 auto;width:auto;min-width:170px}}
/* la carte « À faire » suit la bande : plus de boutons en double */
.vous{margin-top:0}
/* ===== v293 — la mini-carte de l'accueil (au-dessus des jobs du quartier, seulement s'il y a au moins trois jobs dans le coin) ===== */
.mini-carte-cadre{position:relative;margin:0 0 12px;border-radius:14px;overflow:hidden;border:1px solid var(--ligne-forte);box-shadow:var(--ombre);background:var(--neige)}
.mini-carte{height:160px;background:var(--neige);z-index:0}
.mini-carte .leaflet-control-attribution{font-size:10px;background:rgba(252,250,244,.8)}
.mini-carte-voile{position:absolute;inset:0;z-index:2;background:transparent;border:0;padding:0;margin:0;cursor:pointer;display:flex;align-items:flex-end;justify-content:flex-start;font:inherit;text-align:left}
.mini-carte-voile:focus-visible{outline:3px solid var(--jaune);outline-offset:-3px}
.mini-carte-etq{margin:0 0 10px 10px;padding:8px 12px;background:var(--encre);color:var(--papier);border-radius:999px;font-size:14px;font-weight:700;line-height:1.2;box-shadow:0 2px 0 rgba(0,0,0,.25);max-width:calc(100% - 20px)}
.mini-carte-etq u{color:var(--jaune);text-decoration-color:var(--jaune);text-underline-offset:2px}
@media(min-width:760px){.mini-carte{height:200px}.mini-carte-etq{font-size:15px}}
/* ===== v294 — Appeler / Texter : deux boutons jaunes identiques, même largeur, le nom sur les deux (LP, 19 octobre) ===== */
.contact-bts{display:flex;gap:10px;margin-top:10px}
.contact-bts .bt{flex:1 1 0;min-width:0;margin:0;text-align:center;text-decoration:none;font-size:17px;line-height:1.2;padding:14px 10px;display:flex;align-items:center;justify-content:center;white-space:normal;overflow-wrap:anywhere}
.contact-bts .contact-txt{display:block;max-width:100%}
.contact-bts .nom-contact{display:inline-block;max-width:100%}
/* v294 — les cartes de job (des boutons) se détachent un peu plus de la page : une ombre visible, qui se soulève au survol et s'enfonce au toucher */
.ligne-job,.vue-trouver .ligne-job{box-shadow:0 2px 0 rgba(20,19,17,.07),0 4px 12px rgba(20,19,17,.09);transition:box-shadow .15s,transform .15s}
.ligne-job:hover{box-shadow:0 3px 0 rgba(20,19,17,.08),0 8px 18px rgba(20,19,17,.12);transform:translateY(-1px)}
.ligne-job:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(20,19,17,.07),0 2px 6px rgba(20,19,17,.09)} /* le nom passe à la ligne d'un bloc (« Texter » / « Sam-Olivier Cyr »), pas coupé à son trait d'union : les deux boutons se lisent pareil */
/* ===== v294 — « l'ombre dit : ça se touche » (LP, 19 octobre) : tout ce qui se clique porte l'ombre des boutons, et ce qui ne se clique pas reste à plat ===== */
/* Cliquables qui n'avaient pas d'ombre : les pastilles de choix du formulaire (Pour moi / Pour un proche, le moment, la durée, le montant, l'équipement),
le − des éléments à faire, les boutons de partage ronds, les onglets Mes jobs / Mes candidatures du téléphone, le bouton S'inscrire du bandeau, le bouton du bandeau de lancement */
.af-pour-bt,.af-eq-puce,.af-moment,.af-duree,.af-montant,.moins,.so,.soc,.bv-bt,.leaflet-bar{box-shadow:var(--ombre-bouton)}
.af-pour-bt:hover,.af-eq-puce:hover,.af-moment:hover,.af-duree:hover,.af-montant:hover,.moins:hover,.so:hover,.soc:hover,.bv-bt:hover{box-shadow:var(--ombre-bouton-haut)}
.af-pour-bt.on,.af-eq-puce.on,.af-moment.on,.af-duree.on,.af-montant.on,.so.on{box-shadow:var(--ombre-bouton-bas)}
.af-pour-bt:active,.af-eq-puce:active,.af-moment:active,.af-duree:active,.af-montant:active,.moins:active,.so:active,.soc:active,.bv-bt:active{transform:translateY(1px);box-shadow:var(--ombre-bouton-bas)}
.soc{transition:transform .1s,box-shadow .1s}
.flash-actions .bt.mini{box-shadow:0 2px 0 rgba(0,0,0,.35),0 4px 10px rgba(0,0,0,.22)}
.flash-actions .bt.mini:hover{box-shadow:0 3px 0 rgba(0,0,0,.35),0 8px 16px rgba(0,0,0,.26)}
/* la pastille d'état dans l'en-tête sombre (« 2 à choisir ») : une ombre noire ne se verrait pas sur le noir — un relief clair */
.mode-etat{box-shadow:0 2px 0 rgba(255,255,255,.28)}
.entete-claire .mode-etat,.entete-trouver .mode-etat{box-shadow:var(--ombre-bouton)}
/* Pas cliquables, mais ils avaient l'air de boutons : l'étiquette du bandeau (« L'entraide locale, simplement ») devient un mot d'ordre avec un tiret jaune;
les gros « 0 $ » et « 5 $ » de « Pourquoi TafStand ? » deviennent des chiffres en jaune, sans pastille; le titre du formulaire perd son ombre */
.bande-pastille{background:transparent;color:#F7F4EC;padding:0 0 0 20px;border-radius:0;position:relative;letter-spacing:.14em;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.bande-pastille::before{content:"";position:absolute;left:0;top:50%;width:12px;height:3px;background:var(--jaune);transform:translateY(-50%)}
.chif-n,.bloc-encre .chif-n{background:transparent;color:var(--jaune);padding:0;border-radius:0;font-size:32px;margin-bottom:6px}
.af-titre{box-shadow:none}
/* « Montant convenu » n'est pas un bouton : fond pâle et liseré jaune, au lieu d'une pastille jaune pleine */
.montant-convenu{background:var(--jaune-pale);border-left:4px solid var(--jaune);border-radius:8px}
/* v294 — lisibilité du bandeau d'accueil sur téléphone (mesure pixel par pixel, t29) : à droite, la photo claire passait sous le titre et le sous-titre
(contraste au pire 2,4 et 1,5 contre 1). Voile un peu plus sombre à droite, sous-titre en crème plutôt qu'en gris. Ordinateur inchangé. */
@media(max-width:759px){
.bande-courte::before{background:linear-gradient(90deg,rgba(20,19,17,.93) 0%,rgba(20,19,17,.86) 50%,rgba(20,19,17,.78) 100%)}
.bande-courte .bande-fond.on{opacity:.4}
.bande .accroche-sous{color:#E4DED0}
}
/* ===== v295 — la vidéo « comment ça marche » (LP, 25 octobre) =====
1. Le bouton du héros : un vrai bouton vidéo — rond de lecture noir, deux lignes (« Voir la vidéo » /
« Comment ça marche, en 1 minute »), jaune et ombré comme tout ce qui se touche. Le même lien, en
texte, remplace « Voir en 30 secondes » sous les trois étapes. */
.bt-video{display:inline-flex;align-items:center;gap:14px;margin:20px auto 0;padding:10px 24px 10px 12px;background:var(--jaune);color:var(--encre);border:1px solid rgba(20,19,17,.28);border-radius:999px;box-shadow:var(--ombre-bouton);font:inherit;text-align:left;cursor:pointer;max-width:100%;text-transform:none;letter-spacing:0;transition:transform .1s,box-shadow .1s}
.bt-video:hover{box-shadow:var(--ombre-bouton-haut)}
@media(hover:hover){.bt-video:hover{transform:translateY(-1px)}}
.bt-video:active{transform:translateY(1px);box-shadow:var(--ombre-bouton-bas)}
.bt-video-play{flex:none;width:46px;height:46px;border-radius:999px;background:var(--encre);display:inline-flex;align-items:center;justify-content:center}
.bt-video-tri{display:block;width:0;height:0;border-style:solid;border-width:10px 0 10px 17px;border-color:transparent transparent transparent var(--jaune);margin-left:4px}
.bt-video-txt{display:flex;flex-direction:column;gap:2px;line-height:1.15}
.bt-video-txt strong{font-size:17px;font-weight:800}
.bt-video-txt span{font-size:13.5px;font-weight:600;opacity:.85}
@media(max-width:560px){.bt-video{gap:12px;padding:9px 20px 9px 10px;margin-top:18px}.bt-video-play{width:42px;height:42px}.bt-video-txt strong{font-size:16px}.bt-video-txt span{font-size:13px}}
/* 2. Le lecteur par-dessus la page : vidéo verticale, aussi haute que l'écran le permet (au plus 540 px de large),
fond sombre, ✕ jaune dans le coin. Échap ou un geste sur le fond ferment aussi (app : fermerVideo). */
.video-voile{display:none;position:fixed;inset:0;z-index:350;background:rgba(20,19,17,.92);align-items:center;justify-content:center;padding:14px}
.video-boite{position:relative;width:min(100%, calc((100vh - 28px) * 9 / 16), 540px);width:min(100%, calc((100dvh - 28px) * 9 / 16), 540px);aspect-ratio:9/16}
.video-boite video{display:block;width:100%;height:100%;background:#000;border-radius:16px;object-fit:contain;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.video-x{position:absolute;top:10px;right:10px;width:44px;height:44px;border-radius:999px;background:var(--jaune);color:var(--encre);border:0;font-size:20px;font-weight:800;line-height:44px;text-align:center;cursor:pointer;box-shadow:var(--ombre-bouton);padding:0;z-index:1}
.video-x:hover{box-shadow:var(--ombre-bouton-haut)}
body.video-ouverte{overflow:hidden}