/* RadarPress — 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 */ --enc:#242324; /* anthracite, texte et fonds sombres */ --enc2:#4a3f45; /* secondaire */ --rose:#ff98c6; /* accent, jamais en fond plein sous du texte long */ --rose-txt:#a83a6e; /* rose lisible sur fond clair */ --papier:#FFFDFE; --blanc:#FFFFFF; --ligne:#EFE7EC; --gris:#7a7480; --gris-clair:#a49da3; /* le plus clair admis sur fond sombre (contraste AA) */ --nuit:#1b1a1b; /* fond sombre profond, derive de l anthracite */ --doux:#faf7f9; --ok:#1f9d57; --titre:'Archivo Black', Impact, sans-serif; --corps:'Clear Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --r:16px; /* rayon standard */ --r-l:24px; /* rayon large */ --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:16.5px;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(32px,5.4vw,52px)} h2{font-size:clamp(25px,3.6vw,34px)} h3{font-size:19px;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:18.5px;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:12.5px;letter-spacing:.13em; text-transform:uppercase;color:var(--rose-txt);margin:0 0 14px} .eyebrow.sur-sombre{color:var(--rose)} /* ---------- 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:18px;letter-spacing:-.02em;text-decoration:none} .brand small{font-family:var(--corps);font-weight:400;font-size:12.5px;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(255,152,198,.42) 4px 5px)} .radar::after{content:"";position:absolute;inset:0;border-radius:50%; background:conic-gradient(from 0deg,rgba(255,152,198,.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(255,152,198,.35) 4px 5px)} @keyframes sweep{to{transform:rotate(360deg)}} .lien-nav{font-size:13.5px;font-weight:700;text-decoration:none;color:var(--enc); border:1.5px solid var(--ligne);padding:8px 16px;border-radius:20px;white-space:nowrap;transition:.15s} .lien-nav:hover{border-color:var(--rose);background:#fff6fa} /* ---------- 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:13px;border:none; cursor:pointer;text-decoration:none;transition:.15s} .btn-1{background:var(--rose);color:var(--enc);position:relative; box-shadow:0 8px 24px rgba(168,58,110,.16)} .btn-1:hover{background:#ff7fb8;transform:translateY(-2px);box-shadow:0 12px 34px rgba(168,58,110,.30)} /* Le halo pointille : invisible au repos, il s ecarte en boucle au survol. */ .btn-1::after{content:"";position:absolute;inset:-4px;border:1.5px dashed var(--rose-txt); border-radius:15px;opacity:0;pointer-events:none} .btn-1:hover::after{animation:halo 1.1s ease-out infinite} @keyframes halo{0%{inset:-3px;opacity:.9}100%{inset:-12px;opacity:0}} /* La respiration, en continu et discrete : elle attire l oeil sans clignoter. */ .btn-1{animation:respire 2.8s ease-in-out infinite} .btn{flex-direction:column;gap:3px} .btn small{font-size:12.5px;font-weight:500;opacity:.72;letter-spacing:0} @keyframes respire{ 0%,100%{box-shadow:0 8px 24px rgba(168,58,110,.16),0 0 0 0 rgba(255,152,198,.55)} 50%{box-shadow:0 8px 24px rgba(168,58,110,.16),0 0 0 9px rgba(255,152,198,0)} } .btn-1:hover{animation:none} .btn-2{background:transparent;color:var(--enc);border:1.5px solid var(--enc)} .btn-2:hover{background:var(--enc);color:#fff} .btn-2.sur-sombre{color:#fff;border-color:rgba(255,255,255,.35)} .btn-2.sur-sombre:hover{background:#fff;color:var(--enc)} .btn-bloc{width:100%} .btn:disabled{opacity:.55;cursor:default} /* ---------- Blocs ---------- */ .carte{background:var(--blanc);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(--enc);color:#fff} .sombre h1,.sombre h2,.sombre h3{color:#fff} .sombre .lead{color:#cfc8ce} .sombre .carte{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13);color:#e9e4e9} .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:13.5px;font-weight:500; padding:8px 14px;border-radius:22px;border:1px solid var(--ligne);background:var(--blanc);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:5px;object-fit:contain;background:#fff;padding:1px} .sombre .pill{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.17);color:#efeaee} .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:12.5px;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:11px; border:1px solid var(--ligne);background:var(--blanc);color:var(--enc2); font-size:13.5px;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:7px;object-fit:contain;background:#fff;padding:2px} .logo.seul{padding:0 8px} .logo.fort{font-family:var(--titre);font-weight:400;font-size:13px;letter-spacing:-.02em} .sombre .logo{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.15);color:#efe9ee} .sombre .mur-eti{color:var(--gris-clair)} /* ---------- Fil WhatsApp ---------- */ .fil{max-width:452px;margin:0 auto;background:#131213;border:1px solid #343034;border-radius:22px;padding:18px 16px} .fil .jour{text-align:center;color:#8d858d;font-size:12px;margin:0 0 14px} .msg{margin:0 0 12px;font-size:14.5px;line-height:1.5} .msg .b{padding:12px 14px;border-radius:14px;display:inline-block;max-width:92%;text-align:left} .msg.eux .b{background:#2a262a;border:1px solid #433d43;color:#eee9ee;border-bottom-left-radius:4px} .msg.moi{text-align:right} .msg.moi .b{background:#1e2b23;border:1px solid #31503b;color:#e9fff0;border-bottom-right-radius:4px} .msg .h{display:flex;align-items:center;gap:8px;flex-wrap:wrap; font-weight:700;color:var(--rose);font-size:12.5px;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:10.5px;letter-spacing:.08em;text-transform:uppercase; color:var(--enc);background:var(--rose);border-radius:20px;padding:2px 9px} .msg b{color:#fff} .msg .t{display:block;font-size:11px;color:#8d858d;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:14.5px;line-height:1.15} .tete .fonc{font-size:12.5px;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:13.5px;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(--blanc);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:#fff2f7;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(--enc);color:var(--blanc);font-family:var(--titre);font-size:11.5px; 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:#fff2f7;border-color:var(--rose)} .parcours .et.toi .ico{background:var(--rose)} .parcours .et h3{margin:0 0 7px;font-size:15px;line-height:1.25} .parcours .et p{margin:0;font-size:13px;line-height:1.45;color:var(--gris)} .parcours .et .quand{display:inline-block;margin-top:auto;font-size:11.5px;font-weight:700; letter-spacing:.03em;color:var(--rose-txt);background:#fff2f7;border-radius:20px; 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:13px;letter-spacing:.02em; color:var(--gris)} .jauge{display:block;height:10px;border-radius:6px;background:var(--doux); 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:15.5px;line-height:1.3} /* Le dernier palier : le seul plein, le seul nomme. */ .marche.ici{padding:18px 0} .marche.ici .niv{color:var(--rose-txt)} .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(--doux);border:1px solid var(--ligne);border-left:5px solid var(--gris)} .plan.apres{background:var(--enc);color:#efeaee;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(--rose)} .plan ul{list-style:none;margin:0;padding:0} .plan li{position:relative;padding-left:18px;margin-bottom:15px;font-size:15px;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:#b8524f} .plan.apres li{color:#cfc8ce} .plan.apres li::before{content:"\2713";color:var(--rose)} /* 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(--rose)} /* 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:12px;padding:14px} .acquis span{font-size:13.5px;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(--enc); 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:12px;overflow:hidden;background:#fff; box-shadow:0 6px 20px rgba(0,0,0,.28)} .doc-vue{display:block;padding:16px 17px 14px;color:var(--enc)} .doc-k{display:block;font-size:9.5px;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:15.5px;line-height:1.24; letter-spacing:-.01em;margin-bottom:11px;color:var(--enc)} .doc-p{display:block;font-size:12.5px;line-height:1.5;color:var(--enc2);margin-bottom:8px} .doc-p b{color:var(--enc)} .doc-tache{display:block;background:#fff8e8;color:#8a6218;border-radius:6px;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(--doux);border-top:1px solid var(--ligne); padding:10px 17px;font-size:11.5px;color:var(--gris)} .doc-pj b{display:block;font-size:13px;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:13.5px;font-weight:500;cursor:pointer; padding:8px 14px;border-radius:22px;border:1px solid var(--ligne); background:var(--blanc);color:var(--enc);transition:.15s} .ong:hover{border-color:var(--rose)} .ong.actif{background:var(--enc);border-color:var(--enc);color:#fff;font-weight:700} .vue{background:var(--blanc);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:11.5px;font-weight:700;color:var(--rose-txt); background:#fff2f7;border-radius:20px;padding:3px 11px;white-space:nowrap} .ap h3{font-size:20px;line-height:1.25;margin:0 0 14px} .ap p{margin:0 0 11px;font-size:14.5px;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:#fff8e8;color:#8a6218;border-radius:6px;padding:2px 8px;font-weight:700;font-size:13px} .ap .vert{color:var(--ok);font-weight:700} .ap-note{margin:14px 2px 0;font-size:13px;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(--blanc);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(--rose-txt);background:#fff2f7; border-radius:20px;padding:4px 11px;margin-bottom:13px} .semaines h3{margin:0 0 11px;font-size:18px;line-height:1.3} .semaines p{margin:0;font-size:14.5px;line-height:1.5;color:var(--gris)} .semaines p b{color:var(--rose-txt)} /* ---------- Composants de preuve, partages par la home et la page entreprise. ---------- Ils vivaient dans le