/** * Trouver-Avocats : composants partagés des pages refaites (ta-v2) * ---------------------------------------------------------------- * Version : 1.7 (03/11/2026) * Chargé sur TOUTES les pages ta-v2, entre tokens.css / ta-layout.css et le CSS propre à la page. * * Règle (docs/regles-design.md) : un composant (carte avocat, carte article, carte domaine, * tuile simulateur, FAQ, puce, lien étendu…) est défini UNE SEULE FOIS, ici. Le CSS d'une page * ne contient jamais le style d'un composant ; une variante passe par un modificateur * (ta-carte--compacte…), jamais par une copie. Balisage des cartes : fonctions de * inc/ta-composants.php (ex. ta_v2_carte_avocat()). * Règles d'origine extraites de home.css (portage de la maquette + revues du 29/10), dans leur * ordre de cascade. * * Changelog * 1.7 : voile commun de toutes nos fenêtres (ta-voile) : page visible derrière, encre à 45 % et flou de 6 px, entrée en 150 ms ; * défilement bloqué (html.ta-voile-ouvert ou la classe propre à la fenêtre). Règle de Girgis du 03/11. * 1.6 : pastille « Urgent » des dossiers (module voie rapide). * 1.5 : classe « visuellement caché » (ta-visuellement-cache) : texte gardé dans le code et lu par les lecteurs * d'écran, invisible à l'écran (clip, jamais display:none). Décision 176 de Girgis. * 1.4 : puces Gravity Forms (ta-gf-chips) : composant unique pour tous les formulaires (4 états). * 1.3 : carrousels au doigt (recette iPhone) : défilement natif, accroche souple, flèches sur bureau seulement. * 1.2 : .ta-gf multi-pages (progression, étapes, boutons Précédent / Suivant), repris de depot.css. * 1.1 : carte avocat (infos, délai de réponse, puce +N, actions, initiales, variante liste), * pagination, bande de dépôt, barre collante de dépôt. * 1.0 : première version (extraction depuis home.css). */ .ta-v2 .ta-practice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e-2)} .ta-v2 .ta-practice{position:relative;text-align:left;display:flex;align-items:center;gap:var(--e-2);width:100%;padding:var(--e-3) var(--e-3);background:white;border:1px solid var(--line);border-radius:var(--radius);transition:transform .2s,border-color .2s,box-shadow .2s;min-height:119px} .ta-v2 .ta-practice:hover{transform:translateY(-4px);border-color:#b8cbbf;box-shadow:var(--shadow)} .ta-v2 .ta-practice-icon{display:grid;place-items:center;width:47px;height:53px;flex-shrink:0;background:#f4f5ee;border-radius:10px;color:#93804b} .ta-v2 .ta-practice:nth-child(2n) .ta-practice-icon{background:#edf3f0;color:#6b8d79} .ta-v2 .ta-practice-icon .ta-icon{width:26px;height:26px;stroke-width:1.3} .ta-v2 .ta-practice h3{font-weight:600;font-size:var(--t-sm);margin-bottom:var(--e-1)} .ta-v2 .ta-practice p{font-size:var(--t-xs);color:#88909c} .ta-v2 .ta-practice-arrow{width:16px;height:16px;margin-left:auto;color:#aeb6c0;transition:transform .2s} .ta-v2 .ta-practice:hover .ta-practice-arrow{transform:translateX(3px);color:var(--green-ink)} .ta-v2 .ta-practice-foot{display:flex;align-items:center;justify-content:center;gap:var(--e-1);color:#808898;font-size:var(--t-xs);margin-top:var(--e-3)} .ta-v2 .ta-practice-foot button{font-size:var(--t-xs);background:none;border:0;color:var(--ink);padding:4px;text-decoration:underline;text-underline-offset:4px} .ta-v2 .ta-lawyer-track{display:flex;gap:var(--e-3);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:3px 2px var(--e-3);scroll-behavior:smooth} .ta-v2 .ta-lawyer-card{flex:0 0 calc((100% - 44px)/3);min-width:0;scroll-snap-align:start;background:white;border:1px solid #e6e9ee;border-radius:14px;overflow:hidden;transition:transform .2s,box-shadow .2s} .ta-v2 .ta-lawyer-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .ta-v2 .ta-lawyer-card[hidden]{display:none} .ta-v2 .ta-lawyer-photo{height:245px;position:relative;background:linear-gradient(135deg,#c6d0c8,#a9b6bc);overflow:hidden} .ta-v2 .ta-lawyer-photo img{width:100%;height:100%;object-position:center 30%;filter:saturate(.65);transition:transform .5s} .ta-v2 .ta-lawyer-card:hover .ta-lawyer-photo img{transform:scale(1.035)} .ta-v2 .ta-photo-pill{position:absolute;bottom:15px;left:17px;background:#fffffff2;color:#475a4e;font-size:var(--t-xs);backdrop-filter:blur(5px);padding:var(--e-1) var(--e-1)} .ta-v2 .ta-lawyer-content{padding:var(--e-3)} .ta-v2 .ta-lawyer-content h3{font-family:var(--serif);font-size:var(--t-h2);letter-spacing:-.6px} .ta-v2 .ta-lawyer-location{font-size:var(--t-xs);color:#818b99;display:flex;align-items:center;gap:5px;margin-top:4px} .ta-v2 .ta-lawyer-location .ta-icon{width:12px;height:12px} .ta-v2 .ta-lawyer-content .ta-btn{width:100%;min-height:40px;font-size:var(--t-xs);justify-content:space-between;padding:var(--e-1) var(--e-2);background:white} .ta-v2 .ta-lawyer-content .ta-btn:hover{background:#f5f7f5} .ta-v2 .ta-faq-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--e-6)} .ta-v2 .ta-faq-intro h2{font-size:var(--t-h1)} .ta-v2 .ta-faq-intro>p{color:var(--muted);font-size:var(--t-xs);max-width:230px;margin-top:var(--e-3);line-height:1.85} .ta-v2 .ta-faq-intro .ta-text-link{margin-top:var(--e-2);font-size:var(--t-xs)} .ta-v2 .ta-faq-list details{border-bottom:1px solid var(--line)} .ta-v2 .ta-faq-list details:first-child{border-top:1px solid var(--line)} .ta-v2 .ta-faq-list summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--e-3);cursor:pointer;font-size:var(--t-xs);font-weight:550;padding:var(--e-3) 0} .ta-v2 .ta-faq-list summary::-webkit-details-marker{display:none} .ta-v2 .ta-faq-list summary::after{content:'+';font-size:var(--t-h3);line-height:1;font-weight:400;color:#909aab;flex-shrink:0;transition:transform .2s} .ta-v2 .ta-faq-list details[open] summary::after{content:'−';color:#a28c4c} .ta-v2 .ta-faq-list details p{font-size:var(--t-xs);color:var(--muted);line-height:1.9;padding-bottom:var(--e-3);max-width:440px} @media(max-width:1100px){ .ta-v2 .ta-practice{padding:var(--e-3) var(--e-2);gap:var(--e-1)} .ta-v2 .ta-practice p{font-size:var(--t-xs)} .ta-v2 .ta-faq-layout{gap:var(--e-5)} } @media(max-width:900px){ .ta-v2 .ta-practice-grid{grid-template-columns:repeat(2,1fr)} .ta-v2 .ta-lawyer-card{flex-basis:calc((100% - 22px)/2)} .ta-v2 .ta-faq-layout{gap:var(--e-4);grid-template-columns:.85fr 1.15fr} } @media(max-width:700px){ .ta-v2 .ta-practice-grid{gap:var(--e-1)} .ta-v2 .ta-practice{flex-direction:column;align-items:flex-start;gap:var(--e-2);padding:var(--e-2) var(--e-2);min-height:158px} .ta-v2 .ta-practice-icon{height:38px;width:38px;border-radius:9px} .ta-v2 .ta-practice-icon .ta-icon{width:23px;height:23px} .ta-v2 .ta-practice h3{font-size:var(--t-xs);margin-bottom:5px} .ta-v2 .ta-practice p{font-size:var(--t-xs);line-height:1.5} .ta-v2 .ta-practice-arrow{position:absolute;right:13px;top:29px;width:14px;height:14px} .ta-v2 .ta-practice-foot{font-size:var(--t-xs);flex-wrap:wrap;margin-top:var(--e-3)} .ta-v2 .ta-practice-foot button{font-size:var(--t-xs)} .ta-v2 .ta-lawyer-track{overflow: auto;gap:var(--e-2);margin-right:calc(-1 * var(--e-2));padding-right:var(--e-2);scroll-padding-left:0} .ta-v2 .ta-lawyer-card{flex-basis:80%;max-width:340px} .ta-v2 .ta-lawyer-photo{height:255px} .ta-v2 .ta-lawyer-content{padding:var(--e-3)} .ta-v2 .ta-lawyer-content h3{font-size:var(--t-h3)} .ta-v2 .ta-faq-layout{grid-template-columns:1fr;gap:var(--e-3)} .ta-v2 .ta-faq-intro h2{font-size:var(--t-h2)} .ta-v2 .ta-faq-intro>p{max-width:320px;font-size:var(--t-xs);margin-top:var(--e-2)} .ta-v2 .ta-faq-intro .ta-text-link{font-size:var(--t-xs);margin-top:var(--e-1)} .ta-v2 .ta-faq-list summary{font-size:var(--t-xs);padding:var(--e-2) 0;gap:var(--e-2)} .ta-v2 .ta-faq-list details p{font-size:var(--t-xs);padding-bottom:var(--e-2)} } @media(max-width:370px){ .ta-v2 .ta-practice{padding:var(--e-2) var(--e-1)} .ta-v2 .ta-practice h3{font-size:var(--t-xs)} .ta-v2 .ta-practice p{font-size:var(--t-xs)} .ta-v2 .ta-lawyer-card{flex-basis:90%} } @media(prefers-reduced-motion:reduce){ .ta-v2 .ta-lawyer-track{scroll-behavior:auto} } @media print{ .ta-v2 .ta-lawyer-track{overflow:visible;flex-wrap:wrap} .ta-v2 .ta-lawyer-card{flex-basis:30%} } .ta-v2 .ta-practice-grid{gap:var(--e-2)} .ta-v2 .ta-practice{border-radius:14px;min-height:168px;display:grid;grid-template-columns:55px 1fr 20px;gap:var(--e-2);padding:var(--e-3) var(--e-3);border-color:#e2e6dd;align-items:center;background:white} .ta-v2 .ta-practice-icon{height:58px;width:55px;background:#f3f2e9;color:#9c8546;border-radius:12px} .ta-v2 .ta-practice-icon .ta-icon{width:28px;height:28px} .ta-v2 .ta-practice h3{font-size:var(--t-base);font-weight:650;letter-spacing:-.025em;margin-bottom:var(--e-1)} .ta-v2 .ta-practice p{font-size:var(--t-xs);color:#7e887a;line-height:1.7} .ta-v2 .ta-practice-arrow{color:#a2ae99;width:18px;height:18px} .ta-v2 .ta-practice:hover{transform:translateY(-5px);border-color:#aebda5;box-shadow:0 16px 35px #0f172a0a} .ta-v2 .ta-practice:first-child{background:linear-gradient(135deg,#1a2744,#0f172a);border-color:var(--navy);color:white} .ta-v2 .ta-practice:first-child .ta-practice-icon{background:#ffffff0e;color:#dac287} .ta-v2 .ta-practice:first-child p{color:#b6c1cd} .ta-v2 .ta-practice:first-child .ta-practice-arrow{color:#c8d4bb} .ta-v2 .ta-practice-foot{font-size:var(--t-xs);margin-top:var(--e-3);gap:var(--e-1)} .ta-v2 .ta-practice-foot button{font-size:var(--t-xs);font-weight:550} .ta-v2 .ta-lawyer-track{gap:var(--e-3);padding-bottom:var(--e-3)} .ta-v2 .ta-lawyer-card{flex-basis:calc((100% - 48px)/3);border-color:#e4e8e3;border-radius:14px;background:#fff;box-shadow:0 4px 13px #0f172a03;transition:transform .3s,box-shadow .3s} .ta-v2 .ta-lawyer-card:hover{transform:translateY(-5px);box-shadow:0 16px 40px #0f172a0d} .ta-v2 .ta-lawyer-photo{height:290px;background:#d5ded6} .ta-v2 .ta-lawyer-photo img{object-position:center 27%;filter:saturate(.65);transition:transform .7s,filter .7s} .ta-v2 .ta-lawyer-card:hover .ta-lawyer-photo img{transform:scale(1.04);filter:saturate(.9)} .ta-v2 .ta-photo-pill{font-size:var(--t-xs);left:19px;bottom:18px;padding:var(--e-1) var(--e-1);box-shadow:0 4px 16px #0f172a0b;border:1px solid #ffffff88} .ta-v2 .ta-lawyer-content{padding:var(--e-3) var(--e-3)} .ta-v2 .ta-lawyer-content h3{font-size:var(--t-h2);letter-spacing:-.025em;line-height:1.15} .ta-v2 .ta-lawyer-location{font-size:var(--t-xs);margin-top:var(--e-1);color:#7d8997;gap:var(--e-1)} .ta-v2 .ta-lawyer-location .ta-icon{width:13px;height:13px} .ta-v2 .ta-lawyer-content .ta-btn{padding:var(--e-1) 0;min-height:45px;border:0;border-top:1px solid #e6eae5;border-radius:0;font-size:var(--t-xs);background:none;justify-content:space-between} .ta-v2 .ta-lawyer-content .ta-btn:hover{background:none;box-shadow:none;transform:none;color:var(--green-ink)} .ta-v2 .ta-faq-layout{grid-template-columns:.85fr 1.15fr;gap:var(--e-6)} .ta-v2 .ta-faq-intro h2{font-size:var(--t-h1)} .ta-v2 .ta-faq-intro>p{font-size:var(--t-sm);line-height:1.9;max-width:260px;margin-top:var(--e-3)} .ta-v2 .ta-faq-intro .ta-text-link{font-size:var(--t-xs);margin-top:var(--e-3)} .ta-v2 .ta-faq-list summary{font-size:var(--t-sm);font-weight:550;line-height:1.7;padding:var(--e-3) 0;gap:var(--e-2)} .ta-v2 .ta-faq-list summary::after{font-size:var(--t-h3);color:#8a987e} .ta-v2 .ta-faq-list details p{font-size:var(--t-sm);line-height:1.95;padding-bottom:var(--e-3);max-width:520px} @media(max-width:1150px){ .ta-v2 .ta-practice{gap:var(--e-2);padding:var(--e-3) var(--e-2);grid-template-columns:48px 1fr 16px} .ta-v2 .ta-practice-icon{width:48px;height:53px} .ta-v2 .ta-practice h3{font-size:var(--t-sm)} .ta-v2 .ta-practice p{font-size:var(--t-xs)} .ta-v2 .ta-lawyer-photo{height:260px} .ta-v2 .ta-lawyer-content{padding:var(--e-3) var(--e-2)} .ta-v2 .ta-lawyer-content h3{font-size:var(--t-h2)} .ta-v2 .ta-faq-layout{gap:var(--e-5)} } @media(max-width:950px){ .ta-v2 .ta-practice-grid{grid-template-columns:repeat(2,1fr)} .ta-v2 .ta-practice{padding:var(--e-3);min-height:155px} .ta-v2 .ta-practice h3{font-size:var(--t-sm)} .ta-v2 .ta-practice p{font-size:var(--t-xs)} .ta-v2 .ta-lawyer-card{flex-basis:calc((100% - 24px)/2)} .ta-v2 .ta-faq-layout{gap:var(--e-5)} .ta-v2 .ta-faq-intro h2{font-size:var(--t-h1)} .ta-v2 .ta-faq-intro>p{font-size:var(--t-sm)} .ta-v2 .ta-faq-list summary{font-size:var(--t-sm)} } @media(max-width:760px){ .ta-v2 .ta-practice-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e-1)} .ta-v2 .ta-practice{min-height:192px;display:flex;flex-direction:column;align-items:flex-start;padding:var(--e-3) var(--e-2);gap:var(--e-2);position:relative;border-radius:12px} .ta-v2 .ta-practice-icon{width:44px;height:47px;border-radius:10px} .ta-v2 .ta-practice-icon .ta-icon{width:25px;height:25px} .ta-v2 .ta-practice h3{font-size:var(--t-sm);line-height:1.4;margin-bottom:var(--e-1);letter-spacing:-.02em} .ta-v2 .ta-practice p{font-size:var(--t-xs);line-height:1.7} .ta-v2 .ta-practice-arrow{position:absolute;right:15px;top:37px;width:15px;height:15px} .ta-v2 .ta-practice-foot{font-size:var(--t-xs);line-height:1.9;gap:4px;flex-wrap:wrap;margin-top:var(--e-3)} .ta-v2 .ta-practice-foot button{font-size:var(--t-xs);line-height:1.9} .ta-v2 .ta-lawyer-track{gap:var(--e-2);margin-right:calc(-1 * var(--e-2));padding-right:var(--e-2);padding-bottom:var(--e-3)} .ta-v2 .ta-lawyer-card{flex-basis:83%;max-width:370px;border-radius:12px} .ta-v2 .ta-lawyer-photo{height:290px} .ta-v2 .ta-lawyer-content{padding:var(--e-3) var(--e-3)} .ta-v2 .ta-lawyer-content h3{font-size:var(--t-h2)} .ta-v2 .ta-lawyer-location{font-size:var(--t-xs);margin-top:var(--e-1)} .ta-v2 .ta-lawyer-content .ta-btn{font-size:var(--t-xs);min-height:45px;padding-block:var(--e-1)} .ta-v2 .ta-faq-layout{grid-template-columns:1fr;gap:var(--e-3)} .ta-v2 .ta-faq-intro h2{font-size:var(--t-h1)} .ta-v2 .ta-faq-intro>p{font-size:var(--t-sm);line-height:1.9;max-width:330px;margin-top:var(--e-3)} .ta-v2 .ta-faq-intro .ta-text-link{font-size:var(--t-xs);margin-top:var(--e-2)} .ta-v2 .ta-faq-list summary{font-size:var(--t-xs);line-height:1.85;padding-block:var(--e-3);gap:var(--e-2)} .ta-v2 .ta-faq-list details p{font-size:var(--t-xs);line-height:1.95;padding-bottom:var(--e-3)} } @media(max-width:420px){ .ta-v2 .ta-practice{padding:var(--e-3) var(--e-2);min-height:191px} .ta-v2 .ta-practice h3{font-size:var(--t-xs)} .ta-v2 .ta-practice p{font-size:var(--t-xs)} .ta-v2 .ta-lawyer-card{flex-basis:88%} .ta-v2 .ta-lawyer-photo{height:270px} } @media(max-width:350px){ .ta-v2 .ta-practice{padding:var(--e-2) var(--e-2);min-height:180px} .ta-v2 .ta-practice h3{font-size:var(--t-xs)} .ta-v2 .ta-practice p{font-size:var(--t-xs)} .ta-v2 .ta-practice-arrow{right:12px} .ta-v2 .ta-practice-grid{gap:var(--e-1)} .ta-v2 .ta-lawyer-card{flex-basis:92%} .ta-v2 .ta-lawyer-content h3{font-size:var(--t-h2)} } .ta-v2 .ta-lawyer-photo img{object-position:center 15%} .ta-v2 .ta-lawyer-card{box-shadow:0 12px 34px -26px rgba(15,23,42,.3)} .ta-v2 .ta-lawyer-card:hover{transform:translateY(-4px);box-shadow:0 28px 54px -26px rgba(15,23,42,.38)} .ta-v2 .ta-lawyer-photo img{filter:saturate(.92)} .ta-v2 .ta-lawyer-location{font-size:var(--t-sm);color:#5a6478;font-weight:550;margin-top:var(--e-1)} .ta-v2 .ta-lawyer-content .ta-tags{margin-top:var(--e-1);display:flex;gap:var(--e-1);flex-wrap:wrap} .ta-v2 .ta-lawyer-content .ta-tags>*{background:#eef6f0;color:var(--green-ink);border:1px solid #d9ece1;border-radius:999px;padding:5px var(--e-1);font-size:var(--t-xs);font-weight:650} .ta-v2 .ta-lawyer-card .ta-btn{width:100%;justify-content:center;margin-top:var(--e-2);min-height:48px;font-size:var(--t-sm);background:var(--ink);border-color:var(--ink);color:#fff} .ta-v2 .ta-lawyer-card .ta-btn:hover{background:var(--green);border-color:var(--green);color:var(--ink)} .ta-v2 .ta-parcours-carte{display:flex;flex-direction:column;gap:var(--e-1);position:relative} .ta-v2 .ta-parcours-carte+.ta-parcours-carte{margin-top:0} .ta-v2 .ta-parcours-carte .ta-eyebrow{margin-bottom:0} .ta-v2 .ta-parcours-titre{font-size:var(--t-h3)!important;line-height:1.2;margin:0!important} .ta-v2 .ta-parcours-carte>p{flex:1} .ta-v2 .ta-parcours-badge{position:absolute;top:22px;right:22px;background:#eef7f2;color:var(--green-ink)} .ta-v2 .ta-articles-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr));gap:var(--e-2)} .ta-v2 .ta-article{display:flex;flex-direction:column;gap:var(--e-1)} .ta-v2 .ta-article+.ta-article{margin-top:0} .ta-v2 .ta-article .ta-eyebrow{margin:0} .ta-v2 .ta-article h3{font-size:var(--t-lg);line-height:1.35;font-weight:600} .ta-v2 .ta-article h3 a:hover{color:var(--green-ink)} .ta-v2 .ta-article>p{flex:1} .ta-v2 .ta-faq-list details>div{font-size:var(--t-xs);color:var(--muted);line-height:1.9;padding-bottom:var(--e-3);max-width:440px} .ta-v2 .ta-faq-list details>div a{color:var(--green-ink);text-decoration:underline} .ta-v2 .ta-outils-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--e-1);margin-top:var(--e-2)} .ta-v2 .ta-outil{display:flex;align-items:flex-start;gap:var(--e-2);background:#fff;border:1px solid var(--line);border-radius:13px;padding:var(--e-2) var(--e-2);color:var(--ink);transition:border-color .15s,box-shadow .15s} .ta-v2 a.ta-outil:hover{border-color:var(--gold);box-shadow:0 8px 22px #0f172a0d} .ta-v2 .ta-outil-icone{flex:none;width:40px;height:40px;border-radius:11px;background:#f4f6f1;display:flex;align-items:center;justify-content:center;color:var(--green-ink)} .ta-v2 .ta-outil-texte{display:flex;flex-direction:column;gap:4px;min-width:0} .ta-v2 .ta-outil-texte strong{font-size:var(--t-sm);font-weight:600} .ta-v2 .ta-outil-texte small{font-size:var(--t-xs);line-height:1.55;color:var(--muted)} .ta-v2 .ta-outil-cta{display:inline-flex;align-items:center;gap:var(--e-1);margin-top:4px;font-size:var(--t-xs);font-weight:650;color:var(--green-ink)} .ta-v2 .ta-outil-cta .ta-icon{width:15px;height:15px} .ta-v2 .ta-outil--bientot{background:#f4f6f1;border:1.5px dashed #c9cfc2;color:#626d7d;cursor:default} .ta-v2 .ta-outil--bientot .ta-outil-icone{background:#fff;color:#a28c4c} .ta-v2 .ta-outils-avertissement{display:flex;gap:var(--e-1);align-items:flex-start;margin-top:var(--e-2)!important;font-size:var(--t-xs)!important} .ta-v2 .ta-outils-avertissement .ta-icon{width:16px;height:16px;flex:none;margin-top:2px} .ta-v2 .ta-practice-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr} .ta-v2 .ta-practice{height:100%;min-height:119px} .ta-v2 .ta-practice:first-child{background:white;border-color:var(--line);color:inherit} .ta-v2 .ta-practice:first-child .ta-practice-icon{background:#f4f5ee;color:#93804b} .ta-v2 .ta-practice:first-child:nth-child(2n) .ta-practice-icon{background:#edf3f0;color:#6b8d79} .ta-v2 .ta-practice:first-child p{color:#88909c} .ta-v2 .ta-practice:first-child .ta-practice-arrow{color:#aeb6c0} .ta-v2 .ta-practice h3{font-family:var(--sans);font-size:var(--t-sm);line-height:1.3} .ta-v2 .ta-practice p{font-size:var(--t-xs);line-height:1.5} .ta-v2 .ta-articles-grille{grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr} .ta-v2 .ta-article{height:100%;transition:transform .2s,box-shadow .2s,border-color .2s} .ta-v2 .ta-article:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#cfd8d1} .ta-v2 .ta-article .ta-eyebrow a:hover{color:var(--green-ink)} .ta-v2 .ta-article h3{font-family:var(--sans);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .ta-v2 .ta-article>p:not(.ta-eyebrow){display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:var(--t-sm);line-height:1.7;color:var(--muted)} .ta-v2 .ta-article .ta-text-link{margin-top:auto} .ta-v2 .ta-lawyer-card{display:flex;flex-direction:column;box-shadow:0 6px 20px #0f172a06} .ta-v2 .ta-lawyer-content{display:flex;flex-direction:column;flex:1} .ta-v2 .ta-lawyer-content h3{font-family:var(--serif);font-size:var(--t-h3);line-height:1.2;letter-spacing:-.02em} .ta-v2 .ta-lawyer-photo img{object-fit:cover} .ta-v2 .ta-profile-button{width:100%;margin-top:auto;background:var(--ink);border-color:var(--ink);color:white} .ta-v2 .ta-profile-button:hover{background:var(--green);border-color:var(--green);color:var(--ink)} @media(max-width:1100px){ .ta-v2 .ta-practice-grid{grid-template-columns:repeat(2,1fr)} .ta-v2 .ta-articles-grille{grid-template-columns:repeat(2,1fr)} } @media(max-width:760px){ .ta-v2 .ta-articles-grille{grid-template-columns:1fr;grid-auto-rows:auto} } @media(max-width:480px){ .ta-v2 .ta-practice-grid{grid-template-columns:1fr;grid-auto-rows:auto} } .ta-v2 .ta-carte-lien{color:inherit;text-decoration:none} .ta-v2 .ta-carte-lien::after{content:'';position:absolute;inset:0;z-index:1;border-radius:inherit} .ta-v2 .ta-carte-lien:focus-visible{outline:none} .ta-v2 .ta-lawyer-card:focus-within,.ta-v2 .ta-article:focus-within{outline:3px solid #288b68;outline-offset:3px} .ta-v2 .ta-carte-dessus{position:relative;z-index:2} .ta-v2 .ta-lawyer-track{align-items:stretch;padding:var(--e-1) 4px var(--e-3)} .ta-v2 .ta-lawyer-card{position:relative;flex:0 0 calc((100% - 66px)/4);display:flex;flex-direction:column;background:white;border:1px solid #e6e9ee;border-radius:16px;overflow:hidden;cursor:pointer;box-shadow:0 2px 6px #0f172a08;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease} .ta-v2 .ta-lawyer-card:hover{transform:translateY(-6px);border-color:#d8e2da;box-shadow:0 22px 44px -18px #0f172a33} .ta-v2 .ta-lawyer-photo{height:auto;aspect-ratio:4/5;position:relative;overflow:hidden;background:linear-gradient(135deg,#dfe5e0,#c9d2d6)} .ta-v2 .ta-lawyer-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%;filter:none;transition:transform .5s ease} .ta-v2 .ta-lawyer-card:hover .ta-lawyer-photo img{transform:scale(1.045);filter:none} .ta-v2 .ta-lawyer-photo::after{content:'';position:absolute;inset:auto 0 0;height:38%;background:linear-gradient(to top,#0f172a59,#0f172a00);pointer-events:none} .ta-v2 .ta-photo-pill{position:absolute;z-index:1;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:var(--e-1);padding:5px var(--e-1);font-size:var(--t-xs);font-weight:650;letter-spacing:0;background:#fffffff2;color:#1f3a2d;border:0;border-radius:999px;box-shadow:0 2px 8px #0f172a1f;backdrop-filter:blur(6px)} .ta-v2 .ta-lawyer-content{display:flex;flex-direction:column;flex:1;gap:var(--e-1);padding:var(--e-3) var(--e-3) var(--e-3)} .ta-v2 .ta-lawyer-content h3{font-family:var(--serif);font-size:var(--t-h3);font-weight:500;line-height:1.2;letter-spacing:-.02em;margin:0;color:var(--ink)} .ta-v2 .ta-lawyer-location{display:flex;align-items:center;gap:var(--e-1);margin:0;font-size:var(--t-xs);color:var(--muted)} .ta-v2 .ta-lawyer-location .ta-icon{width:15px;height:15px;color:#9aa4b2} .ta-v2 .ta-lawyer-content .ta-tags{display:flex;flex-wrap:wrap;gap:var(--e-1);margin:2px 0 var(--e-1)} .ta-v2 .ta-lawyer-content .ta-tag{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:5px var(--e-1);border-radius:999px;font-size:var(--t-xs);font-weight:600;background:#edf6f1;color:#2f6b50} .ta-v2 .ta-lawyer-content .ta-tag:nth-child(2){background:#f6f2e6;color:#86703a} .ta-v2 .ta-lawyer-content .ta-tag:nth-child(3){background:#eef1f7;color:#46546d} .ta-v2 .ta-profile-button{width:100%;margin-top:auto;min-height:46px;justify-content:space-between;background:var(--ink);border:1px solid var(--ink);color:white;border-radius:10px;transition:background .25s,border-color .25s,color .25s} .ta-v2 .ta-lawyer-card:hover .ta-profile-button{background:var(--green);border-color:var(--green);color:var(--ink);transform:none;box-shadow:none} .ta-v2 .ta-article{position:relative;cursor:pointer;padding:var(--e-3) var(--e-3) var(--e-3);border-radius:16px;gap:var(--e-1)} .ta-v2 .ta-article:hover{transform:translateY(-6px);border-color:#d8e2da;box-shadow:0 22px 44px -18px #0f172a2e} .ta-v2 .ta-article .ta-eyebrow a{color:inherit} .ta-v2 .ta-article h3{font-size:var(--t-lg);font-weight:600;line-height:1.35;color:var(--ink)} .ta-v2 .ta-article:hover h3{color:var(--green-ink)} .ta-v2 .ta-article .ta-text-link{color:var(--ink)} .ta-v2 .ta-article:hover .ta-text-link .ta-icon{transform:translateX(4px)} .ta-v2 .ta-practice{border-radius:16px;padding:var(--e-3) var(--e-3);box-shadow:0 2px 6px #0f172a06;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease} .ta-v2 .ta-practice:hover{transform:translateY(-6px);border-color:#d8e2da;box-shadow:0 22px 44px -18px #0f172a2e} .ta-v2 a.ta-outil{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease} .ta-v2 a.ta-outil:hover{transform:translateY(-4px);border-color:#d8e2da;box-shadow:0 18px 36px -18px #0f172a2e} .ta-v2 .ta-outil{padding:var(--e-2) var(--e-2);border-radius:14px} .ta-v2 .ta-parcours-carte{border-radius:16px;transition:transform .25s ease,box-shadow .25s ease} @media(prefers-reduced-motion:reduce){ .ta-v2 .ta-lawyer-card,.ta-v2 .ta-lawyer-photo img,.ta-v2 .ta-article,.ta-v2 .ta-practice,.ta-v2 a.ta-outil{transition:none} .ta-v2 .ta-lawyer-card:hover,.ta-v2 .ta-article:hover,.ta-v2 .ta-practice:hover,.ta-v2 a.ta-outil:hover{transform:none} } @media(max-width:1100px){ .ta-v2 .ta-lawyer-card{flex-basis:calc((100% - 44px)/3)} } @media(max-width:760px){ .ta-v2 .ta-lawyer-card{flex-basis:78%;max-width:320px} .ta-v2 .ta-lawyer-content{padding:var(--e-2) var(--e-2) var(--e-2)} } .ta-v2 .ta-lawyer-card .ta-lawyer-content{display:flex;flex-direction:column;flex:1 1 auto} .ta-v2 .ta-lawyer-card .ta-profile-button{margin-top:auto;justify-content:space-between;padding-inline:var(--e-2)} .ta-v2 .ta-practice h3,.ta-v2 .ta-outil-texte strong,.ta-v2 .ta-faq-list summary{font-size:var(--t-base)} .ta-v2 .ta-faq-list details>div,.ta-v2 .ta-faq-list details p{font-size:var(--t-base);line-height:var(--lh-lecture);max-width:62ch} /* ═══════════════ CTA : UNE règle pour tout le site (revue du 29/10) ═══════════════ */ .ta-v2 .ta-btn{font-size:var(--t-sm)!important;font-weight:650!important;letter-spacing:-.01em} .ta-v2 .ta-text-link{font-size:var(--t-sm)!important;font-weight:650!important} .ta-v2 .ta-text-link .ta-icon{transition:transform .2s} /* ═══════════════ Cartes de parcours (Cherchez / Déposez / Vous êtes avocat) ═══════════════ */ .ta-v2 .ta-parcours-carte{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--e-2);padding:var(--e-4) var(--e-3) var(--e-3);background:white;border:1px solid var(--line);border-radius:16px;box-shadow:0 2px 6px #0f172a06;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease} .ta-v2 .ta-parcours-carte:hover{transform:translateY(-6px);border-color:#d8e2da;box-shadow:0 22px 44px -18px #0f172a33} .ta-v2 .ta-parcours-carte:focus-within{outline:3px solid #288b68;outline-offset:3px} .ta-v2 .ta-parcours-icone{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:#f4f5ee;color:#93804b} .ta-v2 .ta-parcours-carte:nth-child(2) .ta-parcours-icone{background:#edf3f0;color:#2f6b50} .ta-v2 .ta-parcours-icone .ta-icon{width:26px;height:26px;stroke-width:1.4} .ta-v2 .ta-parcours-carte .ta-eyebrow{margin:0} .ta-v2 .ta-parcours-titre{font-family:var(--serif)!important;font-size:var(--t-h3)!important;font-weight:500;line-height:1.25;letter-spacing:-.015em;margin:0!important;color:var(--ink)} .ta-v2 .ta-parcours-carte>p{flex:1;margin:0;font-size:var(--t-base);line-height:var(--lh-lecture);color:var(--muted)} .ta-v2 .ta-parcours-carte>.ta-text-link{margin-top:auto;padding:0;color:var(--green-ink)} .ta-v2 .ta-parcours-carte:hover>.ta-text-link .ta-icon{transform:translateX(5px)} .ta-v2 .ta-parcours-badge{position:absolute;top:var(--e-3);right:var(--e-3);background:#eef7f2;color:var(--green-ink)} /* Variante encre et or : la carte avocats se distingue des deux cartes justiciable. */ .ta-v2 .ta-parcours-carte--encre{background:linear-gradient(150deg,var(--navy),var(--ink));border-color:var(--ink)} .ta-v2 .ta-parcours-carte--encre:hover{border-color:#c2a24b66;box-shadow:0 24px 48px -18px #0f172a66} .ta-v2 .ta-parcours-carte--encre .ta-parcours-icone{background:#ffffff12;color:var(--gold)} .ta-v2 .ta-parcours-carte--encre .ta-eyebrow{color:#e4d5a2} .ta-v2 .ta-parcours-carte--encre .ta-parcours-titre{color:white} .ta-v2 .ta-parcours-carte--encre>p{color:#c3cbd8} .ta-v2 .ta-parcours-carte--encre>.ta-text-link{color:#e4d5a2} .ta-v2 .ta-parcours-carte--encre .ta-parcours-badge{background:#c2a24b26;color:#f0e2b6} /* Cartes posées sur fond papier : ombre un peu plus présente ; sur blanc, la bordure suffit. */ .ta-v2 .ta-fond--papier .ta-lawyer-card,.ta-v2 .ta-fond--papier .ta-practice,.ta-v2 .ta-fond--papier .ta-article,.ta-v2 .ta-fond--papier .ta-outil,.ta-v2 .ta-fond--papier .ta-parcours-carte:not(.ta-parcours-carte--encre),.ta-v2 .ta-fond--papier .ta-step-art{box-shadow:0 10px 28px -14px #0f172a29;border-color:#e3e7ee} /* ═══════════════ Bande « Vous êtes avocat ? » (composant réutilisable) ═══════════════ */ .ta-v2 .ta-btn-or{background:var(--gold);border-color:var(--gold);color:var(--ink)} .ta-v2 .ta-btn-or:hover{background:#d4b65f;border-color:#d4b65f;box-shadow:0 10px 24px -8px #c2a24b80} .ta-v2 .ta-for-lawyers{padding-block:var(--e-6)} .ta-v2 .ta-bandeau-pro{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);align-items:center;gap:var(--e-5);padding:var(--e-5);border-radius:var(--radius);background:linear-gradient(135deg,var(--ink) 0%,var(--navy) 100%);color:#c3cbd8;box-shadow:0 30px 60px -30px #0f172a73} /* Motif discret : halo or en haut à droite et trame fine à 4 %. */ .ta-v2 .ta-bandeau-pro::before{content:'';position:absolute;z-index:-1;inset:0;background:radial-gradient(circle at 88% 0%,#c2a24b2e 0%,#c2a24b00 45%),repeating-linear-gradient(135deg,#ffffff0a 0 1px,transparent 1px 14px);pointer-events:none} .ta-v2 .ta-bandeau-pro .ta-eyebrow{color:#e4d5a2} .ta-v2 .ta-bandeau-pro .ta-eyebrow::before{background:var(--gold)} .ta-v2 .ta-bandeau-pro h2{color:white;font-size:var(--t-h2);margin:0 0 var(--e-2)} .ta-v2 .ta-bandeau-pro h2 em{font-style:italic;color:var(--gold)} .ta-v2 .ta-bandeau-pro-texte>p{max-width:56ch;margin:0;font-size:var(--t-base);line-height:var(--lh-lecture);color:#c3cbd8} .ta-v2 .ta-bandeau-pro-arguments{list-style:none;margin:var(--e-4) 0 0;padding:var(--e-3) 0 0;border-top:1px solid #ffffff1a;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e-2)} .ta-v2 .ta-bandeau-pro-arguments li{display:flex;align-items:center;gap:var(--e-1);font-size:var(--t-sm);font-weight:600;color:white} .ta-v2 .ta-bandeau-pro-icone{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#ffffff10;border:1px solid #c2a24b40;color:var(--gold)} .ta-v2 .ta-bandeau-pro-icone .ta-icon{width:20px;height:20px} .ta-v2 .ta-bandeau-pro-actions{display:flex;flex-direction:column;align-items:flex-start;gap:var(--e-2);padding:var(--e-4);border-radius:14px;background:#ffffff08;border:1px solid #ffffff14} .ta-v2 .ta-bandeau-pro-actions .ta-btn{width:100%;justify-content:space-between} .ta-v2 .ta-bandeau-pro-actions .ta-text-link{color:#e4d5a2} .ta-v2 .ta-bandeau-pro-actions .ta-text-link:hover .ta-icon{transform:translateX(4px)} .ta-v2 .ta-bandeau-pro-actions small{font-size:var(--t-xs);color:#9aa6b8} @media(max-width:950px){ .ta-v2 .ta-bandeau-pro{grid-template-columns:1fr;gap:var(--e-4);padding:var(--e-4) var(--e-3)} .ta-v2 .ta-bandeau-pro-arguments{grid-template-columns:1fr} .ta-v2 .ta-for-lawyers{padding-block:var(--e-5)} } /* ═══════════════ Carte avocat : éléments complémentaires (v1.1) ═══════════════ */ .ta-v2 .ta-lawyer-initiales{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--serif);font-size:var(--t-h2);color:#ffffffd9;background:linear-gradient(150deg,var(--navy),var(--ink));letter-spacing:.02em} .ta-v2 .ta-lawyer-infos{margin:0;font-size:var(--t-sm);color:var(--muted)} .ta-v2 .ta-lawyer-reponse{display:flex;align-items:center;gap:var(--e-1);margin:0;font-size:var(--t-sm);color:var(--muted)} .ta-v2 .ta-lawyer-reponse-point{flex:none;width:8px;height:8px;border-radius:50%;background:#c3cad4} .ta-v2 .ta-lawyer-reponse.est-rapide{color:var(--green-ink);font-weight:600} .ta-v2 .ta-lawyer-reponse.est-rapide .ta-lawyer-reponse-point{background:var(--green);box-shadow:0 0 0 3px #53c59829} .ta-v2 .ta-lawyer-card .ta-tags .ta-tag--reste{background:var(--bg);color:#46546d} .ta-v2 .ta-lawyer-actions{display:grid;gap:var(--e-1);margin-top:auto;padding-top:var(--e-1)} .ta-v2 .ta-lawyer-actions .ta-profile-button{margin-top:0} .ta-v2 .ta-lawyer-action{min-height:46px;justify-content:space-between;padding-inline:var(--e-2);border-radius:10px} /* Deux actions : « Contacter » (vert, lien réel) porte l'appel ; « Voir la fiche » passe en secondaire. */ .ta-v2 .ta-lawyer-actions:has(.ta-lawyer-action){grid-template-columns:1fr 1fr} .ta-v2 .ta-lawyer-actions:has(.ta-lawyer-action) .ta-profile-button,.ta-v2 .ta-lawyer-card:hover .ta-lawyer-actions:has(.ta-lawyer-action) .ta-profile-button{background:white;border-color:var(--line);color:var(--ink)} .ta-v2 .ta-lawyer-card:hover .ta-lawyer-actions:has(.ta-lawyer-action) .ta-profile-button{border-color:var(--ink)} .ta-v2 .ta-lawyer-action:hover{background:#6bd1aa} /* Grille des cartes « liste » (annuaire, pages spécialité / ville, profils similaires d'une fiche). */ .ta-v2 .ta-r-grille{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e-3);transition:opacity .25s} @media(max-width:1100px){ .ta-v2 .ta-r-grille{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:600px){ .ta-v2 .ta-r-grille{grid-template-columns:1fr;gap:var(--e-2)} } /* Variante « liste » (annuaire) : cartes en grille, jamais en piste de défilement. */ .ta-v2 .ta-lawyer-card--liste{max-width:none;min-width:0} .ta-v2 .ta-lawyer-card--liste .ta-lawyer-photo{aspect-ratio:5/4} .ta-v2 .ta-lawyer-card--liste .ta-lawyer-photo img{object-position:center 22%} .ta-v2 .ta-lawyer-card--liste .ta-lawyer-content{gap:var(--e-1)} .ta-v2 .ta-lawyer-card--liste .ta-tags{margin:var(--e-1) 0 0} @media(max-width:600px){ /* Mobile : carte horizontale (photo à gauche), pour ne pas aligner 12 portraits pleine hauteur. */ .ta-v2 .ta-lawyer-card--liste{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:var(--e-2);row-gap:4px;align-content:start;padding:var(--e-2)} .ta-v2 .ta-lawyer-card--liste .ta-lawyer-photo{grid-row:1 / span 4;align-self:start;width:96px;aspect-ratio:4/5;border-radius:12px} .ta-v2 .ta-lawyer-card--liste .ta-lawyer-photo::after,.ta-v2 .ta-lawyer-card--liste .ta-photo-pill{display:none} .ta-v2 .ta-lawyer-card--liste .ta-lawyer-initiales{font-size:var(--t-h3)} .ta-v2 .ta-lawyer-card--liste .ta-lawyer-content h3{font-size:var(--t-lg)!important} .ta-v2 .ta-lawyer-card--liste .ta-lawyer-content{display:contents} .ta-v2 .ta-lawyer-card--liste .ta-lawyer-content>*{grid-column:2;min-width:0} .ta-v2 .ta-lawyer-card--liste .ta-lawyer-content>.ta-tags{grid-column:1 / -1;margin-top:var(--e-2)} .ta-v2 .ta-lawyer-card--liste .ta-lawyer-actions{grid-column:1 / -1;margin-top:var(--e-2);padding-top:0} } /* ═══════════════ Pagination ═══════════════ */ .ta-v2 .ta-pagination{margin-top:var(--e-5)} .ta-v2 .ta-pagination ul{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--e-1);margin:0;padding:0;list-style:none} .ta-v2 .ta-pagination-num,.ta-v2 .ta-pagination-nav{display:inline-flex;align-items:center;justify-content:center;gap:var(--e-1);min-width:44px;min-height:44px;padding:0 var(--e-2);border:1px solid var(--line);border-radius:10px;background:white;font-size:var(--t-sm);font-weight:650;color:var(--ink);transition:border-color .2s,background .2s,color .2s} .ta-v2 .ta-pagination-num{padding:0} .ta-v2 a.ta-pagination-num:hover,.ta-v2 .ta-pagination-nav:hover{border-color:var(--ink)} .ta-v2 .ta-pagination-num.est-courante{background:var(--ink);border-color:var(--ink);color:white} .ta-v2 .ta-pagination-nav .ta-icon{width:16px;height:16px} .ta-v2 .ta-pagination-trou{min-width:24px;text-align:center;color:var(--muted);font-size:var(--t-sm)} @media(max-width:600px){ .ta-v2 .ta-pagination-nav span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .ta-v2 .ta-pagination-nav{padding:0} } /* ═══════════════ Bande de dépôt (justiciable) ═══════════════ */ .ta-v2 .ta-depot{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--e-5);align-items:center;padding:var(--e-5);background:white;border:1px solid #e3e7ee;border-radius:20px;box-shadow:0 24px 60px -36px #0f172a40} .ta-v2 .ta-depot .ta-titre-section{margin-bottom:var(--e-2)} .ta-v2 .ta-depot-intro{max-width:52ch;font-size:var(--t-lg);line-height:var(--lh-lecture);color:var(--muted)} .ta-v2 .ta-depot-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2) var(--e-3);margin-top:var(--e-4)} .ta-v2 .ta-depot-note{font-size:var(--t-sm);color:var(--muted)} .ta-v2 .ta-depot-etapes{display:grid;gap:0;margin:0;padding:0;list-style:none;counter-reset:none} .ta-v2 .ta-depot-etapes li{display:flex;align-items:flex-start;gap:var(--e-2);padding:var(--e-3) 0;border-top:1px solid var(--line)} .ta-v2 .ta-depot-etapes li:first-child{border-top:0;padding-top:0} .ta-v2 .ta-depot-etapes li:last-child{padding-bottom:0} .ta-v2 .ta-depot-num{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid #c2a24b66;background:#fbf8ee;font-family:var(--serif);font-size:var(--t-lg);color:#8b6d22} .ta-v2 .ta-depot-etapes p{display:flex;flex-direction:column;gap:2px;margin:0;font-size:var(--t-sm);color:var(--muted)} .ta-v2 .ta-depot-etapes strong{font-size:var(--t-base);font-weight:650;color:var(--ink)} @media(max-width:950px){ .ta-v2 .ta-depot{grid-template-columns:1fr;gap:var(--e-4);padding:var(--e-4)} } @media(max-width:600px){ .ta-v2 .ta-depot{padding:var(--e-3) var(--e-2);border-radius:16px} .ta-v2 .ta-depot-actions .ta-btn{width:100%;justify-content:space-between} } /* ═══════════════ Barre collante de dépôt ═══════════════ Mobile : barre pleine largeur. Bureau : bouton flottant en bas à droite. Elle n'apparaît qu'au défilement et s'efface quand un autre bouton de dépôt est visible (ta-layout.js). */ .ta-v2 .ta-barre-depot{position:fixed;z-index:90;left:0;right:0;bottom:0;padding:var(--e-1) var(--e-2) calc(var(--e-1) + env(safe-area-inset-bottom));background:#0f172af2;backdrop-filter:blur(8px);box-shadow:0 -10px 30px -12px #0f172a59;transform:translateY(110%);transition:transform .3s ease} .ta-v2 .ta-barre-depot.est-visible{transform:none} .ta-v2 .ta-barre-depot .ta-btn{width:100%;justify-content:space-between;min-height:48px} @media(min-width:1025px){ .ta-v2 .ta-barre-depot{left:auto;right:var(--e-3);bottom:var(--e-3);padding:0;background:none;backdrop-filter:none;box-shadow:none;transform:translateY(16px);opacity:0;pointer-events:none;transition:transform .3s ease,opacity .3s ease} .ta-v2 .ta-barre-depot.est-visible{transform:none;opacity:1;pointer-events:auto} .ta-v2 .ta-barre-depot .ta-btn{width:auto;gap:var(--e-2);border-radius:999px;padding-inline:var(--e-3);box-shadow:0 18px 40px -14px #0f172a66} } @media(max-width:1024px){ /* La barre ne doit jamais couvrir la fin du pied de page. */ .ta-v2:has(.ta-barre-depot) .ta-footer{padding-bottom:var(--e-6)} } /* Actions de carte : sélecteurs renforcés, car les strates plus haut (portage de la maquette) stylent tous les .ta-btn d'une carte en bouton encre ou en lien filet. */ .ta-v2 .ta-lawyer-card .ta-lawyer-actions .ta-btn{width:100%;min-height:46px;margin:0;padding:0 var(--e-2);justify-content:space-between;border:1px solid var(--ink);border-radius:10px;background:var(--ink);color:white;box-shadow:none;transform:none} .ta-v2 .ta-lawyer-card:hover .ta-lawyer-actions .ta-profile-button{background:var(--green);border-color:var(--green);color:var(--ink)} .ta-v2 .ta-lawyer-card .ta-lawyer-actions .ta-lawyer-action{background:var(--green);border-color:var(--green);color:var(--ink)} .ta-v2 .ta-lawyer-card .ta-lawyer-actions .ta-lawyer-action:hover{background:#6bd1aa;border-color:#6bd1aa} .ta-v2 .ta-lawyer-card .ta-lawyer-actions:has(.ta-lawyer-action) .ta-profile-button{background:white;border-color:var(--line);color:var(--ink)} .ta-v2 .ta-lawyer-card:hover .ta-lawyer-actions:has(.ta-lawyer-action) .ta-profile-button{background:white;border-color:var(--ink);color:var(--ink)} /* La barre de dépôt remplace les autres appels flottants de ces pages, comme le faisait la dockbar d'origine (pilule de dépôt et bouton de recherche assistée). */ body.ta-v2-page:has([data-ta-barre-depot]) #ta-stickybar, body.ta-v2-page:has([data-ta-barre-depot]) .sticky-bar-cta, body.ta-v2-page:has([data-ta-barre-depot]) .ta-float-btn, body.ta-v2-page:has([data-ta-barre-depot]) #ta-float-btn, body.ta-v2-page:has([data-ta-barre-depot]) .ta-float-tooltip, body.ta-v2-page:has([data-ta-fiche-dock]) .ta-float-btn, body.ta-v2-page:has([data-ta-fiche-dock]) #ta-float-btn, body.ta-v2-page:has([data-ta-fiche-dock]) .ta-float-tooltip{display:none!important} /* ═══════════════ Hero de résultats (standard des pages de résultats) ═══════════════ Annuaire, pages spécialité / ville, et toute page dont le contenu est une liste de résultats. Bureau : 2 colonnes, titre (H1 à la taille --t-h2) + sous-titre à gauche, outil de recherche à droite, centrés verticalement. Règle (charte §3) : les premiers résultats sont entamés sans défilement à 1440 × 900. Mobile : 1 colonne, titre puis outil. */ .ta-v2 .ta-hero-resultats-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);gap:var(--e-5);align-items:center} .ta-v2 .ta-hero-resultats-texte{display:flex;flex-direction:column;align-items:flex-start;gap:var(--e-2)} .ta-v2 .ta-hero-resultats h1{font-size:var(--t-h2);line-height:1.08;letter-spacing:-.02em;color:var(--ink)} .ta-v2 .ta-hero-resultats-texte>p:not(.ta-pill){max-width:44ch;font-size:var(--t-base);line-height:var(--lh-lecture);color:var(--muted)} .ta-v2 .ta-hero-resultats-outil{width:100%;min-width:0} @media(max-width:1024px){ .ta-v2 .ta-hero-resultats-grille{grid-template-columns:1fr;gap:var(--e-3)} .ta-v2 .ta-hero-resultats-texte{align-items:center;text-align:center} .ta-v2 .ta-hero-resultats h1{font-size:var(--t-h1)} .ta-v2 .ta-hero-resultats-texte>p:not(.ta-pill){max-width:58ch} } /* ═══════════════ Étapes numérotées (home « Comment ça marche », landing avocats…) ═══════════════ Valeurs effectives de la home, regroupées ici en une seule définition (extraites de home.css le 29/10). Balisage : ol/div.ta-steps > .ta-step > .ta-step-art (icône + .ta-step-num), h3, p. */ .ta-v2 .ta-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e-5);margin:0;padding:0;list-style:none} .ta-v2 .ta-step{position:relative;min-width:0;padding:0 var(--e-1) 0 0} .ta-v2 .ta-step:not(:last-child)::after{content:'';position:absolute;height:1px;top:30px;left:126px;right:-20px;background:linear-gradient(90deg,#d1d8cc 55%,transparent 55%);background-size:8px 1px} .ta-v2 .ta-step-art{position:relative;z-index:1;display:grid;place-items:center;width:58px;height:58px;margin-bottom:var(--e-3);border-radius:11px;background:#f3f5ef;color:#8d8054} .ta-v2 .ta-step-art .ta-icon{width:28px;height:28px;stroke-width:1.2} .ta-v2 .ta-step-num{position:absolute;left:76px;top:10px;font-family:var(--serif);font-size:var(--t-xs);line-height:1;color:#c2c9bb} .ta-v2 .ta-step h3{margin-bottom:var(--e-1);font-size:var(--t-lg);font-weight:650;letter-spacing:-.03em} .ta-v2 .ta-step p{max-width:320px;font-size:var(--t-base);line-height:var(--lh-lecture);color:var(--muted)} .ta-v2 .ta-step small{display:inline-flex;align-items:center;gap:var(--e-1);margin-top:var(--e-2);font-size:var(--t-sm);color:#739276} .ta-v2 .ta-step small .ta-icon{width:12px;height:12px} .ta-v2 .ta-fond--papier .ta-step-art{background:white} @media(max-width:950px){ .ta-v2 .ta-steps{gap:var(--e-3)} } @media(max-width:760px){ .ta-v2 .ta-steps{grid-template-columns:1fr;gap:var(--e-3)} .ta-v2 .ta-step{display:grid;grid-template-columns:50px 1fr;gap:0 var(--e-2);padding:0} .ta-v2 .ta-step-art{grid-row:1 / 4;width:50px;height:50px;margin:0;border-radius:10px} .ta-v2 .ta-step-art .ta-icon{width:24px;height:24px} .ta-v2 .ta-step-num{left:auto;right:-7px;top:-9px;display:grid;place-items:center;width:19px;height:19px;border:3px solid white;border-radius:50%;background:var(--navy);color:#e7d49e;font-family:var(--sans)} .ta-v2 .ta-step h3{line-height:1.5} .ta-v2 .ta-step p{max-width:470px} .ta-v2 .ta-step:not(:last-child)::after{top:60px;bottom:-17px;left:24px;right:auto;width:1px;height:auto;background:linear-gradient(180deg,#d1d8cc 55%,transparent 55%);background-size:1px 7px} } /* FAQ : le surtitre est aussi un

de .ta-faq-intro ; il ne prend pas la largeur ni la taille du paragraphe d'introduction (il passait sur deux lignes). */ .ta-v2 .ta-faq-intro>p.ta-eyebrow{max-width:none;margin-top:0;font-size:var(--t-xs);line-height:1.6} /* Liens texte : cible tactile de 44 px (charte §6), sur toutes les pages refaites. */ .ta-v2 .ta-text-link{min-height:44px} /* Petites pastilles et liens de catégorie : zone de clic portée à 44 px par un pseudo-élément invisible, sans changer leur dessin. */ .ta-v2 .ta-popular-searches a,.ta-v2 .ta-popular-searches button,.ta-v2 .ta-article .ta-eyebrow a{position:relative} .ta-v2 .ta-popular-searches a::after,.ta-v2 .ta-popular-searches button::after,.ta-v2 .ta-article .ta-eyebrow a::after{content:'';position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)} .ta-v2 .ta-round-button{width:44px;height:44px;min-width:44px} /* ═══════════════ Formulaires Gravity Forms dans les cartes (contact de fiche, de dossier…) ═══════════════ */ .ta-v2 .ta-gf .gform_wrapper{margin:0} .ta-v2 .ta-gf .gform_fields{display:grid;grid-template-columns:minmax(0,1fr)!important;gap:var(--e-2)!important} .ta-v2 .ta-gf .gfield{min-width:0} /* un champ ne déborde jamais de sa colonne (largeur intrinsèque des input) */ .ta-v2 .ta-gf .gfield_label,.ta-v2 .ta-gf .gform-field-label{font-size:var(--t-sm)!important;font-weight:650!important;color:var(--ink)!important;margin-bottom:6px!important} .ta-v2 .ta-gf .gfield_required{color:var(--muted)!important;font-size:var(--t-xs)!important} .ta-v2 .ta-gf input[type=text],.ta-v2 .ta-gf input[type=email],.ta-v2 .ta-gf input[type=tel],.ta-v2 .ta-gf textarea{width:100%;min-height:48px;padding:var(--e-1) var(--e-2)!important;border:1px solid var(--line)!important;border-radius:12px!important;background:var(--paper)!important;font-size:var(--t-base)!important;color:var(--ink);box-shadow:none!important} .ta-v2 .ta-gf textarea{height:160px!important;min-height:120px;line-height:1.6;resize:vertical} .ta-v2 .ta-gf .ginput_counter{display:none!important} /* compteur de caractères en anglais, inutile ici */ .ta-v2 .ta-gf input:focus,.ta-v2 .ta-gf textarea:focus{outline:none;border-color:var(--green)!important;background:white!important;box-shadow:0 0 0 4px #53c59826!important} .ta-v2 .ta-gf .gform_footer{margin:var(--e-2) 0 0!important;padding:0!important} .ta-v2 .ta-gf .gform_button,.ta-v2 .ta-gf .gform_footer input[type=submit]{width:100%!important;min-height:52px!important;border:0;border-radius:10px;background:var(--green)!important;color:var(--ink)!important;font-size:var(--t-sm)!important;font-weight:700!important;cursor:pointer;transition:background .2s} .ta-v2 .ta-gf .gform_button:hover{background:#6bd1aa!important} .ta-v2 .ta-gf .gfield_description,.ta-v2 .ta-gf .validation_message{font-size:var(--t-sm)!important} .ta-v2 .ta-gf .gform_validation_errors{border-radius:12px!important;font-size:var(--t-sm)!important} .ta-v2 .ta-contact-ok{padding:var(--e-3);border-radius:14px;background:#edf6f1;color:var(--green-ink);font-size:var(--t-base);line-height:var(--lh-lecture)} /* Gravity Forms impose 288 px aux zones « large » : on reprend la main avec plus de spécificité. */ .ta-v2 .ta-gf .gform_wrapper textarea.large,.ta-v2 .ta-gf .gform_wrapper textarea{height:160px!important} /* reCAPTCHA : largeur fixe de 304 px ; on le réduit sur les petits écrans pour qu'il tienne dans la carte. */ @media(max-width:400px){ .ta-v2 .ta-gf .ginput_recaptcha{transform:scale(.88);transform-origin:0 0;height:68px} } /* Encart « réservé aux abonnés » de ta-freemium (pied de page, écrit pour l'ancien gabarit MyListing) : faute de cible, il se loge dans le premier