/* Tellus Patrimoine — feuille unique du site. Contrat de tokens conforme à DA.md §2. Toute valeur en dur est un bug. Ne pas dupliquer cette feuille : elle est le point de changement unique. */ /* ================================================================= CONTRAT DE TOKENS — copié de DA.md §2. Aucune valeur en dur ailleurs. ================================================================= */ #tp{ --navy-50:#F2F7FF; --navy-100:#E2EEFF; --navy-200:#C6DBF7; --navy-300:#ACC5E4; --navy-400:#90ACCD; --navy-500:#7492B3; --navy-600:#5A7998; --navy-700:#43617C; --navy-800:#2E4960; --navy-850:#24405A; --navy-900:#1F374A; --navy-925:#16293A; --navy-950:#0F202C; --navy-975:#0C1A24; --blue-300:#94C9F6; --blue-500:#5796C5; --blue-600:#3B7CAA; --blue-700:#2C6E99; --blue-800:#0A4C6E; --blue-900:#00344F; --gold-100:#FFEACB; --gold-200:#EED5B1; --gold-300:#CEB387; --gold-400:#C0A577; --gold-500:#A68B5B; --gold-600:#8B7242; --sage-50:#F1F9F6; --sage-100:#E6EFEC; --sage-200:#D1DCD8; --sage-300:#B5C1BD; --sage-400:#A0ADA8; --white:#FFFFFF; /* Alias sémantiques */ --ink:var(--navy-900); --ink-70:var(--navy-700); --ink-55:var(--navy-600); --ink-40:var(--navy-400); /* DÉCOR SEUL */ --hair:var(--sage-200); --hair-soft:#E3EAE8; --mist:var(--sage-100); --cell-on:#F1F6F4; /* AMENDEMENT DA §2 : --hair-soft est décrit comme « filets sur les fonds F6F9F8 », mais F6F9F8 n'a jamais eu de token. Sans lui, la section comparative de l'accueil porte deux couleurs en dur. */ --soft:#F6F9F8; /* Erreur — AMENDEMENT proposé à DA.md §2 : le contrat n'a pas de rampe d'alerte, et un formulaire ne peut pas refuser une saisie en silence. Ratios mesurés : texte 7,62:1 sur son fond clair, 13,6:1 sur navy-975. */ --err-bg:#FDEEEE; --err-line:#E9C6C6; --err-ink:#8A2A2A; --err-inv:#FFD9D9; --err-bg-inv:rgba(255,120,120,.10); --err-line-inv:rgba(255,150,150,.38); --blue:var(--blue-700); --blue-hover:var(--blue-800); --gold:var(--gold-300); /* surfaces ; texte SUR SOMBRE */ --gold-t:var(--gold-600); /* texte SUR CLAIR */ /* Échelle de surface (fond sombre) */ --w-1:rgba(255,255,255,.94); --w-2:rgba(255,255,255,.76); --w-3:rgba(255,255,255,.56); --w-4:rgba(255,255,255,.38); /* DÉCOR SEUL */ --s-1:rgba(255,255,255,.06); --s-2:rgba(255,255,255,.12); --s-3:rgba(255,255,255,.18); --s-4:rgba(255,255,255,.28); --inv-muted:var(--w-2); /* Verre : alias de l'échelle de surface */ --glass-bg:var(--s-1); --glass-bg-hi:var(--s-2); --glass-line:var(--s-3); --glass-line-hi:var(--s-4); --glass-top:var(--s-2); /* AMENDEMENT DA §2 : le système de verre ne connaissait que des blancs translucides. Sur un fond CLAIR, un blanc translucide n'assombrit rien — il éclaircit, et le texte tombe à 1,8:1. Le voile sombre est la contrepartie manquante, à employer dès qu'un panneau de verre se pose sur autre chose qu'un fond navy. */ --veil-strong:rgba(12,26,36,.68); --glass-blur:blur(22px) saturate(150%); --font:"Satoshi",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --serif:"Playfair Display",Georgia,"Times New Roman",serif; --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --fs-display:clamp(2.75rem,6vw,5rem); --fs-h2:clamp(1.75rem,3vw,2.5rem); --fs-h3:clamp(1.375rem,2vw,2rem); --fs-h4:clamp(1.125rem,1.5vw,1.375rem); --fs-lead:clamp(1.0625rem,1.3vw,1.125rem); --fs-body:1rem; --fs-small:.875rem; --fs-cap:.6875rem; /* 11px — plancher, --fs-micro supprimé */ --content:1200px; --wide:1360px; --measure:820px; --gutter:clamp(20px,5vw,64px); --box-content:calc(var(--content) + 2 * var(--gutter)); --box-wide:calc(var(--wide) + 2 * var(--gutter)); --pad:clamp(88px,12vw,160px); --pad-sm:clamp(64px,8vw,112px); --gap:clamp(48px,6vw,88px); --r-xs:5px; --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:36px; --sh-1:0 1px 2px rgba(31,55,74,.04),0 8px 20px -10px rgba(31,55,74,.12); --sh-2:0 2px 4px rgba(31,55,74,.05),0 16px 34px -14px rgba(31,55,74,.16); --sh-3:0 6px 12px rgba(31,55,74,.06),0 32px 64px -20px rgba(31,55,74,.22); --sh-4:0 12px 22px rgba(31,55,74,.09),0 48px 96px -22px rgba(31,55,74,.28); --sh:var(--sh-2); --sh-hi:var(--sh-3); --t-1:200ms; --t-2:340ms; --t-3:520ms; --t-4:1600ms; --ease:cubic-bezier(.22,.61,.36,1); --ease-fade:cubic-bezier(.4,.14,.3,1); --dur:720ms; font-family:var(--font); color:var(--ink); background:var(--white); -webkit-font-smoothing:antialiased; overflow-x:clip; } /* ---- Reset local ------------------------------------------------- */ #tp *,#tp *::before,#tp *::after{box-sizing:border-box} #tp p,#tp h1,#tp h2,#tp h3,#tp h4,#tp ul,#tp ol,#tp figure{margin:0} #tp ul,#tp ol{list-style:none;padding:0} #tp img{display:block;max-width:100%} #tp a{color:inherit;text-decoration:none} #tp button,#tp input,#tp select,#tp textarea{font-family:inherit} #tp :focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:var(--r-xs)} #tp .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} html:has(#tp),body:has(#tp){overflow-x:clip} /* Lien d'évitement */ #tp .skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;padding:14px 22px;border-radius:0 0 var(--r-sm) 0;font-size:var(--fs-small)} #tp .skip:focus{left:0} /* ---- Grain : par section, jamais global -------------------------- */ #tp .grain{ position:absolute;inset:0;z-index:0;pointer-events:none; opacity:.05;mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); } #tp .grain.on-dark{opacity:.20;mix-blend-mode:overlay} #tp .phero > .grain{z-index:1} /* ---- Rails ------------------------------------------------------- */ #tp .sec{position:relative;z-index:2;padding:var(--pad) var(--gutter)} #tp [id]{scroll-margin-top:136px} #tp .in{position:relative;z-index:1;max-width:var(--content);margin:0 auto;width:100%} #tp .in-wide{max-width:var(--wide)} #tp .alt{background:var(--mist)} /* ---- Surtitre en champs ------------------------------------------ */ #tp .over{ display:inline-flex;flex-wrap:wrap;align-items:center; font-family:var(--mono);font-size:var(--fs-cap);letter-spacing:.11em; text-transform:uppercase;color:var(--ink-55);row-gap:8px; } #tp .over > span{display:inline-flex;align-items:center;gap:8px;padding:0 14px} #tp .over > span:first-child{padding-left:0;color:var(--ink)} #tp .over > span + span{box-shadow:inset 1px 0 0 var(--hair)} #tp .head-c .over > span:first-child{padding-left:14px} /* Piège de --mist : --ink-55 y tombe à 3,88:1. Sur fond alterné, la légende passe à --ink-70 (5,54:1). */ #tp .alt .over{color:var(--ink-70)} #tp .alt .over > span + span{box-shadow:inset 1px 0 0 var(--hair-soft)} #tp .phero .over,#tp .fw .over{color:var(--w-3)} #tp .phero .over > span:first-child,#tp .fw .over > span:first-child{color:var(--w-1)} #tp .phero .over > span + span,#tp .fw .over > span + span{box-shadow:inset 1px 0 0 var(--s-4)} @media(max-width:560px){#tp .over > span{padding:0 10px}} /* ---- Typographie -------------------------------------------------- */ #tp h1{font-family:var(--serif);font-size:var(--fs-display);font-weight:400;line-height:1.04;letter-spacing:-.022em;text-wrap:balance} #tp h1 i{font-style:italic} #tp h2{font-family:var(--serif);font-size:var(--fs-h2);font-weight:400;line-height:1.1;letter-spacing:-.016em;text-wrap:balance} #tp h2 i{font-style:italic} #tp h3{font-size:var(--fs-h3);font-weight:500;line-height:1.16;letter-spacing:-.01em} #tp h4{font-size:var(--fs-h4);font-weight:500;line-height:1.2} #tp p{font-size:var(--fs-body);line-height:1.7;color:var(--ink-70);text-wrap:pretty} #tp .lead{font-size:var(--fs-lead);line-height:1.65;color:var(--ink-70);text-wrap:pretty} #tp .head{display:flex;flex-direction:column;gap:26px;max-width:760px} #tp .head-c{margin:0 auto;text-align:center;align-items:center} /* Le chapô reste étroit sous un titre large : c'est le contraste de mesure qui fait lire le titre comme un titre. */ #tp .head-c .lead{max-width:52ch} /* ---- Boutons ------------------------------------------------------ */ #tp .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:16px 30px;border-radius:var(--r-sm);border:1px solid transparent; font-size:var(--fs-small);font-weight:500;cursor:pointer; transition:transform var(--t-1) var(--ease),box-shadow var(--t-1) var(--ease), border-color var(--t-1) var(--ease),background var(--t-1) var(--ease),color var(--t-1) var(--ease); } #tp .btn-p{background:var(--ink);color:#fff} #tp .btn-p:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(31,55,74,.22)} #tp .btn-o{background:transparent;border-color:var(--hair);color:var(--ink)} #tp .btn-o:hover{border-color:var(--ink);transform:translateY(-2px)} /* 11+14+11 = 36px : sous la cible tactile de 44px de la DA §3. */ #tp .btn-sm{padding:11px 22px;min-height:44px} #tp .btn-full{width:100%} #tp .btn-w{background:#fff;color:var(--ink);box-shadow:0 10px 30px rgba(5,15,25,.24)} #tp .btn-w:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(5,15,25,.32)} #tp .btn-ghost{ background:var(--glass-bg);color:#fff;border-color:var(--glass-line); -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur); box-shadow:inset 0 1px 0 var(--glass-top); } #tp .btn-ghost:hover{background:var(--glass-bg-hi);border-color:var(--glass-line-hi);transform:translateY(-2px)} /* ================================================================= SQUELETTE — identique à l'accueil. Zéro créativité. ================================================================= */ #tp .nav{position:fixed;top:calc(50px + var(--wp-bar,0px));left:0;right:0;z-index:40;border-bottom:1px solid transparent;transition:background 380ms var(--ease),border-color 380ms var(--ease),backdrop-filter 380ms var(--ease)} #tp .nav.stuck{ background:rgba(255,255,255,.38); -webkit-backdrop-filter:saturate(210%) blur(30px);backdrop-filter:saturate(210%) blur(30px); border-bottom-color:rgba(209,220,216,.45); } /* Barre posée AU-DESSUS d'une section sombre : le verre s'inverse plutôt que de plaquer du texte d'encre sur du navy (2,7:1, illisible). */ #tp .nav.stuck.on-dark{ background:rgba(12,26,36,.42); border-bottom-color:var(--s-2); } #tp .nav.on-dark .nav-links a{color:var(--w-2)} #tp .nav.on-dark .nav-links a:hover, #tp .nav.on-dark .nav-links a[aria-current="page"]{color:#fff} #tp .nav.on-dark .burger{color:#fff} #tp .nav.on-dark .btn-p{ background:var(--glass-bg);color:#fff;border-color:var(--glass-line); -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur); box-shadow:inset 0 1px 0 var(--glass-top); } #tp .nav.on-dark .btn-p:hover{background:#fff;color:var(--ink);border-color:#fff} #tp .nav-in{max-width:var(--box-content);margin:0 auto;padding:22px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:24px} #tp .nav-links{display:flex;align-items:center;gap:32px} #tp .nav-links a{font-size:var(--fs-small);font-weight:500;color:var(--ink-70);position:relative;padding:4px 0;transition:color var(--t-1) var(--ease)} #tp .nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform var(--t-2) var(--ease)} #tp .nav-links a:hover{color:var(--ink)} #tp .nav-links a:hover::after{transform:scaleX(1);transform-origin:left} #tp .nav-links a[aria-current="page"]{color:var(--ink)} #tp .nav-links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left} /* Le logo est un symbole unique ; ses trois chemins lisent des variables. La pastille ne bascule jamais : --gold vaut 8,8:1 sur navy-975, c'est sa meilleure surface. Un filter:invert l'aurait blanchie. */ /* align-self:start est structurel, pas cosmétique : dans un conteneur en flex column, align-items vaut stretch, le SVG est étiré à 100% de la colonne et son viewBox recentre le dessin (preserveAspectRatio par défaut = xMidYMid). Le logo se retrouve alors au milieu du vide. */ #tp .logo{height:46px;width:auto;display:block;align-self:start; --c-mark:var(--gold);--c-word:var(--ink);--c-sub:var(--ink-70)} /* navy-700 tombe à 1,9:1 sur navy-975 : sur sombre, PATRIMOINE passe en --w-3 */ #tp .on-dark .logo,#tp .nav.on-dark .logo{--c-word:#fff;--c-sub:var(--w-3)} #tp .footer-logo{height:56px} @media(max-width:1024px){#tp .logo{height:40px}} @media(max-width:380px){#tp .logo{height:34px}} #tp .burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;color:var(--ink)} /* ================================================================= MENU MOBILE — panneau éditorial. La table des matières du site traitée comme une page de titre : Playfair, index en mono, filets. Burger en haut à droite : modèle mental, aucune créativité (cours 01). ================================================================= */ #tp .menu{position:fixed;inset:0;z-index:80;display:none} #tp .menu[data-open="true"]{display:block} #tp .menu-veil{position:absolute;inset:0;background:rgba(6,14,19,.62); opacity:0;transition:opacity var(--t-2) var(--ease)} #tp .menu[data-open="true"] .menu-veil{opacity:1} #tp .menu-panel{ position:absolute;inset:0;display:flex;flex-direction:column; padding:18px var(--gutter) max(24px,env(safe-area-inset-bottom)); background:radial-gradient(110% 60% at 80% 0%,var(--navy-850) 0%,rgba(36,64,90,0) 62%), linear-gradient(180deg,var(--navy-925) 0%,var(--navy-975) 100%); opacity:0;transform:translateY(-10px); transition:opacity var(--t-2) var(--ease),transform var(--t-2) var(--ease); } #tp .menu[data-open="true"] .menu-panel{opacity:1;transform:none} #tp .menu-top{display:flex;align-items:center;justify-content:space-between;gap:18px} #tp .menu-close{width:44px;height:44px;display:flex;align-items:center;justify-content:center; background:none;border:0;color:#fff;cursor:pointer;border-radius:var(--r-sm); transition:background var(--t-1) var(--ease)} #tp .menu-close:hover{background:var(--s-2)} /* Les tracés du burger, de la croix du menu et de la croix de la modale portent tous fill="none" dans le markup. Une règle générale du thème parent ou d'une extension du type « svg path{fill:...} » est pourtant plus spécifique qu'un attribut de présentation : elle gagne, remplit le tracé, et l'icône disparaît. D'où ces règles, qui ciblent le PATH et écrivent la couleur sans dépendre d'aucun héritage. Le burger absent n'est pas un défaut cosmétique : sous 1024 px, il est le seul accès à la navigation. */ #tp .burger svg,#tp .menu-close svg{display:block;overflow:visible} #tp .burger svg path{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round} #tp .nav.on-dark .burger svg path{stroke:#fff} #tp .menu-close svg path{fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round} #tp .menu nav{margin-top:clamp(24px,5vh,56px);display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto} #tp .menu nav a{display:flex;align-items:baseline;gap:18px;padding:clamp(14px,2.2vh,22px) 0; border-top:1px solid var(--s-2);color:#fff;font-family:var(--serif);font-weight:400; font-size:clamp(1.6rem,7vw,2.5rem);line-height:1.1; opacity:0;transform:translateY(12px); transition:opacity var(--t-2) var(--ease),transform var(--t-2) var(--ease),color var(--t-1) var(--ease)} #tp .menu nav a:last-child{border-bottom:1px solid var(--s-2)} #tp .menu[data-open="true"] nav a{opacity:1;transform:none} #tp .menu nav a:nth-child(1){transition-delay:60ms} #tp .menu nav a:nth-child(2){transition-delay:110ms} #tp .menu nav a:nth-child(3){transition-delay:160ms} #tp .menu nav a:nth-child(4){transition-delay:210ms} #tp .menu nav em{font-style:normal;font-family:var(--mono);font-size:var(--fs-cap); letter-spacing:.14em;color:var(--gold);flex:none} #tp .menu nav a:hover{color:var(--gold)} /* Le geste signature tient jusque dans le menu : la page courante porte son mot en italique Playfair. */ #tp .menu nav a[aria-current="page"] i{font-style:italic;color:var(--gold)} #tp .menu-foot{margin-top:clamp(20px,3vh,36px);display:flex;flex-direction:column;gap:16px} #tp .menu-tel{display:inline-flex;align-items:center;gap:10px;min-height:44px; font-family:var(--mono);font-size:var(--fs-cap);letter-spacing:.11em; text-transform:uppercase;color:var(--gold)} #tp .menu-legal{font-family:var(--mono);font-size:var(--fs-cap);letter-spacing:.08em; line-height:1.7;color:var(--w-3)} /* ================================================================= HERO DE PAGE INTÉRIEURE Pas de globe : il appartient au hero de l'accueil (DA §1). Aligné à gauche — variation assumée par rapport au hero centré de l'accueil, et première alternance du rythme de la page. ================================================================= */ #tp .phero{ position:relative;z-index:2;overflow:hidden;isolation:isolate; background: radial-gradient(120% 88% at 62% 40%, var(--navy-850) 0%, rgba(36,64,90,0) 58%), linear-gradient(170deg, var(--navy-975) 0%, var(--navy-925) 46%, var(--navy-950) 100%); background: radial-gradient(120% 88% at 62% 40%, var(--navy-850) 0%, rgba(36,64,90,0) 58%), linear-gradient(in oklab 170deg, var(--navy-975) 0%, var(--navy-925) 46%, var(--navy-950) 100%); } #tp .halo{position:absolute;z-index:1;border-radius:50%;pointer-events:none;filter:blur(10px)} #tp .halo-1{width:min(74vw,880px);aspect-ratio:1;right:-16%;top:-18%;background:radial-gradient(circle,rgba(206,179,135,.16) 0%,rgba(206,179,135,.05) 42%,transparent 68%)} #tp .halo-2{width:min(60vw,700px);aspect-ratio:1;left:-16%;bottom:-26%;background:radial-gradient(circle,rgba(44,110,153,.20) 0%,rgba(44,110,153,.06) 45%,transparent 70%)} #tp .phero-veil{ position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(180deg, rgba(9,20,29,.58) 0%, rgba(9,20,29,0) 26%, rgba(9,20,29,0) 62%, rgba(9,20,29,.62) 100%); } #tp .phero-in{ position:relative;z-index:3; max-width:var(--box-content);margin:0 auto;width:100%; padding:clamp(150px,20vh,220px) var(--gutter) clamp(72px,10vh,116px); display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:clamp(40px,5vw,80px);align-items:center; } #tp .phero-copy{display:flex;flex-direction:column;gap:clamp(18px,2.4vh,26px);max-width:640px} #tp .phero h1{color:#fff;font-size:clamp(2.6rem,5.6vw,4.25rem);line-height:1.05;text-shadow:0 2px 30px rgba(5,15,25,.35)} #tp .phero-claim{font-size:clamp(1rem,1.35vw,1.1875rem);color:var(--w-2);line-height:1.6;max-width:34em} #tp .phero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px} #tp .creds{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;margin-top:6px} #tp .creds img{height:36px;width:auto;opacity:.92;transition:opacity var(--t-2) var(--ease)} #tp .creds img:hover{opacity:1} /* Carte de réassurance — ami 1 servi avant tout le reste. Verre : réservé aux blocs-cartes sur fond sombre. */ #tp .assur{ border-radius:var(--r-lg);color:#fff;overflow:hidden; background:var(--glass-bg-hi); -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur); border:1px solid var(--glass-line-hi); box-shadow:0 24px 60px rgba(4,12,19,.42),inset 0 1px 0 var(--glass-top); } #tp .assur-top{ display:flex;align-items:center;gap:10px;padding:20px 28px; border-bottom:1px solid var(--s-3); font-family:var(--mono);font-size:var(--fs-cap);letter-spacing:.11em;text-transform:uppercase;color:var(--w-3); } #tp .assur ul{padding:14px 28px} #tp .assur li{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:19px 0;border-bottom:1px solid var(--s-2)} #tp .assur li:last-child{border-bottom:0} #tp .assur .k{font-size:var(--fs-small);color:var(--w-3)} #tp .assur .v{font-size:var(--fs-body);font-weight:500;color:#fff;text-align:right} #tp .assur-note{padding:20px 28px 26px;border-top:1px solid var(--s-3);font-size:var(--fs-small);line-height:1.6;color:var(--w-2)} @media(max-width:1024px){ #tp .phero-in{grid-template-columns:1fr;gap:44px;padding-top:clamp(130px,16vh,170px)} #tp .phero-copy{max-width:none} #tp .assur{max-width:520px} } /* ================================================================= SITUATIONS — 4 unités, choix explicite du visiteur. Aucune rotation automatique : il sait ce qui l'amène. ================================================================= */ #tp .sit{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(32px,4vw,64px);margin-top:var(--gap);align-items:start} #tp .sit-nav{display:flex;flex-direction:column} #tp .sit-nav button{ position:relative;display:flex;align-items:center;gap:16px; background:none;border:0;border-top:1px solid var(--hair); padding:26px 14px 26px 20px;cursor:pointer;text-align:left; font-size:var(--fs-body);font-weight:500;color:var(--ink-55); transition:color var(--t-2) var(--ease),background var(--t-2) var(--ease); } #tp .sit-nav button:last-child{border-bottom:1px solid var(--hair)} #tp .sit-nav button::before{ content:"";position:absolute;left:0;top:-1px;bottom:0;width:2px;background:var(--gold); transform:scaleY(0);transform-origin:top;transition:transform var(--t-2) var(--ease); } #tp .sit-nav button:hover{color:var(--ink)} #tp .sit-nav button[aria-selected="true"]{color:var(--ink);background:var(--cell-on)} #tp .sit-nav button[aria-selected="true"]::before{transform:scaleY(1)} #tp .sit-nav em{font-style:normal;font-family:var(--mono);font-size:var(--fs-cap);letter-spacing:.14em;color:var(--gold-t);flex:none} #tp .sit-panels{position:relative;min-height:520px} #tp .sit-p{ display:none;flex-direction:column;gap:30px; padding:clamp(32px,3.6vw,56px); background:var(--white);border-radius:var(--r-lg);box-shadow:var(--sh-1); } #tp .sit-p[data-on="true"]{display:flex;animation:tp-fade var(--t-2) var(--ease)} @keyframes tp-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} #tp .sit-p h3{font-size:var(--fs-h4);max-width:26ch} #tp .sit-lab{ font-family:var(--mono);font-size:var(--fs-cap);letter-spacing:.11em;text-transform:uppercase; color:var(--gold-t);padding-top:4px; } #tp .sit-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 40px} #tp .sit-list li{font-size:var(--fs-body);line-height:1.55;color:var(--ink-70)} #tp .sit-cta{align-self:flex-start;margin-top:4px} #tp .after-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center; gap:14px 22px;margin-top:clamp(40px,5vw,64px)} #tp .after-cta span{font-family:var(--mono);font-size:var(--fs-cap);letter-spacing:.11em; text-transform:uppercase;color:var(--ink-70)} #tp .sit-note{font-size:var(--fs-cap);font-family:var(--mono);line-height:1.7;letter-spacing:.02em;color:var(--ink-70)} @media(max-width:900px){ #tp .sit{grid-template-columns:1fr;gap:26px} #tp .sit-panels{min-height:0} #tp .sit-list{grid-template-columns:1fr} } /* ================================================================= DOMAINES — rail large. Séquence réelle, donc numérotée. ================================================================= */ /* 4 unités, mais sur deux rangées de deux : à 4 colonnes la carte tombait à 322 px et aucune proportion n'était tenable à l'intérieur. */ #tp .dom{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:var(--gap)} #tp .dom-c{ display:flex;flex-direction:column;gap:22px;height:100%; /* Hauteur plancher : sans elle la carte se colle a son texte et la grille prend un rythme haché. L'air interne est la moitie de l'effet « cher » — l'autre moitie est le --pad des sections. */ min-height:clamp(340px,30vw,430px); padding:clamp(38px,3.6vw,56px) clamp(34px,3.2vw,52px) clamp(38px,3.6vw,56px); background:var(--white);border-radius:var(--r-lg);box-shadow:var(--sh-1); transition:transform var(--t-2) var(--ease),box-shadow var(--t-2) var(--ease); } #tp .dom-c:hover{transform:translateY(-4px);box-shadow:var(--sh-2)} #tp .dom-n{ display:flex;align-items:center;gap:14px;margin-bottom:-6px; font-family:var(--mono);font-size:var(--fs-cap);letter-spacing:.14em;color:var(--gold-t); } #tp .dom-c h3{font-size:var(--fs-h4);max-width:24ch} #tp .dom-c p{font-size:var(--fs-body);line-height:1.62;max-width:46ch} /* 4 → 2×2 → 1. Jamais 3 + 1. */ @media(max-width:720px){#tp .dom{grid-template-columns:1fr}} /* ================================================================= DEUX FORMULES — affichage en différentiel (cours 01, principe 3). Le second périmètre ne réénumère pas le premier. ================================================================= */ #tp .offer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:var(--gap);align-items:stretch} #tp .of{display:flex;flex-direction:column;gap:30px;min-height:clamp(420px,34vw,520px);padding:clamp(34px,3.8vw,58px);border-radius:var(--r-lg)} /* Sur fond blanc, l'ombre seule ne dessine plus le bord : filet doux, et l'ombre redescend d'un cran pour ne pas doubler l'arête. */ #tp .of-a{background:var(--white);border:1px solid var(--hair-soft)} #tp .of-b{ position:relative;overflow:hidden;color:#fff; background:linear-gradient(168deg,var(--navy-900) 0%,var(--navy-950) 62%,var(--navy-975) 100%); box-shadow:var(--sh-3); } #tp .of-b::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 70% at 78% 0%,rgba(206,179,135,.16),transparent 62%)} #tp .of-top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap} #tp .of h3{font-size:var(--fs-h3)} #tp .of-b h3{color:#fff} #tp .of-tag{font-family:var(--mono);font-size:var(--fs-cap);letter-spacing:.11em;text-transform:uppercase;color:var(--gold-t);border:1px solid var(--hair);border-radius:999px;padding:7px 14px} #tp .of-b .of-tag{color:var(--gold);border-color:var(--s-4)} #tp .of > p{position:relative;z-index:1} #tp .of-b > p{color:var(--w-2)} #tp .of-plus{ position:relative;z-index:1; font-family:var(--mono);font-size:var(--fs-cap);letter-spacing:.11em;text-transform:uppercase; color:var(--gold);padding-top:28px;border-top:1px solid var(--s-3); } #tp .of-a .of-plus{color:var(--gold-t);border-top-color:var(--hair)} #tp .of ul{position:relative;z-index:1;display:flex;flex-direction:column;gap:19px;margin-top:-6px} #tp .of li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:0 20px; font-size:var(--fs-body);line-height:1.6;color:var(--ink-70)} #tp .of li em{font-style:normal;font-family:var(--mono);font-size:var(--fs-cap); letter-spacing:.12em;color:var(--gold-t);padding-top:5px} #tp .of-b li em{color:var(--gold)} #tp .of li b{font-weight:500;color:var(--ink)} #tp .of-b li b{color:#fff} #tp .of-b li{color:var(--w-2)} #tp .of-foot{position:relative;z-index:1;margin-top:auto;padding-top:30px;font-family:var(--mono);font-size:var(--fs-cap);line-height:1.7;letter-spacing:.02em;color:var(--ink-70)} #tp .of-b .of-foot{color:var(--w-3)} @media(max-width:900px){#tp .offer{grid-template-columns:1fr}} /* ================================================================= PREMIER RENDEZ-VOUS — bloc sombre, verre. ================================================================= */ #tp .fw{ position:relative;z-index:2;overflow:hidden;padding:var(--pad) 0; background: radial-gradient(100% 62% at 50% 0%,var(--navy-850) 0%,rgba(36,64,90,0) 62%), linear-gradient(180deg,var(--navy-975) 0%,var(--navy-925) 44%,var(--navy-975) 100%); } #tp .fw::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; opacity:.20;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"); } #tp .fw-in{position:relative;z-index:1;max-width:var(--box-content);margin:0 auto;padding:0 var(--gutter); display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(40px,6vw,90px);align-items:center} #tp .fw h2{color:#fff} #tp .fw .lead{color:var(--inv-muted)} #tp .fw-cta{margin-top:8px;display:flex;gap:14px;flex-wrap:wrap} #tp .fw-cards{display:flex;flex-direction:column;gap:18px} #tp .fw-c{ display:flex;flex-direction:column;gap:16px;padding:32px 34px;border-radius:var(--r-md);color:#fff; background:var(--glass-bg); -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur); border:1px solid var(--glass-line); box-shadow:inset 0 1px 0 var(--glass-top); transition:background var(--t-2) var(--ease),border-color var(--t-2) var(--ease); } #tp .fw-c:hover{background:var(--glass-bg-hi);border-color:var(--glass-line-hi)} #tp .fw-c h3{font-family:var(--mono);font-size:var(--fs-cap);font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--gold)} #tp .fw-c ul{display:flex;flex-direction:column;gap:14px} #tp .fw-c li{font-size:var(--fs-body);line-height:1.6;color:var(--w-2)} @media(max-width:1024px){#tp .fw-in{grid-template-columns:1fr;gap:44px;align-items:start}} /* Fond blanc explicite : --gold-t sur --mist tomberait à ~3,9:1. */ @media(max-width:1024px){ } @media(max-width:560px){ } /* ================================================================= FAQ —
natif : clavier et lecteur d'écran acquis. ================================================================= */ #tp .faq{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(32px,5vw,80px);align-items:start} #tp .faq-head{position:sticky;top:150px} #tp .qa-list{display:flex;flex-direction:column} #tp .qa{border-top:1px solid var(--hair)} #tp .qa:last-child{border-bottom:1px solid var(--hair)} #tp .qa summary{ list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px; padding:32px 0;font-size:var(--fs-h4);font-weight:500;color:var(--ink); transition:color var(--t-1) var(--ease); } #tp .qa summary::-webkit-details-marker{display:none} #tp .qa summary:hover{color:var(--blue)} #tp .qa-i{ flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--hair); display:flex;align-items:center;justify-content:center;color:var(--ink-70); transition:transform var(--t-2) var(--ease),border-color var(--t-2) var(--ease),background var(--t-2) var(--ease); } #tp .qa[open] .qa-i{transform:rotate(180deg);border-color:var(--gold);background:var(--cell-on)} #tp .qa-body{padding:2px 0 38px;max-width:var(--measure)} #tp .qa[open] .qa-body{animation:tp-fade var(--t-2) var(--ease)} #tp .qa-body p + p{margin-top:14px} @media(max-width:900px){ #tp .faq{grid-template-columns:1fr;gap:34px} #tp .faq-head{position:static} } /* ================================================================= CONTACT — preuves au point de décision (cours 01, ami 3). ================================================================= */ #tp .ct{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,4vw,64px);align-items:start;margin-top:var(--gap)} #tp .proof{display:flex;flex-direction:column;gap:22px} #tp .proof-l{display:flex;flex-direction:column;gap:26px;padding-top:30px;border-top:1px solid var(--hair)} #tp .proof-i{display:block} #tp .proof-i b{display:block;font-size:var(--fs-small);font-weight:500;color:var(--ink)} #tp .proof-i span{display:block;font-size:var(--fs-small);line-height:1.6;color:var(--ink-70)} #tp .stars{display:inline-flex;align-items:center;gap:8px} #tp .stars b{font-family:var(--mono);font-weight:500;color:var(--ink);letter-spacing:.06em;font-size:var(--fs-small)} #tp .form-card{padding:clamp(32px,4.4vw,56px);background:var(--white);border-radius:var(--r-lg);box-shadow:var(--sh)} #tp .form{display:flex;flex-direction:column;gap:24px} #tp .form2{display:grid;grid-template-columns:1fr 1fr;gap:16px} #tp .field{display:flex;flex-direction:column;gap:8px} #tp .field label,#tp .slots legend{ font-family:var(--mono);font-size:var(--fs-cap);font-weight:500; letter-spacing:.11em;text-transform:uppercase;color:var(--ink-70); } #tp .field input,#tp .field select{padding:14px 16px;border:1px solid var(--hair);border-radius:var(--r-sm);font-size:var(--fs-body);color:var(--ink);background-color:var(--mist);transition:border-color 220ms var(--ease),box-shadow 220ms var(--ease),background 220ms var(--ease)} #tp .field input:focus,#tp .field select:focus{outline:none;border-color:var(--blue);background-color:var(--white);box-shadow:0 0 0 3px rgba(44,110,153,.14)} #tp .check{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-small);color:var(--ink-70);cursor:pointer} #tp .check input{margin-top:3px;accent-color:var(--ink);width:17px;height:17px;flex:none} #tp .form-titre{margin-bottom:26px} #tp .form-titre::after{content:"";display:block;width:48px;height:2px;background:var(--gold);margin-top:16px} @media(max-width:900px){#tp .ct{grid-template-columns:1fr}} @media(max-width:560px){#tp .form2{grid-template-columns:1fr}} /* ================================================================= SECTION DE CONVERSION — le formulaire vit dans la modale. La dernière section avant le pied ne porte plus de champs : un titre, une phrase, un bouton, une ligne de mentions. Le bouton porte data-rdv. Elle est volontairement dépouillée, à une condition : le second chemin existe ailleurs. Le pied, juste en dessous, porte le téléphone ; en mobile, le bouton d'appel flottant le porte en permanence. Sans ces deux-là, cette section n'offrirait qu'une seule porte. ================================================================= */ #tp .cta-min{padding:var(--pad) var(--gutter);text-align:center} #tp .cta-min .in{display:flex;flex-direction:column;align-items:center; gap:clamp(22px,2.6vw,32px)} #tp .cta-min h2{max-width:16ch} #tp .cta-min .lead{max-width:46ch} /* La ligne de mentions reprend le surtitre en champs de la DA §4 : quatre segments séparés par des filets internes. */ #tp .cta-line{display:flex;flex-wrap:wrap;justify-content:center;align-items:center; margin-top:8px;font-family:var(--mono);font-size:var(--fs-cap); letter-spacing:.11em;text-transform:uppercase;color:var(--ink-70)} #tp .cta-line > span{padding:6px 18px} #tp .cta-line > span + span{box-shadow:inset 1px 0 0 var(--hair)} @media(max-width:560px){ #tp .cta-line > span{padding:6px 12px} } /* ================================================================= CATALOGUE — PASSE 7 · ÉNONCER Les pages réglementaires. Composant : .legal Elles ne se conçoivent pas comme les autres. Une page de vente cherche à convaincre ; une page réglementaire doit se LIRE et se VÉRIFIER — souvent en diagonale, souvent pour y chercher une seule information. D'où trois partis pris : 1. Un seul rail, la mesure de lecture. Aucun bloc large, aucune grille, aucune carte. Le texte court sur --measure et rien ne le coupe. 2. Aucun mouvement. Pas de révélation au scroll, pas de survol animé. Un document qui bouge pendant qu'on le lit inquiète. 3. Les intitulés d'articles en mono : ils servent de repères de navigation dans un texte long, comme les folios d'un code. Le geste signature s'applique quand même — un mot en italique par h2 — mais sans emphase supplémentaire : c'est un document, pas une page. ================================================================= */ #tp .legal{padding:clamp(140px,18vh,210px) var(--gutter) var(--pad-sm);background:var(--white)} #tp .legal-in{max-width:var(--measure);margin:0 auto} #tp .legal-head{padding-bottom:clamp(30px,4vh,44px);margin-bottom:clamp(34px,5vh,52px); border-bottom:1px solid var(--hair)} #tp .legal-head h1{font-family:var(--serif);font-weight:400; font-size:clamp(2rem,4vw,2.9rem);line-height:1.1;letter-spacing:-.018em;color:var(--ink)} #tp .legal-head .over{margin-bottom:20px} #tp .legal-maj{margin-top:20px;font-family:var(--mono);font-size:var(--fs-cap); letter-spacing:.11em;text-transform:uppercase;color:var(--ink-70)} #tp .legal h2{font-size:var(--fs-h3);line-height:1.2;color:var(--ink); margin:clamp(44px,6vh,64px) 0 18px;padding-top:clamp(22px,3vh,30px); border-top:1px solid var(--hair)} #tp .legal h2:first-of-type{border-top:0;padding-top:0;margin-top:0} #tp .legal h3{font-family:var(--mono);font-size:var(--fs-cap);font-weight:500; letter-spacing:.12em;text-transform:uppercase;color:var(--gold-t); margin:32px 0 12px} #tp .legal p{font-size:var(--fs-body);line-height:1.75;color:var(--ink-70);margin-bottom:16px} #tp .legal p:last-child{margin-bottom:0} #tp .legal strong{color:var(--ink);font-weight:500} #tp .legal a{color:var(--blue);text-decoration:underline;text-underline-offset:3px} #tp .legal a:hover{color:var(--blue-hover)} #tp .legal ul,#tp .legal ol{margin:0 0 18px;padding-left:0;list-style:none} #tp .legal li{position:relative;padding-left:22px;margin-bottom:10px; font-size:var(--fs-body);line-height:1.7;color:var(--ink-70)} #tp .legal ul > li::before{content:"";position:absolute;left:0;top:11px; width:5px;height:5px;border-radius:50%;background:var(--gold)} #tp .legal ol{counter-reset:l} #tp .legal ol > li{counter-increment:l;padding-left:32px} #tp .legal ol > li::before{content:counter(l,decimal-leading-zero);position:absolute;left:0;top:1px; font-family:var(--mono);font-size:var(--fs-cap);letter-spacing:.06em;color:var(--gold-t)} /* Encadré de coordonnées ou de références : le lecteur y revient, il doit se retrouver d'un coup d'œil. */ #tp .legal-box{background:var(--mist);border-radius:var(--r-md); padding:24px 26px;margin:24px 0} #tp .legal-box p{color:var(--ink);margin-bottom:8px} #tp .legal-box p:last-child{margin-bottom:0} /* --gold-t tombe à 3,91:1 sur --mist : dans un encadré, les intitulés passent en --ink-70 (5,53:1). */ #tp .legal-box h3{color:var(--ink-70)} #tp .legal-box .k{display:block;font-family:var(--mono);font-size:var(--fs-cap); letter-spacing:.11em;text-transform:uppercase;color:var(--ink-70);margin-bottom:6px} /* Point d'attention. Le filet doré, pas un fond coloré : le système n'a pas de couleur d'alerte pour l'information, seulement pour l'erreur. */ #tp .legal-note{border-left:2px solid var(--gold);padding:4px 0 4px 20px;margin:24px 0} #tp .legal-note p{color:var(--ink)} /* Tableau réglementaire : même réglure que le reste, sans rail — ces tableaux tiennent en deux ou trois colonnes courtes. */ #tp .legal table{width:100%;border-collapse:collapse;margin:20px 0} #tp .legal th,#tp .legal td{text-align:left;padding:13px 14px 13px 0; border-bottom:1px solid var(--hair);font-size:var(--fs-small); line-height:1.6;color:var(--ink-70);vertical-align:top} #tp .legal thead th{font-family:var(--mono);font-size:var(--fs-cap);font-weight:500; letter-spacing:.11em;text-transform:uppercase;color:var(--ink); border-bottom-color:var(--ink-40)} #tp .legal tbody th{color:var(--ink);font-weight:500} /* Renvoi vers les autres documents, en pied de page réglementaire. */ #tp .legal-more{margin-top:clamp(48px,6vh,72px);padding-top:28px; border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;gap:10px 0} #tp .legal-more a{font-family:var(--mono);font-size:var(--fs-cap);letter-spacing:.11em; text-transform:uppercase;text-decoration:none;color:var(--ink-70); padding:10px 16px;min-height:44px;display:inline-flex;align-items:center} #tp .legal-more a:first-child{padding-left:0} #tp .legal-more a + a{box-shadow:inset 1px 0 0 var(--hair)} #tp .legal-more a:hover{color:var(--ink)} #tp .legal-more a[aria-current="page"]{color:var(--gold-t)} @media(max-width:560px){ #tp .legal-more a{padding:10px 12px} } /* ================================================================= CATALOGUE — PASSE 6 · OPPOSER Remontés depuis Family Office, où ils étaient nés. Trois composants qui n'existaient nulle part ailleurs et qui manquaient au catalogue. .phero-solo hero de page de titre : un titre, une ligne, un bouton. La discrétion est l'argument. Pour les pages où montrer moins vaut mieux que démontrer. .principles les principes en pied de hero, même grammaire que le surtitre en champs, filets internes compris. .rows lignes éditoriales — l'alternative aux cartes. Une carte enferme une unité de catalogue, une ligne porte une déclaration. À employer quand une grille de cartes précède ou suit : deux grilles d'affilée se lisent comme une répétition. .vs comparatif « sans / avec ». Il explique un métier au lieu de le vanter : la même situation dans deux organisations. Seule la colonne « avec » se détache du fond. ================================================================= */ #tp .phero-solo .phero-in{display:flex;flex-direction:column;justify-content:center; min-height:88vh;padding-top:clamp(180px,26vh,300px);padding-bottom:clamp(80px,12vh,140px)} /* Le padding bas est porté par le composant lui-même : posé en dehors du corps du hero, il se retrouvait collé au bord de la section. Un élément du catalogue ne doit pas dépendre de l'endroit où on le place. Il est annulé quand le hero fournit déjà sa marge basse. */ #tp .principles{position:relative;z-index:3;max-width:var(--box-content);margin:0 auto; width:100%;padding:clamp(28px,4vh,48px) var(--gutter) clamp(34px,5vh,56px); border-top:1px solid var(--s-2); display:flex;flex-wrap:wrap;justify-content:center;gap:10px 0} #tp .phero-in > .principles{padding-bottom:0} #tp .rows{border-top:1px solid var(--hair);margin-top:var(--gap)} #tp .phero-solo .phero-copy{max-width:none;margin:0 auto;align-items:center;text-align:center; gap:clamp(26px,3.4vh,40px)} #tp .phero-solo h1{font-size:clamp(2.75rem,6.4vw,4.75rem);max-width:15ch;margin-inline:auto} #tp .phero-solo .phero-claim{max-width:48ch;margin-inline:auto} #tp .phero-solo .phero-cta{justify-content:center} #tp .principles span{padding:0 clamp(14px,2vw,28px);font-family:var(--mono);font-size:var(--fs-cap); letter-spacing:.14em;text-transform:uppercase;color:var(--w-3)} #tp .principles span + span{box-shadow:inset 1px 0 0 var(--s-3)} #tp .rows li{display:grid;grid-template-columns:56px minmax(0,.85fr) minmax(0,1.45fr); gap:0 clamp(20px,3vw,52px);align-items:baseline; padding:clamp(30px,3.4vw,48px) 0;border-bottom:1px solid var(--hair);} #tp .rows em{font-style:normal;font-family:var(--mono);font-size:var(--fs-cap); letter-spacing:.14em;color:var(--gold-t)} #tp .rows h3{font-size:var(--fs-h4);max-width:18ch} #tp .rows p{font-size:var(--fs-body);line-height:1.7;max-width:60ch} @media(max-width:560px){ #tp .principles span{padding:0 12px} } @media(max-width:900px){ #tp .rows li{grid-template-columns:56px minmax(0,1fr);gap:14px 0} #tp .rows p{grid-column:2} } @media(max-width:560px){ #tp .rows li{grid-template-columns:1fr;gap:12px 0} #tp .rows p{grid-column:1} } /* ================================================================= CATALOGUE — PASSE 5 · POSER Le dernier paquet, celui qui manquait pour convertir l'accueil. Composants : .hero (+ globe, veil, scroll) · .pinwrap/.pin .fields · .two .grid3 .why-grid .seg-row .portrait .dot Trois corrections : 1. .pin portait le même dégradé que .cmp, avec les mêmes deux couleurs en dur. Les deux sont mutualisés sur --soft et --white. 2. .portrait employait var(--sh) : quatrième token fantôme trouvé. La vignette du portrait n'avait donc aucune ombre. → --sh-2. 3. Les deux indicateurs de défilement tournaient en boucle infinie sans jamais s'arrêter. Ils disparaissent maintenant au premier défilement — un indice qui a servi n'a plus de raison de bouger. ================================================================= */ /* ---- Le hero d'accueil --------------------------------------------- Il n'appartient qu'à l'accueil : le globe ne se reprend nulle part ailleurs (DA §1). Les pages intérieures ont leur propre hero. */ #tp .hero{position:relative;z-index:2;overflow:hidden;isolation:isolate; min-height:100svh;display:flex;flex-direction:column; background: radial-gradient(120% 88% at 50% 44%,var(--navy-850) 0%,rgba(36,64,90,0) 58%), linear-gradient(170deg,var(--navy-975) 0%,var(--navy-925) 46%,var(--navy-950) 100%)} #tp .hero > .grain{z-index:1} /* Nuage de points. Three.js n'est chargé qu'à l'entrée dans le champ et la géométrie se construit en temps mort : le premier rendu n'attend jamais. Tout échec laisse le dégradé seul, et il se suffit. */ #tp .globe{position:absolute;inset:0;z-index:0;pointer-events:none; opacity:0;transition:opacity 3000ms var(--ease-fade)} #tp .globe[data-ready="true"]{opacity:1} #tp .globe canvas{position:absolute;inset:0;display:block;width:100%;height:100%} /* Voile obligatoire : le titre se pose sur un dégradé animé, DA §3 exige de vérifier au point le plus clair. */ #tp .hero-veil{position:absolute;inset:0;z-index:2;pointer-events:none; background: radial-gradient(58% 46% at 50% 46%,rgba(9,20,29,.56) 0%,rgba(9,20,29,.28) 60%,rgba(9,20,29,0) 100%), linear-gradient(180deg,rgba(9,20,29,.58) 0%,rgba(9,20,29,0) 24%,rgba(9,20,29,0) 60%,rgba(9,20,29,.70) 100%)} #tp .hero-in{flex:1;display:flex;align-items:center;justify-content:center; max-width:var(--box-content);width:100%;margin:0 auto;position:relative;z-index:3; padding:clamp(118px,17vh,190px) var(--gutter) clamp(26px,5vh,60px)} #tp .hero-copy{max-width:900px;display:flex;flex-direction:column;align-items:center; text-align:center;gap:clamp(15px,2.4vh,26px)} #tp .hero h1{font-family:var(--serif);font-size:var(--fs-display); font-weight:400;line-height:1.02;letter-spacing:-.015em;color:#fff; text-wrap:balance;text-shadow:0 2px 30px rgba(5,15,25,.35)} #tp .hero h1 i{font-style:italic;font-weight:400} #tp .hero-claim{font-size:clamp(1.0625rem,1.5vw,1.375rem);font-weight:500; color:#fff;line-height:1.4;max-width:640px} #tp .hero-sub{font-size:clamp(1rem,1.3vw,1.1875rem);color:var(--w-2); line-height:1.55;max-width:620px;text-wrap:pretty} #tp .hero-cta{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:6px} #tp .hero .over{color:var(--w-3)} #tp .hero .over > span:first-child{color:var(--w-1);padding-left:14px} #tp .hero .over > span + span{box-shadow:inset 1px 0 0 var(--s-4)} #tp .hero .btn-w{background:#fff;color:var(--ink);box-shadow:0 10px 30px rgba(5,15,25,.24)} #tp .hero .btn-w:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(5,15,25,.32)} #tp .hero .btn-ghost{background:var(--glass-bg);color:#fff;border-color:var(--glass-line); -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur); box-shadow:inset 0 1px 0 var(--glass-top)} #tp .hero .btn-ghost:hover{background:var(--glass-bg-hi);border-color:var(--glass-line-hi); transform:translateY(-2px)} /* L'indice de défilement s'efface dès qu'il a servi. Il ne revient pas. */ #tp .scroll{position:relative;z-index:3;display:flex;flex-direction:column; align-items:center;gap:12px;padding:0 var(--gutter) clamp(18px,4vh,42px); transition:opacity var(--t-2) var(--ease-fade)} #tp .scroll[data-off="true"]{opacity:0;pointer-events:none} #tp .scroll-mouse{width:26px;height:42px;border-radius:999px; border:1.5px solid var(--w-4);display:flex;justify-content:center;padding-top:8px} #tp .scroll-mouse i{display:block;width:3px;height:7px;border-radius:999px; background:rgba(255,255,255,.82); animation:tp-wheel 2.1s cubic-bezier(.4,0,.2,1) infinite} #tp .scroll-chev{display:block;color:var(--w-3);animation:tp-chev 2.1s ease-in-out infinite} #tp .scroll[data-off="true"] i,#tp .scroll[data-off="true"] .scroll-chev{animation:none} /* Conteneur du bandeau dans le hero : il fixe la taille des pastilles. */ #tp .dx-band{--mq-size:clamp(6.175rem,.95rem + 11.4vmin,9.025rem); --mq-gap:calc(var(--mq-size) / 9); position:relative;z-index:1;margin-top:clamp(30px,3.4vw,52px); display:flex;flex-direction:column;gap:calc(var(--mq-gap) - 16px)} #tp .dx-band .mq span{min-height:calc(var(--mq-size) * 9 / 16)} /* ---- Bandeau de chiffres-repères ----------------------------------- Même matière que la section comparative : le dégradé est mutualisé. */ #tp .pinwrap{position:relative;z-index:2} #tp .pin{position:relative;padding:var(--pad) var(--gutter);overflow:hidden} #tp .cmp,#tp .pin{background: radial-gradient(110% 70% at 50% 42%,var(--white) 0%,rgba(255,255,255,0) 62%), linear-gradient(170deg,var(--soft),var(--white) 48%,var(--soft))} #tp .pin-in{position:relative;z-index:1;max-width:var(--content);width:100%; margin:0 auto;text-align:center} #tp .pin-in .over{margin-bottom:clamp(26px,4vh,36px)} /* Centré : le premier champ retrouve son padding pour rester symétrique. */ #tp .pin-in .over > span:first-child{padding-left:14px} #tp .pin-in .over > span + span{box-shadow:inset 1px 0 0 var(--hair-soft)} #tp .head-c .over > span:first-child{padding-left:14px} /* Phrase-repère en Playfair, mesurée sur --measure. */ /* Employé sur un h2 : il donne son titre à la section-charnière et rétablit la hiérarchie, qui sautait de h1 à h3. Sa taille lui est propre — c'est une phrase, pas un intitulé. */ #tp .rt{max-width:var(--measure);margin:0 auto;font-family:var(--serif);font-weight:400; font-size:clamp(1.5rem,3.2vw,2.7rem);line-height:1.24;letter-spacing:-.012em; text-wrap:balance;color:var(--ink)} #tp .rt i{font-style:italic} /* ---- Quatre champs en grille de filets ------------------------------ */ #tp .fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px; margin-top:clamp(34px,5vh,48px);background:var(--hair-soft); border:1px solid var(--hair-soft);border-radius:var(--r-sm);overflow:hidden;text-align:left} #tp .fields > div{padding:26px 22px;background:var(--white)} #tp .fields h3{font-family:var(--mono);font-size:var(--fs-cap);font-weight:500; letter-spacing:.12em;text-transform:uppercase;color:var(--gold-t)} #tp .fields p{margin-top:12px;font-size:var(--fs-small);line-height:1.6} /* ---- Grilles et utilitaires ----------------------------------------- */ #tp .in-full{max-width:var(--wide)} #tp .two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:64px;align-items:start} /* Variante du bloc à deux colonnes : la colonne d'image passe devant. Écrit ici plutôt qu'en attribut style, DA §5. */ #tp .two-portrait{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center} #tp .portrait small{opacity:.7} /* Le filet doré de 48 px, le même que dans le pied et les courriers. */ /* Note qui suit un comparatif : elle en donne la clé de lecture. */ #tp .vs-note{max-width:var(--measure);margin:26px auto 0;text-align:center} /* Mention réglementaire au fil du texte : lisible sans peser. --ink-70 plutôt que --ink-55, parce qu'elle se pose sur --mist (3,88:1). */ #tp .legal-mention{margin-top:clamp(34px,4vw,48px);padding-top:22px; border-top:1px solid var(--hair);font-family:var(--mono); font-size:var(--fs-cap);letter-spacing:.06em;line-height:1.9;color:var(--ink-70)} #tp .rule-gold{display:block;width:48px;height:2px;background:var(--gold);margin:0 auto} #tp .grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:var(--gap)} #tp .why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:var(--gap)} #tp .seg-row{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center; justify-content:center;margin-top:var(--gap);padding-top:32px; border-top:1px solid var(--hair);font-size:var(--fs-small)} #tp .seg-row b{color:var(--ink-70);font-weight:400} #tp .seg-row a{color:var(--blue);font-weight:500} #tp .seg-row a:hover{color:var(--blue-hover);text-decoration:underline} #tp .dot{width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none} /* --sh n'existe pas dans le contrat : la vignette n'avait aucune ombre. */ /* Aucun padding : l'image doit atteindre le bord du cadre, et c'est overflow:hidden qui lui donne son rayon. Le padding servait au texte de réservation, qui n'existe plus. */ #tp .portrait{aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden; background:var(--mist);box-shadow:var(--sh-2);display:block;position:relative} /* Le fichier est en 3/4, le cadre en 4/5 : cover rogne environ 6 % de la hauteur. Le cadrage remonte vers le haut pour que ce soit le bas de la veste qui parte, jamais le visage. */ #tp .portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 22%} @keyframes tp-wheel{0%{transform:translateY(0);opacity:1} 60%{transform:translateY(12px);opacity:.15}100%{transform:translateY(0);opacity:1}} @keyframes tp-chev{0%,100%{transform:translateY(0);opacity:.7} 50%{transform:translateY(4px);opacity:1}} @media(max-width:900px){ #tp .fields{grid-template-columns:1fr 1fr} #tp .two{grid-template-columns:1fr;gap:40px} #tp .grid3,#tp .why-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:560px){ #tp .fields,#tp .grid3,#tp .why-grid{grid-template-columns:1fr} } @media(prefers-reduced-motion:reduce){ #tp .scroll-mouse i,#tp .scroll-chev{animation:none} #tp .globe{transition:none} } /* ================================================================= CATALOGUE — PASSE 4 · CHOISIR Porté depuis tellusaccueil v15. Composants : .tabs/.tab · .goals/.goal-set/.goal · .mq L'ARBITRAGE DU BANDEAU DÉFILANT — rendu le 8 août. Le bandeau reste en défilement continu. Le raisonnement et les trois clauses qui l'encadrent sont écrits au-dessus du composant .mq. ================================================================= */ /* ---- Onglets de profil --------------------------------------------- Aucune rotation automatique : le visiteur sait s'il est particulier ou dirigeant, ce choix lui appartient. Pattern ARIA complet dans tellus.js. Contrastes mesurés sur la piste : inactif 5,11:1, actif 11,09:1. */ #tp .tabs{display:flex;gap:4px;background:var(--s-2);padding:4px; border-radius:var(--r-sm);margin-bottom:20px} #tp .tab{flex:1;text-align:center;font-family:var(--mono);font-size:var(--fs-cap); letter-spacing:.08em;text-transform:uppercase; min-height:44px;padding:13px 6px;border:0;border-radius:calc(var(--r-sm) - 4px); background:transparent;color:var(--w-3);cursor:pointer; transition:background var(--t-2) var(--ease),color var(--t-2) var(--ease)} #tp .tab:hover{color:#fff} #tp .tab[data-on="true"]{background:var(--w-1);color:var(--ink);font-weight:500; box-shadow:var(--sh-1)} #tp .tab:focus-visible{outline:2px solid var(--gold);outline-offset:3px} #tp .goal-set{display:none;flex-direction:column;gap:14px} #tp .goal-set[data-on="true"]{display:flex;animation:tp-fade 420ms var(--ease)} #tp .goal{display:flex;gap:11px;align-items:center;font-size:var(--fs-small); color:var(--w-2);line-height:1.5} #tp .goal i{width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none} /* ---- Bandeau de supports — défilement continu ----------------------- AMENDEMENT DA §3, arbitré le 8 août. L'interdiction des automates en boucle vise le contenu qu'on lit. Ce bandeau ne porte que des noms de familles, déjà listées dans la carte « Placements financiers » : rien ne s'y perd si on ne le lit pas. Il est donc admis comme MATIÈRE. Trois clauses restent applicables et ne se négocient pas : 1. pause hors viewport (DA §3, IntersectionObserver dans tellus.js) ; 2. commande d'arrêt atteignable au clavier — WCAG 2.2.2 exige un moyen de pause pour tout mouvement de plus de cinq secondes, et le survol n'en est pas un pour qui navigue au doigt ou au clavier ; 3. prefers-reduced-motion : la piste s'arrête et devient glissable. Pas de backdrop-filter sur les pastilles : la piste porte un mask-image, donc une racine de composition isolée — le filtre flouterait une couche vide (DA §4). Dégradé de blancs à la place. -------------------------------------------------------------------- */ #tp .mq-wrap{position:relative} #tp .mq{--mq-gap:clamp(10px,1.2vw,16px); display:flex;gap:var(--mq-gap);padding:8px 0;overflow:hidden;user-select:none; -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,0),#000 12%,#000 88%,rgba(0,0,0,0)); mask-image:linear-gradient(to right,rgba(0,0,0,0),#000 12%,#000 88%,rgba(0,0,0,0))} #tp .mq__g{flex-shrink:0;display:flex;align-items:center;justify-content:space-around; gap:var(--mq-gap);min-width:100%; animation:tp-scroll-x 46s linear infinite;will-change:transform} #tp .mq--reverse .mq__g{animation-direction:reverse;animation-delay:-3s;animation-duration:54s} #tp .mq:hover .mq__g, #tp .mq-wrap[data-idle="true"] .mq__g, #tp .mq-wrap[data-play="false"] .mq__g{animation-play-state:paused} #tp .mq span{display:inline-flex;align-items:center;justify-content:center;text-align:center; flex-shrink:0;white-space:nowrap; min-height:clamp(4.6rem,3.2rem + 4vmin,6.2rem); padding:0 clamp(18px,2.2vw,32px);border-radius:var(--r-md);color:#fff; font-size:clamp(.875rem,.55rem + .5vmin,1rem);font-weight:400; letter-spacing:-.005em;line-height:1.3; background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.05)); border:1px solid var(--glass-line); box-shadow:0 12px 34px rgba(4,12,19,.38),inset 0 1px 0 var(--glass-top); transition:background var(--t-2) var(--ease),border-color var(--t-2) var(--ease), transform 320ms var(--ease)} #tp .mq span:hover{background:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.10)); border-color:var(--glass-line-hi);transform:translateY(-3px)} /* La commande d'arrêt. Cible de 44 px, libellé porté par aria-label. */ #tp .mq-stop{position:absolute;right:0;bottom:-52px; display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 14px; background:var(--s-1);border:1px solid var(--s-3);border-radius:var(--r-sm); color:var(--w-2);cursor:pointer; font-family:var(--mono);font-size:var(--fs-cap);letter-spacing:.11em;text-transform:uppercase; transition:background var(--t-1) var(--ease),color var(--t-1) var(--ease)} #tp .mq-stop:hover{background:var(--s-2);color:#fff} #tp .mq-stop:focus-visible{outline:2px solid var(--gold);outline-offset:3px} #tp .mq-stop svg{flex:none} #tp .mq-wrap[data-play="false"] .mq-stop .i-pause{display:none} #tp .mq-wrap[data-play="true"] .mq-stop .i-play{display:none} @keyframes tp-scroll-x{ from{transform:translateX(0)} to{transform:translateX(calc(-100% - var(--mq-gap)))} } @media(prefers-reduced-motion:reduce){ #tp .mq__g{animation:none} #tp .mq{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none; -webkit-mask-image:none;mask-image:none} #tp .mq::-webkit-scrollbar{display:none} #tp .mq__g[aria-hidden="true"]{display:none} #tp .mq-stop{display:none} } @media(prefers-reduced-motion:reduce){ #tp .goal-set[data-on="true"]{animation:none} } /* ================================================================= CATALOGUE — PASSE 3 · MONTRER Porté depuis tellusaccueil v15. Composants : .wc/.wg/.chips/.chip · .frost · .stats/.stat .quotes/.quote/.qm/.av · .quotes-dots LE POINT DUR DE CETTE PASSE. Le panneau .wg était un verre BLANC à 12 % posé sur le haut de trois dégradés. Mesuré au point le plus clair : carte bleue texte des puces 2,78:1 carte dorée texte des puces 1,78:1 carte sauge texte des puces 1,77:1 C'est exactement le cas que DA §3 vise : « texte sur dégradé, voile obligatoire, vérifié au point le plus clair de l'image ». Le voile manquait. Un blanc translucide sur un fond clair n'assombrit rien — il éclaircit. Le verre passe donc d'un blanc à un voile navy à 68 %. Il reste du verre : le dégradé se devine, le flou est conservé, l'effet tient. Après correction, aux mêmes points de mesure : bleue 7,65:1 · dorée 6,34:1 · sauge 6,21:1 (texte --w-2) Le petit texte de l'en-tête du panneau passe de --w-3 à --w-2 pour la même raison : --w-3 restait à 4,20:1 sur la carte sauge. Trois autres corrections : 1. --sh et --sh-hi n'existent pas dans le contrat : deux ombres fantômes, donc aucune ombre. Remplacées par --sh-2 / --sh-3. 2. --gold-700 n'existe pas non plus (la rampe s'arrête à 600). Le dégradé de la carte dorée tombait sur du transparent. 3. Le point de pagination inactif était en --ink-40 : 2,34:1, alors qu'un contrôle d'interface demande 3:1. Passé en --ink-55 (4,54). ================================================================= */ /* ---- Cartes d'expertise -------------------------------------------- */ /* Proportions relevées sur la référence : min-height 700, padding 24, gap 40 entre le visuel et le texte, et space-between qui plaque la phrase en bas. C'est ce trio qui donne l'allure, pas la couleur. Le rayon reste sur l'échelle de la DA (22) et non sur leur 16. */ #tp .wc{position:relative;display:flex;flex-direction:column; justify-content:space-between;gap:36px;min-height:660px;padding:24px; border-radius:var(--r-lg);overflow:hidden;color:#fff; box-shadow:var(--sh-3); transition:transform var(--t-3) var(--ease),box-shadow var(--t-3) var(--ease)} /* Le bas de la carte se fond : sans ce voile, la phrase se pose sur la fin du dégradé et le titre perd son assise. */ /* Le voile reste SOUS le panneau : il donne son assise au titre en fondant le bas de la CARTE, sans toucher à la maquette. */ #tp .wc .wc-veil{position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(0deg,var(--navy-975) 0%,rgba(12,26,36,0) 52%)} #tp .wc:hover{transform:translateY(-6px);box-shadow:var(--sh-4)} #tp .wc::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(120% 72% at 50% 0%,rgba(255,255,255,.20),transparent 64%)} /* stretch, pas flex-start : la maquette occupe toute la hauteur laissée libre. C'est ce qui la fait respirer au lieu de flotter en haut. */ #tp .wc-visual{flex:1;display:flex;align-items:stretch;justify-content:center; position:relative;z-index:2;min-height:0} /* 310 px comme la référence : au-delà, la phrase court sur la largeur de la carte et perd son rythme de légende. */ #tp .wc-txt{position:relative;z-index:4;max-width:310px} #tp .wc-txt h3{color:#fff;font-size:clamp(1.15rem,1.5vw,1.4rem);font-weight:500; line-height:1.26;letter-spacing:-.01em} #tp .wc-txt p{color:var(--w-2);font-size:var(--fs-body);line-height:1.6;margin-top:12px;max-width:44ch} /* Le panneau de verre. Voile SOMBRE, pas blanc : c'est ce qui rend le composant réemployable sur n'importe quel fond, clair ou foncé. */ /* Le fond passe de 68 % à 52 % vers le bas : le panneau respire sans se dissoudre. Un dégradé de couleurs, pas un mask-image — un mask isole la composition et le backdrop-filter flouterait une couche vide (DA §4). */ #tp .wg{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;color:#fff; border-radius:var(--r-md);border:1px solid var(--s-3); background:linear-gradient(180deg,var(--veil-strong) 0%,rgba(12,26,36,.52) 100%); -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur); box-shadow:0 18px 44px rgba(15,28,38,.30),inset 0 1px 0 var(--glass-top)} #tp .wg-top{display:flex;align-items:center;justify-content:space-between;gap:14px; padding:17px 24px;border-bottom:1px solid var(--s-3); font-family:var(--mono);font-size:var(--fs-cap);letter-spacing:.08em; text-transform:uppercase;color:var(--w-2)} #tp .wg-body{flex:1;min-height:0;display:flex;flex-direction:column; justify-content:center;padding:24px} #tp .wg-note{margin-top:auto;padding-top:18px;border-top:1px solid var(--s-3); font-size:var(--fs-cap);color:var(--w-2);display:flex;gap:9px;align-items:center} #tp .chips{display:flex;flex-wrap:wrap;gap:9px} #tp .chip{font-size:var(--fs-cap);color:var(--w-2);border:1px solid var(--s-4); border-radius:var(--r-sm);padding:7px 13px; opacity:0;transform:translateY(6px) scale(.96); transition:opacity var(--t-3) var(--ease),transform 420ms var(--ease)} #tp .is-in .chip{opacity:1;transform:none} /* ---- Panneau de verre pleine largeur -------------------------------- */ #tp .frost{position:relative;z-index:1;width:100%;max-width:var(--wide);margin-inline:auto; display:flex;align-items:center;padding:clamp(52px,6.5vw,116px); background:var(--glass-bg); -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur); border:1px solid var(--glass-line);border-radius:var(--r-xl); box-shadow:0 40px 110px rgba(4,12,19,.52),inset 0 1px 0 var(--glass-top)} /* ---- Chiffres-repères ---------------------------------------------- Aucun chiffre de performance : indépendance, implantation, ORIAS. C'est ce qui les rend affichables (DA §7). --ink-55 vaut 4,54:1 sur blanc et 3,88 sur --mist : ce bloc ne va PAS en section « alt ». */ #tp .stats{display:flex;gap:44px;flex-wrap:wrap;margin-top:18px} #tp .stat{display:flex;flex-direction:column;gap:8px} #tp .stat b{font-size:clamp(1.75rem,2.6vw,2.375rem);font-weight:500;color:var(--ink); line-height:1;letter-spacing:-.014em} #tp .stat span{font-size:var(--fs-small);color:var(--ink-55)} /* ---- Témoignages ---------------------------------------------------- ⚠ Le composant est prêt, le contenu ne l'est pas. DA §7 interdit le témoignage inventé : ne publier que des verbatims réels et validés. */ #tp .quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:var(--gap)} #tp .quote{display:flex;flex-direction:column;gap:22px;height:100%;padding:36px 34px; border-radius:var(--r-lg);background:var(--white);box-shadow:var(--sh-2); transition:transform var(--t-2) var(--ease),box-shadow 320ms var(--ease)} #tp .quote:hover{transform:translateY(-4px);box-shadow:var(--sh-3)} #tp .qm{font-family:var(--serif);font-size:34px;line-height:.6;color:var(--gold-t);font-weight:700} #tp .quote blockquote{margin:0;font-size:var(--fs-body);line-height:1.7;color:var(--ink)} #tp .quote figcaption{margin-top:auto;display:flex;align-items:center;gap:14px} #tp .av{width:46px;height:46px;border-radius:50%;flex:none;background:var(--mist); display:flex;align-items:center;justify-content:center; font-family:var(--mono);font-size:var(--fs-cap);color:var(--ink-70)} #tp .quote cite{display:block;font-style:normal;font-weight:500;color:var(--ink);font-size:var(--fs-small)} #tp .quote small{color:var(--ink-55);font-size:var(--fs-cap)} /* ================================================================= WIDGET D'AVIS EXTERNE — zone franche. Les étoiles de Trustindex s'empilaient à la verticale. La cause est chez nous : la feuille remet à zéro les styles de tableau et de liste pour neutraliser ceux d'Elementor, et ces resets atteignent le markup du widget, qui n'a rien demandé. La règle générale : un composant tiers n'est pas un composant du catalogue. On ne le restyle pas, on le laisse tranquille — et on se contente de le poser au bon endroit, à la bonne taille. ================================================================= */ #tp .avis-ext{display:block;text-align:center;margin-top:clamp(22px,3vh,32px)} #tp .avis-ext *{all:revert} /* Trois corrections, toutes nécessaires — et dans cet ordre, puisque all:revert remet à zéro ce qui précède. 1. white-space:nowrap. Le widget se replie sur deux lignes dès que son conteneur se resserre : trois étoiles, puis deux. Une note qui passe à la ligne ne se lit plus comme une note. 2. La hauteur du logo. all:revert lui rend sa taille native, près de 200 px. 22 px le met à hauteur de texte. 3. L'alignement vertical. Sans lui, le logo, les étoiles et le chiffre se posent sur trois lignes de base différentes. */ #tp .avis-ext,#tp .avis-ext *{white-space:nowrap} #tp .avis-ext img,#tp .avis-ext svg{width:auto;max-width:none;vertical-align:middle} #tp .avis-ext img{height:22px;max-height:22px} #tp .avis-ext svg{height:15px;max-height:15px} #tp .avis-ext > *{display:inline-flex;align-items:center;gap:8px} /* Cible de 44 px, rond de 8 px : le point visible est un ::before. */ #tp .quotes-dots{display:none;justify-content:center;gap:0;margin-top:12px} #tp .quotes-dots button{width:44px;height:44px;padding:0;border:0;background:none; cursor:pointer;display:flex;align-items:center;justify-content:center} #tp .quotes-dots button::before{content:"";width:8px;height:8px;border-radius:50%; background:var(--ink-55);transition:background 320ms var(--ease)} #tp .quotes-dots button[data-on="true"]::before{background:var(--gold-t)} #tp .quotes-dots button:focus-visible{outline:2px solid var(--blue);outline-offset:-6px;border-radius:50%} @media(max-width:1024px){ #tp .wc{min-height:600px} #tp .quotes{grid-template-columns:none;display:flex;gap:16px; overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scroll-padding-left:var(--gutter);scroll-padding-right:var(--gutter); margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1); padding:4px var(--gutter) 8px;scrollbar-width:none} #tp .quotes::-webkit-scrollbar{display:none} #tp .quotes .quote{flex:0 0 calc(50% - 8px);scroll-snap-align:start;height:auto} #tp .quotes .quote:last-child{scroll-snap-align:end} #tp .quotes .quote:hover{transform:none;box-shadow:var(--sh-2)} #tp .quotes-dots{display:flex} #tp .frost{padding:clamp(26px,6vw,40px)} } @media(max-width:640px){ #tp .quotes .quote,#tp .quotes .quote:last-child{flex:0 0 100%;scroll-snap-align:center} /* Le texte remonte au-dessus du visuel, et le voile s'inverse avec lui : en une colonne, la phrase se lit avant la maquette. */ #tp .wc{flex:0 0 82%;scroll-snap-align:center;min-height:0;gap:28px} #tp .wc-txt{order:-1;max-width:none} #tp .wc-visual{max-width:390px;margin:0 auto;width:100%} #tp .wc .wc-veil{background:linear-gradient(180deg,var(--navy-975) 0%,rgba(12,26,36,0) 46%)} #tp .wc:hover{transform:none;box-shadow:var(--sh-3)} #tp .stats{gap:28px} } @media(prefers-reduced-motion:reduce){ #tp .chip{opacity:1!important;transform:none!important;transition:none!important} } /* ================================================================= CARTES D'EXPERTISE — LE CONTENU DU PANNEAU Référence : les trois track__card d'Origin. Le panneau y porte une vraie maquette d'interface, pas une liste de mots. LA DIFFÉRENCE AVEC LA RÉFÉRENCE, ET ELLE EST STRUCTURANTE. Origin est un logiciel : il peut afficher « $1 586 » et « 44,7 % » en données d'application. Un CIF qui montre des montants ou des taux dans une maquette laisse entendre un résultat — DA §7 l'interdit. Nos trois widgets montrent donc des STRUCTURES : 1. ce qui est accessible (familles de supports, pas des montants) 2. ce qui est examiné (postes d'analyse, pas des conclusions) 3. quand on se revoit (rythme, pas performance) Aucun chiffre affiché n'est un chiffre de marché. ================================================================= */ /* Le fond des cartes gagne une matière : deux halos et un grain, au lieu d'un dégradé plat. Origin y met une photographie ; sans banque d'images validée, la matière procédurale est la seule voie honnête. */ #tp .wc::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; opacity:.30;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E")} #tp .wc-1{background: radial-gradient(78% 46% at 22% 8%,rgba(148,201,246,.42) 0%,rgba(148,201,246,0) 62%), linear-gradient(158deg,var(--blue-600) 0%,var(--navy-800) 48%,var(--navy-900) 100%)} #tp .wc-2{background: radial-gradient(78% 46% at 78% 6%,rgba(255,234,203,.44) 0%,rgba(255,234,203,0) 60%), linear-gradient(158deg,var(--gold-400) 0%,var(--gold-600) 46%,var(--navy-900) 100%)} #tp .wc-3{background: radial-gradient(80% 48% at 50% 4%,rgba(209,220,216,.40) 0%,rgba(209,220,216,0) 62%), linear-gradient(158deg,var(--sage-400) 0%,var(--navy-700) 46%,var(--navy-900) 100%)} /* Le panneau se pose en haut, comme chez Origin — pas centré : la carte doit se lire de haut en bas, maquette d'abord, phrase ensuite. */ #tp .wc-visual{align-items:flex-start} /* ---- TROIS SILHOUETTES, PAS TROIS FOIS LA MÊME ----------------------- Trois cartes de structure identique sont l'un des signes du rendu par défaut. Chez la référence, les panneaux débordent de leur carte et ne sont ni centrés ni alignés entre eux : c'est ce qui donne la largeur ET la variété. Le overflow:hidden de la carte fait le rognage. .wg-tall colonne pleine hauteur, débordant à droite .wg-low bloc ancré en bas, sans en-tête, débordant à gauche .wg-band bandeau court ancré en haut, débordant des deux côtés -------------------------------------------------------------------- */ #tp .wg-tall{margin-right:-44px;border-right:0;border-radius:var(--r-md) 0 0 var(--r-md)} #tp .wc-visual:has(.wg-tall){align-items:stretch} #tp .wg-low{height:auto;margin-left:-44px;margin-top:auto;padding:8px 0; border-left:0;border-radius:0 var(--r-md) var(--r-md) 0} #tp .wc-visual:has(.wg-low){align-items:flex-end} #tp .wg-band{height:auto;margin-left:-44px;margin-right:-44px; border-left:0;border-right:0;border-radius:0} #tp .wc-visual:has(.wg-band){align-items:flex-start;flex-direction:column} /* La légende sort du panneau et se pose à même la carte, sur la zone que le voile a déjà assombrie. */ #tp .wg-band + .wlegend{margin-top:22px;padding:0 2px} /* Sans :has (Firefox ESR ancien), les panneaux restent étirés : c'est un repli acceptable, la carte ne casse pas. */ @media(max-width:767px){ #tp .wg-tall,#tp .wg-low,#tp .wg-band{margin-left:0;margin-right:0; border:1px solid var(--s-3);border-radius:var(--r-md)} } /* Compensation du débordement : le contenu reste optiquement centré dans la partie VISIBLE du panneau, celle que la carte laisse voir. */ #tp .wg-tall .wg-top,#tp .wg-tall .wg-body{padding-right:52px} #tp .wg-low .wg-body{padding-left:52px} #tp .wg-band .wg-top,#tp .wg-band .wg-body{padding-left:52px;padding-right:52px} @media(max-width:767px){ #tp .wg-tall .wg-top,#tp .wg-tall .wg-body, #tp .wg-low .wg-body, #tp .wg-band .wg-top,#tp .wg-band .wg-body{padding-left:24px;padding-right:24px} } /* ---- 1 · Lignes de familles --------------------------------------- Ce qui est accessible, et ce qui ne l'est pas ailleurs. Le point doré signale « référencé », pas « recommandé ». */ #tp .wrows{display:flex;flex-direction:column} #tp .wrow{display:grid;grid-template-columns:14px minmax(0,1fr) auto;align-items:center; gap:12px;padding:14px 0;border-bottom:1px solid var(--s-2); font-size:var(--fs-small);color:var(--w-2)} #tp .wrow:last-child{border-bottom:0} #tp .wrow i{width:6px;height:6px;border-radius:50%;background:var(--gold); justify-self:center;font-style:normal} #tp .wrow em{font-style:normal;font-family:var(--mono);font-size:var(--fs-cap); letter-spacing:.08em;text-transform:uppercase;color:var(--w-2);white-space:nowrap} /* ---- 2 · Postes examinés ------------------------------------------ Reprend .chk-i en version resserrée : même composant, même séquence jouée une fois, sans doubler le code. */ #tp .wg .chk{justify-content:center} #tp .wg .chk-i{padding:12px 0;border-bottom-color:var(--s-2);font-size:var(--fs-small)} #tp .wg .chk-b{width:18px;height:18px} /* ---- 3 · Rythme annuel --------------------------------------------- Douze cases, les points de contact marqués. Aucun montant : c'est un calendrier de rendez-vous, pas un relevé. */ #tp .wyear{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px} #tp .wm{aspect-ratio:1} #tp .wm{border-radius:var(--r-xs);border:1px solid var(--s-2); display:flex;align-items:center;justify-content:center; font-family:var(--mono);font-size:var(--fs-cap);color:var(--w-3)} #tp .wm[data-on="true"]{background:var(--gold);border-color:var(--gold); color:var(--navy-975);font-weight:500} #tp .wm[data-on="soft"]{border-color:var(--s-4);color:var(--w-2)} #tp .wlegend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px; font-family:var(--mono);font-size:var(--fs-cap);letter-spacing:.08em; text-transform:uppercase;color:var(--w-2)} #tp .wlegend span{display:inline-flex;align-items:center;gap:8px} #tp .wlegend b{width:10px;height:10px;border-radius:3px;background:var(--gold)} #tp .wlegend b.soft{background:none;border:1px solid var(--s-4)} @media(max-width:560px){ #tp .wyear{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:auto} #tp .wm{aspect-ratio:1} } /* ================================================================= CATALOGUE — PASSE 2 · SÉQUENCER Porté depuis tellusaccueil v15. Composants : .steps/.step · .dxwrap/.dx-item · .chk/.chk-i Quatre corrections appliquées, toutes mesurées : 1. .step-n portait --gold-t sur --mist : 3,91:1. Or .steps vit dans une section « alt ». Le chiffre passe en --ink-70 (5,53:1) ; le cercle garde sa bordure dorée, qui est du décor et n'a pas à porter 4,5. 2. .dx-nav em inactif à opacity .45 : 2,62:1. Le numéro d'un onglet non sélectionné reste de l'information. Porté à .70 (4,86:1). 3. Les trois .dx-glow tournaient en boucle infinie sans jamais se mettre en pause. DA §3 l'exige hors viewport — fait dans tellus.js. 4. .dx-item p en --w-2 : conforme même sur le point le plus clair du dégradé (6,96:1 sur navy-850). Vérifié, pas modifié. Ce que v15 avait DÉJÀ corrigé, contrairement à ce qu'indique DA §6 : la rotation du différenciateur est à 7 s avec arrêt au survol et au focus, la checklist se joue une fois. Le §6 est en retard sur la page. ================================================================= */ /* ---- Étapes numérotées -------------------------------------------- */ #tp .steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px;margin:var(--gap) 0} #tp .step{display:flex;flex-direction:column;gap:14px} #tp .step-top{display:flex;align-items:center;gap:16px} #tp .step-n{width:52px;height:52px;border-radius:50%;flex:none; border:1px solid var(--gold);color:var(--ink-70); display:flex;align-items:center;justify-content:center; font-family:var(--mono);font-size:var(--fs-small);font-weight:500} /* Le filet part du numéro et file vers la droite, une fois, à l'entrée dans le viewport. Il ne se rejoue pas. */ #tp .step-line{height:1px;flex:1;background:var(--hair); transform:scaleX(0);transform-origin:left;transition:transform 700ms var(--ease) 200ms} #tp .is-in .step-line{transform:scaleX(1)} #tp .step:last-child .step-line{display:none} #tp .step h3{font-size:var(--fs-h4)} @media(max-width:900px){ #tp .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 34px} #tp .step:nth-child(2n) .step-line{display:none} } @media(max-width:560px){ #tp .steps{grid-template-columns:1fr;gap:26px} #tp .step .step-line{display:none} } /* ---- Bloc sombre à items numérotés -------------------------------- */ #tp .dxwrap{position:relative;z-index:2;overflow:hidden;padding:var(--pad) 0; background: radial-gradient(100% 62% at 50% 0%,var(--navy-850) 0%,rgba(36,64,90,0) 62%), radial-gradient(80% 55% at 50% 100%,var(--navy-900) 0%,rgba(31,55,74,0) 66%), linear-gradient(180deg,var(--navy-975) 0%,var(--navy-925) 42%,var(--navy-975) 100%)} #tp .dxwrap::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(130% 95% at 50% 50%,rgba(4,12,19,0) 38%,rgba(4,12,19,.62) 100%)} #tp .dxwrap h2{color:#fff} #tp .dxwrap .lead{color:var(--inv-muted)} #tp .dxwrap .over{color:var(--w-3)} #tp .dxwrap .over > span:first-child{color:var(--w-1)} #tp .dxwrap .over > span + span{box-shadow:inset 1px 0 0 var(--s-4)} #tp .dx{position:relative;display:flex;flex-direction:column;padding:0 var(--gutter);overflow:hidden} #tp .dx-glow{position:absolute;border-radius:50%;pointer-events:none;filter:blur(20px)} #tp .dx-g1{width:min(60vw,720px);aspect-ratio:1;top:-18%;right:-10%; background:radial-gradient(circle,rgba(206,179,135,.30),rgba(206,179,135,.06) 46%,transparent 70%); animation:dx-drift 22s ease-in-out infinite alternate} #tp .dx-g2{width:min(52vw,620px);aspect-ratio:1;bottom:-24%;left:-8%; background:radial-gradient(circle,rgba(44,110,153,.42),rgba(44,110,153,.08) 48%,transparent 72%); animation:dx-drift 27s ease-in-out infinite alternate-reverse} #tp .dx-g3{width:min(44vw,540px);aspect-ratio:1;top:38%;left:44%; background:radial-gradient(circle,rgba(181,193,189,.20),rgba(181,193,189,.04) 50%,transparent 74%); animation:dx-drift 34s ease-in-out infinite alternate} /* Posée par tellus.js quand la section quitte le viewport : une animation infinie qui tourne dans le vide consomme sans rien montrer (DA §3). */ #tp .dxwrap[data-idle="true"] .dx-glow{animation-play-state:paused} @keyframes dx-drift{from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(3%,-4%,0) scale(1.06)}} #tp .dx-grid{width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:clamp(40px,6vw,110px);align-items:center} #tp .dx-nav{display:flex;flex-direction:column;margin-top:44px} #tp .dx-nav button{display:flex;align-items:center;gap:16px;background:none;border:0; border-top:1px solid var(--s-2);padding:19px 0;cursor:pointer;text-align:left; font-family:inherit;font-size:var(--fs-small);color:var(--w-3); transition:color var(--t-3) var(--ease)} #tp .dx-nav button:first-child{border-top:0} #tp .dx-nav button[data-on="true"]{color:#fff} #tp .dx-nav button:focus-visible{outline:2px solid var(--gold);outline-offset:3px} /* Le numéro d'un onglet non sélectionné reste de l'information : à .45 il tombait à 2,62:1. */ #tp .dx-nav em{font-style:normal;font-family:var(--mono);font-size:var(--fs-cap); letter-spacing:.14em;color:var(--gold);opacity:.7;transition:opacity var(--t-3) var(--ease)} #tp .dx-nav button[data-on="true"] em{opacity:1} #tp .dx-bar{height:2px;background:var(--s-3);border-radius:2px;overflow:hidden;margin-top:30px} #tp .dx-bar i{display:block;height:100%;width:0;background:var(--gold); transition:width var(--t-3) var(--ease)} #tp .dx-stack{position:relative;min-height:380px} #tp .dx-item{position:absolute;inset:0;display:flex;flex-direction:column;gap:18px; opacity:0;transform:translateY(20px);pointer-events:none; transition:opacity var(--t-3) var(--ease),transform var(--t-3) var(--ease)} #tp .dx-item[data-on="true"]{opacity:1;transform:none;pointer-events:auto} /* Chiffre de fond, doublé par le numéro de l'onglet : décor, donc aria-hidden, donc dispensé du seuil de 4,5 (1,79:1 assumé). */ #tp .dx-n{font-size:clamp(2.75rem,6vw,4.5rem);font-weight:400;line-height:1; color:var(--s-3);letter-spacing:-.02em} #tp .dx-item h3{color:#fff;font-size:clamp(1.375rem,2.2vw,2rem);line-height:1.15;letter-spacing:-.015em} #tp .dx-item p{color:var(--inv-muted);font-size:var(--fs-lead);line-height:1.6} @media(max-width:1024px){ #tp .dxwrap{padding:clamp(52px,10vw,84px) 0} #tp .dx-grid{grid-template-columns:1fr;gap:40px;align-items:start} #tp .dx-nav{margin-top:30px} #tp .dx-stack{min-height:350px} } @media(max-width:760px){ /* Sous cette largeur, l'empilement absolu se déplie : trois panneaux lus à la suite valent mieux qu'un système d'onglets à la verticale. */ #tp .dx-stack{min-height:0;display:flex;flex-direction:column;gap:36px} #tp .dx-item{position:relative;inset:auto;opacity:1;transform:none;pointer-events:auto} #tp .dx-nav,#tp .dx-bar{display:none} #tp .dx-item p{font-size:var(--fs-body)} #tp .dx-glow{animation:none} } /* ---- Checklist ----------------------------------------------------- */ #tp .chk{display:flex;flex-direction:column} #tp .chk-i{display:flex;align-items:center;gap:12px;padding:12px 0; border-bottom:1px solid var(--s-3);font-size:var(--fs-small);color:var(--w-3); transition:color var(--t-2) var(--ease)} #tp .chk-i:last-child{border-bottom:0} #tp .chk-b{width:20px;height:20px;border-radius:var(--r-xs);border:1px solid var(--s-4); flex:none;display:flex;align-items:center;justify-content:center; transition:background var(--t-2) var(--ease),border-color var(--t-2) var(--ease)} #tp .chk-b svg{opacity:0;transform:scale(.6); transition:opacity var(--t-2) var(--ease),transform 320ms var(--ease)} #tp .chk-i[data-on="true"]{color:#fff} #tp .chk-i[data-on="true"] .chk-b{background:var(--gold);border-color:var(--gold)} #tp .chk-i[data-on="true"] .chk-b svg{opacity:1;transform:none} #tp .chk-i[data-on="true"] .chk-b svg path{stroke:var(--ink)} @media(prefers-reduced-motion:reduce){ #tp .dx-glow{animation:none!important} #tp .step-line{transform:scaleX(1)!important;transition:none!important} #tp .chk-b svg{transition:none} } /* ================================================================= CATALOGUE — PASSE 1 · COMPARER Porté depuis tellusaccueil v15, section « Trois interlocuteurs ». Composants : .cmp .rail .table-wrap .col-card .hl .mark (.yes .no .part) .legend .hint Cinq corrections appliquées au passage, toutes mesurées : 1. #F6F9F8 n'avait pas de token alors que la DA le cite en commentaire de --hair-soft. Déclaré en --soft (amendement DA §2). 2. --ink-55 y vaut 4,29:1 — sous le seuil. Tout le petit texte du tableau passe en --ink-70 (6,12:1). 3. .no portait --ink-55 sur --sage-100 : 3,88:1. Passé en --ink-70 (5,53). 4. .part portait --gold-t sur sa propre pastille : 3,97:1. Passé en --ink-70 (5,62). La pastille garde sa teinte, le glyphe se lit. 5. La flèche du .hint tournait en boucle infinie (DA §3). Retirée : l'indice disparaît au premier défilement, c'est suffisant. ================================================================= */ #tp .cmp{position:relative;z-index:2;overflow:hidden;padding:var(--pad) 0} #tp .cmp-in{position:relative;z-index:1;max-width:var(--box-wide);margin:0 auto; padding:0 var(--gutter)} #tp .cmp .over > span + span{box-shadow:inset 1px 0 0 var(--hair-soft)} /* Le rail déborde volontairement : un tableau de trois colonnes ne se replie pas, il se fait glisser. Il porte donc tabindex et un rôle — un contenu défilable inatteignable au clavier est un piège. */ #tp .rail{margin-top:clamp(40px,5vw,64px);padding:6px 0 24px; overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;scrollbar-width:none} #tp .rail::-webkit-scrollbar{display:none} #tp .rail:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:var(--r-sm)} #tp .table-wrap{position:relative;min-width:900px} /* Les thèmes et Elementor livrent leurs propres styles de tableau — bordures, rayures, fonds de cellule. Ils gagnent tant qu'on ne remet pas tout à zéro d'abord. */ #tp table,#tp caption,#tp thead,#tp tbody,#tp tr,#tp th,#tp td{ background:none;border:0;border-collapse:separate;border-spacing:0; box-shadow:none;text-align:inherit;font-weight:inherit} #tp tbody tr:nth-child(odd),#tp tbody tr:nth-child(even), #tp tbody tr:hover,#tp thead tr{background:none} #tp .cmp table{width:100%} #tp .cmp th,#tp .cmp td{padding:19px 18px;text-align:center;font-size:var(--fs-small); font-weight:400;color:var(--ink-70);vertical-align:middle} #tp .cmp tbody th{text-align:left;padding-left:0;width:30%;font-weight:500; font-size:var(--fs-body);color:var(--ink);line-height:1.35} #tp .cmp thead th{font-family:var(--mono);font-size:var(--fs-cap);letter-spacing:.11em; text-transform:uppercase;color:var(--ink-70);padding:16px 18px} #tp .cmp thead th:not(.hl),#tp .cmp thead td{border-bottom:1px solid var(--hair-soft)} #tp .cmp tbody th,#tp .cmp tbody td:not(.hl){border-bottom:1px solid var(--hair-soft)} /* La colonne mise en avant est UNE carte, pas une ombre par cellule : les cellules peignent dans l'ordre du document, et l'ombre de l'en-tête finirait sous les lignes suivantes. Position calculée dans tellus.js. */ #tp .col-card{position:absolute;top:0;left:0;width:0;height:0;z-index:0; pointer-events:none;background:var(--white);border:1px solid var(--hair-soft); border-radius:var(--r-lg);box-shadow:var(--sh-1)} #tp .hl{position:relative;z-index:1;background:transparent;color:var(--ink)} #tp .cmp thead .hl{padding:24px 18px;font-family:inherit;font-size:var(--fs-h4); letter-spacing:0;text-transform:none;font-weight:500;color:var(--ink)} #tp .cmp thead .hl small{display:block;margin-top:5px;font-family:var(--mono); font-size:var(--fs-cap);letter-spacing:.11em;text-transform:uppercase;color:var(--gold-t)} #tp .cmp tbody .hl{font-weight:500} /* Chaque marque porte role="img" et un aria-label : le glyphe seul ne dit rien à un lecteur d'écran, et « ✓ » n'est pas « oui ». */ #tp .mark{display:inline-flex;align-items:center;justify-content:center; width:26px;height:26px;border-radius:50%;line-height:1;font-size:14px} #tp .yes{background:rgba(44,110,153,.12);color:var(--blue)} #tp .hl .yes{background:var(--cell-on);color:var(--ink)} #tp .no{background:var(--sage-100);color:var(--ink-70)} #tp .part{background:rgba(206,179,135,.22);color:var(--ink-70);font-size:15px} #tp .legend{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 26px; margin-top:22px;font-family:var(--mono);font-size:var(--fs-cap);letter-spacing:.11em; text-transform:uppercase;color:var(--ink-70)} #tp .legend span{display:inline-flex;align-items:center;gap:9px} #tp .legend .mark{width:20px;height:20px;font-size:11px} #tp .hint{display:none;align-items:center;justify-content:center;gap:9px;margin-top:14px; font-family:var(--mono);font-size:var(--fs-cap);letter-spacing:.12em; text-transform:uppercase;color:var(--ink-70); transition:opacity var(--t-2) var(--ease)} @media(max-width:1100px){ #tp .rail{margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1); padding-left:var(--gutter);padding-right:var(--gutter)} #tp .hint{display:inline-flex} } @media(max-width:900px){ #tp .table-wrap{min-width:660px} #tp .cmp th,#tp .cmp td{padding:15px 11px} #tp .cmp tbody th{width:36%;padding-right:14px} #tp .cmp thead th{padding:13px 11px} #tp .cmp thead .hl{font-size:var(--fs-body);padding:18px 12px} #tp .mark{width:23px;height:23px;font-size:13px} } @media(max-width:560px){ /* Le tableau se resserre par les paddings, jamais par la fonte : le plancher typographique de la DA est à 11 px et --fs-small y est déjà le minimum lisible pour du corps de texte. */ #tp .table-wrap{min-width:560px} #tp .cmp th,#tp .cmp td{padding:13px 9px} #tp .cmp tbody th{width:38%;padding-right:11px} } /* ================================================================= FORMULAIRE — un seul jeu de règles pour les deux emplacements. .fx en fond clair (section de page), .fx-dark en fond sombre (modale). ================================================================= */ #tp .fx{display:block} #tp .field textarea{ padding:14px 16px;border:1px solid var(--hair);border-radius:var(--r-sm); font-size:var(--fs-body);line-height:1.6;color:var(--ink);background-color:var(--mist); resize:vertical;min-height:96px; transition:border-color 220ms var(--ease),box-shadow 220ms var(--ease),background 220ms var(--ease); } #tp .field textarea:focus{outline:none;border-color:var(--blue);background-color:var(--white);box-shadow:0 0 0 3px rgba(44,110,153,.14)} /* Sans cette règle, le texte fantôme hérite du gris du navigateur, souvent sous 4,5:1. --ink-55 vaut 4,5:1 sur blanc. */ #tp .field input::placeholder,#tp .field textarea::placeholder{color:var(--ink-70);opacity:1} /* Le chevron natif diffère d'un système à l'autre : on le pose nous-mêmes. */ #tp .field select{ appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2343617C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 16px center; } #tp .req{color:var(--gold-t);font-weight:500} /* Piège à robots : hors flux, hors tabulation, hors arbre d'accessibilité. */ #tp .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* Créneau de rappel — trois choix, pas un agenda. */ #tp .slots{border:0;padding:0;margin:0;min-width:0} #tp .slots legend{padding:0;margin-bottom:10px} #tp .slot-row{display:flex;flex-wrap:wrap;gap:10px} #tp .slot{ display:inline-flex;align-items:center;min-height:44px;padding:11px 18px; border:1px solid var(--hair);border-radius:var(--r-sm);cursor:pointer; font-size:var(--fs-small);color:var(--ink-70);background:var(--white); transition:border-color var(--t-1) var(--ease),background var(--t-1) var(--ease),color var(--t-1) var(--ease); } #tp .slot:hover{border-color:var(--ink);color:var(--ink)} #tp .slot-row input:checked + .slot{background:var(--ink);border-color:var(--ink);color:#fff} /* La case est en .sr : le focus doit donc se voir sur l'étiquette. */ #tp .slot-row input:focus-visible + .slot{outline:2px solid var(--blue);outline-offset:3px} #tp .form-err{ margin:0;padding:14px 16px;border-radius:var(--r-sm); background:var(--err-bg);border:1px solid var(--err-line); font-size:var(--fs-small);line-height:1.6;color:var(--err-ink); } #tp .form-note{font-size:var(--fs-cap);line-height:1.7;color:var(--ink-55)} #tp [data-tp-submit]{position:relative} #tp [data-tp-submit] .spin{display:none} #tp [data-tp-submit][aria-busy="true"]{pointer-events:none;opacity:.72} #tp [data-tp-submit][aria-busy="true"] .spin{display:block;animation:tp-spin 780ms linear infinite} @keyframes tp-spin{to{transform:rotate(360deg)}} #tp .sent:not([hidden]){display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:30px 0} #tp .sent h3{color:var(--ink)} #tp .sent-bar{width:48px;height:2px;background:var(--gold)} #tp .sent-tel{font-size:var(--fs-small);color:var(--ink-55)} #tp .sent-tel a{color:var(--gold-t);font-weight:500} /* ---- Le même formulaire sur fond sombre --------------------------- */ #tp .fx-dark .field label,#tp .fx-dark .slots legend{color:var(--w-2)} #tp .fx-dark .req{color:var(--gold)} /* background-color, et non background : la forme raccourcie réinitialise background-repeat et background-position, et le chevron du select se répétait alors en mosaïque sur toute la largeur du champ. */ #tp .fx-dark .field input, #tp .fx-dark .field select, #tp .fx-dark .field textarea{ background-color:var(--s-1);border-color:var(--s-3);color:#fff; } #tp .fx-dark .field input::placeholder, #tp .fx-dark .field textarea::placeholder{color:var(--w-3)} #tp .fx-dark .field select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23CEB387' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* La liste déroulante est rendue par le système : sans ces deux valeurs, elle sort en blanc sur blanc sur plusieurs plateformes. */ #tp .fx-dark .field select option,#tp .fx-dark .field select optgroup{color:var(--ink);background:#fff} #tp .fx-dark .field input:focus, #tp .fx-dark .field select:focus, #tp .fx-dark .field textarea:focus{ background-color:var(--s-2);border-color:var(--gold);box-shadow:0 0 0 3px rgba(206,179,135,.18); } /* Écart assumé à DA §3 : --blue vaut 2,1:1 sur navy-975, donc invisible. Sur fond sombre, l'anneau de focus passe au doré (8,8:1). */ #tp .fx-dark :focus-visible{outline-color:var(--gold)} #tp .fx-dark .check{color:var(--w-2)} #tp .fx-dark .check input{accent-color:var(--gold)} #tp .fx-dark .slot{background:var(--s-1);border-color:var(--s-3);color:var(--w-2)} #tp .fx-dark .slot:hover{border-color:var(--s-4);color:#fff} #tp .fx-dark .slot-row input:checked + .slot{background:var(--gold);border-color:var(--gold);color:var(--navy-975)} #tp .fx-dark .slot-row input:focus-visible + .slot{outline-color:var(--gold)} #tp .fx-dark .btn-p{background:#fff;color:var(--ink)} #tp .fx-dark .btn-p:hover{box-shadow:0 16px 40px rgba(5,15,25,.32)} #tp .fx-dark .form-note{color:var(--w-3)} #tp .fx-dark .form-err{background:var(--err-bg-inv);border-color:var(--err-line-inv);color:var(--err-inv)} #tp .fx-dark .sent h3{color:#fff} #tp .fx-dark .sent p{color:var(--w-2)} #tp .fx-dark .sent-tel{color:var(--w-3)} #tp .fx-dark .sent-tel a{color:var(--gold)} /* ================================================================= MODALE DE RENDEZ-VOUS — même matière que le menu mobile : une modale qui ne ressemble pas au site est une modale de plugin. Le surtitre y reprend ses DEUX champs et donc ses filets internes (DA §4), qui avaient disparu de la page. ================================================================= */ #tp .rdv{position:fixed;inset:0;z-index:90;display:none} #tp .rdv:not([hidden]){display:block} #tp .rdv-veil{position:absolute;inset:0;background:rgba(6,14,19,.68); -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px); opacity:0;transition:opacity var(--t-2) var(--ease-fade)} #tp .rdv[data-open="true"] .rdv-veil{opacity:1} #tp .rdv-panel{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) translateY(14px) scale(.985); width:min(720px,calc(100vw - 2 * var(--gutter))); max-height:min(88vh,940px);display:flex;flex-direction:column; border-radius:var(--r-lg);overflow:hidden; border:1px solid var(--s-2); background: radial-gradient(112% 58% at 82% 0%,var(--navy-850) 0%,rgba(36,64,90,0) 60%), linear-gradient(180deg,var(--navy-925) 0%,var(--navy-975) 100%); box-shadow:0 40px 100px rgba(3,10,16,.58),inset 0 1px 0 var(--s-2); opacity:0; transition:opacity var(--t-2) var(--ease),transform var(--t-2) var(--ease); } #tp .rdv[data-open="true"] .rdv-panel{opacity:1;transform:translate(-50%,-50%)} #tp .rdv-scroll{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch; padding:clamp(30px,4.4vw,52px) clamp(24px,4vw,54px) clamp(28px,4vw,44px)} #tp .rdv-close{ position:absolute;right:14px;top:14px;z-index:2; width:44px;height:44px;display:flex;align-items:center;justify-content:center; background:var(--s-1);border:1px solid var(--s-3);border-radius:var(--r-sm); color:#fff;cursor:pointer;transition:background var(--t-1) var(--ease),border-color var(--t-1) var(--ease)} #tp .rdv-close:hover{background:var(--s-2);border-color:var(--s-4)} #tp .rdv-close:focus-visible{outline:2px solid var(--gold);outline-offset:3px} /* Sans fill:none, le tracé de la croix se remplit et recouvre son propre contour : le bouton paraît vide. La règle cible le PATH et non le seul svg — un thème parent ou une extension qui pose « svg path{fill:…} » gagnait autrement, et le résultat était un bouton sans icône. La couleur est écrite en dur plutôt qu'en currentColor, pour ne dépendre d'aucune couleur héritée. */ #tp .rdv-close svg{display:block;overflow:visible} #tp .rdv-close svg path{fill:none;stroke:#fff;stroke-width:1.7; stroke-linecap:round;vector-effect:non-scaling-stroke} #tp .rdv-close:hover svg path{stroke:#fff} #tp .rdv-head{display:flex;flex-direction:column;gap:18px;padding-right:52px} #tp .rdv-head .over{color:var(--w-3)} #tp .rdv-head .over > span:first-child{color:var(--w-1)} #tp .rdv-head .over > span + span{box-shadow:inset 1px 0 0 var(--s-4)} #tp .rdv-head h2{color:#fff} #tp .rdv-lead{color:var(--w-2);font-size:var(--fs-lead);line-height:1.65;max-width:46ch} #tp .rdv-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px; margin-top:4px;border-top:1px solid var(--s-2);border-bottom:1px solid var(--s-2)} #tp .rdv-facts li{display:flex;flex-direction:column;gap:6px;padding:18px 0} #tp .rdv-facts li + li{padding-left:20px;box-shadow:inset 1px 0 0 var(--s-2)} #tp .rdv-facts .k{font-family:var(--mono);font-size:var(--fs-cap);letter-spacing:.11em; text-transform:uppercase;color:var(--w-3)} #tp .rdv-facts .v{font-size:var(--fs-small);line-height:1.55;color:var(--w-1)} #tp .rdv-facts a.v{color:var(--gold);min-height:24px;transition:color var(--t-1) var(--ease)} #tp .rdv-facts a.v:hover{color:#fff} #tp .rdv .fx{margin-top:clamp(24px,3vw,34px)} #tp .rdv-legal{margin-top:24px;padding-top:20px;border-top:1px solid var(--s-2); font-family:var(--mono);font-size:var(--fs-cap);letter-spacing:.08em;line-height:1.7;color:var(--w-3)} @media(max-width:720px){ #tp .rdv-panel{left:0;top:0;width:100%;max-height:100%;height:100%; border-radius:0;border:0;transform:translateY(16px)} #tp .rdv[data-open="true"] .rdv-panel{transform:none} #tp .rdv-scroll{padding:22px var(--gutter) max(28px,env(safe-area-inset-bottom))} #tp .rdv-head{padding-right:48px} #tp .rdv-facts{grid-template-columns:1fr;gap:0} #tp .rdv-facts li + li{padding-left:0;box-shadow:inset 0 1px 0 var(--s-2)} #tp .rdv-facts li{padding:14px 0} } /* ================================================================= PIED — colonnes de journal. La rubrique s'annonce par un filet et de petites capitales ; chaque entrée est posée sur une ligne. Le doré n'y est jamais statique : il ne sert qu'au survol et à la page courante, comme dans la navigation. ================================================================= */ #tp .ftw{position:relative;z-index:2;overflow:hidden; background:linear-gradient(180deg,var(--navy-950) 0%,var(--navy-975) 100%); color:#fff;padding:clamp(72px,9vw,120px) var(--gutter) 34px} #tp .ftw-in{position:relative;z-index:1;max-width:var(--content);margin:0 auto;width:100%} #tp .ftw-top{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr); gap:clamp(40px,6vw,88px);align-items:start} #tp .ftw-brand{display:flex;flex-direction:column;align-items:flex-start; gap:clamp(34px,5vw,58px)} #tp .ftw-brand .logo{height:58px} #tp .ftw-reach{display:flex;flex-direction:column;gap:12px} #tp .ftw-reach .k{font-family:var(--mono);font-size:var(--fs-cap);letter-spacing:.11em; text-transform:uppercase;color:var(--w-3)} #tp .ftw-tel{font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.2; letter-spacing:-.01em;color:var(--gold);display:inline-flex;align-items:center;min-height:44px; transition:color var(--t-1) var(--ease)} #tp .ftw-tel:hover{color:#fff} #tp .ftw-mail{font-size:var(--fs-small);color:var(--w-2);display:inline-flex; align-items:center;min-height:34px} #tp .ftw-mail:hover{color:#fff} /* ---- J1 · Colonnes de journal ------------------------------------- */ #tp .jr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))} #tp .jr-col{padding:0 clamp(16px,2vw,28px)} #tp .jr-col:first-child{padding-left:0} #tp .jr-col:last-child{padding-right:0} #tp .jr-col + .jr-col{box-shadow:inset 1px 0 0 var(--s-2)} /* Le filet de rubrique : accentué au-dessus du titre, fin en dessous. C'est ce couple qui fait « colonne de journal » et non « liste ». Il est NEUTRE : dans ce système, le doré ne décore pas une rubrique, il signale une interaction ou porte du texte d'accent. Le titre est doré parce que c'est du texte (6,1:1 sur ce fond) ; le filet ne l'est pas parce que ce serait une matière nouvelle, sans emploi ailleurs. */ #tp .jr-col h4{position:relative;margin:0 0 4px;padding:14px 0 12px; font-family:var(--mono);font-size:var(--fs-cap);font-weight:500; letter-spacing:.16em;text-transform:uppercase;color:var(--gold); border-top:1px solid var(--s-4);border-bottom:1px solid var(--s-2)} /* La réglure du journal devient le trait de survol de la navigation : même couleur, même durée, même balayage de la gauche vers la droite. Un seul mécanisme doré dans tout le site, et il veut dire « ici ». */ #tp .jr-col a{position:relative;display:flex;align-items:center;min-height:46px; padding:12px 0;font-size:var(--fs-small);line-height:1.45;color:var(--w-2); border-bottom:1px solid var(--s-2); transition:color var(--t-1) var(--ease)} #tp .jr-col a::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px; background:var(--gold);transform:scaleX(0);transform-origin:right; transition:transform var(--t-2) var(--ease)} #tp .jr-col a:hover{color:#fff} #tp .jr-col a:hover::after{transform:scaleX(1);transform-origin:left} #tp .jr-col a[aria-current="page"]{color:#fff} #tp .jr-col a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left} @media(max-width:900px){ #tp .ftw-top{grid-template-columns:1fr;gap:44px} #tp .jr{grid-template-columns:1fr 1fr} #tp .jr-col:nth-child(3){grid-column:1/-1;padding-left:0;padding-top:26px; box-shadow:inset 0 1px 0 var(--s-2)} } @media(max-width:560px){ #tp .jr{grid-template-columns:1fr} #tp .jr-col{padding:0} #tp .jr-col + .jr-col{padding-top:26px;box-shadow:none} } /* ---- Commun aux deux ---------------------------------------------- */ #tp .ftw-rule{margin:clamp(48px,7vw,92px) 0 26px;height:1px;background:var(--s-3)} #tp .ftw-legal{text-align:center;font-family:var(--mono);font-size:var(--fs-cap); letter-spacing:.06em;line-height:2;color:var(--w-3)} #tp .ftw-legal a{color:var(--w-3);transition:color var(--t-1) var(--ease)} #tp .ftw-legal a:hover{color:#fff} @media(max-width:560px){#tp .ftw-legal{line-height:2.2}} /* Sans transition, l'état final reste lisible : le trait est là ou non. */ @media(prefers-reduced-motion:reduce){#tp .jr-col a::after{transition:none}} #tp .call{display:none;position:fixed;right:18px;bottom:18px;z-index:60;width:58px;height:58px;border-radius:50%;background:var(--ink);color:#fff;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(31,55,74,.32)} /* ---- Révélations -------------------------------------------------- */ #tp .r{opacity:0;transform:translateY(24px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)} #tp .r.is-in{opacity:1;transform:none} #tp [data-fade]{opacity:0;transition:opacity var(--t-4) var(--ease-fade)} #tp.tp-in [data-fade]{opacity:1} #tp [data-fade="0"]{transition-delay:0ms} #tp [data-fade="1"]{transition-delay:190ms} #tp [data-fade="2"]{transition-delay:380ms} #tp [data-fade="3"]{transition-delay:570ms} #tp [data-fade="4"]{transition-delay:760ms} #tp [data-fade="5"]{transition-delay:950ms} #tp [data-fade="6"]{transition-delay:1140ms} #tp.tp-rearm [data-fade]{transition:none!important} /* ---- Bascules ----------------------------------------------------- */ @media(max-height:820px){#tp .nav{top:calc(24px + var(--wp-bar,0px))}} @media(max-width:1024px){ #tp .nav-links{display:none} #tp .burger{display:flex} #tp .nav-in > .btn-sm{display:none} #tp .nav-in{padding:18px var(--gutter)} #tp .call{display:flex} } @media(max-width:560px){ #tp .nav{top:calc(20px + var(--wp-bar,0px))} #tp [id]{scroll-margin-top:100px} #tp .creds img{height:30px} } @media(prefers-reduced-motion:reduce){ #tp .menu-panel,#tp .menu nav a{opacity:1!important;transform:none!important;transition:none!important} #tp .rdv-veil{opacity:1!important;transition:none!important} #tp .rdv-panel{opacity:1!important;transition:none!important} #tp [data-tp-submit][aria-busy="true"] .spin{animation:none} #tp [data-fade]{opacity:1!important;transition:none!important} #tp .r{opacity:1!important;transform:none!important;transition:none!important} #tp .sit-p[data-on="true"],#tp .qa[open] .qa-body{animation:none} #tp *{scroll-behavior:auto!important} } /* ================================================================= WORDPRESS — la barre d'admin est fixe elle aussi : sans ce décalage, la navigation passe dessous dès qu'on est connecté. ================================================================= */ body.admin-bar #tp{--wp-bar:32px} @media(max-width:782px){body.admin-bar #tp{--wp-bar:46px}} body.admin-bar #tp [id]{scroll-margin-top:calc(136px + var(--wp-bar,0px))}