/* RadarPresse — systeme de design partage. Une seule source pour les deux pages : la home gratuite et la page entreprise. Valeurs canoniques : 4 RESSOURCES/Canoniques/Brand Book.html (charte rose, v3). Ne jamais redefinir une couleur ou une police dans une page : tout passe par ce fichier. */ @import url("brand-fonts.css"); :root{ /* Charte canonique v4 — cyberpunk minimaliste (28/07/2026). Valeurs echantillonnees dans banniere-linkedin-cyberpunk-2026.jpg. Reference : CODE/design-system-ni/ + Canoniques/Brand Book.html */ --enc:#FFFFFF; /* AVANT-PLAN : titres et texte fort (nom historique conserve) */ --enc2:#E3E3E3; /* texte secondaire */ --surface:#0B0B0B; /* bandes et blocs sombres poses sur le fond */ --carte:#0B0B0B; /* fond de carte */ --sur-accent:#000000; /* texte pose SUR le magenta */ --rose:#E769BB; /* L'ACCENT. Barres, filets, equerres, marque. JAMAIS du texte : Lc 46 sur noir. */ /* Le meme magenta, monte vers le blanc jusqu'a devenir lisible. Ce n'est pas un second accent : c'est la meme teinte a deux paliers, et c'est la TAILLE du texte qui dit lequel on prend (Brand Book, loi 4). gros et gras, >= 24 px -> seuil Lc 60 corps et petit texte -> seuil Lc 75 */ --rose-titre:#EE96CF; /* Lc 61 — le mot accentue d'un titre */ --rose-encre:#F5C3E4; /* Lc 79 — un accent DANS du corps de texte */ --rose-plaque:#F4C9E7; /* Lc 81,8 avec du noir dessus — la plaque blanche au survol. Le magenta plein y donnerait 48,7 : illisible. */ --rose-txt:#F5C3E4; /* nom historique, pointe sur l'encre lisible */ --papier:#000000; /* fond de page, noir pur */ --blanc:#FFFFFF; /* texte blanc pur */ --ligne:rgba(255,255,255,.16); --gris:#E3E3E3; /* 🔴 #D4D4D4 ET NON LE JETON ink-75 (#CBCBCB), ET C'EST MESURÉ (28/08/2026). Une passe de remise à la charte a remplacé ce gris par ink-75 ce jour-là. `node CODE/audit-contraste.mjs` a immédiatement rendu 36 échecs : ink-75 donne Lc 75,1 sur du NOIR PUR — c'est de là qu'il tire son nom — mais 74,9 sur la surface #0B0B0B et 74,3 sur #141414, donc SOUS le plancher de 75 du Brand Book partout où il y a une surface. Le jeton canonique est calibré pour le fond, pas pour les cartes. #D4D4D4 rend 80 partout. C'est la même logique que --rose-plaque : une teinte dérivée, choisie par la mesure, à ne pas « corriger » vers le jeton sans relancer l'audit. */ --gris-clair:#D4D4D4; --nuit:#0B0B0B; --doux:#0B0B0B; --ok:#E769BB; --titre:'Archivo Black', Impact, sans-serif; --corps:'Clear Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --r:0; /* angles vifs : le rayon est une exception, pas un reglage */ --r-l:0; --max:1000px; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;background:var(--papier);color:var(--enc); font-family:var(--corps);font-weight:400;font-size:16px;line-height:1.62; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } .wrap{max-width:var(--max);margin:0 auto;padding:0 22px} .wrap-n{max-width:760px;margin:0 auto;padding:0 22px} h1,h2,h3,.big{font-family:var(--titre);font-weight:400;letter-spacing:-.018em;line-height:1.08;margin:0} h1{font-size:clamp(28px,5.4vw,50px)} h2{font-size:clamp(28px,3.6vw,38px)} h3{font-size:21px;line-height:1.2} p{margin:0 0 16px} a{color:inherit} img{max-width:100%;height:auto;display:block} /* ---------- Rythme vertical. L aeration est un parti pris, on ne la serre pas. ---------- */ section{padding:76px 0} section.serre{padding:52px 0} .lead{font-size:21px;color:var(--gris);max-width:680px;margin:0 0 34px;line-height:1.6} .lead-c{margin-left:auto;margin-right:auto;text-align:center} .eyebrow{font-family:var(--corps);font-weight:700;font-size:12px;letter-spacing:.13em; text-transform:uppercase;color:var(--gris-clair);margin:0 0 14px} .eyebrow.sur-sombre{color:var(--gris-clair)} /* ---------- En-tete ---------- */ .top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 0} .brand{display:flex;align-items:center;gap:10px;font-family:var(--titre);font-size:21px;letter-spacing:-.02em;text-decoration:none} .brand small{font-family:var(--corps);font-weight:400;font-size:12px;color:var(--gris);letter-spacing:0} .radar{width:26px;height:26px;border-radius:50%;position:relative;flex:none;overflow:hidden; border:1.5px solid var(--rose);background: radial-gradient(circle at center,var(--enc) 0 1.5px,transparent 2px), repeating-radial-gradient(circle at center,transparent 0 4px,rgba(231,105,187,.42) 4px 5px)} .radar::after{content:"";position:absolute;inset:0;border-radius:50%; background:conic-gradient(from 0deg,rgba(231,105,187,.95),transparent 55%);animation:sweep 3.2s linear infinite} .radar.clair{border-color:var(--rose);background: radial-gradient(circle at center,#fff 0 1.5px,transparent 2px), repeating-radial-gradient(circle at center,transparent 0 4px,rgba(231,105,187,.35) 4px 5px)} @keyframes sweep{to{transform:rotate(360deg)}} .lien-nav{font-size:14px;font-weight:700;text-decoration:none;color:var(--enc); border:1.5px solid var(--ligne);padding:8px 16px;border-radius:0;white-space:nowrap;transition:.15s} .lien-nav:hover{border-color:var(--rose);background:var(--carte)} /* ---------- Boutons ---------- */ /* Le libelle d'appel a l'action est long (« Activer mon radar presse gratuitement en 20 secondes ») : il doit se replier proprement au lieu de deborder sur mobile. */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px; font-family:var(--corps);font-weight:700;font-size:16px;letter-spacing:-.01em; line-height:1.25;text-align:center;padding:15px 26px;border-radius:0;border:none; cursor:pointer;text-decoration:none;transition:.15s} .btn-1{background:var(--rose);color:var(--sur-accent);position:relative} /* L'ancien halo pointille en boucle est retire : une boucle infinie attire l'oeil en permanence, alors qu'un etat de survol repond a un geste. Le survol vit desormais dans systeme.css (surbrillance + bump). */ .btn-1{animation:none} .btn{flex-direction:column;gap:3px} .btn small{font-size:12px;font-weight:500;opacity:.72;letter-spacing:0} @keyframes respire{ 0%,100%{} 50%{} } .btn-1:hover{animation:none} .btn-2{background:transparent;color:var(--enc);border:1.5px solid var(--enc)} .btn-2.sur-sombre{color:#fff;border-color:rgba(255,255,255,.35)} .btn-2.sur-sombre:hover{background:var(--carte);color:var(--enc)} .btn-bloc{width:100%} .btn:disabled{opacity:.55;cursor:default} /* ---------- Blocs ---------- */ .carte{background:var(--carte);border:1px solid var(--ligne);border-radius:var(--r);padding:26px} .carte h3{margin:0 0 10px} .carte p:last-child{margin-bottom:0} .sombre{background:var(--surface);color:#fff} .sombre h1,.sombre h2,.sombre h3{color:#fff} .sombre .lead{color:#E3E3E3} .sombre .carte{background:rgba(0,0,0,.05);border-color:rgba(255,255,255,.13);color:#E3E3E3} .grille-2{display:grid;grid-template-columns:1fr 1fr;gap:18px} .grille-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} /* ---------- Pastilles de reassurance : lisibles avant d etre lues ---------- */ .pills{display:flex;flex-wrap:wrap;gap:9px} .pill{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:500; padding:8px 14px;border-radius:999px;border:1px solid var(--ligne);background:var(--carte);color:var(--enc)} .pill svg{width:15px;height:15px;flex:none;stroke:var(--rose-txt);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .pill img{width:18px;height:18px;flex:none;border-radius:999px;object-fit:contain;background:var(--carte);padding:1px} .sombre .pill{background:rgba(0,0,0,.07);border-color:rgba(255,255,255,.17);color:#E3E3E3} .sombre .pill svg{stroke:var(--rose)} /* ---------- Le mur de sources : on doit tout voir sans rien lire ---------- */ .mur{display:flex;flex-direction:column;gap:22px} .mur-fam{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap} .mur-eti{flex:0 0 148px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--gris);padding-top:9px} .mur-log{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 400px} .logo{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 15px 0 7px;border-radius:0; border:1px solid var(--ligne);background:var(--carte);color:var(--enc2); font-size:14px;font-weight:700;letter-spacing:-.01em;white-space:nowrap} /* Le logo est servi depuis chez nous, jamais en lien direct vers l editeur. Fond blanc systematique : beaucoup de marques ont un mark transparent qui disparait sur fond sombre. */ .logo img{width:30px;height:30px;flex:none;border-radius:0;object-fit:contain;background:var(--carte);padding:2px} .logo.seul{padding:0 8px} .logo.fort{font-family:var(--titre);font-weight:400;font-size:12px;letter-spacing:-.02em} .sombre .logo{background:rgba(0,0,0,.07);border-color:rgba(255,255,255,.15);color:#E3E3E3} .sombre .mur-eti{color:var(--gris-clair)} /* ---------- Fil WhatsApp ---------- */ .fil{max-width:452px;margin:0 auto;background:#0B0B0B;border:1px solid var(--ligne);border-radius:0;padding:18px 16px} .fil .jour{text-align:center;color:#D4D4D4;font-size:12px;margin:0 0 14px} .msg{margin:0 0 12px;font-size:14px;line-height:1.5} .msg .b{padding:12px 14px;border-radius:0;display:inline-block;max-width:92%;text-align:left} .msg.eux .b{background:#141414;border:1px solid var(--ligne);color:#E3E3E3;border-radius:0} .msg.moi{text-align:right} .msg.moi .b{background:#5A1E4A;border:1px solid #882D70;color:#ECB1DD;border-radius:0} .msg .h{display:flex;align-items:center;gap:8px;flex-wrap:wrap; font-weight:700;color:var(--gris-clair);font-size:12px;margin-bottom:7px} /* Le numero d etape relie le fil au parcours en cinq cartes juste au-dessus : on doit pouvoir suivre la meme boucle d une section a l autre. */ .msg .pas{font-size:11px;letter-spacing:.08em;text-transform:uppercase; color:var(--sur-accent);background:var(--rose);border-radius:0;padding:2px 9px} .msg b{color:#fff} .msg .t{display:block;font-size:11px;color:#D4D4D4;margin-top:6px} /* ---------- Preuve ---------- */ .tete{display:flex;align-items:center;gap:12px} .tete img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none} .tete .nom{font-family:var(--titre);font-size:14px;line-height:1.15} .tete .fonc{font-size:12px;color:var(--gris);line-height:1.3} .sombre .tete .fonc{color:var(--gris-clair)} /* ---------- Pied ---------- */ footer{padding:40px 0 52px;color:var(--gris);font-size:14px;text-align:center;border-top:1px solid var(--ligne)} footer a{color:var(--gris);text-decoration:underline;margin:0 7px} /* ---------- Le parcours en cinq etapes : cinq CARTES en colonnes, sur une ligne. ---------- Version precedente : neuf enfants alternes (etape / fleche) dans une grille. Ca tenait sur une ligne mais ca ne faisait pas des cartes, et les libelles flottaient sans support. Ici chaque etape est une vraie carte autonome ; la fleche est dessinee dans la gouttiere par un pseudo-element, donc la grille reste un simple repeat(5,1fr) et ne peut pas se replier. Le numero vit dans une pastille posee sur l icone : un seul endroit ou le chiffre s ecrit. */ .parcours{display:grid;grid-template-columns:repeat(5,1fr);gap:30px;list-style:none; margin:38px 0 0;padding:0} .parcours .et{position:relative;display:flex;flex-direction:column;align-items:center; background:var(--carte);border:1px solid var(--ligne); border-radius:var(--r);padding:22px 15px 18px;text-align:center; opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease} .reveal.vu .parcours .et{opacity:1;transform:none} .reveal.vu .parcours .et:nth-child(1){transition-delay:.05s} .reveal.vu .parcours .et:nth-child(2){transition-delay:.25s} .reveal.vu .parcours .et:nth-child(3){transition-delay:.45s} .reveal.vu .parcours .et:nth-child(4){transition-delay:.65s} .reveal.vu .parcours .et:nth-child(5){transition-delay:.85s} /* Le chevron rose, dessine dans la gouttiere de 30 px, a hauteur de l icone. */ .parcours .et + .et::before{content:'';position:absolute;left:-21px;top:44px; width:9px;height:9px;border-top:2.4px solid var(--rose);border-right:2.4px solid var(--rose); transform:rotate(45deg);opacity:0;transition:opacity .4s ease} .reveal.vu .parcours .et + .et::before{opacity:1} .reveal.vu .parcours .et:nth-child(2)::before{transition-delay:.2s} .reveal.vu .parcours .et:nth-child(3)::before{transition-delay:.4s} .reveal.vu .parcours .et:nth-child(4)::before{transition-delay:.6s} .reveal.vu .parcours .et:nth-child(5)::before{transition-delay:.8s} .parcours .ico{position:relative;display:inline-flex;align-items:center;justify-content:center; width:56px;height:56px;border-radius:50%;background:rgba(231,105,187,.12);border:1.5px solid var(--rose); margin-bottom:14px;color:var(--enc)} .parcours .ico svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round} /* La pastille du numero : le chiffre ne s ecrit qu ici, jamais en double. */ .parcours .rang{position:absolute;top:-6px;right:-6px;width:23px;height:23px;border-radius:50%; background:var(--surface);color:var(--blanc);font-family:var(--titre);font-size:11px; display:flex;align-items:center;justify-content:center;line-height:1} /* Trois animations, une par idee : les ondes du radar balaient, l alerte pulse, la coche se trace. Elles ne demarrent qu une fois la section a l ecran. */ .parcours .ico .onde{opacity:0;transform-origin:center} .reveal.vu .parcours .ico .onde{animation:onde 2.6s ease-out infinite} .reveal.vu .parcours .ico .o2{animation-delay:.8s} @keyframes onde{0%{opacity:0;transform:scale(.55)}35%{opacity:.9}100%{opacity:0;transform:scale(1)}} .reveal.vu .parcours .ico .ping{animation:ping 1.9s ease-in-out infinite} @keyframes ping{0%,100%{opacity:.25}50%{opacity:1}} .parcours .ico .coche{stroke:var(--rose-txt);stroke-width:2.4;stroke-dasharray:20;stroke-dashoffset:20} .reveal.vu .parcours .ico .coche{transition:stroke-dashoffset .5s ease 1.4s;stroke-dashoffset:0} /* Les deux seules etapes ou le client fait quelque chose. Le titre de la section promet « tu n'interviens que deux fois » : on doit voir lesquelles sans compter. */ .parcours .et.toi{background:rgba(231,105,187,.12);border-color:var(--rose)} .parcours .et.toi .ico{background:var(--rose)} .parcours .et h3{margin:0 0 7px;font-size:14px;line-height:1.25} .parcours .et p{margin:0;font-size:12px;line-height:1.45;color:var(--gris)} .parcours .et .quand{display:inline-block;margin-top:auto;font-size:11px;font-weight:700; letter-spacing:.03em;color:var(--gris-clair);background:rgba(231,105,187,.12);border-radius:0; padding:3px 10px;white-space:nowrap;transform:translateY(12px)} /* ---------- Les cinq niveaux d IA. ---------- Version precedente : un escalier de cinq colonnes. Lisible sur grand ecran, illisible en dessous, ou il se couchait dans une autre forme. Une seule forme desormais, a toutes les largeurs : un rang, une barre qui grandit, un intitule. */ .echelle{list-style:none;margin:34px 0 0;padding:0} .marche{display:grid;grid-template-columns:78px minmax(90px,240px) 1fr;gap:0 20px; align-items:center;padding:15px 0;border-top:1px solid var(--ligne)} .marche:first-child{border-top:none} .niv{font-family:var(--titre);font-weight:400;font-size:12px;letter-spacing:.02em; color:var(--gris)} .jauge{display:block;height:10px;border-radius:0;background:var(--carte); border:1px solid var(--ligne);overflow:hidden} .jauge i{display:block;height:100%;width:var(--h);background:var(--rose);opacity:.42; transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.2,.7,.3,1)} .reveal.vu .jauge i{transform:scaleX(1)} .echelle .marche:nth-child(2) i{transition-delay:.12s} .echelle .marche:nth-child(3) i{transition-delay:.24s} .echelle .marche:nth-child(4) i{transition-delay:.36s} .echelle .marche:nth-child(5) i{transition-delay:.48s} .quoi{font-size:16px;line-height:1.3} /* Le dernier palier : le seul plein, le seul nomme. */ .marche.ici{padding:18px 0} .marche.ici .niv{color:var(--gris-clair)} .marche.ici .jauge i{opacity:1} .marche.ici .quoi{font-weight:700} /* ---------- La journee type : deux plans face a face. ---------- Reprise du modele eprouve de la note d opportunite Madame Monsieur (01/07/2026). Un panneau clair pour aujourd hui, un panneau sombre pour demain, quatre lignes chacun horodatees. On lit la comparaison ligne a ligne, sans decoder un axe. */ .plans{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px} .plan{padding:28px 26px;border-radius:var(--r)} .plan.avant{background:var(--carte);border:1px solid var(--ligne);border-left:5px solid var(--gris)} .plan.apres{background:var(--surface);color:#E3E3E3;border-left:5px solid var(--rose)} .plan-lbl{font-family:var(--corps);font-size:12px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;margin-bottom:18px} .plan.avant .plan-lbl{color:var(--gris)} .plan.apres .plan-lbl{color:var(--gris-clair)} .plan ul{list-style:none;margin:0;padding:0} .plan li{position:relative;padding-left:18px;margin-bottom:15px;font-size:14px;line-height:1.5} .plan li:last-child{margin-bottom:0} .plan li{padding-left:26px} .plan li::before{position:absolute;left:0;top:0;font-size:14px;font-weight:700;line-height:1.5} .plan.avant li{color:var(--gris)} .plan.avant li::before{content:"\2715";color:var(--gris-clair)} .plan.apres li{color:#E3E3E3} .plan.apres li::before{content:"\2713";color:var(--gris-clair)} /* L heure porte la lecture : c est le seul element gras de la ligne. */ .plan li b{font-family:var(--titre);font-weight:400;font-size:14px;letter-spacing:-.01em; margin-right:7px} .plan.avant li b{color:var(--enc)} .plan.apres li b{color:#fff} /* Le benefice de chaque moment, en rose : on doit pouvoir ne lire que ca. */ .plan.apres li em{font-style:normal;font-weight:700;color:var(--enc)} /* Ce que la journee de droite te rapporte, dans la carte de droite. C'etait auparavant une bande de puces posee SOUS les deux colonnes, avec une phrase d'amorce : le lecteur ne savait pas a laquelle des deux journees ca se rattachait. */ .acquis{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:22px; background:var(--rose);border-radius:0;padding:14px} .acquis span{font-size:14px;font-weight:700;line-height:1.3;color:var(--enc); display:flex;align-items:flex-start;gap:7px} .acquis span::before{content:"\2713";flex:none;font-size:12px} /* ---------- Le fil : les trois angles proposes, et le document dans la bulle. ---------- Deux versions ont ete essayees avant celle-ci et ecartees pour la meme raison : elles ne montraient pas le livrable la ou le lecteur regarde. Le fil seul en PARLAIT sans le montrer ; le banc d'essai a cinq onglets le montrait, mais au cinquieme clic. Un prospect ne clique pas cinq fois. Le document vit donc DANS la conversation, comme une piece jointe WhatsApp, visible sans rien ouvrir. */ /* Les angles proposes, dans la bulle. */ .opts{display:block;margin:12px 0 12px} .opt{display:flex;align-items:flex-start;gap:9px;padding:7px 0;font-size:14px;line-height:1.4} .opt i{flex:none;width:19px;height:19px;border-radius:50%;background:var(--rose);color:var(--sur-accent); font-style:normal;font-size:11px;font-weight:700;display:flex;align-items:center; justify-content:center;margin-top:1px} /* La piece jointe. Feuille blanche dans la bulle verte : on doit lire le communique sans cliquer, y compris le trou que l'agent a refuse de combler. */ .doc{display:block;margin:14px 0;border-radius:0;overflow:hidden;background:var(--carte)} .doc-vue{display:block;padding:16px 17px 14px;color:var(--enc)} .doc-k{display:block;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase; color:var(--gris);padding-bottom:9px;margin-bottom:11px;border-bottom:2px solid var(--enc)} .doc-t{display:block;font-family:var(--titre);font-weight:400;font-size:16px;line-height:1.24; letter-spacing:-.01em;margin-bottom:11px;color:var(--enc)} .doc-p{display:block;font-size:12px;line-height:1.5;color:var(--enc2);margin-bottom:8px} .doc-p b{color:var(--enc)} .doc-tache{display:block;background:var(--carte);color:var(--rose-encre);border-radius:0;padding:7px 10px; font-weight:700;font-size:12px;margin-top:10px} /* Le bandeau de piece jointe, comme dans une messagerie. */ .doc-pj{display:block;background:var(--carte);border-top:1px solid var(--ligne); padding:10px 17px;font-size:11px;color:var(--gris)} .doc-pj b{display:block;font-size:12px;color:var(--enc);margin-bottom:1px} /* ---------- Les livrables : un onglet, un apercu. ---------- Les dix pastilles ne disaient que leur nom. Elles ouvrent maintenant un exemple de ce qui sort vraiment. Sans JavaScript, le premier apercu reste affiche. */ .apercus{margin-top:30px} .onglets{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:20px} .ong{font:inherit;font-size:14px;font-weight:500;cursor:pointer; padding:8px 14px;border-radius:0;border:1px solid var(--ligne); background:var(--carte);color:var(--enc);transition:.15s} .ong:hover{border-color:var(--rose)} .ong.actif{background:var(--surface);border-color:var(--enc);color:#fff;font-weight:700} .vue{background:var(--carte);border:1px solid var(--ligne);border-radius:var(--r); padding:28px 30px} .ap{display:none} .ap.actif{display:block;animation:apparait .3s ease} @keyframes apparait{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}} .ap-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap; padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--ligne)} .ap-k{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)} .ap-b{margin-left:auto;font-size:11px;font-weight:700;color:var(--enc); background:rgba(231,105,187,.12);border-radius:0;padding:3px 11px;white-space:nowrap} .ap h3{font-size:21px;line-height:1.25;margin:0 0 14px} .ap p{margin:0 0 11px;font-size:14px;line-height:1.6;color:var(--gris)} .ap p:last-child{margin-bottom:0} .ap b{color:var(--enc)} /* Ce qui manque encore se voit : l agent demande, il n invente pas. */ .ap .tache{background:var(--carte);color:var(--rose-encre);border-radius:0;padding:2px 8px;font-weight:700;font-size:12px} .ap .vert{color:var(--ok);font-weight:700} .ap-note{margin:14px 2px 0;font-size:12px;color:var(--gris)} /* ---------- La legende du dernier palier de l echelle. ---------- */ /* ---------- Les trois premieres semaines. ---------- */ .semaines{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:18px; margin:34px 0 0;padding:0;counter-reset:none} .semaines li{background:var(--carte);border:1px solid var(--ligne);border-radius:var(--r); padding:26px 24px} .semaines li:last-child{border-color:var(--rose)} .sem{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--gris-clair);background:rgba(231,105,187,.12); border-radius:0;padding:4px 11px;margin-bottom:13px} .semaines h3{margin:0 0 11px;font-size:21px;line-height:1.3} .semaines p{margin:0;font-size:14px;line-height:1.5;color:var(--gris)} .semaines p b{color:var(--enc)} /* ---------- Composants de preuve, partages par la home et la page entreprise. ---------- Ils vivaient dans le