/* =========================================================================
* Chrome Tisserin Promotion : en-tete H1 + pied M1/C1.
* Traduction en production de chrome/chrome-tp.html (variante retenue par
* Louis le 2026-08-25 : barre blanche logo vert, signature une ligne en
* filigrane blanc 22 %). Les valeurs sont celles de la maquette, a
* l'identique ; ce fichier n'ajoute que l'armure de production.
*
* DESTINATION : wp-content/themes/imbry/tp-chrome.css
* (enqueue par includes/tp-chrome-setup.php, version par filemtime)
*
* L'armure, parce que le theme imbry tire dans les pattes de tout gabarit
* PHP (cf tisserin-promotion.md, mesure sur le live) :
*
* 1. le plugin apsulis force h1-h4, p, ul li et table td en !important a la
* specificite (0,3,1) ou (0,3,2) sur tout le site hors Elementor pleine
* largeur. Section 1 ci-dessous : chaque element typographie du chrome
* est redeclare en !important a (0,3,2) minimum, (0,3,3) pour les li.
* Pattern de reference : sections 0 et 0 bis de
* template-article/theme/article/tp-article.css.
* 2. bootstrap.css est charge par un brut en FIN de , donc
* apres cette feuille, et pose a{color:#f05054} et a:hover{color:#e01318}
* en selecteurs nus. Chaque lien du chrome declare donc explicitement sa
* couleur pour SES etats, a une specificite d'au moins (0,2,1), et le
* text-decoration est verrouille en !important (le chrome ne souligne
* jamais par text-decoration, ses traits sont des degrades de fond).
* 3. aucune classe Bootstrap n'est reprise : tout est prefixe tp-.
*
* Le scope : la classe .tp-chrome est posee sur QUATRE racines soeurs
* (#tp-chrome-svc, #tp-chrome-haut, #tp-tiroir, #tp-chrome-pied), pas sur un
* wrapper unique. Un element sticky ne colle que dans son bloc conteneur :
* envelopper la zone collante dans un div la decollerait (piege documente
* dans chrome/CHROME-TP.md).
* ====================================================================== */
/* La barre principale est collante (~70px repliee) : toute navigation
d'ancre doit caler sa cible sous elle. Remplace l'ancien
scroll-margin-top de 56px impose par #fixed-top. */
html {
scroll-padding-top: 96px;
}
/* =========================================================================
* 0. Scope, variables et remises a plat
* ====================================================================== */
.tp-chrome {
--tpc-vert: #457275; /* accent primaire charte */
--tpc-encre: #0F3D40; /* fond sombre, cf template-programme/mockup.html */
--tpc-hover: #146264; /* accent dark charte */
--tpc-menthe: #D7F5F7;
--tpc-menthe-2: #B6E3E6;
--tpc-clair: #DFEEEB; /* couleur claire officielle de la charte */
--tpc-titre: #1E293B;
--tpc-texte: #475569;
--tpc-attenue: #64748B;
--tpc-filet: #E2E8F0;
--tpc-ligne: rgba(255, 255, 255, .30); /* filets sur le vert du socle */
--tpc-sortie: cubic-bezier(.22, .9, .28, 1);
font-family: Inter, -apple-system, "Segoe UI", sans-serif;
font-size: 16px;
line-height: 1.75em;
color: var(--tpc-texte);
-webkit-font-smoothing: antialiased;
}
.tp-chrome *,
.tp-chrome *::before,
.tp-chrome *::after {
box-sizing: border-box;
}
/* remises a plat locales : en production il n'y a pas de reset global,
bootstrap pose p{margin:0 0 10px}, ul{margin-bottom:10px}, h2/h3 des
marges et Unica One... tout est remis a zero dans le scope */
.tp-chrome h2,
.tp-chrome h3,
.tp-chrome p,
.tp-chrome ul,
.tp-chrome ol,
.tp-chrome figure {
margin: 0;
}
.tp-chrome ul,
.tp-chrome ol {
padding: 0;
list-style: none;
}
.tp-chrome img {
display: block;
max-width: 100%;
border: 0;
}
/* le chrome ne souligne jamais par text-decoration : ses traits de survol
sont des degrades de fond. Le !important neutralise le a:hover de
bootstrap.css, charge APRES cette feuille par un brut. */
.tp-chrome a,
.tp-chrome a:hover,
.tp-chrome a:focus {
text-decoration: none !important;
}
.tp-chrome .tp-wrap {
max-width: 1220px;
margin: 0 auto;
padding: 0 32px;
}
/* =========================================================================
* 1. ARMURE APSULIS : tout element typographie du chrome, redeclare en
* !important au-dessus de (0,3,1) / (0,3,2). Un h ou un p stylise
* seulement plus bas sortirait en Canela Thin teal ou en Spartan 13px
* sur le site, alors qu'il serait juste sur le banc.
* ====================================================================== */
/* la famille, pour tout le monde d'un coup */
body.redesign-tisserin .tp-chrome .tp-pied-tete h2,
body.redesign-tisserin .tp-chrome .tp-panneau h3,
body.redesign-tisserin .tp-chrome .tp-colonnes h3,
body.redesign-tisserin .tp-chrome .tp-tiroir-cote h3,
body.redesign-tisserin .tp-chrome .tp-pied-tete p,
body.redesign-tisserin .tp-chrome .tp-marque-bloc p,
body.redesign-tisserin .tp-chrome .tp-encart p,
body.redesign-tisserin .tp-chrome .tp-panneau ul li,
body.redesign-tisserin .tp-chrome .tp-colonnes ul li,
body.redesign-tisserin .tp-chrome .tp-pied-legal ul li,
body.redesign-tisserin .tp-chrome .tp-tiroir-cote ul li {
font-family: Inter, -apple-system, "Segoe UI", sans-serif !important;
}
/* h2 du bloc de rappel (apsulis : Canela Thin 24/34 teal !important) */
body.redesign-tisserin .tp-chrome .tp-pied-tete h2 {
font-size: 26px !important;
line-height: 1.3em !important;
font-weight: 700 !important;
letter-spacing: -.4px !important;
color: var(--tpc-encre) !important;
margin: 0 !important;
text-transform: none !important;
}
/* h3 (apsulis : Canela Thin 30/30 teal !important, margin-bottom 40px) */
body.redesign-tisserin .tp-chrome .tp-panneau h3 {
font-size: 13px !important;
line-height: 1.4em !important;
font-weight: 700 !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
color: var(--tpc-vert) !important;
margin: 0 0 13px !important;
}
body.redesign-tisserin .tp-chrome .tp-colonnes h3 {
font-size: 12.5px !important;
line-height: 1.4em !important;
font-weight: 700 !important;
letter-spacing: .07em !important;
text-transform: uppercase !important;
color: #fff !important;
margin: 0 0 15px !important;
}
body.redesign-tisserin .tp-chrome .tp-tiroir-cote h3 {
font-size: 12.5px !important;
line-height: 1.4em !important;
font-weight: 700 !important;
letter-spacing: .07em !important;
text-transform: uppercase !important;
color: #fff !important;
margin: 0 0 16px !important;
}
/* p (apsulis : Spartan 13/20 !important sur TOUS les paragraphes) */
body.redesign-tisserin .tp-chrome .tp-pied-tete p {
font-size: 15px !important;
line-height: 1.75em !important;
color: #3C5C5E !important;
margin: 5px 0 0 !important;
}
body.redesign-tisserin .tp-chrome .tp-marque-bloc p {
font-size: 15px !important;
line-height: 1.65em !important;
color: rgba(255, 255, 255, .92) !important;
margin: 16px 0 0 !important;
}
body.redesign-tisserin .tp-chrome .tp-encart p {
font-size: 14px !important;
line-height: 1.6em !important;
color: var(--tpc-encre) !important;
margin: 8px 0 16px !important;
}
/* ul li (apsulis : Spartan 13/20 !important, selecteur a (0,3,2) : il faut
(0,3,3), d'ou le body en tete de chaine) */
body.redesign-tisserin .tp-chrome .tp-panneau ul li,
body.redesign-tisserin .tp-chrome .tp-colonnes ul li {
font-size: 14.5px !important;
line-height: 1.75em !important;
}
body.redesign-tisserin .tp-chrome .tp-pied-legal ul li {
font-size: 13px !important;
line-height: 1.75em !important;
}
body.redesign-tisserin .tp-chrome .tp-tiroir-cote ul li {
font-size: 15px !important;
line-height: 1.75em !important;
}
/* =========================================================================
* 2. Les boutons : bloc recopie de template-programme/mockup.html, renomme
* tp- (jamais .btn : la classe appartient a Bootstrap 3 sur ce theme).
* Le bouton TP est une pilule pleine. Le modificateur .tp-cta y ajoute le
* rond a fleche, et il ne se met que sur UN bouton quand il y en a deux
* cote a cote. Chaque variante pose background, color ET border-color
* pour SES DEUX etats : une variante incomplete est un bug qui attend.
* ====================================================================== */
.tp-chrome .tp-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
font-family: inherit;
font-size: 14.5px;
font-weight: 600;
padding: 13px 26px;
border: 1px solid transparent;
border-radius: 999px;
cursor: pointer;
line-height: 1.4;
background: var(--tpc-vert);
color: #fff;
border-color: var(--tpc-vert);
transition: background .3s var(--tpc-sortie), border-color .3s var(--tpc-sortie), color .3s var(--tpc-sortie);
}
.tp-chrome .tp-btn:hover {
background: var(--tpc-hover);
color: #fff;
border-color: var(--tpc-hover);
}
.tp-chrome .tp-btn--blanc {
background: #fff;
color: var(--tpc-vert);
border-color: #fff;
}
.tp-chrome .tp-btn--blanc:hover {
background: var(--tpc-menthe);
color: var(--tpc-encre);
border-color: var(--tpc-menthe);
}
.tp-chrome .tp-btn--nu {
background: #fff;
color: var(--tpc-vert);
border-color: var(--tpc-filet);
}
.tp-chrome .tp-btn--nu:hover {
background: var(--tpc-menthe);
color: var(--tpc-encre);
border-color: var(--tpc-menthe-2);
}
.tp-chrome .tp-btn--clair {
background: none;
color: #fff;
border-color: rgba(255, 255, 255, .42);
}
.tp-chrome .tp-btn--clair:hover {
background: #fff;
color: var(--tpc-encre);
border-color: #fff;
}
.tp-chrome .tp-btn--sm {
padding: 10px 20px;
font-size: 13.5px;
}
.tp-chrome .tp-btn svg {
width: 17px;
height: 17px;
flex: 0 0 17px;
stroke: currentColor;
fill: none;
stroke-width: 1.7;
}
.tp-chrome .tp-cta {
padding: 7px 9px 7px 24px;
gap: 15px;
}
.tp-chrome .tp-cta.tp-btn--sm {
padding: 5px 7px 5px 20px;
gap: 12px;
}
.tp-chrome .tp-cta .tp-fleche {
position: relative;
overflow: hidden;
flex: 0 0 38px;
width: 38px;
height: 38px;
border-radius: 19px;
background: rgba(255, 255, 255, .22);
}
.tp-chrome .tp-cta.tp-btn--sm .tp-fleche {
flex: 0 0 32px;
width: 32px;
height: 32px;
border-radius: 16px;
}
.tp-chrome .tp-btn--blanc.tp-cta .tp-fleche,
.tp-chrome .tp-btn--nu.tp-cta .tp-fleche {
background: var(--tpc-vert);
}
.tp-chrome .tp-cta .tp-fleche svg {
position: absolute;
top: 11px;
left: 11px;
width: 16px;
height: 16px;
stroke: #fff;
stroke-width: 2;
transition: transform .5s var(--tpc-sortie);
}
.tp-chrome .tp-cta.tp-btn--sm .tp-fleche svg {
top: 9px;
left: 9px;
width: 14px;
height: 14px;
}
.tp-chrome .tp-cta .tp-fleche svg + svg {
transform: translate(-160%, 160%);
}
.tp-chrome .tp-cta:hover .tp-fleche svg {
transform: translate(160%, -160%);
}
.tp-chrome .tp-cta:hover .tp-fleche svg + svg {
transform: none;
}
/* =========================================================================
* 3. La barre de service : fine, sombre, elle DEFILE (l'ancien #fixed-top
* etait en position:fixed et mangeait 36px d'ecran sur toute la visite).
* ====================================================================== */
.tp-chrome.tp-svc {
background: var(--tpc-encre);
color: rgba(255, 255, 255, .80);
font-size: 12.5px;
letter-spacing: .01em;
}
.tp-chrome.tp-svc .tp-wrap {
display: flex;
align-items: center;
gap: 18px;
height: 38px;
}
/* couleur declaree explicitement : apsulis pose .redesign-tisserin a en
teal, l'heritage seul perdrait */
.tp-chrome.tp-svc a {
color: rgba(255, 255, 255, .80);
background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-size: 0% 1px;
background-position: 0 100%;
transition: color .25s var(--tpc-sortie), background-size .35s var(--tpc-sortie);
}
.tp-chrome.tp-svc a:hover {
color: #fff;
background-size: 100% 1px;
}
.tp-chrome.tp-svc .tp-droite {
margin-left: auto;
display: flex;
align-items: center;
gap: 18px;
}
.tp-chrome.tp-svc .tp-sep {
width: 1px;
height: 13px;
background: rgba(255, 255, 255, .22);
flex: 0 0 1px;
}
.tp-chrome.tp-svc .tp-tel,
.tp-chrome.tp-svc .tp-tel:hover {
display: inline-flex;
align-items: center;
gap: 7px;
font-weight: 600;
color: #fff;
}
.tp-chrome.tp-svc svg {
width: 14px;
height: 14px;
flex: 0 0 14px;
stroke: currentColor;
fill: none;
stroke-width: 1.8;
}
/* =========================================================================
* 4. L'en-tete H1 : zone collante, barre blanche, logo vert, menu encre.
* ====================================================================== */
.tp-chrome.tp-tete-zone {
position: sticky;
top: 0;
z-index: 60;
}
.tp-chrome .tp-tete {
position: relative;
background: #fff;
border-bottom: 1px solid var(--tpc-filet);
transition: box-shadow .3s var(--tpc-sortie), background .3s var(--tpc-sortie), border-color .3s var(--tpc-sortie);
}
.tp-chrome .tp-tete.tp-compact {
box-shadow: 0 6px 20px rgba(15, 28, 28, .07);
}
.tp-chrome .tp-tete .tp-wrap {
display: flex;
align-items: center;
gap: 26px;
height: 88px;
transition: height .3s var(--tpc-sortie);
}
.tp-chrome .tp-tete.tp-compact .tp-wrap {
height: 70px;
}
/* le logo vert recadre (469x48 utiles, plus les 46px de vide du PNG
d'origine) : 26px de haut, soit 254px de large, la place d'un logo dans
une barre */
.tp-chrome .tp-tete .tp-logo img {
height: 26px;
width: auto;
transition: height .3s var(--tpc-sortie);
}
.tp-chrome .tp-tete.tp-compact .tp-logo img {
height: 22px;
}
.tp-chrome .tp-tete .tp-nv {
display: flex;
align-items: center;
gap: 4px;
}
.tp-chrome .tp-tete .tp-nv-g {
margin-left: auto;
}
/* nowrap : un libelle sur deux lignes casserait le trait de soulignement,
qui ne se calerait que sur la premiere */
.tp-chrome .tp-tete .tp-nv > a,
.tp-chrome .tp-tete .tp-nv > button {
position: relative;
font: inherit;
background: none;
border: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 15px;
border-radius: 999px;
font-size: 14.5px;
font-weight: 600;
letter-spacing: -.1px;
white-space: nowrap;
color: var(--tpc-titre);
transition: background .22s var(--tpc-sortie), color .22s var(--tpc-sortie);
}
.tp-chrome .tp-tete .tp-nv > a:hover,
.tp-chrome .tp-tete .tp-nv > button:hover {
color: var(--tpc-vert);
}
/* l'etat OUVERT du menu deroulant garde son fond : ce n'est pas un survol,
il a besoin de son propre signal (le fond au survol, lui, est retire, il
faisait doublon avec le trait) */
.tp-chrome .tp-tete .tp-nv .tp-ouvert {
background: var(--tpc-clair);
color: var(--tpc-encre);
}
.tp-chrome .tp-tete .tp-nv .tp-chev {
width: 13px;
height: 13px;
flex: 0 0 13px;
stroke: currentColor;
fill: none;
stroke-width: 2;
transition: transform .25s var(--tpc-sortie);
}
.tp-chrome .tp-tete .tp-nv .tp-ouvert .tp-chev {
transform: rotate(180deg);
}
/* le trait se dessine de gauche a droite sur la longueur du TEXTE : il part
du bord interieur du padding, pas du bord du bouton (reference : LP Oree
des Bles, cf CHROME-TP.md) */
.tp-chrome .tp-tete .tp-nv > a::after,
.tp-chrome .tp-tete .tp-nv > button::after {
content: "";
position: absolute;
left: 15px;
bottom: 6px;
width: 0;
height: 1.5px;
background: currentColor;
transition: width .35s var(--tpc-sortie);
}
.tp-chrome .tp-tete .tp-nv > a:hover::after {
width: calc(100% - 30px);
}
/* sur l'entree a chevron, le trait s'arrete avant l'icone */
.tp-chrome .tp-tete .tp-nv > button:hover::after {
width: calc(100% - 49px);
}
.tp-chrome .tp-tete .tp-actions {
display: flex;
align-items: center;
gap: 10px;
flex: 0 0 auto;
}
.tp-chrome .tp-burger {
display: none;
width: 44px;
height: 44px;
border-radius: 999px;
border: 1px solid var(--tpc-filet);
background: #fff;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
}
.tp-chrome .tp-burger svg {
width: 20px;
height: 20px;
stroke: var(--tpc-vert);
fill: none;
stroke-width: 1.9;
}
/* =========================================================================
* 5. Le mega-menu (un panneau, sur Programmes immobiliers). En absolu sous
* la barre : la zone collante est son bloc conteneur.
* ====================================================================== */
.tp-chrome .tp-panneau {
position: absolute;
left: 0;
right: 0;
top: 100%;
background: #fff;
border-top: 1px solid var(--tpc-filet);
box-shadow: 0 18px 40px rgba(15, 28, 28, .10);
padding: 34px 0 38px;
display: none;
}
.tp-chrome .tp-panneau.tp-ouvert {
display: block;
}
.tp-chrome .tp-panneau .tp-grille {
display: grid;
grid-template-columns: repeat(3, 1fr) minmax(0, 300px);
gap: 34px;
}
.tp-chrome .tp-panneau h3 {
padding-top: 13px;
border-top: 1px solid var(--tpc-filet);
}
.tp-chrome .tp-panneau ul {
display: grid;
gap: 9px;
}
.tp-chrome .tp-panneau ul a {
font-size: 14.5px;
font-weight: 500;
color: var(--tpc-texte);
background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-size: 0% 1.5px;
background-position: 0 100%;
transition: color .25s var(--tpc-sortie), background-size .35s var(--tpc-sortie);
}
.tp-chrome .tp-panneau ul a:hover {
color: var(--tpc-vert);
background-size: 100% 1.5px;
}
.tp-chrome .tp-encart {
background: var(--tpc-clair);
border-radius: 16px;
padding: 22px 24px;
}
.tp-chrome .tp-encart .tp-t {
font-size: 17px;
font-weight: 700;
color: var(--tpc-encre);
}
/* =========================================================================
* 6. Le tiroir plein ecran : navigation mobile (le burger de l'ancien theme
* n'ouvrait rien).
* ====================================================================== */
.tp-chrome.tp-tiroir {
position: fixed;
inset: 0;
z-index: 140;
background: var(--tpc-vert);
color: #fff;
display: flex;
flex-direction: column;
overflow-y: auto;
}
.tp-chrome.tp-tiroir[hidden] {
display: none;
}
.tp-chrome .tp-tiroir-barre {
display: flex;
align-items: center;
gap: 20px;
padding: 22px 32px;
border-bottom: 1px solid var(--tpc-ligne);
flex: 0 0 auto;
}
.tp-chrome .tp-tiroir-barre img {
height: 34px;
width: auto;
}
.tp-chrome .tp-fermer {
margin-left: auto;
width: 46px;
height: 46px;
flex: 0 0 46px;
border-radius: 999px;
border: 1px solid var(--tpc-ligne);
background: none;
color: #fff;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
transition: background .25s var(--tpc-sortie), color .25s var(--tpc-sortie);
}
.tp-chrome .tp-fermer:hover {
background: #fff;
color: var(--tpc-vert);
}
.tp-chrome .tp-fermer svg {
width: 20px;
height: 20px;
stroke: currentColor;
stroke-width: 1.8;
}
.tp-chrome .tp-tiroir-corps {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
gap: 60px;
padding: 56px 32px;
max-width: 1220px;
margin: 0 auto;
width: 100%;
flex: 1 1 auto;
}
.tp-chrome .tp-tiroir-rub {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.tp-chrome .tp-tiroir-rub a {
font-size: clamp(28px, 4.2vw, 46px);
font-weight: 700;
letter-spacing: -.03em;
line-height: 1.18;
color: #fff;
transition: color .2s var(--tpc-sortie), transform .3s var(--tpc-sortie);
}
.tp-chrome .tp-tiroir-rub a:hover {
color: var(--tpc-menthe);
transform: translateX(10px);
}
.tp-chrome .tp-tiroir-cote h3 {
padding-top: 14px;
border-top: 1px solid var(--tpc-ligne);
}
.tp-chrome .tp-tiroir-cote ul {
display: grid;
gap: 11px;
}
/* on ne vise que les liens de la LISTE : un selecteur .tp-tiroir-cote a
(deux classes) battrait .tp-btn--blanc (le bouton sortirait blanc sur
blanc, piege documente dans CHROME-TP.md) */
.tp-chrome .tp-tiroir-cote ul a {
font-size: 15px;
font-weight: 500;
color: #fff;
background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-size: 0% 1.5px;
background-position: 0 100%;
transition: color .25s var(--tpc-sortie), background-size .35s var(--tpc-sortie);
}
.tp-chrome .tp-tiroir-cote ul a:hover {
color: var(--tpc-menthe);
background-size: 100% 1.5px;
}
.tp-chrome .tp-tiroir-actions {
display: flex;
flex-direction: column;
gap: 11px;
margin-top: 30px;
}
/* =========================================================================
* 7. Le pied de page, etage 1 : le bloc de rappel sur le fond clair de la
* charte (#DFEEEB, pas le rose #FEEEEB du site actuel qui n'est pas dans
* la charte).
* ====================================================================== */
.tp-chrome .tp-pied-tete {
background: var(--tpc-clair);
}
.tp-chrome .tp-pied-tete .tp-wrap {
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
padding: 38px 32px;
}
.tp-chrome .tp-pied-tete p {
max-width: 56ch;
}
.tp-chrome .tp-pied-tete .tp-boutons {
margin-left: auto;
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
/* =========================================================================
* 8. Etage 2 : le socle vert #457275 (arbitre par Louis le 2026-08-21).
* Toutes les opacites de blanc ont ete remontees pour ce fond : calibrees
* sur l'encre elles tombaient sous le seuil AA de 4,5:1 (mesures dans
* chrome/_contraste.py). Rien sous 90 % de blanc sur ce vert.
* ====================================================================== */
.tp-chrome .tp-pied-socle {
position: relative;
overflow: hidden;
background: var(--tpc-vert);
color: #fff;
}
.tp-chrome .tp-pied-socle .tp-wrap {
position: relative;
z-index: 2;
}
.tp-chrome .tp-corps {
display: grid;
grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
gap: 48px;
padding: 52px 0 40px;
}
.tp-chrome .tp-marque-bloc img {
height: 38px;
width: auto;
}
.tp-chrome .tp-marque-bloc p {
max-width: 32ch;
}
.tp-chrome .tp-lieu,
.tp-chrome .tp-lieu:hover {
display: inline-flex;
align-items: flex-start;
gap: 9px;
margin-top: 18px;
font-size: 14.5px;
color: rgba(255, 255, 255, .94);
}
.tp-chrome .tp-lieu span {
background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-size: 0% 1.5px;
background-position: 0 100%;
transition: background-size .35s var(--tpc-sortie);
}
.tp-chrome .tp-lieu:hover span {
background-size: 100% 1.5px;
}
.tp-chrome .tp-lieu svg {
width: 17px;
height: 17px;
flex: 0 0 17px;
margin-top: 3px;
stroke: currentColor;
fill: none;
stroke-width: 1.8;
}
.tp-chrome .tp-reso {
display: flex;
gap: 8px;
margin-top: 22px;
}
.tp-chrome .tp-reso a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 999px;
border: 1px solid var(--tpc-ligne);
color: rgba(255, 255, 255, .92);
transition: background .22s, color .22s, border-color .22s;
}
.tp-chrome .tp-reso a:hover {
background: #fff;
color: var(--tpc-vert);
border-color: #fff;
}
.tp-chrome .tp-reso svg {
width: 17px;
height: 17px;
}
/* --- les 4 colonnes a filets ------------------------------------------ */
.tp-chrome .tp-colonnes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px 26px;
}
.tp-chrome .tp-colonnes h3 {
padding-top: 14px;
border-top: 1px solid var(--tpc-ligne);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.tp-chrome .tp-colonnes h3 a,
.tp-chrome .tp-colonnes h3 a:hover {
color: #fff;
}
.tp-chrome .tp-colonnes h3 a {
background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-size: 0% 1.5px;
background-position: 0 100%;
transition: background-size .35s var(--tpc-sortie);
}
.tp-chrome .tp-colonnes h3 a:hover {
background-size: 100% 1.5px;
}
.tp-chrome .tp-colonnes h3 .tp-plus {
display: none;
width: 14px;
height: 14px;
flex: 0 0 14px;
stroke: currentColor;
fill: none;
stroke-width: 2;
transition: transform .25s var(--tpc-sortie);
}
/* le contenu des colonnes vient de dynamic_sidebar : le widget sort son
propre , et si on lui a donne un titre il est masque, la colonne a
deja le sien (pattern du footer Nacarat, incident du 2026-08-05) */
.tp-chrome .tp-col-liens h3,
.tp-chrome .tp-col-liens .tp-col-titre-widget,
.tp-chrome .tp-col-liens .widget-title {
display: none !important;
}
.tp-chrome .tp-col-liens ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 10px;
}
.tp-chrome .tp-col-liens a {
font-size: 14.5px;
font-weight: 500;
color: #fff;
background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-size: 0% 1.5px;
background-position: 0 100%;
transition: color .25s var(--tpc-sortie), background-size .35s var(--tpc-sortie);
}
.tp-chrome .tp-col-liens a:hover {
color: var(--tpc-menthe);
background-size: 100% 1.5px;
}
/* --- etage 3 : le bandeau legal ---------------------------------------- */
.tp-chrome .tp-pied-legal {
display: flex;
align-items: center;
gap: 13px 22px;
flex-wrap: wrap;
font-size: 13px;
color: rgba(255, 255, 255, .90);
padding-top: 22px;
border-top: 1px solid var(--tpc-ligne);
/* la reserve sous le bandeau est la place ou vit la signature M1 : sans
elle, le wordmark passerait derriere les colonnes de liens */
padding-bottom: clamp(50px, 6vw, 84px);
}
.tp-chrome .tp-pied-legal ul {
display: flex;
gap: 10px 20px;
flex-wrap: wrap;
margin-left: auto;
}
.tp-chrome .tp-pied-legal a,
.tp-chrome .tp-pied-legal span {
color: rgba(255, 255, 255, .90);
}
.tp-chrome .tp-pied-legal a {
background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-size: 0% 1px;
background-position: 0 100%;
transition: color .25s var(--tpc-sortie), background-size .35s var(--tpc-sortie);
}
.tp-chrome .tp-pied-legal a:hover {
color: var(--tpc-menthe);
background-size: 100% 1px;
}
/* =========================================================================
* 9. LA SIGNATURE (M1 + C1) : TISSERIN PROMOTION en une ligne, filigrane
* blanc a 22 %, calee sur la largeur du conteneur. Le mot se DISSOUT
* dans le fond par un masque en degrade, opacite 0 avant le bord : pas
* de coupe nette (la demande faite sur le pied Nacarat vaut ici).
* ====================================================================== */
.tp-chrome .tp-marque {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
pointer-events: none;
overflow: hidden;
font-weight: 800;
text-align: center;
color: rgba(255, 255, 255, .22);
font-size: clamp(30px, 7.2vw, 110px);
line-height: .8;
letter-spacing: -.04em;
white-space: nowrap;
transform: translateY(30%);
-webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 20%, transparent 64%);
mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 20%, transparent 64%);
}
.tp-chrome .tp-marque .tp-l2 {
margin-left: .22em;
}
/* =========================================================================
* 10. Passe tablette et mobile.
* ====================================================================== */
@media (max-width: 1080px) {
.tp-chrome .tp-tete .tp-nv {
display: none;
}
/* une fois les navs masquees, ce sont les actions qui se calent a
droite (dans la maquette c'etait nv-g qui portait le margin auto) */
.tp-chrome .tp-tete .tp-actions {
margin-left: auto;
}
.tp-chrome .tp-burger {
display: inline-flex;
}
.tp-chrome .tp-panneau {
display: none !important;
}
.tp-chrome .tp-corps {
grid-template-columns: 1fr;
gap: 36px;
}
}
@media (max-width: 900px) {
/* le tiroir s'empile : rubriques puis raccourcis (sans cette bande, la
colonne de 340px ecrase les rubriques sur un ecran etroit) */
.tp-chrome .tp-tiroir-corps {
grid-template-columns: 1fr;
gap: 40px;
padding: 36px 22px;
}
.tp-chrome .tp-tiroir-barre {
padding: 16px 22px;
}
}
@media (max-width: 760px) {
.tp-chrome .tp-wrap {
padding: 0 20px;
}
.tp-chrome.tp-svc .tp-wrap {
gap: 12px;
}
.tp-chrome.tp-svc .tp-service {
display: none;
}
body.redesign-tisserin .tp-chrome .tp-pied-tete h2 {
font-size: 22px !important;
}
.tp-chrome .tp-pied-tete .tp-boutons {
margin-left: 0;
width: 100%;
}
/* les colonnes deviennent des accordeons : plus AUCUNE colonne
escamotee sur mobile (le footer actuel en masque deux en hidden-xs) */
.tp-chrome .tp-colonnes {
grid-template-columns: 1fr;
gap: 0;
}
.tp-chrome .tp-colonnes > div {
border-top: 1px solid var(--tpc-ligne);
}
.tp-chrome .tp-colonnes > div:first-child {
border-top: 0;
}
.tp-chrome .tp-colonnes h3 {
border-top: 0;
padding: 16px 0;
cursor: pointer;
}
body.redesign-tisserin .tp-chrome .tp-colonnes h3 {
margin: 0 !important;
}
.tp-chrome .tp-colonnes h3 .tp-plus {
display: block;
}
.tp-chrome .tp-colonnes .tp-col-liens {
max-height: 0;
overflow: hidden;
transition: max-height .3s var(--tpc-sortie);
}
.tp-chrome .tp-colonnes .tp-col-liens ul {
gap: 0;
}
.tp-chrome .tp-colonnes .tp-col-liens li {
padding-bottom: 11px;
}
.tp-chrome .tp-colonnes .tp-deplie .tp-col-liens {
max-height: 440px;
}
.tp-chrome .tp-colonnes .tp-deplie h3 .tp-plus {
transform: rotate(45deg);
}
.tp-chrome .tp-pied-legal ul {
margin-left: 0;
}
/* M1 sur une seule ligne a 390px, c'est 33px de corps : un murmure. Sur
mobile la signature s'empile en deux lignes, a 14vw, et le fondu est
repousse en fin de course (le degrade desktop mangerait PROMOTION) */
.tp-chrome .tp-marque {
font-size: 14vw;
line-height: .84;
transform: none;
white-space: normal;
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, rgba(0, 0, 0, .78) 79%, rgba(0, 0, 0, .34) 91%, transparent 100%);
mask-image: linear-gradient(180deg, #000 0%, #000 60%, rgba(0, 0, 0, .78) 79%, rgba(0, 0, 0, .34) 91%, transparent 100%);
}
.tp-chrome .tp-marque .tp-l1,
.tp-chrome .tp-marque .tp-l2 {
display: block;
}
.tp-chrome .tp-marque .tp-l2 {
margin-left: 0;
}
.tp-chrome .tp-pied-legal {
padding-bottom: 112px;
}
}
/* =========================================================================
* 11. Telephone COUCHE (844x390, 667x375...) : en largeur il tombe dans les
* bandes tablette voire desktop, avec moins de 420px de haut. La bande
* est en FIN de feuille pour gagner a specificite egale
* (cf design-web.md).
* ====================================================================== */
@media (max-height: 560px) {
.tp-chrome .tp-tete .tp-wrap {
height: 62px;
}
.tp-chrome .tp-tete.tp-compact .tp-wrap {
height: 56px;
}
.tp-chrome .tp-tete .tp-logo img,
.tp-chrome .tp-tete.tp-compact .tp-logo img {
height: 22px;
}
/* si le panneau est encore la (>1080px de large, ecran court), il doit
pouvoir defiler dans ce qui reste d'ecran */
.tp-chrome .tp-panneau {
max-height: calc(100vh - 70px);
overflow-y: auto;
}
/* le tiroir defile deja (overflow-y:auto) : on resserre pour que les
5 rubriques et les actions tiennent dans 390px de haut */
.tp-chrome .tp-tiroir-barre {
padding: 12px 22px;
}
.tp-chrome .tp-tiroir-barre img {
height: 26px;
}
.tp-chrome .tp-tiroir-corps {
padding: 22px 22px 28px;
gap: 24px;
}
.tp-chrome .tp-tiroir-rub a {
font-size: clamp(20px, 6.4vh, 30px);
}
.tp-chrome .tp-tiroir-actions {
margin-top: 18px;
}
}