/**
 * Trouver-Avocats : fondations du design system
 * ---------------------------------------------
 * Version : 1.2 (02/11/2026)
 * Source : design-reference/index.html, maquette v4 (Fraunces + Figtree).
 *
 * Tout est rangé sous le conteneur .ta-v2 (et non sous <body>), avec des classes préfixées
 * ta- : pendant la construction, MyListing et designsta.css restent chargés. Ils définissent
 * déjà .btn et .container (Bootstrap), et la maquette remet à zéro a, img, button et les
 * titres. Scopé au conteneur, rien ne déborde sur le header et le footer MyListing.
 * À la coupure de MyListing, les variables remontent sur :root.
 *
 * Contenu : variables (valeurs finales de la maquette), base typographique, composants
 * réutilisables (boutons, surtitre, pastilles, tags, liens, sections, surfaces, icônes,
 * lien d'évitement). Les styles propres à la home vivent dans home.css.
 * Ce fichier est généré depuis la maquette : la retoucher puis régénérer plutôt que
 * de diverger à la main.
 *
 * Changelog
 * 1.2 : polices de secours ajustées (« Figtree Repli », « Fraunces Repli », size-adjust mesuré le 02/11 : Figtree normal
 *       0,99 × Arial, gras 0,957 ; Fraunces 1,044 × Georgia) : le texte garde sa place quand les polices arrivent (CLS).
 * 1.1 : échelles uniques de tailles (--t-*) et d'espacements (--e-*), toutes les valeurs en dur
 *       remplacées ; corps de lecture à 16-18 px.
 * 1.0 : première version, maquette v4.
 */

/* Polices de secours aux mesures des polices du site (relevé du 02/11) : pendant le chargement de Figtree et Fraunces,
   le texte occupe la même largeur, rien ne se décale à leur arrivée (Core Web Vitals, CLS de la fiche en mobile). */
@font-face{font-family:'Figtree Repli';src:local('Arial'),local('ArialMT'),local('Helvetica');font-weight:100 500;size-adjust:99%}
@font-face{font-family:'Figtree Repli';src:local('Arial Bold'),local('Arial-BoldMT'),local('Helvetica Bold');font-weight:600 900;size-adjust:95.7%}
@font-face{font-family:'Fraunces Repli';src:local('Georgia');size-adjust:104.4%}

.ta-v2 {
	--ink: #0f172a;
	--navy: #1a2744;
	--gold: #C2A24B;
	--green: #53C598;
	--green-ink: #175b43;
	--muted: #626d7d;
	--line: #e0e4e9;
	--bg: #f1f3f8;
	--paper: #f9f9f6;
	--white: #fff;
	--serif: 'Fraunces','Fraunces Repli',Georgia,serif;
	--sans: 'Figtree','Figtree Repli',Arial,sans-serif;
	--radius: 16px;
	--shadow: 0 18px 55px #0f172a0b;
	--max: 1280px;

	/* Échelle typographique UNIQUE : aucune autre taille n'est permise dans les feuilles ta-v2.
	   La hiérarchie vient des graisses, des couleurs et de l'espace, pas de la miniaturisation. */
	--t-xs: 12px;                        /* micro-libellés seulement (surtitres, pastilles) */
	--t-sm: 14px;                        /* secondaire : metas, boutons, navigation */
	--t-base: 16px;                      /* texte courant, descriptions de cartes */
	--t-lg: 18px;                        /* lecture longue, introductions */
	--t-h3: 22px;
	--t-h2: clamp(32px, 3.5vw, 44px);
	--t-h1: clamp(38px, 4.5vw, 56px);
	--lh-lecture: 1.7;

	/* Échelle d'espacement UNIQUE (marges, retraits, gouttières). */
	--e-1: 8px;
	--e-2: 16px;
	--e-3: 24px;
	--e-4: 40px;
	--e-5: 64px;
	--e-6: 96px;
}

.ta-v2 *,.ta-v2 *::before,.ta-v2 *::after{box-sizing:border-box}
.ta-v2{scroll-behavior:smooth;scroll-padding-top:108px}
.ta-v2{margin:0;font-family:var(--sans);color:var(--ink);font-size:var(--t-base);line-height:1.6;background:var(--white);-webkit-font-smoothing:antialiased}
.ta-v2 button,.ta-v2 input,.ta-v2 select,.ta-v2 textarea{font:inherit}
.ta-v2 button,.ta-v2 a,.ta-v2 input,.ta-v2 select,.ta-v2 textarea{-webkit-tap-highlight-color:transparent}
.ta-v2 button,.ta-v2 a{touch-action:manipulation}
.ta-v2 button{cursor:pointer}
.ta-v2 a{color:inherit;text-decoration:none}
.ta-v2 img{display:block;max-width:100%;object-fit:cover}
.ta-v2 button{color:inherit}
.ta-v2 h1,.ta-v2 h2,.ta-v2 h3,.ta-v2 p{margin:0}
.ta-v2 h1,.ta-v2 h2,.ta-v2 h3{font-weight:400}
.ta-v2 h1,.ta-v2 h2{font-family:var(--serif);line-height:1.06;letter-spacing:-.035em}
.ta-v2 h2{font-size:var(--t-h2)}
.ta-v2 h3{line-height:1.3}
.ta-v2 em{font-weight:400}
.ta-v2 svg{display:inline-block;vertical-align:middle;flex-shrink:0}
.ta-v2 .ta-icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ta-v2 .ta-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ta-v2 .ta-container{width:min(var(--max),calc(100% - 80px));margin-inline:auto}
.ta-v2 .ta-section{padding-block:var(--e-6)}
.ta-v2 .ta-eyebrow{display:flex;align-items:center;gap:var(--e-1);color:#8b763d;font-size:var(--t-xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:var(--e-2)}
.ta-v2 .ta-eyebrow::before{content:'';width:24px;height:1px;background:var(--gold)}
.ta-v2 .ta-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--e-3);margin-bottom:var(--e-4)}
.ta-v2 .ta-section-head p{color:var(--muted);margin-top:var(--e-2);max-width:430px}
.ta-v2 .ta-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--e-1);border:1px solid transparent;min-height:49px;padding:var(--e-1) var(--e-3);border-radius:8px;font-size:var(--t-sm);font-weight:650;line-height:1.3;transition:background .2s,transform .2s,box-shadow .2s;white-space:nowrap}
.ta-v2 .ta-btn .ta-icon{width:17px;height:17px}
.ta-v2 .ta-btn:hover{transform:translateY(-2px)}
.ta-v2 .ta-btn-green{background:var(--green);color:var(--ink)}
.ta-v2 .ta-btn-green:hover{background:#6bd1aa;box-shadow:0 7px 18px #53c59835}
.ta-v2 .ta-btn-dark{background:var(--ink);color:white}
.ta-v2 .ta-btn-dark:hover{background:var(--navy)}
.ta-v2 .ta-btn-outline{border-color:var(--line);background:white}
.ta-v2 .ta-btn-outline:hover{border-color:#abb3c0;background:var(--paper)}
.ta-v2 .ta-text-link{display:inline-flex;align-items:center;gap:var(--e-1);font-size:var(--t-sm);font-weight:650;padding-block:var(--e-1)}
.ta-v2 .ta-text-link .ta-icon{width:18px;height:18px;transition:transform .2s}
.ta-v2 .ta-text-link:hover .ta-icon{transform:translateX(4px)}
.ta-v2 :focus-visible{outline:3px solid #288b68;outline-offset:5px}
.ta-v2 .ta-skip-link{position:fixed;top:8px;left:8px;z-index:100;background:white;padding:var(--e-1);transform:translateY(-150%)}
.ta-v2 .ta-skip-link:focus{transform:none}
.ta-v2 .ta-pill{display:inline-flex;align-items:center;gap:var(--e-1);border-radius:100px;padding:var(--e-1) var(--e-1);font-size:var(--t-xs);font-weight:650;line-height:1.4}
.ta-v2 .ta-dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex:none}
.ta-v2 .ta-mobile-only{display:none}
.ta-v2 .ta-round-button{display:grid;place-items:center;min-width:40px;width:40px;height:40px;border:1px solid #dce1e9;background:transparent;border-radius:50%;transition:background .2s}
.ta-v2 .ta-round-button:hover{background:white}
.ta-v2 .ta-round-button:disabled{opacity:.35;cursor:default}
.ta-v2 .ta-round-button .ta-icon{width:18px;height:18px}
.ta-v2 .ta-demo-label{display:flex;align-items:center;gap:var(--e-1);font-size:var(--t-xs);color:#8a919c;letter-spacing:.01em;margin-bottom:var(--e-2)}
.ta-v2 .ta-demo-label .ta-icon{width:12px;height:12px}
.ta-v2 .ta-tags{display:flex;gap:var(--e-1);flex-wrap:wrap;margin-block:var(--e-2) var(--e-3)}
.ta-v2 .ta-tag{border:1px solid #e8ebf0;border-radius:4px;color:#697488;padding:3px var(--e-1);font-size:var(--t-xs)}
@media(max-width:1100px){
	.ta-v2 .ta-container{width:calc(100% - 56px)}
}
@media(max-width:700px){
	.ta-v2{scroll-padding-top:85px}
	.ta-v2 .ta-container{width:calc(100% - 40px)}
	.ta-v2 .ta-section{padding-block:var(--e-5)}
	.ta-v2 .ta-eyebrow{font-size:var(--t-xs);margin-bottom:var(--e-2)}
	.ta-v2 .ta-section-head{display:block;margin-bottom:var(--e-3)}
	.ta-v2 .ta-section-head h2{font-size:var(--t-h2)}
	.ta-v2 .ta-section-head p{font-size:var(--t-xs);max-width:310px;margin-top:var(--e-2)}
	.ta-v2 .ta-section-head>.ta-text-link{margin-top:var(--e-2);font-size:var(--t-xs)}
	.ta-v2 .ta-round-button{height:34px;width:34px;min-width:34px}
	.ta-v2 .ta-mobile-only{display:block}
}
@media(max-width:370px){
	.ta-v2 .ta-container{width:calc(100% - 30px)}
}
@media(prefers-reduced-motion:reduce){
	.ta-v2{scroll-behavior:auto}
	.ta-v2 *,.ta-v2 *::before,.ta-v2 *::after{transition:none!important;animation:none!important}
}
@media print{
	.ta-v2 a{color:inherit}
	.ta-v2{font-size:var(--t-xs)}
}
.ta-v2 [hidden]{display:none!important}
.ta-v2 .ta-surface{background:white;border:1px solid var(--line);border-radius:14px;padding:var(--e-3)}
.ta-v2 .ta-surface+.ta-surface{margin-top:var(--e-2)}
.ta-v2 .ta-surface h2{font-size:var(--t-h2);margin-bottom:var(--e-2)}
.ta-v2 .ta-surface>p{font-size:var(--t-sm);color:var(--muted);line-height:1.9}
.ta-v2 .ta-surface>p+p{margin-top:var(--e-2)}
@media(max-width:700px){
	.ta-v2 .ta-surface{padding:var(--e-3)}
	.ta-v2 .ta-surface h2{font-size:var(--t-h2)}
	.ta-v2 .ta-surface>p{font-size:var(--t-xs)}
}
.ta-v2{font-family:var(--sans);font-size:var(--t-base);background:#fff;letter-spacing:-.015em}
.ta-v2 h1,.ta-v2 h2{letter-spacing:-.025em;font-weight:400}
.ta-v2 h2{font-size:var(--t-h2);line-height:1.08}
.ta-v2 em{color:#9a7d36}
.ta-v2 .ta-container{width:min(var(--max),calc(100% - 96px))}
.ta-v2 .ta-section{padding-block:var(--e-6)}
.ta-v2 .ta-eyebrow{font-size:var(--t-xs);letter-spacing:.17em;font-weight:700;color:#8b753a;gap:var(--e-2);margin-bottom:var(--e-3)}
.ta-v2 .ta-eyebrow::before{width:26px}
.ta-v2 .ta-section-head{gap:var(--e-4);margin-bottom:var(--e-4)}
.ta-v2 .ta-section-head p{font-size:var(--t-sm);line-height:1.9;max-width:430px;margin-top:var(--e-2)}
.ta-v2 .ta-btn{border-radius:9px;min-height:52px;font-size:var(--t-sm);font-weight:700;padding:var(--e-2) var(--e-3);gap:var(--e-2);letter-spacing:-.02em;box-shadow:none;transition:transform .22s,background .22s,box-shadow .22s,border-color .22s}
.ta-v2 .ta-btn:hover{transform:translateY(-3px);box-shadow:0 10px 20px #0f172a12}
.ta-v2 .ta-btn .ta-icon{width:18px;height:18px;transition:transform .22s}
.ta-v2 .ta-btn:hover .ta-icon{transform:translateX(3px)}
.ta-v2 .ta-btn-outline{border-color:#dbe1e7}
.ta-v2 .ta-text-link{font-size:var(--t-sm);font-weight:650;gap:var(--e-2);white-space:normal}
.ta-v2 .ta-pill{font-size:var(--t-xs);letter-spacing:.005em}
.ta-v2 .ta-demo-label{font-size:var(--t-xs);line-height:1.6;color:#77818f}
.ta-v2 .ta-icon{stroke-width:1.45}
.ta-v2 .ta-tag{font-size:var(--t-xs);padding:5px var(--e-1);border:0;background:#f1f4f2;color:#53695b;border-radius:5px}
.ta-v2 .ta-round-button{width:44px;height:44px;min-width:44px;border-color:#dce2da}
.ta-v2 .ta-round-button:hover{background:#eff4ec;border-color:#c8d1c0}
.ta-v2 .ta-tags{margin-block:var(--e-2) var(--e-3);gap:var(--e-1)}
.ta-v2 .ta-surface{padding:var(--e-4);border-color:#e1e7db;border-radius:14px;box-shadow:0 6px 20px #0f172a02}
.ta-v2 .ta-surface+.ta-surface{margin-top:var(--e-3)}
.ta-v2 .ta-surface .ta-eyebrow{font-size:var(--t-xs);margin-bottom:var(--e-3)}
.ta-v2 .ta-surface h2{font-size:var(--t-h2);line-height:1.12;margin-bottom:var(--e-3)}
.ta-v2 .ta-surface>p{font-size:var(--t-sm);line-height:1.95;color:#6d7868}
.ta-v2 .ta-surface>p+p{margin-top:var(--e-2)}
@media(max-width:1150px){
	.ta-v2 .ta-container{width:calc(100% - 64px)}
	.ta-v2 .ta-surface{padding:var(--e-3)}
}
@media(max-width:950px){
	.ta-v2 .ta-surface{padding:var(--e-3)}
	.ta-v2 .ta-surface h2{font-size:var(--t-h2)}
	.ta-v2 .ta-surface>p{font-size:var(--t-sm)}
}
@media(max-width:760px){
	.ta-v2{scroll-padding-top:90px}
	.ta-v2 .ta-container{width:calc(100% - 40px)}
	.ta-v2 .ta-section{padding-block:var(--e-5)}
	.ta-v2 .ta-eyebrow{font-size:var(--t-xs);letter-spacing:.15em;gap:var(--e-1);margin-bottom:var(--e-2)}
	.ta-v2 .ta-eyebrow::before{width:20px}
	.ta-v2 .ta-section-head{display:block;margin-bottom:var(--e-3)}
	.ta-v2 .ta-section-head h2{font-size:var(--t-h2);line-height:1.07}
	.ta-v2 .ta-section-head p{font-size:var(--t-sm);line-height:1.9;max-width:350px;margin-top:var(--e-2)}
	.ta-v2 .ta-section-head>.ta-text-link{font-size:var(--t-xs);margin-top:var(--e-2)}
	.ta-v2 .ta-round-button{width:37px;height:37px;min-width:37px}
	.ta-v2 .ta-tags{gap:var(--e-1);margin-block:var(--e-2) var(--e-3)}
	.ta-v2 .ta-tag{font-size:var(--t-xs);padding:5px var(--e-1)}
	.ta-v2 .ta-demo-label{font-size:var(--t-xs);line-height:1.9;margin-bottom:var(--e-2)}
	.ta-v2 .ta-surface{padding:var(--e-3);border-radius:12px}
	.ta-v2 .ta-surface+.ta-surface{margin-top:var(--e-2)}
	.ta-v2 .ta-surface .ta-eyebrow{font-size:var(--t-xs);margin-bottom:var(--e-3)}
	.ta-v2 .ta-surface h2{font-size:var(--t-h2);line-height:1.12;margin-bottom:var(--e-3)}
	.ta-v2 .ta-surface>p{font-size:var(--t-sm);line-height:1.95}
}
@media(max-width:420px){
	.ta-v2 .ta-surface{padding:var(--e-3)}
}
@media(prefers-reduced-motion:no-preference){
	.ta-v2 @keyframes premium-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
}
.ta-v2 .ta-section-head .ta-eyebrow{font-size:var(--t-xs);line-height:1.6;color:#8b753a;max-width:none;margin-top:0;margin-bottom:var(--e-3)}
@media(max-width:760px){
	.ta-v2 .ta-section-head .ta-eyebrow{font-size:var(--t-xs);line-height:1.8;margin-top:0;margin-bottom:var(--e-2)}
}
.ta-v2 h1,.ta-v2 h2{letter-spacing:-.015em;font-variation-settings:"opsz" 80}
.ta-v2 h1 em,.ta-v2 h2 em{font-variation-settings:"opsz" 80,"wght" 480}
.ta-v2 select{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%231a2744" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');background-repeat:no-repeat;background-position:right 4px center;background-size:15px;padding-right:var(--e-3)}

/* ═══════════════ Lecture : corps minimums de l'échelle ═══════════════ */
.ta-v2{font-size:var(--t-base);line-height:var(--lh-lecture)}
.ta-v2 h1{font-size:var(--t-h1)}
.ta-v2 h2{font-size:var(--t-h2)}
.ta-v2 .ta-btn,.ta-v2 .ta-text-link{font-size:var(--t-sm)}
.ta-v2 .ta-eyebrow,.ta-v2 .ta-pill,.ta-v2 .ta-tag{font-size:var(--t-xs)}
.ta-v2 .ta-section-head p,.ta-v2 .ta-surface>p{font-size:var(--t-base);line-height:var(--lh-lecture)}

/* ═══════════════ Rythme des fonds (charte : jamais un tunnel blanc) ═══════════════
   Classes posées par ta_v2_rythme() / ta_v2_habiller_section(), réutilisables sur tout gabarit.
   Contrastes AA vérifiés sur papier (#f1f3f8) : encre 15,9:1, muted #626d7d 5,0:1. */
.ta-v2 section.ta-fond--blanc{background:var(--white)}
.ta-v2 section.ta-fond--papier{background:var(--bg);position:relative;isolation:isolate}
.ta-v2 section.ta-fond--encre{background:var(--ink)}
/* Halo très léger dans un coin des sections papier : de la profondeur, sans se voir. */
.ta-v2 section.ta-fond--papier::before{content:'';position:absolute;z-index:-1;pointer-events:none;top:-120px;right:-160px;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,#c2a24b0d 0%,#c2a24b00 68%)}
.ta-v2 section.ta-fond--papier:nth-of-type(4n)::before{right:auto;left:-180px;background:radial-gradient(circle,#53c5980c 0%,#53c59800 68%)}

/* Titre de section : filet or (1 px, 64 px) et numérotation éditoriale en Fraunces géant.
   Le numéro est un pseudo-élément décoratif (hors texte lu) : seule exception à l'échelle. */
.ta-v2 .ta-titre-section{position:relative;z-index:0}
.ta-v2 .ta-titre-section::before{content:'';display:block;width:64px;height:1px;background:var(--gold);margin-bottom:var(--e-3)}
.ta-v2 .ta-eyebrow+.ta-titre-section::before,.ta-v2 .ta-eyebrow~.ta-titre-section::before{display:none}
.ta-v2 .ta-titre-section[data-num]::after{content:attr(data-num);position:absolute;z-index:-1;left:-.04em;top:-.62em;font-family:var(--serif);font-size:clamp(110px,11vw,160px);font-weight:400;line-height:1;letter-spacing:-.05em;color:var(--ink);opacity:.045;pointer-events:none}
.ta-v2 .ta-titre-section em{font-style:italic;color:var(--green-ink)}
.ta-v2 .ta-fond--papier .ta-titre-section em{color:#8b6d22}
/* Le halo et le numéro éditorial ne doivent jamais créer de défilement horizontal. */
.ta-v2 section.ta-fond--papier,.ta-v2 section.ta-fond--blanc{overflow-x:clip}

/* ═══ Numéro éditorial CONTENU dans sa section (revue du 29/10) ═══
   La section est le repère (relative + overflow:clip) : le chiffre est ancré à l'intérieur, en
   haut à gauche de la colonne de contenu, derrière le contenu, sans marge négative vers le haut.
   Il ne peut ni déborder sur la section voisine ni créer de défilement. */
.ta-v2 main > section{position:relative;isolation:isolate;overflow:clip}
.ta-v2 .ta-titre-section{position:static;z-index:auto}
.ta-v2 .ta-titre-section[data-num]::after{top:var(--e-3);left:max(var(--e-3),calc((100% - min(var(--max),100% - 96px)) / 2 - .06em));z-index:-1;font-size:clamp(110px,11vw,160px)}
@media(max-width:760px){ .ta-v2 .ta-titre-section[data-num]::after{top:var(--e-2);left:var(--e-2)} }

/* ═══ Rythme vertical standard (charte) : AUCUNE section à 0 ═══
   Toute section de page : --e-6 en haut et en bas. Variante réduite --e-5 pour les bandes
   légères (recherche, contact, partenaires, clôture). Mobile : un cran en dessous.
   Contrôle automatique : padding-top/bottom calculés ∈ échelle --e-*. */
.ta-v2 main > section{padding-block:var(--e-6)!important}
.ta-v2 main > section.ta-search-section,.ta-v2 main > section.ta-contact,.ta-v2 main > section.ta-partenaires,.ta-v2 main > section.ta-closing{padding-block:var(--e-5)!important}
.ta-v2 .ta-hero-main{padding-block:0!important}
@media(max-width:760px){
	.ta-v2 main > section{padding-block:var(--e-5)!important}
	.ta-v2 main > section.ta-search-section,.ta-v2 main > section.ta-contact,.ta-v2 main > section.ta-partenaires,.ta-v2 main > section.ta-closing{padding-block:var(--e-4)!important}
}

/* ═══ Numéro éditorial : réglage définitif (revue du 29/10) ═══
   Filigrane : on le devine, on ne le lit pas. Calé en haut à droite de la section, à l'opposé
   du titre, rogné par les bords haut et droit de SA section (overflow:clip). Sa partie visible
   tient dans la bande de padding haute (--e-6 / --e-5), où il n'y a jamais de texte : aucun
   chevauchement possible avec un titre ou un contenu. Taille 280 px (200 px en mobile),
   opacité 3 % sur blanc, 4 % sur papier. */
.ta-v2 .ta-titre-section[data-num]::after{top:calc(var(--e-6) - 280px * .92);right:-.06em;left:auto;font-size:280px;line-height:1;opacity:.03;color:var(--ink)}
.ta-v2 .ta-fond--papier .ta-titre-section[data-num]::after{opacity:.04}
@media(max-width:760px){
	.ta-v2 .ta-titre-section[data-num]::after{top:calc(var(--e-5) - 200px * .92);right:-.06em;left:auto;font-size:200px}
}