)
- S03, variante vitrine · section tib-services--vitrine ; un widget Qi
« Vitrine d'élément » (Item Showcase, catalogue Q4), image au centre
- S07 · section tib-avancer ; colonne tib-avancer__a ; étapes tib-etapes,
chacune tib-etape ; encart tib-encart, qui reçoit tib-encart__promesse,
tib-encart__note (Rating Showcase, catalogue B7), tib-encart__cta,
tib-encart__rassure
- S08 · section tib-sources ; titre tib-sources__tete ; liste
tib-sources__liste
Aucun fond ni couleur dans Elementor sur ces éléments.
============================================================ */
/* 19.1 · Enjeux — la carte qui s'ouvre
DECISIONS 21/09 : le chiffre, le titre et la phrase restent visibles ;
le détail et sa source s'ouvrent dessous. L'ouverture reprend le dessin
des FAQs de Qi (catalogue Q7, style encadré) : une barre sur toute la
largeur de la carte, un + qui devient −. */
.tib-enjeux .e-con.tib-enj{
position:relative;
overflow:hidden;
padding:34px 34px 0;
background-color:#fff;
border-radius:16px;
transition:box-shadow .25s ease-out;
}
.tib-enjeux .e-con.tib-enj:hover{ box-shadow:0 22px 44px -26px rgba(1,9,106,.30); }
/* Fermées, les cartes d'une rangée ont la même hauteur et leurs barres
s'alignent. Dès qu'une s'ouvre, les autres reprennent leur hauteur propre :
pas de vide sous une carte voisine. */
.tib-enjeux .tib-enj-grille:has(.ui-state-active) .e-con.tib-enj{ align-self:flex-start; }
/* Le chiffre ou le mot-repère : l'accent, admis à ce corps (CHARTE § I) */
.tib-enj__chiffre .qodef-custom-font{
margin:0;
font-family:"Outfit",sans-serif; font-weight:300;
font-size:var(--tib-fs-chiffre); line-height:1.1; letter-spacing:-.015em;
color:var(--tib-acc);
}
/* Spécificité renforcée : Elementor pose .e-con .elementor-widget.elementor-widget
{margin-block-end:0} et .elementor.elementor .e-con > .elementor-widget{max-width:100%} */
.tib-enjeux .e-con.tib-enj > .elementor-widget.tib-enj__titre{ margin:14px 0 28px; }
.tib-enj__titre .qodef-section-title .qodef-m-title{
font-size:var(--tib-fs-carte); line-height:1.25; letter-spacing:-.01em;
}
.tib-enj__titre .qodef-section-title .qodef-m-text{
font-size:var(--tib-fs-carte-texte); line-height:1.6; color:var(--tib-soft);
}
/* La barre « Lire le détail », calée en bas de la carte, bord à bord */
.tib-enjeux .e-con.tib-enj > .elementor-widget.tib-enj__detail{
width:calc(100% + 68px); max-width:none;
margin:auto -34px 0;
}
.tib-enj__detail .qodef-accordion{ border-top:1px solid var(--tib-bord); }
.tib-enj__detail .qodef-accordion.qodef-layout--simple .qodef-accordion-title{
margin:0;
padding:18px 34px;
gap:16px;
border:0;
font-family:"Outfit",sans-serif; font-weight:500;
font-size:var(--tib-fs-carte-texte); line-height:1.3; letter-spacing:.01em;
color:var(--tib-navy);
}
.tib-enj__detail .qodef-accordion.qodef-layout--simple .qodef-accordion-title:hover,
.tib-enj__detail .qodef-accordion.qodef-layout--simple .qodef-accordion-title.ui-state-active{
background-color:var(--tib-band);
}
/* Le + des FAQs de Qi, dans une pastille à la teinte de l'univers */
.tib-enj__detail .qodef-accordion.qodef-layout--simple .qodef-accordion-title .qodef-accordion-mark{
width:30px; height:30px;
border-radius:50%;
background-color:var(--tib-accL);
transition:background-color .2s ease-out;
}
.tib-enj__detail .qodef-accordion.qodef-layout--simple .qodef-accordion-title .qodef-accordion-mark > span{ display:none; }
.tib-enj__detail .qodef-accordion-mark:before,
.tib-enj__detail .qodef-accordion-mark:after{
content:"";
position:absolute; top:50%; left:50%;
width:12px; height:2px; margin:-1px 0 0 -6px;
border-radius:1px;
background-color:var(--tib-acc);
transition:transform .25s ease-out, background-color .2s ease-out;
}
.tib-enj__detail .qodef-accordion-mark:after{ transform:rotate(90deg); }
.tib-enj__detail .qodef-accordion.qodef-layout--simple .qodef-accordion-title.ui-state-active .qodef-accordion-mark{
background-color:var(--tib-acc);
}
.tib-enj__detail .qodef-accordion-title.ui-state-active .qodef-accordion-mark:before,
.tib-enj__detail .qodef-accordion-title.ui-state-active .qodef-accordion-mark:after{ background-color:#fff; }
.tib-enj__detail .qodef-accordion-title.ui-state-active .qodef-accordion-mark:after{ transform:rotate(0deg); }
/* Le détail, sur le blanc de la carte, sous la barre teintée */
.tib-enj__detail .qodef-accordion.qodef-layout--simple .qodef-accordion-content{
margin:0;
padding:22px 34px 30px;
}
.tib-enj__detail .qodef-accordion-title.ui-state-active + .qodef-accordion-content{ height:auto !important; }
.tib-enj__detail .qodef-accordion.qodef-layout--simple .qodef-accordion-content p{
margin:0 0 12px;
font-size:var(--tib-fs-carte-texte); line-height:1.65; color:var(--tib-ink);
}
.tib-enj__detail .qodef-accordion.qodef-layout--simple .qodef-accordion-content p:last-child{ margin-bottom:0; }
/* La source, en note sous le détail */
.tib-enj__detail .qodef-accordion-content-inner small{
display:block;
padding-top:12px;
border-top:1px dashed rgba(1,9,106,.16);
font-size:var(--tib-fs-mention); line-height:1.55; color:var(--tib-soft);
}
/* 19.2 · Services, variante vitrine — Item Showcase de Qi (catalogue Q4)
Trois services de part et d'autre d'une image ; chaque titre mène à sa
page mission (DECISIONS 21/09), toute l'entrée est cliquable. */
.tib-services--vitrine .qodef-qi-item-showcase{ align-items:center; }
.tib-services--vitrine .qodef-qi-item-showcase .qodef-m-image{
flex:0 0 34%; max-width:34%;
padding:0 52px;
}
.tib-services--vitrine .qodef-qi-item-showcase .qodef-m-image img{
width:100%; height:auto;
aspect-ratio:4 / 5;
object-fit:cover; object-position:80% 50%; /* le bandeau est sombre à gauche */
border-radius:16px;
}
.tib-services--vitrine .qodef-qi-item-showcase .qodef-m-items{ flex:1 1 0; min-width:0; }
.tib-services--vitrine .qodef-qi-item-showcase .qodef-m-item{
position:relative;
margin-bottom:40px;
padding-top:22px;
border-top:1px solid var(--tib-bord);
}
/* Le filet du logo, à l'accent, côté image ; il traverse au survol */
.tib-services--vitrine .qodef-m-item:before{
content:"";
position:absolute; top:-1px;
width:48px; height:2px;
background-color:var(--tib-acc);
transition:width .35s ease-out;
}
.tib-services--vitrine .qodef--left .qodef-m-item:before{ right:0; }
.tib-services--vitrine .qodef--right .qodef-m-item:before{ left:0; }
.tib-services--vitrine .qodef-m-item:hover:before{ width:100%; }
.tib-services--vitrine .qodef-qi-item-showcase .qodef-e-title{
margin:0 0 8px;
font-size:var(--tib-fs-carte); line-height:1.28; letter-spacing:-.01em;
}
.tib-services--vitrine .qodef-qi-item-showcase .qodef-e-title-link{ color:var(--tib-navy); }
.tib-services--vitrine .qodef-qi-item-showcase .qodef-e-title-link:hover{ color:var(--tib-navy); }
.tib-services--vitrine .qodef-e-title-link:after{ content:""; position:absolute; inset:0; z-index:1; }
/* La flèche du thème, à l'accent, après le titre */
.tib-services--vitrine .qodef-e-title:after{
content:"";
display:inline-block;
width:10px; height:10px; margin-left:9px;
background-color:var(--tib-acc);
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.018 10.009 0 8.991l7.569-7.582H1.723L1.737 0h8.26v8.274H8.574l.013-5.847Z'/%3E%3C/svg%3E") no-repeat center / contain;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.018 10.009 0 8.991l7.569-7.582H1.723L1.737 0h8.26v8.274H8.574l.013-5.847Z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.tib-services--vitrine .qodef-m-item:hover .qodef-e-title-link{ text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
.tib-services--vitrine .qodef-qi-item-showcase .qodef-e-text{
font-size:var(--tib-fs-carte-texte); line-height:1.6; color:var(--tib-soft);
}
/* 19.2 ter (20/10/2026) · Le cabinet — « Avec qui le cabinet travaille » (#partenaires)
et phrase de conclusion des constats. */
.tib-part{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 56px; }
.tib-part li{ display:flex; flex-direction:column; gap:4px; margin:0; padding:20px 0; border-top:1px solid var(--tib-bord); }
.tib-part li:before{ content:none; }
.tib-part__nom{ font-family:"Outfit",sans-serif; font-size:var(--tib-fs-carte); line-height:1.3; letter-spacing:-.01em; color:var(--tib-navy); }
.tib-part__nom a{ color:var(--tib-navy); text-decoration:none; }
.tib-part__nom a:after{ content:"\2197"; margin-left:8px; font-size:.75em; vertical-align:.1em; }
.tib-part__nom a:hover{ text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
.tib-part__d{ font-size:var(--tib-fs-carte-texte); line-height:1.55; color:var(--tib-soft); }
.tib-constats__fin p{ max-width:760px; margin:0; }
@media (max-width:767px){ .tib-part{ grid-template-columns:1fr; } }
/* 19.3 · Pour avancer — les étapes à gauche, l'encart à droite
L'encart prend la hauteur de la colonne et porte la note et le bouton :
aucune colonne ne laisse de vide sous son contenu (CHARTE § VI). */
.tib-etapes .e-con.tib-etape{
position:relative;
padding:2px 0 2px 28px;
border-left:1px solid var(--tib-bord);
}
.tib-etapes .e-con.tib-etape:before{
content:"";
position:absolute; left:-1px; top:0;
width:2px; height:30px;
background-color:var(--tib-acc);
}
/* Le numéro d'étape en bleu (CHARTE § I), sans le filet des surtitres */
.tib-etape .qodef-section-title .qodef-m-subtitle{
margin-bottom:6px;
letter-spacing:.12em !important;
color:var(--tib-navy) !important;
}
.tib-etape .qodef-section-title .qodef-m-subtitle:after{ display:none; }
.tib-etape .qodef-section-title .qodef-m-title{ font-size:var(--tib-fs-carte); line-height:1.3; letter-spacing:-.01em; }
.tib-etape .qodef-section-title .qodef-m-text{ font-size:var(--tib-fs-carte-texte); line-height:1.6; color:var(--tib-soft); }
/* Piste B, retenue par Sven le 06/10 : à gauche les étapes et le bouton,
calé en bas ; à droite la photo du bureau sur toute la hauteur, et
l'encart de contact posé dessus, qui déborde vers la gauche. */
.tib-avancer .e-con.tib-avancer__a{ flex:1 1 0; min-width:0; }
/* Les paragraphes du bloc : préfixe .tib-avancer pour passer devant la marge
des paragraphes du thème (body[class*="onegoal-core"] p, 10 px) */
.tib-avancer .tib-avancer__etiquette p{
margin:6px 0 0;
font-family:"Outfit",sans-serif; font-weight:500;
font-size:var(--tib-fs-etiquette); line-height:1.4; letter-spacing:.16em; text-transform:uppercase;
color:var(--tib-soft);
}
.tib-avancer .e-con.tib-avancer__cta{ margin-top:auto; padding-top:10px; }
.tib-avancer .tib-avancer__rassure p{ margin:0; font-size:var(--tib-fs-petit); line-height:1.5; color:var(--tib-soft); }
:is(.tib-avancer, .tib-contact) .e-con.tib-photo{
position:relative;
flex:0 0 470px; width:470px; max-width:470px;
align-self:stretch;
min-height:560px;
}
.tib-photo .elementor-widget.tib-photo__img{
position:absolute; inset:0;
width:100%; max-width:none; height:100%;
margin:0;
}
.tib-photo__img .elementor-widget-container{ height:100%; }
:is(.tib-avancer, .tib-contact) .tib-photo__img img{
display:block; width:100%; height:100%;
object-fit:cover; object-position:30% 60%;
border-radius:16px;
}
:is(.tib-avancer, .tib-contact) .e-con.tib-encart{
position:absolute; left:-56px; bottom:40px; z-index:1;
width:340px; max-width:340px;
padding:26px 28px;
background-color:#fff;
border-radius:14px;
box-shadow:0 26px 52px -26px rgba(1,9,106,.38);
}
/* Qui répond : le portrait rond, le nom, les titres */
.tib-encart .e-con.tib-encart__qui{ flex-wrap:nowrap; }
.tib-encart__qui .tib-encart__photo{ flex:0 0 52px; width:52px; }
.tib-encart__photo .qodef-m-image img{
display:block; width:52px; height:52px;
border-radius:50%; object-fit:cover; object-position:50% 14%;
}
.tib-encart__qui .tib-encart__nom{ flex:1 1 0; min-width:0; }
.tib-encart .tib-encart__nom p{ margin:0; font-size:var(--tib-fs-mention); line-height:1.4; color:var(--tib-soft); }
.tib-encart__nom strong{
display:block; margin-bottom:2px;
font-family:"Outfit",sans-serif; font-weight:400;
font-size:var(--tib-fs-intro); line-height:1.25; letter-spacing:-.01em;
color:var(--tib-navy) !important;
}
.tib-encart .tib-encart__promesse p{
margin:0; padding-bottom:16px;
border-bottom:1px solid var(--tib-bord);
font-size:var(--tib-fs-carte-texte); line-height:1.55; color:var(--tib-ink);
}
.tib-encart__promesse strong{ font-weight:700; color:var(--tib-navy) !important; }
/* Téléphone et rendez-vous, chacun précédé de son picto à l'accent */
.tib-encart .tib-encart__contact p{ margin:0 0 6px; }
.tib-encart .tib-encart__contact p:last-child{ margin-bottom:0; }
.tib-encart__contact a{
display:inline-flex; align-items:center; gap:12px;
min-height:32px;
font-size:var(--tib-fs-carte-texte); font-weight:600; text-decoration:none;
color:var(--tib-navy);
}
.tib-encart__contact a:hover{ text-decoration:underline; text-underline-offset:4px; }
.tib-encart__contact a:before{
content:""; flex:0 0 18px; width:18px; height:18px;
background-color:var(--tib-acc);
}
.tib-encart__contact .tib-c--tel a:before{
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M5 3.5h3l1.5 4-2 1.3a11 11 0 0 0 5.7 5.7l1.3-2 4 1.5v3a2 2 0 0 1-2 2A15 15 0 0 1 3 5.5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E") no-repeat center / contain;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M5 3.5h3l1.5 4-2 1.3a11 11 0 0 0 5.7 5.7l1.3-2 4 1.5v3a2 2 0 0 1-2 2A15 15 0 0 1 3 5.5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.tib-encart__contact .tib-c--rdv a:before{
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") no-repeat center / contain;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* La note (Rating Showcase) : Outfit, étoiles en bleu de marque (CHARTE § II),
sans vignettes de clients ; aucun balisage d'avis (DECISIONS 29/09) */
/* Sur une ligne : étoiles, 5/5, « avis Google » (le nombre d'avis retiré, Sven 12/10) */
.tib-encart__note .qodef-rating-showcase .qodef-rating-showcase-inner{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; }
.tib-encart__note .qodef-rating-showcase .qodef-m-content{ display:contents; }
.tib-encart__note .qodef-rating-showcase .qodef-m-stars-holder{ order:1; margin:0; }
.tib-encart__note .qodef-rating-showcase .qodef-m-stars-holder svg{ width:12px; }
.tib-encart__note .qodef-rating-showcase .qodef-m-stars svg{ margin-right:4px; stroke:var(--tib-navy); }
.tib-encart__note .qodef-rating-showcase .qodef-m-stars.qodef-m-stars-active svg{ fill:var(--tib-navy); }
.tib-encart__note .qodef-rating-showcase .qodef-m-rating{
order:2; display:flex;
font-family:"Nunito Sans",sans-serif; font-weight:700;
font-size:var(--tib-fs-mention); line-height:1.4; letter-spacing:0;
color:var(--tib-navy);
}
.tib-encart__note .qodef-rating-showcase .qodef-m-rating:after{ content:"/5"; }
.tib-encart__note .qodef-rating-showcase .qodef-m-text{
order:3; margin:0;
font-size:var(--tib-fs-mention); line-height:1.4; color:var(--tib-soft);
}
.tib-encart__note .qodef-rating-showcase .qodef-m-text:before{ content:"· "; }
/* 19.4 · Sources — en petit, le titre à gauche, la liste à droite */
.tib-sources .elementor-element.tib-sources__tete{ flex:0 0 28%; max-width:28%; }
.tib-sources .elementor-element.tib-sources__liste{ flex:1 1 0; min-width:0; }
.tib-sources .qodef-section-title .qodef-m-title{ font-size:var(--tib-fs-chapeau); line-height:1.2; }
.tib-sources__liste ul{
list-style:none;
margin:0 0 18px; padding:0;
border-top:1px solid rgba(1,9,106,.12);
}
.tib-sources__liste li{
margin:0; padding:11px 0;
border-bottom:1px solid rgba(1,9,106,.12);
font-size:var(--tib-fs-petit); line-height:1.55; color:var(--tib-soft);
}
.tib-sources__liste li:before{ display:none; }
.tib-sources__liste li strong{ font-weight:600; color:var(--tib-ink) !important; }
.tib-sources__liste a,
.tib-sources__liste a strong{ color:var(--tib-navy) !important; }
.tib-sources__liste a{
text-decoration:underline !important;
text-decoration-color:var(--tib-acc);
text-decoration-thickness:1px;
text-underline-offset:3px;
}
.tib-sources__liste p{ margin:0; font-size:var(--tib-fs-petit); line-height:1.6; color:var(--tib-soft); }
/* 19.5 · Tablette */
@media (max-width:1024px){
.tib-services--vitrine .qodef-qi-item-showcase{ flex-wrap:wrap; align-items:flex-start; column-gap:44px; }
.tib-services--vitrine .qodef-qi-item-showcase .qodef-m-image{
position:static; order:-1; display:block;
flex:0 0 100%; width:100%; max-width:100%;
padding:0 0 40px !important;
}
.tib-services--vitrine .qodef-qi-item-showcase .qodef-m-image img{ aspect-ratio:16 / 7; object-position:72% 50%; }
.tib-services--vitrine .qodef-qi-item-showcase .qodef-m-items{ left:0; flex:1 1 0; width:auto; }
.tib-services--vitrine .qodef--left .qodef-m-item:before{ right:auto; left:0; }
.tib-services--vitrine .qodef-qi-item-showcase .qodef-m-item:last-child{ margin-bottom:0; }
/* Pour avancer : la photo passe sous les étapes, l'encart chevauche son bas */
.tib-avancer .e-con.tib-avancer__a,
.tib-contact .e-con.tib-ct__gauche,
:is(.tib-avancer, .tib-contact) .e-con.tib-photo{ flex:0 0 100%; width:100%; max-width:none; }
:is(.tib-avancer, .tib-contact) .e-con.tib-photo{ min-height:0; }
.tib-photo .elementor-widget.tib-photo__img{ position:relative; inset:auto; height:360px; }
:is(.tib-avancer, .tib-contact) .e-con.tib-encart{ position:relative; left:auto; bottom:auto; width:auto; max-width:none; margin:-64px 14px 0; }
.tib-sources .elementor-element.tib-sources__tete{ flex:0 0 auto; max-width:none; width:100%; }
}
/* Tablette en largeur : les cartes d'enjeux restent deux par rangée
(Elementor les passe à 100 % sous 1024 px) */
@media (min-width:768px) and (max-width:1024px){
.tib-enjeux .tib-enj-grille > .e-con.tib-enj{ --width:calc(50% - 12px); width:calc(50% - 12px); }
/* Pour avancer : l'encart garde une largeur de carte et mord sur la photo */
:is(.tib-avancer, .tib-contact) .e-con.tib-encart{ max-width:520px; margin:-120px 0 0 32px; }
}
/* 19.6 · Mobile — et les titres du gabarit, qui sortaient en 50 px (H1)
et 40 px (H2) sur un écran de 390 px */
@media (max-width:767px){
.tib-enjeux .e-con.tib-enj{ padding:26px 22px 0; }
.tib-enjeux .e-con.tib-enj > .elementor-widget.tib-enj__detail{ width:calc(100% + 44px); margin:auto -22px 0; }
.tib-enj__detail .qodef-accordion.qodef-layout--simple .qodef-accordion-title{ padding:16px 22px; }
.tib-enj__detail .qodef-accordion.qodef-layout--simple .qodef-accordion-content{ padding:18px 22px 24px; }
.tib-enj__chiffre .qodef-custom-font{ font-size:var(--tib-fs-chiffre); }
.tib-enj__titre .qodef-section-title .qodef-m-title{ font-size:var(--tib-fs-carte); }
.tib-services--vitrine .qodef-qi-item-showcase .qodef-m-items{ flex:0 0 100%; }
.tib-services--vitrine .qodef-qi-item-showcase .qodef-m-items.qodef--left{ margin-bottom:32px; }
.tib-services--vitrine .qodef-qi-item-showcase .qodef-m-image{ padding-bottom:32px !important; }
.tib-services--vitrine .qodef-qi-item-showcase .qodef-m-image img{ aspect-ratio:16 / 9; }
.tib-services--vitrine .qodef-qi-item-showcase .qodef-m-item{ margin-bottom:32px; }
.tib-services--vitrine .qodef-qi-item-showcase .qodef-e-title{ font-size:var(--tib-fs-carte); }
.tib-photo .elementor-widget.tib-photo__img{ height:280px; }
:is(.tib-avancer, .tib-contact) .e-con.tib-encart{ padding:22px; }
.tib-hero .qodef-section-title .qodef-m-title{ font-size:var(--tib-fs-page); line-height:1.12; }
.tib-s .qodef-section-title h2.qodef-m-title{ font-size:var(--tib-fs-section); line-height:1.18; }
.tib-sources .qodef-section-title .qodef-m-title{ font-size:var(--tib-fs-chapeau); }
}
@media (prefers-reduced-motion:reduce){
.tib-enjeux .e-con.tib-enj,
.tib-enj__detail .qodef-accordion-mark:before,
.tib-enj__detail .qodef-accordion-mark:after,
.tib-services--vitrine .qodef-m-item:before{ transition:none; }
}
/* 19.7 · Autres métiers — [tib_voisins style="cartes"], retenu par Sven le 06/10
Les cartes du bloc Bannières de Qi, légende sous l'image, sans voile sur la
photo. L'univers se lit dans l'accent (filet, flèches) et dans le lexique :
le repère de chaque carte (la caisse de retraite côté santé) vient du champ
« Attribut de titre » de l'entrée de menu, la phrase du champ « Description ».
Dans Elementor, la section tib-voisins garde son titre et un bouton « Tout
l'univers … » dans un conteneur en ligne tib-voisins__tete. */
.tib-crt .tib-cartes{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.tib-crt .tib-cartes.tib-cartes-n3,
.tib-crt .tib-cartes.tib-cartes-n6{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.tib-crt .tib-cartes.tib-cartes-n5{ grid-template-columns:repeat(6,minmax(0,1fr)); }
.tib-crt .tib-cartes-n5 > .tib-carte{ grid-column:span 2; }
.tib-crt .tib-cartes-n5 > .tib-carte:nth-child(n+4){ grid-column:span 3; }
.tib-crt .tib-carte{
display:flex; flex-direction:column;
height:auto; /* la carte du cabinet (§ 27) porte aussi la classe tib-carte et une hauteur fixe */
overflow:hidden;
border-radius:16px;
background-color:#fff;
color:inherit; text-decoration:none;
transition:box-shadow .25s ease-out;
}
.tib-crt .tib-carte:hover{ color:inherit; box-shadow:0 22px 44px -26px rgba(1,9,106,.30); }
.tib-crt .tib-carte:focus-visible{ outline:2px solid var(--tib-navy); outline-offset:3px; }
.tib-carte__media{ flex:0 0 auto; height:220px; overflow:hidden; background-color:var(--tib-accL); }
/* Page sans image à la une : un aplat hachuré à la teinte de l'univers, en
attendant la photo (Sven, 11/10 : « une sorte d'image placeholder ») */
[class*="__media--vide"]{
background-color:var(--tib-accL);
background-image:repeating-linear-gradient(135deg, rgba(1,9,106,.06) 0 1px, transparent 1px 16px);
}
.tib-crt .tib-carte__media img{
display:block; width:100%; height:100%;
object-fit:cover;
transition:transform .5s ease-out;
}
.tib-crt .tib-carte:hover .tib-carte__media img{ transform:scale(1.04); }
.tib-carte__corps{
flex:1 1 auto;
display:flex; flex-direction:column; align-items:flex-start; gap:9px;
padding:22px 28px 26px;
}
.tib-crt .tib-carte__repere{
display:flex; align-items:center; gap:10px;
margin:0;
font-family:"Outfit",sans-serif; font-weight:500;
font-size:var(--tib-fs-etiquette); line-height:1.4; letter-spacing:.16em; text-transform:uppercase;
color:var(--tib-navy);
}
.tib-carte__repere:before{ content:""; flex:0 0 26px; height:2px; background-color:var(--tib-acc); }
.tib-crt .tib-carte__titre{
margin:0;
font-weight:400; font-size:var(--tib-fs-carte); line-height:1.2; letter-spacing:-.01em;
color:var(--tib-navy);
}
.tib-crt .tib-carte__texte{ margin:0; font-size:var(--tib-fs-carte-texte); line-height:1.6; color:var(--tib-soft); }
.tib-carte__lien{
display:inline-flex; align-items:center; gap:8px;
margin-top:auto; padding-top:6px;
font-size:var(--tib-fs-mention); font-weight:700;
color:var(--tib-navy);
}
.tib-carte__lien svg{ width:10px; height:10px; }
.tib-carte__lien svg path{ fill:var(--tib-acc); }
.tib-crt .tib-carte:hover .tib-carte__lien{ text-decoration:underline; text-underline-offset:4px; }
/* La flèche du bouton « Tout l'univers … » à l'accent */
.tib-voisins__tete .qodef-button .qodef-m-arrow{ color:var(--tib-acc); }
.tib-voisins__tete .qodef-button .qodef-m-arrow svg path{ fill:currentColor; }
@media (max-width:767px){
.tib-crt .tib-cartes,
.tib-crt .tib-cartes[class*="tib-cartes-n"]{ grid-template-columns:1fr; gap:16px; }
.tib-crt .tib-cartes[class*="tib-cartes-n"] > .tib-carte{ grid-column:auto; }
.tib-carte__media{ height:180px; }
.tib-carte__corps{ padding:18px 20px 22px; }
.tib-crt .tib-carte__titre{ font-size:var(--tib-fs-carte); }
}
@media (prefers-reduced-motion:reduce){
.tib-carte__media img, .tib-crt .tib-carte{ transition:none; }
.tib-crt .tib-carte:hover .tib-carte__media img{ transform:none; }
}
/* ============================================================
20 · GABARIT MOMENT — ce qui s'ajoute au gabarit métier
Ajouté le 06/10/2026, essai sur la page 8757 (« Je cède mon
entreprise »). Le reste de la page reprend les blocs du § 19.
20.1 hero sans photo · 20.2 cartes de détail 3 + 2
20.3 accompagnement : Qi « Présentation chronologique » (classe tib-tl)
20.5 réponse courte · 20.6 tableau comparatif · 20.7 la vraie question
(20.4, sections en attente, et 20.8, profils en pastilles : retirés le
08/10, plus aucune page ne s'en servait)
============================================================ */
/* 20.1 Tant qu'aucune photo n'est posée, le bandeau prend le bleu de
marque : le titre blanc reste lisible */
.e-con.tib-hero{ background-color:#01096a; }
/* 20.2 Les cartes s'étirent : cinq cartes réglées à 31 % donnent 3 + 2,
la deuxième rangée se partage la largeur (CHARTE, composition) */
.tib-enjeux .tib-enj-grille > .e-con.tib-enj{ --flex-grow:1; flex-grow:1; }
/* 20.3 Comment le cabinet vous accompagne — trois étapes sur une ligne
de temps. Disposition « horizontal-standard » ; le point se cale au
début de chaque colonne, le texte à gauche. Les flèches de Qi sont
masquées : les étapes tiennent toutes à l'écran, et se superposent
sous 768 px au lieu de défiler une par une. */
/* Le script de Qi déplace le point dans la ligne, pose la hauteur de la
ligne (top) et celle du texte (height) en style en ligne : d'où les
!important, qui calent tout sur une seule règle. */
.tib-tl .qodef-qi-timeline .qodef-nav-prev,
.tib-tl .qodef-qi-timeline .qodef-nav-next{ display:none; }
.tib-tl .qodef-qi-timeline .qodef-e-item{ padding:0 !important; } /* Elementor pose 15 px de gouttière par widget */
.tib-tl .qodef-qi-timeline .qodef-e-line-holder{ top:7px !important; transform:none; }
.tib-tl .qodef-qi-timeline .qodef-e-line{ background-color:var(--tib-bord); }
.tib-tl .qodef-qi-timeline .qodef-e-point-holder{
top:50%; left:0; width:14px; height:14px;
font-size:var(--tib-fs-petit); transform:translateY(-50%);
}
.tib-tl .qodef-qi-timeline .qodef-e-point{
background-color:var(--tib-acc);
box-shadow:0 0 0 6px var(--tib-band);
}
.tib-tl .qodef-qi-timeline .qodef-e-item-inner{
align-items:flex-start; justify-content:flex-start; text-align:left;
padding:44px 48px 0 0;
}
.tib-tl .qodef-qi-timeline .qodef-e-top-holder{ display:none; }
.tib-tl .qodef-qi-timeline .qodef-e-content-holder{ padding:0; height:auto !important; }
.tib-tl .qodef-qi-timeline .qodef-e-date{
order:-1; margin:0 0 8px;
font-family:"Outfit",sans-serif; font-weight:500;
font-size:var(--tib-fs-mention); line-height:1.4; letter-spacing:.12em;
color:var(--tib-navy);
}
.tib-tl .qodef-qi-timeline h3.qodef-e-title{
margin:0 0 10px;
font-family:"Outfit",sans-serif; font-weight:400;
font-size:var(--tib-fs-carte); line-height:1.3; letter-spacing:-.01em;
color:var(--tib-navy);
}
.tib-tl .qodef-qi-timeline .qodef-e-text{
margin:0; font-size:var(--tib-fs-carte-texte); line-height:1.6; color:var(--tib-soft);
}
@media (max-width:767px){
.tib-tl .qodef-qi-timeline .qodef-grid-inner{
flex-direction:column; gap:30px;
width:auto !important; transform:none !important;
}
.tib-tl .qodef-qi-timeline .qodef-e-item{ flex:none; }
.tib-tl .qodef-qi-timeline .qodef-e-line-holder{ top:0 !important; left:6px; width:1px; height:calc(100% + 30px); }
.tib-tl .qodef-qi-timeline .qodef-e-item:last-child .qodef-e-line-holder{ height:0; }
.tib-tl .qodef-qi-timeline .qodef-e-point-holder{ top:2px; left:50%; transform:translateX(-50%); }
.tib-tl .qodef-qi-timeline .qodef-e-item-inner{ padding:0 0 0 36px; }
.tib-tl .qodef-qi-timeline h3.qodef-e-title{ font-size:var(--tib-fs-carte); }
}
/* 20.5 La réponse courte — le titre à gauche, la réponse dans un encart
blanc à filet d'accent (Sven, 06/10). Section : tib-reponse */
.tib-reponse .e-con.tib-reponse__a{ flex:0 0 40%; width:40%; max-width:40%; }
.tib-reponse .e-con.tib-reponse__b{ flex:1 1 0; min-width:0; }
.tib-reponse .tib-reponse__a .qodef-section-title .qodef-m-title{ font-size:var(--tib-fs-chiffre); line-height:1.2; }
.tib-reponse .elementor-widget.tib-reponse__encart{
padding:34px 40px; background-color:#fff;
border-left:4px solid var(--tib-acc); border-radius:4px 16px 16px 4px;
}
.tib-reponse .tib-reponse__encart p{
margin:0 0 16px;
font-family:"Outfit",sans-serif; font-weight:300;
font-size:var(--tib-fs-intro); line-height:1.55; color:var(--tib-ink);
}
.tib-reponse .tib-reponse__encart p:last-child{ margin-bottom:0; }
.tib-reponse .tib-reponse__encart strong{ font-weight:500; color:var(--tib-navy); }
/* 20.6 Ce qui change — un vrai tableau, dans un Éditeur de texte (classe
tib-cmp-w sur le widget, tib-cmp sur la table). Aucune colonne mise en
avant (CHARTE, tableaux des pages moment). Sous 768 px, chaque ligne
s'empile et chaque cellule rappelle sa colonne (attribut data-label). */
.tib-cmp-s .elementor-widget.tib-cmp-w{
border:1px solid var(--tib-bord); border-radius:16px;
overflow:hidden; background-color:#fff;
}
.tib-cmp-s .tib-cmp-w table.tib-cmp{
width:100%; margin:0; table-layout:fixed;
border:0; border-collapse:collapse; background:none;
}
.tib-cmp-s .tib-cmp th,
.tib-cmp-s .tib-cmp td{
padding:20px 24px; border:0; border-top:1px solid var(--tib-bord);
text-align:left; vertical-align:top; background:none;
font-size:var(--tib-fs-carte-texte); line-height:1.55; color:var(--tib-ink);
}
.tib-cmp-s .tib-cmp tr{ border:0; } /* le thème trace un filet gris à gauche et à droite de chaque ligne */
.tib-cmp-s .tib-cmp tr > :not(:first-child){ border-left:1px solid var(--tib-bord); }
.tib-cmp-s .tib-cmp thead th,
.tib-cmp-s .tib-cmp thead td{
border-top:0; background-color:var(--tib-band);
font-family:"Outfit",sans-serif; font-weight:500;
font-size:var(--tib-fs-texte); color:var(--tib-navy);
}
.tib-cmp-s .tib-cmp thead td:first-child{ width:24%; }
.tib-cmp-s .tib-cmp tbody th{
font-family:"Outfit",sans-serif; font-weight:400;
font-size:var(--tib-fs-texte); line-height:1.35; color:var(--tib-navy);
}
@media (max-width:767px){
.tib-cmp-s .tib-cmp-w table.tib-cmp{ table-layout:auto; }
.tib-cmp-s .tib-cmp thead{
position:absolute; width:1px; height:1px;
overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
.tib-cmp-s .tib-cmp tbody,
.tib-cmp-s .tib-cmp tr,
.tib-cmp-s .tib-cmp th,
.tib-cmp-s .tib-cmp td{ display:block; width:auto; }
.tib-cmp-s .tib-cmp tr > :not(:first-child){ border-left:0; }
.tib-cmp-s .tib-cmp tbody tr:first-child th{ border-top:0; }
.tib-cmp-s .tib-cmp tbody th{ padding:14px 20px; background-color:var(--tib-band); }
.tib-cmp-s .tib-cmp td{ padding:14px 20px; }
.tib-cmp-s .tib-cmp td:before{
content:attr(data-label); display:block; margin-bottom:4px;
font-family:"Outfit",sans-serif; font-weight:500;
font-size:var(--tib-fs-etiquette); letter-spacing:.12em; text-transform:uppercase;
color:var(--tib-soft);
}
}
/* 20.7 La vraie question — quatre cartes 2 × 2, la réponse visible, puis la
relance en bandeau avec le bouton bleu. Section : tib-questions */
.tib-questions .tib-q-grille > .e-con.tib-q{
--flex-grow:1; flex-grow:1;
padding:28px 30px 30px; background-color:var(--tib-band); border-radius:16px;
}
.tib-questions .tib-q .qodef-section-title .qodef-m-subtitle{
display:inline-flex; align-items:center; justify-content:center;
width:34px; height:34px; margin:0 0 16px; padding:0;
border:1px solid var(--tib-acc); border-radius:50%; background-color:#fff;
font-family:"Outfit",sans-serif; font-weight:500; font-size:var(--tib-fs-petit);
letter-spacing:0 !important; color:var(--tib-navy) !important;
}
.tib-questions .tib-q .qodef-section-title .qodef-m-subtitle:after{ display:none; }
.tib-questions .tib-q .qodef-section-title .qodef-m-title{ font-size:var(--tib-fs-carte); line-height:1.3; letter-spacing:-.01em; }
.tib-questions .tib-q .tib-q__texte p{ margin:0; font-size:var(--tib-fs-carte-texte); line-height:1.6; color:var(--tib-soft); }
.tib-questions .tib-q .tib-q__texte strong{ color:var(--tib-navy); }
.tib-questions .e-con.tib-relance{
padding:22px 22px 22px 28px; background-color:#fff;
border:1px solid var(--tib-bord); border-radius:16px;
}
.tib-questions .e-con.tib-relance > .elementor-widget.tib-relance__texte{ flex:1 1 360px; min-width:0; }
.tib-questions .tib-relance__texte p{ margin:0; font-size:var(--tib-fs-texte); line-height:1.55; color:var(--tib-ink); }
.tib-questions .tib-relance__texte strong{ color:var(--tib-navy); }
/* 20.7 bis Les pictos de « La vraie question » — demandés par Sven le 08/10 :
un picto par question à la place du numéro, dans le même rond que les
points de la ligne de temps des hubs (§ 21.1). Le picto se choisit par une
classe sur le Section Title de la carte (Elementor : Avancé → Classes CSS) :
tib-picto--calendrier, --document, --courbe, --personnes, --porte,
--cercles, --batiment, --passage, --ampoule, --barres. Sans classe, le
numéro reste. Un seul jeu de pictos, trait de 1,5 px (CHARTE § IV), le même
que celui de tib-blocs.php. */
.tib-picto--calendrier{ --tib-picto:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5.5' width='16' height='14.5' rx='2'/%3E%3Cpath d='M4 10.5h16M8.5 3.5v4M15.5 3.5v4'/%3E%3C/svg%3E"); }
.tib-picto--document{ --tib-picto:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5h7.5l4 4v13h-11.5z'/%3E%3Cpath d='M14 3.5v4h4M9.5 12h5M9.5 15.5h5'/%3E%3C/svg%3E"); }
.tib-picto--courbe{ --tib-picto:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 16.5l4.8-4.8 3.2 3.2L20 7.5'/%3E%3Cpath d='M15 7.5h5v5'/%3E%3C/svg%3E"); }
.tib-picto--personnes{ --tib-picto:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8.5' r='3'/%3E%3Cpath d='M3.5 19.5c.6-3 2.8-4.8 5.5-4.8s4.9 1.8 5.5 4.8'/%3E%3Ccircle cx='16.5' cy='9.5' r='2.5'/%3E%3Cpath d='M15.8 14.8c2.4-.2 4.2 1.5 4.7 4.2'/%3E%3C/svg%3E"); }
.tib-picto--porte{ --tib-picto:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='16' rx='1.5'/%3E%3Cpath d='M15 12h.01'/%3E%3C/svg%3E"); }
.tib-picto--cercles{ --tib-picto:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.5' cy='12' r='5.5'/%3E%3Ccircle cx='14.5' cy='12' r='5.5'/%3E%3C/svg%3E"); }
.tib-picto--batiment{ --tib-picto:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16'/%3E%3Cpath d='M6.5 20V10l5.5-3.6L17.5 10v10'/%3E%3C/svg%3E"); }
.tib-picto--passage{ --tib-picto:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h11'/%3E%3Cpath d='M10.5 8l4 4-4 4'/%3E%3Cpath d='M20 4.5v15'/%3E%3C/svg%3E"); }
.tib-picto--ampoule{ --tib-picto:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 18h5'/%3E%3Cpath d='M10.5 21h3'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.6 10.8c.7.5 1.1 1.3 1.1 2.1V16h5v-.1c0-.8.4-1.6 1.1-2.1A6 6 0 0 0 12 3z'/%3E%3C/svg%3E"); }
.tib-picto--barres{ --tib-picto:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16'/%3E%3Cpath d='M7.5 16v-5'/%3E%3Cpath d='M12 16V7'/%3E%3Cpath d='M16.5 16v-3'/%3E%3C/svg%3E"); }
.tib-questions .tib-q .elementor-widget[class*="tib-picto--"] .qodef-section-title .qodef-m-subtitle{
position:relative; width:48px; height:48px; margin:0 0 18px; border:0;
background-color:var(--tib-accL);
font-size:0 !important; line-height:0; color:transparent !important;
}
.tib-questions .tib-q .elementor-widget[class*="tib-picto--"] .qodef-section-title .qodef-m-subtitle::before{
content:""; display:block !important; position:absolute; top:50%; left:50%;
width:24px; height:24px; margin:-12px 0 0 -12px; background-color:var(--tib-acc);
-webkit-mask:var(--tib-picto) center / contain no-repeat;
mask:var(--tib-picto) center / contain no-repeat;
}
@media (max-width:767px){
.tib-reponse .e-con.tib-reponse__a{ flex:0 0 auto; width:100%; max-width:none; }
.tib-reponse .tib-reponse__a .qodef-section-title .qodef-m-title{ font-size:var(--tib-fs-chiffre); }
.tib-reponse .elementor-widget.tib-reponse__encart{ padding:24px; }
.tib-reponse .tib-reponse__encart p{ font-size:var(--tib-fs-intro); }
.tib-questions .tib-q-grille > .e-con.tib-q{ padding:24px; }
.tib-questions .e-con.tib-relance{ padding:22px; }
}
/* ============================================================
21 · HUBS — les blocs propres aux pages d'univers (/sante/, /entreprises/)
Ajouté le 08/10/2026, montage du hub Santé (8591).
21.1 les moments en ligne de temps, un picto par moment
([tib_moments style="etapes"])
21.1 bis la même ligne numérotée, une image par moment
([tib_moments style="etapes" images="1"])
21.2 les métiers ou profils en lignes, image au survol
([tib_voisins style="lignes"])
21.3 le hero de hub, d'après posturoboulot.fr
21.4 ce qui change pour vous : le texte à gauche, la double image et la
signature à droite
21.5 la bande des avis (bloc de l'accueil), sur tous les gabarits
============================================================ */
/* 21.1 Les moments — le dessin de « Comment le cabinet vous accompagne »
(§ 20.3) : une ligne, un point par moment, le texte dessous à gauche.
Le point porte le picto du moment. Chaque moment est un lien vers sa
page. Une colonne par moment ; sous 1025 px, la ligne devient verticale. */
.tib-etm .tib-eta{
--tib-eta-n:5;
display:grid; grid-template-columns:repeat(var(--tib-eta-n),minmax(0,1fr));
margin:0; padding:0; list-style:none;
}
.tib-etm .tib-eta.tib-eta-n3{ --tib-eta-n:3; }
.tib-etm .tib-eta.tib-eta-n4{ --tib-eta-n:4; }
.tib-etm .tib-eta.tib-eta-n6{ --tib-eta-n:6; }
.tib-etm .tib-eta__e{ position:relative; margin:0; padding:0; }
/* La ligne passe au centre des points, sur toute la largeur
(display : .tib-push li::before, § 14, masque les puces des listes) */
.tib-etm .tib-eta__e::before{
content:""; display:block; position:absolute; top:24px; left:0; right:0;
height:1px; background-color:var(--tib-bord);
}
.tib-etm .tib-eta__c{
position:relative; display:flex; flex-direction:column; align-items:flex-start;
height:100%; padding:0 32px 0 0;
color:inherit; text-decoration:none;
}
.tib-etm .tib-eta__point{
display:flex; align-items:center; justify-content:center; flex:none;
width:48px; height:48px; margin:0 0 26px; border-radius:50%;
background-color:var(--tib-accL); color:var(--tib-acc);
box-shadow:0 0 0 8px var(--tib-band);
transition:background-color .2s ease-out, color .2s ease-out;
}
.tib-etm .tib-eta__point svg{ display:block; width:22px; height:22px; }
.tib-etm .tib-eta__point--nu::after{
content:""; width:12px; height:12px; border-radius:50%; background-color:var(--tib-acc);
}
.tib-etm .tib-eta__n{
margin:0 0 8px;
font-family:"Outfit",sans-serif; font-weight:500;
font-size:var(--tib-fs-mention); line-height:1.4; letter-spacing:.12em;
color:var(--tib-navy);
}
.tib-etm .tib-eta__t{
margin:0 0 10px;
font-family:"Outfit",sans-serif; font-weight:400;
font-size:var(--tib-fs-carte); line-height:1.3; letter-spacing:-.01em;
color:var(--tib-navy);
}
.tib-etm .tib-eta__d{
flex:1 1 auto; margin:0 0 18px;
font-size:var(--tib-fs-carte-texte); line-height:1.6; color:var(--tib-soft);
}
.tib-etm .tib-eta__a{ font-size:var(--tib-fs-mention); font-weight:700; line-height:1.4; color:var(--tib-navy); }
.tib-etm .tib-eta__a i{ font-style:normal; color:var(--tib-acc); }
.tib-etm a.tib-eta__c:hover .tib-eta__point{ background-color:var(--tib-acc); color:#fff; }
.tib-etm a.tib-eta__c:hover .tib-eta__t{ text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
.tib-etm a.tib-eta__c:focus-visible{ outline:2px solid var(--tib-navy); outline-offset:6px; border-radius:6px; }
.tib-etm .tib-eta__e.is-current .tib-eta__a{
font-weight:500; font-size:var(--tib-fs-etiquette); letter-spacing:.14em; text-transform:uppercase; color:var(--tib-soft);
}
@media (max-width:1024px){
.tib-etm .tib-eta{ grid-template-columns:1fr; }
.tib-etm .tib-eta__e::before{ top:0; bottom:0; left:24px; right:auto; width:1px; height:auto; }
.tib-etm .tib-eta__e:first-child::before{ top:24px; }
.tib-etm .tib-eta__e:last-child::before{ bottom:auto; height:24px; }
.tib-etm .tib-eta__c{
display:grid; grid-template-columns:48px minmax(0,1fr); column-gap:22px;
align-items:start; padding:0 0 34px;
}
.tib-etm .tib-eta__e:last-child .tib-eta__c{ padding-bottom:0; }
.tib-etm .tib-eta__point{ grid-column:1; grid-row:1 / span 4; margin:0; }
.tib-etm .tib-eta__n,
.tib-etm .tib-eta__t,
.tib-etm .tib-eta__d,
.tib-etm .tib-eta__a{ grid-column:2; }
.tib-etm .tib-eta__n{ margin-top:2px; }
.tib-etm .tib-eta__d{ max-width:60ch; margin-bottom:12px; }
}
@media (max-width:767px){
.tib-etm .tib-eta__t{ font-size:var(--tib-fs-carte); }
}
/* 21.1 bis Les moments avec images — [tib_moments style="etapes" images="1"]
(Sven, 09/10/2026) : la ligne de temps numérotée reste, le numéro prend
la place du picto dans le point ; l'image de la page moment vient sous la
ligne, aux coins arrondis des autres blocs à images (§ 19.7), puis le
titre, la phrase et le lien. Sous 1025 px, la ligne verticale du § 21.1,
l'image en tête du texte. */
.tib-etm .tib-eta--img .tib-eta__point{ margin-bottom:22px; }
.tib-etm .tib-eta--img .tib-eta__n{
margin:0;
font-family:"Outfit",sans-serif; font-weight:500;
font-size:var(--tib-fs-petit); line-height:1; letter-spacing:.04em;
color:var(--tib-navy);
transition:color .2s ease-out;
}
.tib-etm .tib-eta--img .tib-eta__media{
display:block; align-self:stretch;
height:190px; margin:0 0 22px; overflow:hidden;
border-radius:16px; background-color:var(--tib-accL);
}
.tib-etm .tib-eta--img .tib-eta__media img{
display:block; width:100%; height:100%; object-fit:cover;
transition:transform .5s ease-out;
}
.tib-etm .tib-eta--img a.tib-eta__c:hover .tib-eta__media img{ transform:scale(1.04); }
.tib-etm .tib-eta--img a.tib-eta__c:hover .tib-eta__point{ background-color:var(--tib-navy); }
.tib-etm .tib-eta--img a.tib-eta__c:hover .tib-eta__n{ color:#fff; }
@media (min-width:1025px) and (max-width:1440px){
.tib-etm .tib-eta--img .tib-eta__media{ height:160px; }
}
@media (max-width:1024px){
.tib-etm .tib-eta--img .tib-eta__point{ margin:0; }
.tib-etm .tib-eta--img .tib-eta__media{ grid-column:2; width:100%; max-width:520px; height:200px; margin-bottom:18px; }
}
@media (max-width:767px){
.tib-etm .tib-eta--img .tib-eta__media{ height:170px; }
}
/* 21.2 Les métiers ou profils, en lignes — la liste Timeline List du thème
(catalogue B1, page démo Conference Home) : repère, titre et phrase,
« Voir la page ». L'image de la page apparaît au survol, comme sur la
démo (onegoal-core.min.css), à droite du texte. Toute la ligne est un
lien. */
.tib-lig .qodef-timeline-list .qodef-e-item{
position:relative; padding:30px 0;
border-color:var(--tib-bord);
color:inherit; text-decoration:none;
}
.tib-lig .qodef-timeline-list .qodef-e-item-info{
width:22%; flex:0 0 22%; align-self:flex-start; padding:9px 24px 0 0;
}
.tib-lig .tib-lig__repere{
font-family:"Outfit",sans-serif; font-weight:500;
font-size:var(--tib-fs-etiquette); line-height:1.4; letter-spacing:.12em; text-transform:uppercase;
color:var(--tib-navy);
}
.tib-lig .qodef-timeline-list .qodef-e-item-title{ width:auto; flex:1 1 0; min-width:0; padding-right:32px; }
.tib-lig .qodef-timeline-list .qodef-e-title{
font-family:"Outfit",sans-serif; font-weight:400;
font-size:var(--tib-fs-bloc); line-height:1.2; letter-spacing:-.015em;
color:var(--tib-navy);
}
.tib-lig .tib-lig__texte{
max-width:50ch; margin:10px 0 0;
font-size:var(--tib-fs-carte-texte); line-height:1.6; color:var(--tib-soft);
}
.tib-lig .qodef-timeline-list .qodef-e-media{
left:auto; right:2%; width:210px; height:260px; z-index:2;
}
.tib-lig .qodef-timeline-list .qodef-e-media img{ display:block; width:100%; height:100%; object-fit:cover; }
.tib-lig .qodef-timeline-list .qodef-e-item-button{ align-self:center; }
.tib-lig .qodef-button.qodef-layout--textual{ color:var(--tib-navy); }
.tib-lig .qodef-button .qodef-m-arrow{ margin-left:7px; color:var(--tib-acc); }
.tib-lig .qodef-button .qodef-m-arrow svg path{ fill:currentColor; }
.tib-lig a.qodef-e-item:hover .qodef-e-title{ text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; }
.tib-lig a.qodef-e-item:focus-visible{ outline:2px solid var(--tib-navy); outline-offset:4px; }
@media (max-width:1024px){
.tib-lig .qodef-timeline-list .qodef-e-media{ display:none; }
}
@media (max-width:768px){
.tib-lig .qodef-timeline-list .qodef-e-item{ padding:22px 0; }
.tib-lig .qodef-timeline-list .qodef-e-item-info{ width:100%; flex:0 0 auto; padding:0; }
.tib-lig .qodef-timeline-list .qodef-e-item-title{ padding-right:0; }
.tib-lig .qodef-timeline-list .qodef-e-title{ font-size:var(--tib-fs-bloc); }
.tib-lig .qodef-timeline-list .qodef-e-item-button{ align-self:flex-start; margin-top:12px; }
}
@media (hover:none){
.tib-lig .qodef-timeline-list .qodef-e-media{ display:none; }
}
/* 21.3 Le hero de hub — d'après posturoboulot.fr (BLOCS-SITE § 5), 08/10.
Plein écran sous l'en-tête ; photo claire calée à droite (« contain »),
fondu blanc vers la gauche (superposition en dégradé, réglée dans
Elementor) ; à gauche : surtitre en pastille, H1 Highlight du thème (la fin
sur aplat d'accent, choix de Sven), paragraphe, métiers en pastilles,
« Parlons-en » et la ligne de preuve, étoiles en bleu de marque
(CHARTE § II). Sous 1025 px, la photo passe en haut, pleine largeur, et
se fond dans le blanc ; le texte vient dessous (réglages forcés ici). */
@media (min-width:1025px){
.e-con.tib-hhub{ min-height:calc(100vh - 140px); } /* 140 px : barre du haut et en-tête */
}
.tib-hhub .tib-hhub__sur p{
display:inline-block; margin:0; padding:7px 12px;
background-color:var(--tib-accL); border-radius:4px;
font-family:"Outfit",sans-serif; font-weight:500;
font-size:var(--tib-fs-etiquette); line-height:1.3; letter-spacing:.14em; text-transform:uppercase;
color:var(--tib-navy);
}
.tib-hhub h1.qodef-highlight{
margin:0;
font-family:"Outfit",sans-serif; font-weight:400;
font-size:var(--tib-fs-page); line-height:1.16; letter-spacing:-.02em;
color:var(--tib-navy);
}
.tib-hhub h1.qodef-highlight .qodef-highlight-text{
padding:0 .12em .04em;
-webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.tib-hhub .tib-hhub__chapo p{ margin:0; max-width:600px; font-size:var(--tib-fs-intro); line-height:1.65; color:var(--tib-ink); }
.tib-hhub .tib-hhub__chapo strong{ font-weight:700; color:var(--tib-navy); }
.tib-hhub .tib-pro{ max-width:560px; }
/* Tablette et mobile (08/11) : la photo devient un bandeau net en haut, sans
fondu (choix de Sven). Hauteur fixe --hhub-h, recadrée sur le sujet (72 %),
quel que soit le format de l'image ; le texte commence 36 px dessous. */
@media (max-width:1024px){
.e-con.tib-hhub{
--hhub-h:56.25vw;
background-size:auto var(--hhub-h) !important; background-position:72% top !important;
background-repeat:no-repeat !important;
padding-top:calc(var(--hhub-h) + 36px) !important;
}
.e-con.tib-hhub > .e-con-inner{ padding-top:0 !important; } /* Elementor met le retrait sur le bloc intérieur */
.e-con.tib-hhub::before{ background-image:none !important; }
}
@media (max-width:767px){
.e-con.tib-hhub{ --hhub-h:66.67vw; }
}
@media (max-width:767px){
.tib-hhub .tib-hhub__chapo p{ font-size:var(--tib-fs-intro); }
.tib-hhub .tib-hhub__sur p{ font-size:var(--tib-fs-etiquette); letter-spacing:.12em; }
}
.tib-hub-cta .tib-preuve p{ margin:0; font-size:var(--tib-fs-petit); line-height:1.5; color:var(--tib-soft); }
.tib-hub-cta .tib-preuve .tib-etoiles{ color:var(--tib-navy); letter-spacing:.1em; }
.tib-hub-cta .tib-preuve a{ color:var(--tib-navy); text-decoration:underline; text-underline-offset:3px; }
/* 21.4 Ce qui change pour vous — le texte à gauche, la photo à droite
(wireframe du hub, section 04). L'image a son rapport borné : elle ne
dicte pas la hauteur du bloc (CHARTE § VI). */
.tib-change .e-con.tib-change__a{ flex:1.35 1 0; min-width:0; }
.tib-change .e-con.tib-change__b{ flex:1 1 0; min-width:0; }
.tib-change .tib-change__texte p{
max-width:62ch; margin:0 0 16px;
font-size:var(--tib-fs-texte); line-height:1.7; color:var(--tib-ink);
}
.tib-change .tib-change__texte p:last-child{ margin-bottom:0; }
.tib-change .tib-change__texte strong{ font-weight:700; color:var(--tib-navy); }
/* La double image (Qi « Double image avec contenu », catalogue Q2, essai du
08/10) : le bloc de texte du widget est masqué (le texte est à gauche),
la grande image à droite, la seconde en décalé en bas à gauche, cerclée
de la couleur de la bande. */
.tib-change__duo .qodef-dual-content{ display:none; }
.tib-change__duo .qodef-qi-dual-image-with-content .qodef-image-holder{
flex:1 1 100%; width:100%; height:auto; padding:0 0 56px; overflow:visible;
}
/* Qi inverse les positions sous 1025 px (grande image absolue, petite en
flux) : on garde la même construction à toutes les largeurs. */
.tib-change__duo .qodef-qi-dual-image-with-content .qodef-m-main-image{ position:relative; width:86%; height:auto; margin-left:auto; }
.tib-change__duo .qodef-m-main-image img{
display:block; width:100%; height:auto; aspect-ratio:4 / 5; object-fit:cover;
border-radius:16px; transform:none !important;
}
.tib-change__duo .qodef-qi-dual-image-with-content .qodef-m-second-image{
display:block; position:absolute; top:auto; right:auto; left:0; bottom:0; width:44%; height:auto; padding:0;
}
.tib-change__duo .qodef-m-second-image img{
display:block; width:100%; height:auto; aspect-ratio:3 / 4; object-fit:cover; object-position:center top;
border-radius:14px; box-shadow:0 0 0 8px var(--tib-band);
}
/* La signature, demandée par Sven le 08/10 : celle de l'accueil (bloc « Le
Cabinet » : nom, qualités, inscription à l'Ordre, mêmes widgets), calée
à droite sous la grande image, à côté du portrait. Un cran plus petite
qu'à l'accueil : la colonne est étroite. */
.tib-change .e-con.tib-change__sig{
align-self:flex-end; width:54%; margin-top:-42px; padding:0;
position:relative; z-index:1;
}
.tib-change__sig .qodef-section-title .qodef-m-title{ font-size:var(--tib-fs-carte); line-height:1.3; }
.tib-change__sig .qodef-section-title .qodef-m-text{ margin-top:2px !important; font-size:var(--tib-fs-carte-texte); line-height:1.5; }
.tib-change__sig .tib-change__ordre p{ margin:8px 0 0; font-size:var(--tib-fs-petit); line-height:1.45; }
.tib-change .tib-change__img img{
display:block; width:100%; aspect-ratio:4 / 5; object-fit:cover; border-radius:16px;
}
@media (max-width:1024px){
.tib-change .e-con.tib-change__a,
.tib-change .e-con.tib-change__b{ flex:0 0 auto; width:100%; }
.tib-change .e-con.tib-change__b{ max-width:640px; }
.tib-change .tib-change__img img,
.tib-change__duo .qodef-m-main-image img{ aspect-ratio:16 / 10; }
.tib-change__duo .qodef-qi-dual-image-with-content .qodef-m-second-image{ width:32%; }
.tib-change .e-con.tib-change__sig{ width:64%; }
}
/* 21.5 La bande des avis — le bloc de l'accueil (B19), repris tel quel sur
tous les gabarits (Sven, 08/10) ; seuls les textes changent. Les conteneurs
intérieurs perdent le retrait de 10 px qu'Elementor leur donne par défaut :
le titre s'aligne ainsi sur celui des autres sections. */
.e-con.tib-avis .e-con{ --padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px; }
@media (prefers-reduced-motion:reduce){
.tib-etm .tib-eta--img .tib-eta__media img,
.tib-etm .tib-eta--img .tib-eta__n,
.tib-etm .tib-eta__point,
.tib-lig .qodef-timeline-list .qodef-e-media,
.tib-lig .qodef-timeline-list .qodef-e-media img{ transition:none; }
}
/* ============================================================
22 · GRILLE — la largeur du contenu, une seule pour tout le site
Décidé avec Sven le 08/10/2026 : les sections suivent la grille du
thème, comme celles de l'accueil — 1300 px au-dessus de 1440 px d'écran,
1100 de 1201 à 1440, 960 de 1025 à 1200 ; en dessous, les retraits de
chaque section (40 px, 20 sur mobile).
S'applique à tout conteneur Elementor en largeur « encadrée » (boxed) :
la valeur réglée dans Elementor (1180, 1300…) ne compte plus, et une
section ajoutée suit la grille sans réglage.
============================================================ */
@media (min-width:1025px){
.e-con.e-con-boxed{ --content-width:960px !important; }
}
@media (min-width:1201px){
.e-con.e-con-boxed{ --content-width:1100px !important; }
}
@media (min-width:1441px){
.e-con.e-con-boxed{ --content-width:1300px !important; }
}
/* ============================================================
22 · RETOUR EN HAUT — à la couleur de l'univers
Demandé par Sven le 09/10/2026. Le thème peint le bouton avec
--qode-main-color (bleu) ; il prend désormais --tib-acc : bleu sur les
pages neutres, émeraude sur Santé, orange sur Entreprises (§ 14).
C'est une icône, pas un texte : la règle des accents est tenue.
Le liseré blanc le détache du pied de page, bleu lui aussi.
============================================================ */
#qodef-back-to-top .qodef-back-to-top-icon{
background-color:var(--tib-acc);
border-color:var(--tib-acc);
box-shadow:0 0 0 1px rgba(255,255,255,.55);
}
/* ============================================================
23 · PIED DE PAGE — l'arrondi suit la largeur de l'écran
Le thème arrondit le coin haut droit à 200 px à toutes les largeurs :
sur mobile, la courbe prenait la moitié de l'écran. L'arrondi vaut
maintenant 11 % de la largeur, entre 72 px (mobile) et 200 px
(au-delà de 1 820 px) ; sur ordinateur, la première rangée descend
avec lui, pour que les titres de colonne restent loin de la courbe.
Demandé par Sven le 09/10/2026.
============================================================ */
#qodef-page-footer.qodef-layout--predefined{
border-top-right-radius:clamp(24px, 3.4vw, 56px);
}
/* 12/10 (Sven) : arrondi fortement réduit (49 px à 1 440, 24 px sur
mobile, au lieu de 72 à 200 px). Texte de présentation en 18 px, comme
les liens des colonnes, aligné sur le bord gauche du logo : l'image du
logo porte une marge transparente de 32 px sur 736 (4,35 %), retirée
par un décalage pour que le dessin et le texte partent du même bord. */
.tib-foot-brand__logo img{ transform:translateX(-4.35%); }
.tib-foot-brand p{
font-size:18px !important;
line-height:1.6 !important;
margin-top:18px !important;
}
@media (min-width:1025px){
#qodef-page-footer.qodef-layout--predefined #qodef-page-footer-top-area #qodef-page-footer-top-area-inner .qodef-grid-item{
padding-top:clamp(65px, 5.6vw, 96px);
}
}
/* ============================================================
24 · CONTACT — formulaire (Contact Form 7) et coordonnées
D'après wireframe-contact.html. Le formulaire 7576 porte le balisage
.tib-frm (onglet « Formulaire » de CF7) : deux colonnes, le message,
le consentement et l'envoi sur toute la largeur. Le bouton d'envoi
est le bouton du thème, passé en bleu plein. Ajouté le 09/10/2026.
============================================================ */
.tib-frm{
display:grid;
grid-template-columns:1fr 1fr;
gap:22px 24px;
}
.tib-frm br{ display:none; }
.tib-frm p{ margin:0; }
.tib-frm__ch--plein,
.tib-frm__rgpd,
.tib-frm__envoi{ grid-column:1 / -1; }
.tib-frm .wpcf7-form-control-wrap{ display:block; }
.tib-frm__ch > label{
display:block;
margin:0 0 8px;
font-family:"Nunito Sans",sans-serif;
font-size:var(--tib-fs-petit);
font-weight:700;
line-height:1.4;
color:var(--tib-navy);
}
.tib-frm i{ font-style:normal; color:var(--tib-navy); }
.tib-frm input[type="text"],
.tib-frm input[type="email"],
.tib-frm input[type="tel"],
.tib-frm textarea{
width:100%;
height:auto;
box-sizing:border-box;
margin:0;
padding:13px 16px;
border:1px solid var(--tib-bord);
border-radius:10px;
background:#fff;
font-family:"Nunito Sans",sans-serif;
font-size:var(--tib-fs-carte-texte);
line-height:1.5;
color:var(--tib-ink);
}
.tib-frm textarea{ min-height:150px; resize:vertical; }
.tib-frm input:focus,
.tib-frm textarea:focus{ outline:2px solid var(--tib-navy); outline-offset:1px; border-color:var(--tib-navy); }
.tib-frm__rgpd .wpcf7-list-item{ display:block; margin:0; }
.tib-frm__rgpd label{
display:flex;
align-items:flex-start;
gap:12px;
margin:0;
font-size:var(--tib-fs-petit);
font-weight:400;
line-height:1.55;
color:var(--tib-ink);
}
.tib-frm__rgpd input[type="checkbox"]{
flex:0 0 auto;
width:18px;
height:18px;
margin:2px 0 0;
accent-color:var(--tib-navy);
}
.tib-frm__rgpd a{ color:var(--tib-navy); text-decoration:underline; text-underline-offset:3px; }
.tib-frm__envoi{ display:flex; align-items:center; flex-wrap:wrap; gap:20px; margin-top:4px; }
.tib-frm__leg{ font-size:var(--tib-fs-mention); color:var(--tib-soft); }
.tib-frm .wpcf7-submit.qodef-button{
background-color:var(--tib-navy) !important;
border-color:var(--tib-navy) !important;
color:#fff !important;
}
.tib-frm .wpcf7-submit.qodef-button .qodef-m-text,
.tib-frm .wpcf7-submit.qodef-button .qodef-m-arrow{ color:#fff !important; }
.tib-frm .wpcf7-submit.qodef-button:disabled{ opacity:.55; cursor:not-allowed; }
.tib-frm .wpcf7-not-valid-tip{ margin-top:6px; font-size:var(--tib-fs-mention); color:#b32d2e; }
.tib-frm-cf7 .wpcf7-response-output{
margin:22px 0 0 !important;
padding:12px 16px !important;
border-radius:10px;
font-size:var(--tib-fs-petit);
}
/* Messages de réponse aux couleurs du site (Sven, 13/10/2026).
CF7 colore le cadre en jaune, orange, vert ou rouge selon l'état :
bleu de marque quand c'est envoyé, rouge sombre (celui des messages
sous les champs) quand quelque chose bloque. */
.tib-frm ~ .wpcf7-response-output{
border:1px solid var(--tib-bord) !important;
background:#F0F0F6;
color:var(--tib-ink);
line-height:1.5;
}
.wpcf7-form.sent .tib-frm ~ .wpcf7-response-output{ border-color:var(--tib-navy) !important; }
.wpcf7-form.invalid .tib-frm ~ .wpcf7-response-output,
.wpcf7-form.unaccepted .tib-frm ~ .wpcf7-response-output,
.wpcf7-form.failed .tib-frm ~ .wpcf7-response-output,
.wpcf7-form.aborted .tib-frm ~ .wpcf7-response-output,
.wpcf7-form.spam .tib-frm ~ .wpcf7-response-output{
border-color:#b32d2e !important;
background:#FCF3F3;
}
.tib-frm .wpcf7-not-valid{ border-color:#b32d2e !important; }
/* Mise en page (Sven, 09/10/2026, soir) : celle de « Pour avancer ».
À gauche le titre et le formulaire ; à droite la photo du cabinet, aux
coins arrondis, du surtitre au bas du formulaire, et l'encart posé
dessus avec tous les moyens de joindre le cabinet, calendrier compris.
Photo, encart, tablette et mobile : règles de « Pour avancer » (§ 19),
étendues à .tib-contact ; ici, ce qui est propre au Contact. */
@media (min-width:1025px){
.tib-contact .e-con.tib-ct__gauche{ flex:1 1 0; min-width:0; }
.tib-contact .e-con.tib-photo{ flex:0 0 420px; width:420px; max-width:420px; }
}
.tib-contact .tib-photo__img img{ object-position:50% 45%; }
.tib-contact .tib-encart .tib-encart__contact{ padding-top:16px; border-top:1px solid var(--tib-bord); }
.tib-encart__contact .tib-c--mail a:before{
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='2'/%3E%3Cpath d='M4 7.5l8 5.5 8-5.5'/%3E%3C/svg%3E") no-repeat center / contain;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='2'/%3E%3Cpath d='M4 7.5l8 5.5 8-5.5'/%3E%3C/svg%3E") no-repeat center / contain;
}
.tib-encart__contact .tib-c--adr a:before{
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-6.2-6.5-11a6.5 6.5 0 0 1 13 0c0 4.8-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.3'/%3E%3C/svg%3E") no-repeat center / contain;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-6.2-6.5-11a6.5 6.5 0 0 1 13 0c0 4.8-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.3'/%3E%3C/svg%3E") no-repeat center / contain;
}
.tib-encart__contact .tib-c--in a:before{
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='3'/%3E%3Cpath d='M8 10.5v6M8 7.6v.1M11.5 16.5v-6M11.5 13.1c0-1.6 1-2.6 2.4-2.6s2.1 1 2.1 2.6v3.4'/%3E%3C/svg%3E") no-repeat center / contain;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='3'/%3E%3Cpath d='M8 10.5v6M8 7.6v.1M11.5 16.5v-6M11.5 13.1c0-1.6 1-2.6 2.4-2.6s2.1 1 2.1 2.6v3.4'/%3E%3C/svg%3E") no-repeat center / contain;
}
@media (min-width:1025px) and (max-width:1200px){
.tib-contact .e-con.tib-photo{ flex-basis:360px; width:360px; max-width:360px; }
}
@media (max-width:767px){
.tib-frm{ grid-template-columns:1fr; }
}
/* ============================================================
25 · PAGES FAQ — « Les questions traitées en détail ailleurs »
Rendu par [tib_renvois] (tib-blocs.php) : les métiers ou profils, puis
les moments, lus dans le menu ; sous chaque page, les questions de sa
propre FAQ, lues dans la page. Rien à tenir à jour à la main.
Ajouté le 09/10/2026.
============================================================ */
.tib-renvois__cols{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px 64px;
}
.tib-renvois__k{
margin:0 0 14px;
font-family:"Outfit",sans-serif;
font-weight:500;
font-size:var(--tib-fs-etiquette);
line-height:1.4;
letter-spacing:.16em;
text-transform:uppercase;
color:var(--tib-navy);
}
.tib-renvois__page{
margin:0;
padding:16px 0 8px;
border-top:1px solid rgba(1,9,106,.12);
font-family:"Outfit",sans-serif;
font-size:var(--tib-fs-intro);
line-height:1.3;
}
.tib-renvois__page a{ color:var(--tib-navy); text-decoration:none; }
.tib-renvois__page a:after{ content:"\00a0\2192"; color:var(--tib-acc); }
.tib-renvois__page a:hover{ text-decoration:underline; text-underline-offset:4px; }
.tib-renvois__q{ list-style:none; margin:0 0 16px; padding:0; }
.tib-renvois__q li{
position:relative;
margin:0;
padding:3px 0 3px 18px;
font-size:var(--tib-fs-petit);
line-height:1.5;
color:var(--tib-ink);
}
.tib-renvois__q li:before{
content:"";
position:absolute;
left:0;
top:13px;
width:8px;
height:1px;
background:var(--tib-acc);
}
.tib-renvois__q + .tib-renvois__k,
.tib-renvois__page + .tib-renvois__k{ margin-top:30px; }
@media (max-width:767px){
.tib-renvois__cols{ grid-template-columns:1fr; }
}
/* ============================================================
26 · PAGES FAQ — la teinte claire de l'univers
Demandé par Sven le 09/10/2026 : le sommaire et les bandes des pages
FAQ prennent la teinte claire de l'univers (--tib-accL), plus lisible
que la bande très pâle. L'encre douce #5B5F73 y tient 5,4:1.
Le fond du sommaire réglé dans Elementor est remplacé ici.
============================================================ */
.tib-faq__nav > .elementor-widget-container{ background-color:var(--tib-accL) !important; }
body:has(.tib-faq-page) .tib-s.tib-s--band{ background-color:var(--tib-accL); }
/* ============================================================
27 · CARTE DU CABINET — [tib_carte], en bandeau sur la page Contact
Rendu par tib-blocs.php. Avec la clé Google Maps : carte stylée par
script (couleurs du site). Sans clé : la carte Google intégrée, passée
en camaïeu bleu (niveaux de gris, puis teinte du bleu de marque), et le
repère du cabinet posé au centre, par-dessus celui de Google.
L'encart d'adresse s'aligne sur la grille des sections. Ajouté le 09/10/2026.
============================================================ */
.tib-carte{
--tib-carte-h:380px;
--tib-grille-g:24px;
position:relative;
height:var(--tib-carte-h);
overflow:hidden;
background:#E6E6F0;
}
@media (min-width:1025px){ .tib-carte{ --tib-grille-g:calc((100% - 960px) / 2); } }
@media (min-width:1201px){ .tib-carte{ --tib-grille-g:calc((100% - 1100px) / 2); } }
@media (min-width:1441px){ .tib-carte{ --tib-grille-g:calc((100% - 1300px) / 2); } }
.tib-carte__map{
position:absolute;
inset:0;
width:100%;
height:100%;
border:0;
display:block;
}
/* Carte intégrée : Google y pose sa propre fiche d'adresse en haut à gauche.
La carte déborde vers le haut pour la sortir du cadre ; le bas, où sont
le logo et les mentions de Google, reste visible. Le repère suit le
centre de la carte, remonté d'autant. */
.tib-carte__map--embed{
--tib-carte-rogne:130px;
top:calc(-1 * var(--tib-carte-rogne));
height:calc(100% + var(--tib-carte-rogne));
filter:grayscale(1) contrast(.9) brightness(1.08);
}
.tib-carte--embed .tib-carte__pin{ top:calc(50% - 65px); }
.tib-carte--embed:after{
content:"";
position:absolute;
inset:0;
background:#01096a;
mix-blend-mode:color;
opacity:.5;
pointer-events:none;
}
.tib-carte__pin{
position:absolute;
z-index:2;
left:50%;
top:50%;
width:36px;
height:48px;
margin:-48px 0 0 -18px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='48' viewBox='0 0 36 48'%3E%3Cpath d='M18 0C8.06 0 0 8.06 0 18c0 13.5 18 30 18 30s18-16.5 18-30C36 8.06 27.94 0 18 0z' fill='%2301096a'/%3E%3Ccircle cx='18' cy='18' r='7' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
pointer-events:none;
}
.tib-carte__encart{
position:absolute;
z-index:3;
left:var(--tib-grille-g);
bottom:32px;
min-width:230px;
padding:20px 24px 22px;
background:#fff;
border-radius:12px;
box-shadow:0 14px 34px rgba(1,9,106,.16);
}
.tib-carte__encart p{ margin:0; }
.tib-carte__encart .tib-carte__adr{ margin:0 !important; }
.tib-carte__k{
margin:0 0 8px !important;
font-family:"Outfit",sans-serif;
font-weight:500;
font-size:var(--tib-fs-etiquette);
line-height:1.4;
letter-spacing:.16em;
text-transform:uppercase;
color:var(--tib-navy);
}
.tib-carte__adr{
font-family:"Outfit",sans-serif;
font-size:var(--tib-fs-intro);
line-height:1.35;
color:var(--tib-navy);
}
.tib-carte__lien{
display:flex;
width:fit-content;
align-items:center;
gap:10px;
margin-top:14px;
font-family:"Nunito Sans",sans-serif;
font-size:var(--tib-fs-petit);
font-weight:700;
color:var(--tib-navy) !important;
text-decoration:none !important;
}
.tib-carte__lien:after{
content:"\2192";
display:inline-flex;
align-items:center;
justify-content:center;
width:26px;
height:26px;
border-radius:50%;
background:var(--tib-navy);
color:#fff;
line-height:1;
transition:transform .18s ease-out;
}
.tib-carte__lien:hover{ text-decoration:underline !important; text-underline-offset:3px; }
.tib-carte__lien:hover:after{ transform:translateX(4px); }
@media (max-width:767px){
.tib-carte{ --tib-carte-h:300px; --tib-grille-g:20px; }
.tib-carte__encart{ bottom:20px; min-width:0; padding:16px 18px 18px; }
}
/* ============================================================
28 · COIN DU PIED DE PAGE — quand la page finit sur une bande
Le coin arrondi du pied de page laisse voir le blanc de la page. Quand
la dernière section est une bande colorée, une pièce de sa couleur est
glissée derrière ce coin (sous le pied de page, invisible ailleurs).
Ajouté le 09/10/2026, avec les bandes plus soutenues des pages FAQ.
============================================================ */
body:has(.elementor > .tib-s--band:last-child) #qodef-page-outer:after{
content:"";
position:absolute;
z-index:-1;
left:0;
right:0;
top:100%;
height:220px;
background:var(--tib-band);
pointer-events:none;
}
body:has(.tib-faq-page):has(.elementor > .tib-s--band:last-child) #qodef-page-outer:after{ background:var(--tib-accL); }
/* ============================================================
29 · BANDEROLE DE CHIFFRES — [tib_chiffres] (tib-publications.php)
Demandée par Samuel le 11/10/2026 ; deux versions à juger : trois
chiffres immobiles (style="fixe"), ou une bande qui défile
(style="defile"). Sven retient d'abord la bande qui défile (11/10),
puis revient aux trois colonnes (12/10 : « trop promo »). Même place :
conteneur tib-chiffres-s juste après la section tib-avancer, sans marge
propre, aligné sur la grille (1 180 px, 40 px de côté, 20 sur mobile) ;
la section raccourcit son bas. Les chiffres : tib_chiffres_valeurs().
Le « + » et le « % » à l'accent : chiffres de plus de 24 px (CHARTE § I).
============================================================ */
.elementor .e-con.tib-chiffres-s{ --padding-top:0px; --padding-bottom:0px; background-color:#fff; }
.elementor .elementor-element.e-con.tib-avancer:has(+ .e-con.tib-chiffres-s){ --padding-bottom:64px; }
.tib-chf i{ font-style:normal; color:var(--tib-acc); }
.tib-chf--fixe{
display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
width:100%; margin:0; padding:0; list-style:none;
border-top:1px solid var(--tib-bord); border-bottom:1px solid var(--tib-bord);
}
/* La marge de liste du thème (27 px sous le liseré) retirée (Sven, 12/10) */
.elementor .elementor-widget-shortcode ul.tib-chf--fixe{ margin:0; }
.tib-chf--fixe .tib-chf__c{ margin:0; padding:40px 36px 38px; border-left:1px solid var(--tib-bord); }
.tib-chf--fixe .tib-chf__c:first-child{ padding-left:0; border-left:0; }
.tib-chf--fixe .tib-chf__c::before{ display:none !important; }
.tib-chf--fixe strong{
display:block;
font-family:"Outfit",sans-serif; font-weight:400;
font-size:var(--tib-fs-page); line-height:1; letter-spacing:-.02em;
color:var(--tib-navy);
}
.tib-chf--fixe span{
display:block; margin-top:12px;
font-family:"Nunito Sans",sans-serif;
font-size:var(--tib-fs-texte); line-height:1.5; color:var(--tib-soft);
}
.tib-chf__lu{
position:absolute !important; width:1px; height:1px; margin:-1px; padding:0;
overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.tib-chf--defile{ width:100%; }
.tib-chf__bande{
overflow:hidden; padding:26px 0;
border-top:1px solid var(--tib-bord); border-bottom:1px solid var(--tib-bord);
}
.tib-chf__piste{ display:flex; width:max-content; animation:tib-chf 38s linear infinite; }
.tib-chf__bande:hover .tib-chf__piste{ animation-play-state:paused; }
.tib-chf__i{
display:flex; align-items:center; white-space:nowrap;
font-family:"Outfit",sans-serif; font-weight:300;
font-size:var(--tib-fs-bloc); line-height:1.2; color:var(--tib-navy);
}
.tib-chf__i b{ margin-right:14px; font-weight:400; font-size:var(--tib-fs-section); letter-spacing:-.02em; }
.tib-chf__i em{ flex:none; width:8px; height:8px; margin:0 44px; border-radius:50%; background-color:var(--tib-acc); }
@keyframes tib-chf{ to{ transform:translateX(-50%); } }
@media (max-width:767px){
.elementor .elementor-element.e-con.tib-avancer:has(+ .e-con.tib-chiffres-s){ --padding-bottom:48px; }
.tib-chf--fixe .tib-chf__c{ padding:24px 12px 22px; }
.tib-chf--fixe strong{ font-size:var(--tib-fs-chiffre); }
.tib-chf--fixe span{ margin-top:8px; font-size:var(--tib-fs-petit); }
.tib-chf__bande{ padding:18px 0; }
.tib-chf__i{ font-size:var(--tib-fs-carte); }
.tib-chf__i b{ font-size:var(--tib-fs-chiffre); }
.tib-chf__i em{ margin:0 28px; }
}
@media (prefers-reduced-motion:reduce){
.tib-chf__piste{ animation:none; }
}
/* ============================================================
30 · PUBLICATIONS — hero, glossaire ([tib_glossaire])
Ajouté le 11/10/2026. Les pages de Publications n'ont pas d'univers :
l'accent y est le bleu de marque (§ 14).
Hero voilé de bleu (tib-hero--pub) : remplacé le 11/10 au soir par le
hero clair (§ 33) ; règles gardées, plus aucune page ne s'en sert.
============================================================ */
.e-con.tib-hero--pub{ position:relative; isolation:isolate; }
.e-con.tib-hero--pub::before{
content:""; position:absolute; inset:0; z-index:-1;
background:linear-gradient(90deg, rgba(1,9,106,.92) 0%, rgba(1,9,106,.78) 45%, rgba(1,9,106,.25) 100%);
}
.tib-hero--pub .qodef-section-title .qodef-m-text{ color:rgba(255,255,255,.88); }
.tib-glo{ --tib-glo-haut:96px; }
.tib-glo [hidden]{ display:none !important; }
.tib-glo__outils{
position:sticky; top:var(--tib-glo-haut); z-index:5;
padding:18px 0 14px; background-color:#fff;
border-bottom:1px solid var(--tib-bord);
}
.tib-glo__barre{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; }
.tib-glo__cherche{ flex:1 1 340px; max-width:520px; margin:0; }
.tib-glo__cherche input[type="search"]{
width:100%; height:auto; box-sizing:border-box; margin:0;
padding:13px 18px 13px 46px;
border:1px solid var(--tib-bord); border-radius:999px;
background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2301096a' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E") 18px center / 18px no-repeat;
font-family:"Nunito Sans",sans-serif; font-size:var(--tib-fs-carte-texte); line-height:1.4; color:var(--tib-ink);
}
.tib-glo__cherche input[type="search"]:focus{ outline:2px solid var(--tib-navy); outline-offset:1px; border-color:var(--tib-navy); }
.tib-glo__filtres{ display:flex; flex-wrap:wrap; gap:8px; }
.tib-glo__filtres button,
.tib-urs__sel button{
margin:0; padding:10px 18px;
font-family:"Outfit",sans-serif; font-size:var(--tib-fs-petit); font-weight:400; line-height:1.3; text-transform:none; letter-spacing:0;
color:var(--tib-navy); background:#fff;
border:1px solid var(--tib-bord); border-radius:999px;
cursor:pointer; text-align:left;
}
.tib-glo__filtres button:hover,
.tib-urs__sel button:hover{ border-color:var(--tib-navy); }
.tib-glo__filtres button[aria-pressed="true"],
.tib-urs__sel button[aria-pressed="true"]{ border-color:var(--tib-navy); box-shadow:inset 0 0 0 1px var(--tib-navy); font-weight:600; }
.tib-glo__n{ margin:0 0 0 auto; font-size:var(--tib-fs-mention); color:var(--tib-soft); }
.tib-glo__az{ display:flex; flex-wrap:wrap; gap:2px; margin-top:12px; }
.tib-glo__az a,
.tib-glo__az span{
display:inline-flex; align-items:center; justify-content:center;
width:30px; height:30px; border-radius:6px;
font-family:"Outfit",sans-serif; font-size:var(--tib-fs-petit); line-height:1;
}
.tib-glo__az a{ font-weight:500; color:var(--tib-navy); text-decoration:none; }
.tib-glo__az a:hover{ background-color:var(--tib-band); }
.tib-glo__az span,
.tib-glo__az a.is-off{ color:#B4B6C4; pointer-events:none; }
.tib-glo__lettre{
display:grid; grid-template-columns:110px minmax(0,1fr); gap:0 40px;
padding:44px 0; border-bottom:1px solid var(--tib-bord);
scroll-margin-top:calc(var(--tib-glo-haut) + 150px);
}
.tib-glo__l{
position:sticky; top:calc(var(--tib-glo-haut) + 150px); align-self:start;
margin:0;
font-family:"Outfit",sans-serif; font-weight:300;
font-size:var(--tib-fs-section); line-height:1; letter-spacing:-.01em;
color:var(--tib-navy);
}
.tib-glo__grille{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 48px; }
.tib-glo__e{ scroll-margin-top:calc(var(--tib-glo-haut) + 150px); }
.tib-glo__e:target .tib-glo__t{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px; }
.tib-glo__tete{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0 0 10px; }
.tib-glo__t{
margin:0;
font-family:"Outfit",sans-serif; font-weight:400;
font-size:var(--tib-fs-carte); line-height:1.25; letter-spacing:-.01em;
color:var(--tib-navy);
}
.tib-glo__tag{
padding:4px 10px; border-radius:999px;
font-family:"Outfit",sans-serif; font-weight:500;
font-size:var(--tib-fs-etiquette); line-height:1.3; letter-spacing:.08em; text-transform:uppercase;
color:var(--tib-navy); background-color:var(--tib-band);
}
.tib-glo__tag--sante{ background-color:#DDF2EA; }
.tib-glo__tag--entreprises{ background-color:#FDEADF; }
.tib-glo__d p{ margin:0 0 10px; font-size:var(--tib-fs-texte); line-height:1.65; color:var(--tib-ink); }
.tib-glo__x{ margin:0 0 12px; font-size:var(--tib-fs-petit); line-height:1.6; color:var(--tib-soft); }
.tib-glo__x span{ font-weight:700; color:var(--tib-navy); }
.tib-glo__lien{ font-size:var(--tib-fs-mention); font-weight:700; line-height:1.4; color:var(--tib-navy); text-decoration:none; }
.tib-glo__lien i{ font-style:normal; }
.tib-glo__lien:hover{ text-decoration:underline; text-underline-offset:4px; }
.tib-glo__vide{ margin:0; padding:48px 0; font-size:var(--tib-fs-texte); color:var(--tib-soft); }
.tib-glo__vide a{ color:var(--tib-navy); text-decoration:underline; text-underline-offset:3px; }
@media (max-width:1024px){
.tib-glo__grille{ grid-template-columns:1fr; gap:30px; }
.tib-glo__lettre{ grid-template-columns:72px minmax(0,1fr); gap:0 24px; }
}
@media (max-width:767px){
.tib-glo__outils{ position:static; }
.tib-glo__n{ flex:1 1 100%; margin:0; }
.tib-glo__lettre{ grid-template-columns:1fr; padding:32px 0; }
.tib-glo__l{ position:static; margin-bottom:18px; font-size:var(--tib-fs-chiffre); }
.tib-glo__az a, .tib-glo__az span{ width:27px; height:27px; }
}
/* ============================================================
31 · GUIDES — [tib_guides] (tib-publications.php)
Les cartes : une couverture dessinée en CSS (le document sur la
teinte de son univers), puis le titre, la phrase, ce qu'on y trouve.
Le formulaire reprend le balisage .tib-frm du Contact (§ 24).
============================================================ */
.tib-gui__grille{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.tib-gui__grille.tib-gui-n1,
.tib-gui__grille.tib-gui-n2,
.tib-gui__grille.tib-gui-n4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.tib-gui__c{
--tib-gui-acc:#01096a; --tib-gui-fond:#F0F0F6;
display:flex; flex-direction:column; overflow:hidden;
background:#fff; border:1px solid var(--tib-bord); border-radius:16px;
transition:box-shadow .25s ease-out;
}
.tib-gui__c:hover{ box-shadow:0 22px 44px -26px rgba(1,9,106,.30); }
.tib-gui__c--sante{ --tib-gui-acc:#0E9570; --tib-gui-fond:#DDF2EA; }
.tib-gui__c--entreprises{ --tib-gui-acc:#E85F12; --tib-gui-fond:#FDEADF; }
.tib-gui__couv{ padding:34px 44px 0; background-color:var(--tib-gui-fond); }
.tib-gui__doc{
position:relative;
display:flex; flex-direction:column; justify-content:space-between; gap:18px;
min-height:256px; padding:26px 26px 22px 30px;
background-color:var(--tib-navy); border-radius:8px 8px 0 0;
box-shadow:0 18px 40px -22px rgba(1,9,106,.55);
}
.tib-gui__doc::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background-color:var(--tib-gui-acc); border-radius:8px 0 0 0; }
.tib-gui__couv-k{
font-family:"Outfit",sans-serif; font-weight:500;
font-size:var(--tib-fs-etiquette); line-height:1.3; letter-spacing:.16em; text-transform:uppercase;
color:rgba(255,255,255,.78);
}
.tib-gui__couv-t{ font-family:"Outfit",sans-serif; font-weight:300; font-size:var(--tib-fs-bloc); line-height:1.2; letter-spacing:-.01em; color:#fff; }
.tib-gui__couv-m{
font-family:"Outfit",sans-serif; font-weight:400;
font-size:var(--tib-fs-etiquette); letter-spacing:.32em; text-transform:uppercase;
color:rgba(255,255,255,.6);
}
.tib-gui__corps{ flex:1 1 auto; display:flex; flex-direction:column; gap:10px; padding:26px 28px 28px; }
.tib-gui__t{ margin:0; font-family:"Outfit",sans-serif; font-weight:400; font-size:var(--tib-fs-carte); line-height:1.25; letter-spacing:-.01em; color:var(--tib-navy); }
.tib-gui__d{ margin:0; font-size:var(--tib-fs-carte-texte); line-height:1.6; color:var(--tib-soft); }
.tib-gui__l ul{ margin:6px 0 0; padding:0; list-style:none; }
.tib-gui__l li{ position:relative; margin:0 0 8px; padding-left:22px; font-size:var(--tib-fs-petit); line-height:1.5; color:var(--tib-ink); }
.tib-gui__l li::before{ content:""; position:absolute; left:0; top:.68em; width:10px; height:2px; background-color:var(--tib-gui-acc); }
.tib-gui__l p{ margin:0; }
.tib-gui__b{
margin-top:auto; padding-top:12px;
font-size:var(--tib-fs-mention); font-weight:700; line-height:1.4;
color:var(--tib-navy); text-decoration:none;
}
.tib-gui__b i{ font-style:normal; }
.tib-gui__b:hover{ text-decoration:underline; text-underline-offset:4px; }
.tib-gui__form{
display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:40px 56px;
margin-top:96px; padding:56px;
background-color:var(--tib-band); border-radius:16px;
scroll-margin-top:120px;
}
.tib-gui__form-k{
margin:0 0 14px;
font-family:"Outfit",sans-serif; font-weight:500;
font-size:var(--tib-fs-etiquette); line-height:1.4; letter-spacing:.16em; text-transform:uppercase;
color:var(--tib-soft);
}
.tib-gui__form-t{
margin:0 0 16px;
font-family:"Outfit",sans-serif; font-weight:400;
font-size:var(--tib-fs-chapeau); line-height:1.2; letter-spacing:-.01em; color:var(--tib-navy);
}
.tib-gui__form-d{ margin:0; font-size:var(--tib-fs-texte); line-height:1.65; color:var(--tib-ink); }
.tib-frm select{
width:100%; height:auto; box-sizing:border-box; margin:0;
padding:13px 40px 13px 16px;
border:1px solid var(--tib-bord); border-radius:10px;
background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2301096a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center / 16px no-repeat;
-webkit-appearance:none; appearance:none;
font-family:"Nunito Sans",sans-serif; font-size:var(--tib-fs-carte-texte); line-height:1.5; color:var(--tib-ink);
}
.tib-frm select:focus{ outline:2px solid var(--tib-navy); outline-offset:1px; border-color:var(--tib-navy); }
.tib-frm--apercu .tib-frm__ch > label{ display:block; margin:0 0 8px; font-size:var(--tib-fs-petit); font-weight:700; line-height:1.4; color:var(--tib-navy); }
.tib-frm--apercu .tib-frm__rgpd{ grid-column:1 / -1; }
.tib-frm--apercu button[type="submit"]{
display:inline-flex; align-items:center; gap:10px;
padding:15px 30px; border:0; border-radius:999px;
font-family:"Outfit",sans-serif; font-size:var(--tib-fs-petit); font-weight:500; line-height:1;
color:#fff; background-color:var(--tib-navy); cursor:not-allowed; opacity:.6;
}
@media (max-width:1024px){
.tib-gui__grille,
.tib-gui__grille[class*="tib-gui-n"]{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.tib-gui__form{ grid-template-columns:1fr; padding:40px; }
}
@media (max-width:767px){
.tib-gui__grille,
.tib-gui__grille[class*="tib-gui-n"]{ grid-template-columns:1fr; gap:16px; }
.tib-gui__couv{ padding:26px 32px 0; }
.tib-gui__doc{ min-height:180px; }
.tib-gui__form{ margin-top:64px; padding:28px 20px; }
}
@media (prefers-reduced-motion:reduce){ .tib-gui__c{ transition:none; } }
/* ============================================================
32 · SIMULATEURS ET OUTIL URSSAF
[tib_simulateurs], [tib_urssaf]. Ajouté le 11/10/2026.
============================================================ */
.tib-sim{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.tib-sim__c{
display:flex; flex-direction:column; gap:10px;
padding:32px 34px 30px;
background:#fff; border:1px solid var(--tib-bord); border-radius:16px;
}
.tib-sim__c--site{ border-color:var(--tib-navy); }
.tib-sim__k,
.tib-urs__k{
margin:0;
font-family:"Outfit",sans-serif; font-weight:500;
font-size:var(--tib-fs-etiquette); line-height:1.4; letter-spacing:.14em; text-transform:uppercase;
color:var(--tib-soft);
}
.tib-sim__t{ margin:0; font-family:"Outfit",sans-serif; font-weight:400; font-size:var(--tib-fs-carte); line-height:1.25; letter-spacing:-.01em; color:var(--tib-navy); }
.tib-sim__d{ margin:0 0 8px; font-size:var(--tib-fs-carte-texte); line-height:1.6; color:var(--tib-soft); }
.tib-sim__b{
display:inline-flex; align-items:center; gap:10px; align-self:flex-start;
margin-top:auto; padding:12px 22px;
border:1px solid var(--tib-navy); border-radius:999px;
font-family:"Outfit",sans-serif; font-size:var(--tib-fs-petit); font-weight:500; line-height:1.2;
color:var(--tib-navy); text-decoration:none;
transition:background-color .2s ease-out, color .2s ease-out;
}
.tib-sim__b i{ font-style:normal; }
.tib-sim__b:hover{ background-color:var(--tib-navy); color:#fff; }
.elementor .elementor-element.e-con.tib-pub-s{ --padding-bottom:40px; }
.tib-sim__note p{ max-width:none; margin:0 0 10px; font-size:var(--tib-fs-texte); line-height:1.65; color:var(--tib-ink); }
.tib-sim__note p:last-child{ margin-bottom:0; }
/* 38.2 Outil cotisations (20/10/2026) : cartes métier + caisse, phrase d'entrée,
limites et appel sous l'outil. Remplace les pastilles. */
.tib-urs__k{ margin:0 0 14px; }
.tib-urs__sel{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.tib-urs__sel .tib-urs__c{
display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:6px;
padding:16px 18px; border-radius:12px; font-weight:400;
transition:border-color .2s ease-out, background-color .2s ease-out;
}
.tib-urs__caisse{ font-family:"Outfit",sans-serif; font-weight:600; font-size:var(--tib-fs-etiquette); line-height:1.3; letter-spacing:.12em; text-transform:uppercase; color:var(--tib-acc,#0E9570); }
.tib-urs__metier{ font-family:"Outfit",sans-serif; font-size:var(--tib-fs-petit); line-height:1.35; color:var(--tib-navy); }
.tib-urs__sel .tib-urs__c:hover{ border-color:var(--tib-acc,#0E9570); }
.tib-urs__sel .tib-urs__c[aria-pressed="true"]{
font-weight:400; border-color:var(--tib-acc,#0E9570); box-shadow:inset 0 0 0 1px var(--tib-acc,#0E9570);
background:#f2f9f6; background:color-mix(in srgb, var(--tib-acc,#0E9570) 6%, #fff);
}
.tib-urs__sel .tib-urs__c[aria-pressed="true"] .tib-urs__metier{ font-weight:600; }
.tib-urs__mode{ max-width:760px; margin:28px 0 0; }
.tib-urs__nom{ margin:0 0 6px; font-family:"Outfit",sans-serif; font-weight:500; font-size:var(--tib-fs-carte); line-height:1.3; color:var(--tib-navy); }
.tib-urs__aide{ margin:0; font-size:var(--tib-fs-texte); line-height:1.6; color:var(--tib-ink); }
.tib-urs__pied{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:24px 48px; align-items:start; margin-top:24px; }
.tib-urs__limites{ margin:0; padding:0; list-style:none; }
.tib-urs__limites li{ position:relative; margin:0 0 8px; padding-left:20px; font-size:var(--tib-fs-carte-texte); line-height:1.55; color:var(--tib-soft); }
.tib-urs__limites li:before{ content:""; position:absolute; left:0; top:.75em; width:10px; height:2px; background:#c3c4de; }
.tib-urs__limites a{ color:var(--tib-navy); text-underline-offset:3px; }
.tib-urs__cta{
margin:0; padding:22px 24px; border-radius:12px;
background:#f2f9f6; background:color-mix(in srgb, var(--tib-acc,#0E9570) 7%, #fff);
font-size:var(--tib-fs-texte); line-height:1.55; color:var(--tib-ink);
}
.tib-urs__cta strong{ display:block; margin-bottom:4px; font-family:"Outfit",sans-serif; font-weight:500; font-size:var(--tib-fs-carte); line-height:1.3; color:var(--tib-navy); }
.tib-urs__cta a{
display:inline-flex; align-items:center; margin-top:14px; padding:11px 20px;
border:1px solid var(--tib-navy); border-radius:999px;
font-family:"Outfit",sans-serif; font-size:var(--tib-fs-petit); font-weight:500; line-height:1.2;
color:var(--tib-navy); text-decoration:none;
transition:background-color .2s ease-out, color .2s ease-out;
}
.tib-urs__cta a:hover{ background-color:var(--tib-navy); color:#fff; }
@media (max-width:1024px){ .tib-urs__sel{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:767px){ .tib-urs__pied{ grid-template-columns:1fr; } }
@media (max-width:480px){ .tib-urs__sel{ grid-template-columns:1fr; } }
.tib-urs__box{
min-height:360px; margin-top:20px; padding:10px;
background:#fff; border:1px solid var(--tib-bord); border-radius:12px;
}
.tib-urs-2 > .e-con-inner,
.tib-urs-2:not(:has(> .e-con-inner)){ display:grid !important; grid-template-columns:1fr 1fr; gap:28px 56px; }
.tib-urs-2 .qodef-section-title .qodef-m-title{ font-size:var(--tib-fs-carte); }
.tib-urs-2 .qodef-section-title .qodef-m-text{ font-size:var(--tib-fs-texte); color:var(--tib-ink); }
@media (max-width:767px){
.tib-sim{ grid-template-columns:1fr; gap:16px; }
.tib-sim__c{ padding:24px 22px; }
.tib-urs-2 > .e-con-inner,
.tib-urs-2:not(:has(> .e-con-inner)){ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){ .tib-sim__b{ transition:none; } }
/* Profil fusionné (Startup & scale-up, 11/10/2026) : les enjeux en deux
rangées titrées — une étiquette pleine largeur dans la grille des cartes */
.tib-enjeux .tib-enj-grille > .elementor-widget.tib-enj__rang{ flex:0 0 100%; width:100%; max-width:100%; margin:18px 0 -4px; }
.tib-enjeux .tib-enj-grille > .elementor-widget.tib-enj__rang:first-child{ margin-top:0; }
.tib-enj__rang p{
margin:0;
font-family:"Outfit",sans-serif; font-weight:500;
font-size:var(--tib-fs-etiquette); line-height:1.4; letter-spacing:.16em; text-transform:uppercase;
color:var(--tib-navy);
}
.tib-enj__rang p span{ margin-left:14px; font-family:"Nunito Sans",sans-serif; font-weight:400; letter-spacing:0; text-transform:none; font-size:var(--tib-fs-petit); color:var(--tib-soft); }
@media (max-width:767px){ .tib-enj__rang p span{ display:block; margin:6px 0 0; } }
/* Simulateurs : la note sous les cartes, en encart sur la teinte de bande */
.tib-pub-s .elementor-widget.tib-sim__note{ margin-top:16px; padding:32px 36px; background-color:var(--tib-band); border-radius:16px; }
@media (max-width:767px){ .tib-pub-s .elementor-widget.tib-sim__note{ padding:24px 22px; } }
/* ============================================================
33 · HERO CLAIR — pages FAQ, Publications, Le cabinet
La structure du hero des pages métier et moment (bandeau encadré
1180 px, 360 px de haut, texte de 620 px), avec un texte bleu sur
une photo claire, sans voile (Sven, 12/10/2026). Surtitre, H1 et
phrase d'intro à gauche, centrés en hauteur. La photo se choisit
claire et calme là où se pose le texte (son cadrage mobile se
règle dans Elementor). Classes : tib-hero tib-hero--clair.
============================================================ */
.elementor .elementor-element.e-con.tib-hero--clair{ background-color:var(--tib-band); }
.tib-hero--clair .qodef-section-title .qodef-m-subtitle{ color:var(--tib-ink) !important; }
.tib-hero--clair .qodef-section-title .qodef-m-subtitle:after{ background:var(--tib-acc); }
.tib-hero--clair .qodef-section-title .qodef-m-title{ color:var(--tib-navy); }
.tib-hero--clair .qodef-section-title .qodef-m-title .qodef-m-decorated{ color:var(--tib-acc); }
.elementor .e-con.tib-hero--clair .qodef-section-title .qodef-m-text{ color:var(--tib-ink); }
/* ============================================================
34 · BLOG — mise en page « Right Sidebar » de OneGoal (Sven, 11/10/2026)
Section tib-s tib-blog en ligne : la liste d'articles du thème (Blog
List, une colonne) dans tib-blog__liste, [tib_blog_aside] dans
tib-blog__aside. Sous 1025 px, la colonne passe sous la liste.
============================================================ */
.tib-blog .qodef-blog-item .qodef-e-media-image,
.tib-blog .qodef-blog-item .qodef-e-media-image img{ border-radius:16px; }
/* Images de liste en paysage, au format de la démo (1300 × 830) */
.tib-blog .qodef-blog-item .qodef-e-media-image img{ width:100%; height:auto; aspect-ratio:1300/830; object-fit:cover; }
.tib-baside__cta .qodef-button.qodef-layout--filled.qodef-html--link{ background-color:var(--tib-navy); border-color:var(--tib-navy); color:#fff; }
.tib-baside__cta .qodef-button.qodef-layout--filled.qodef-html--link:hover{ background-color:#fff; color:var(--tib-navy); }
.tib-baside{ display:flex; flex-direction:column; }
.tib-baside__w + .tib-baside__w{ margin-top:36px; padding-top:36px; border-top:1px solid var(--tib-bord); }
.tib-baside__search{ position:relative; margin:0; }
.tib-baside__search input[type="search"]{
width:100%; height:56px; margin:0; padding:0 56px 0 24px;
border:0; border-radius:28px; background-color:var(--tib-band);
font-family:"Nunito Sans",sans-serif; font-size:var(--tib-fs-petit); color:var(--tib-ink);
}
.tib-baside__search input[type="search"]::placeholder{ color:var(--tib-soft); opacity:1; }
.tib-baside__search input[type="search"]:focus-visible{ outline:2px solid var(--tib-navy); outline-offset:2px; }
.tib-baside__search button{
position:absolute; top:50%; right:8px; transform:translateY(-50%);
display:flex; align-items:center; justify-content:center;
width:40px; height:40px; padding:0; border:0; border-radius:50%;
background:transparent; color:var(--tib-navy); cursor:pointer;
}
.tib-baside__search button:hover{ background-color:#fff; }
.tib-baside__t{
margin:0 0 18px;
font-family:"Outfit",sans-serif; font-weight:400; font-size:var(--tib-fs-carte); line-height:1.2;
color:var(--tib-navy);
}
.tib-baside__cats, .tib-baside__arts{ list-style:none; margin:0; padding:0; }
.tib-baside__cats li + li{ margin-top:10px; }
.tib-baside__cats a{
font-family:"Outfit",sans-serif; font-weight:500;
font-size:var(--tib-fs-etiquette); letter-spacing:.16em; text-transform:uppercase;
color:var(--tib-navy);
}
.tib-baside__arts li + li{ margin-top:28px; }
.tib-baside__art{ display:flex; flex-direction:column; gap:6px; color:inherit; text-decoration:none; }
.tib-baside__img{ display:block; margin-bottom:8px; overflow:hidden; border-radius:16px; aspect-ratio:3/2; background-color:var(--tib-accL); }
.tib-baside__img img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s ease-out; }
.tib-baside__art:hover .tib-baside__img img{ transform:scale(1.04); }
.tib-baside__date{ font-size:var(--tib-fs-mention); color:var(--tib-soft); }
.tib-baside__titre{
font-family:"Outfit",sans-serif; font-weight:400; font-size:var(--tib-fs-intro); line-height:1.3;
color:var(--tib-navy);
}
.tib-baside__art:hover .tib-baside__titre{ text-decoration:underline; text-decoration-color:var(--tib-acc); text-underline-offset:4px; }
.tib-baside__w.tib-baside__cta{ padding:28px 26px; border-top:0; border-radius:16px; background-color:var(--tib-band); }
.tib-baside__k{
margin:0 0 10px;
font-family:"Outfit",sans-serif; font-weight:500;
font-size:var(--tib-fs-etiquette); letter-spacing:.16em; text-transform:uppercase;
color:var(--tib-soft);
}
.tib-baside__cta-t{
margin:0 0 20px;
font-family:"Outfit",sans-serif; font-weight:400; font-size:var(--tib-fs-bloc); line-height:1.15;
color:var(--tib-navy);
}
@media (prefers-reduced-motion:reduce){ .tib-baside__img img{ transition:none; } }
/* 34 bis · Retours du 12/10 (Sven) */
/* Intro de la liste (surtitre, H2, phrase) ; titres d'articles en H3, à la
taille du bloc de l'accueil (titre de carte) */
.tib-blog .elementor-widget.tib-blog__tete{ margin-bottom:56px; }
.tib-blog .qodef-blog-item .qodef-e-title{ font-size:var(--tib-fs-carte); line-height:1.28; letter-spacing:-.01em; }
/* Pas de lien vers les pages d'archives (rubrique, mois) : vides tant qu'il y a
peu d'articles. La date reste affichée. Vaut aussi pour l'accueil. */
.qodef-blog .qodef-blog-item .qodef-e-categories{ display:none; }
.qodef-blog .qodef-blog-item .qodef-e-info a.entry-date{ pointer-events:none; cursor:text; }
/* Colonne : l'auteur */
.tib-baside__qui{ display:flex; align-items:center; gap:14px; margin:0 0 16px; }
.tib-baside__qui img.tib-baside__photo{ flex:0 0 64px; width:64px; height:64px; border-radius:50%; object-fit:cover; }
.tib-baside__qui p{ margin:0; font-size:var(--tib-fs-mention); line-height:1.45; color:var(--tib-soft); }
.tib-baside__qui p strong{ display:block; margin-bottom:2px; font-family:"Outfit",sans-serif; font-weight:400; font-size:var(--tib-fs-carte-texte); color:var(--tib-navy); }
.tib-baside__liens, .tib-baside__guides{ list-style:none; margin:0; padding:0; }
.tib-baside__liens li + li{ margin-top:8px; }
.tib-baside__liens a{ font-size:var(--tib-fs-petit); color:var(--tib-navy); text-decoration:underline; text-decoration-color:var(--tib-acc); text-underline-offset:4px; }
/* Lien LinkedIn : « Profil LinkedIn » précédé du picto (Sven, 12/10 : l'ancien
libellé « Le parcours de Samuel sur LinkedIn » faisait croire à un poste
chez LinkedIn). Même picto que la signature (.tib-sign__by) et l'encart Contact.
Colonne Décryptages (a.tib-li) et bouton du hub Santé (.tib-change__in). */
a.tib-li:before,
.tib-change__in a.qodef-button .qodef-m-text:before{
content:""; display:inline-block; width:18px; height:18px; margin-right:8px; vertical-align:-3px;
background-color:currentColor;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='3'/%3E%3Cpath d='M8 10.5v6M8 7.6v.1M11.5 16.5v-6M11.5 13.1c0-1.6 1-2.6 2.4-2.6s2.1 1 2.1 2.6v3.4'/%3E%3C/svg%3E") no-repeat center / contain;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='3'/%3E%3Cpath d='M8 10.5v6M8 7.6v.1M11.5 16.5v-6M11.5 13.1c0-1.6 1-2.6 2.4-2.6s2.1 1 2.1 2.6v3.4'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* Colonne : les guides */
.tib-baside__guides li{ border-top:1px solid var(--tib-bord); }
.tib-baside__guides li:last-child{ border-bottom:1px solid var(--tib-bord); }
.tib-baside__guides a{ display:flex; justify-content:space-between; gap:12px; padding:12px 0; font-family:"Outfit",sans-serif; font-size:var(--tib-fs-carte-texte); line-height:1.35; color:var(--tib-navy); }
.tib-baside__guides a:after{ content:"\2192"; color:var(--tib-acc); }
.tib-baside__guides a:hover{ text-decoration:underline; text-underline-offset:4px; }
.tib-baside__tous{ display:inline-block; margin-top:14px; font-size:var(--tib-fs-mention); font-weight:700; color:var(--tib-navy); }
/* Accueil, bloc des articles (Blog List « info sur l'image ») : coins de
16 px et images en paysage, comme la page Blog (Sven, 12/10) */
.qodef-blog.qodef-item-layout--info-on-image .qodef-blog-item .qodef-e-inner{ overflow:hidden; border-radius:16px; }
.qodef-blog.qodef-item-layout--info-on-image .qodef-e-media-image,
.qodef-blog.qodef-item-layout--info-on-image .qodef-e-media-image img{ border-radius:16px; }
.qodef-blog.qodef-item-layout--info-on-image .qodef-e-media-image img{ width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; }
/* Accueil, bloc Décryptages (Sven, 12/10) : Blog List « simple », titres en
H3, images en paysage et coins de 16 px comme la page Décryptages (classe
tib-blog posée sur la section 0800252). Le bouton « Tous les décryptages »
se place à droite du titre, calé sur la dernière ligne de la phrase. */
.elementor .tib-blog-tete .elementor-widget-wrap{ flex-wrap:nowrap; align-items:flex-end; justify-content:space-between; column-gap:48px; }
.elementor .tib-blog-tete .elementor-widget-wrap > .elementor-widget-onegoal_core_section_title{ flex:1 1 auto; width:auto; max-width:980px; }
.elementor .tib-blog-tete .elementor-widget-wrap > .elementor-widget-onegoal_core_button{ flex:0 0 auto; width:auto; margin-bottom:35px; }
@media (max-width:767px){
.elementor .tib-blog-tete .elementor-widget-wrap{ flex-wrap:wrap; }
.elementor .tib-blog-tete .elementor-widget-wrap > .elementor-widget-onegoal_core_button{ margin:0 0 8px; }
}
/* 35 · Pages légales et confirmation de rendez-vous (14/10/2026)
Gabarit simple : hero clair (§ 33), puis une colonne de texte de 760 px.
Mentions légales 9074, Politique de confidentialité 9076, Rendez-vous
confirmé 9077. .tib-todo : réserve visible en attendant Samuel. */
.tib-legal .elementor-widget-text-editor{ max-width:760px; }
.tib-legal h2{
margin:48px 0 14px;
font-family:"Outfit",sans-serif; font-weight:400;
font-size:var(--tib-fs-bloc); line-height:1.2; letter-spacing:-.01em;
color:var(--tib-navy);
}
.tib-legal h2:first-child{ margin-top:0; }
.tib-legal p, .tib-legal li{ font-size:var(--tib-fs-texte); line-height:1.65; }
.tib-legal p{ margin:0 0 14px; }
.tib-legal a{ color:var(--tib-navy); text-decoration:underline; text-decoration-color:var(--tib-acc); text-underline-offset:4px; }
.tib-legal table{ width:100%; border-collapse:collapse; margin:4px 0 18px; font-size:var(--tib-fs-petit); line-height:1.45; }
.tib-legal th, .tib-legal td{ text-align:left; vertical-align:top; padding:10px 14px 10px 0; border-bottom:1px solid var(--tib-bord); }
.tib-legal th{ font-weight:600; color:var(--tib-navy); }
.tib-legal .tib-legal__maj{ margin-top:40px; font-size:var(--tib-fs-mention); color:var(--tib-soft); }
.tib-todo{ padding:1px 6px; border-radius:4px; background:#FDEADF; color:#8A3A0C; font-size:.9em; }
@media (max-width:767px){
.tib-legal table{ font-size:var(--tib-fs-mention); }
.tib-legal th, .tib-legal td{ padding-right:10px; }
}
/* ============================================================
36 · EXPERTISES — le hub et les pages mission (17/10/2026)
36.1 les missions en lignes, comme « Votre métier » des hubs (§ 21.2),
sans colonne de repère ([tib_missions style="lignes" liste="…"]) :
une mission n'a pas d'équivalent de la caisse (Sven, 17/10)
36.2 la vitrine des missions (§ 18.6) reprise sur les pages mission :
la page en cours reste visible, sans lien, « Vous êtes ici »
============================================================ */
.tib-lig--nu .qodef-timeline-list .qodef-e-item-info{ display:none; }
.tib-vit .qodef-interactive-link-showcase .qodef-m-item.is-current .qodef-m-item-link{
display:inline-flex; align-items:baseline; flex-wrap:wrap; column-gap:16px; row-gap:4px; cursor:default;
}
.tib-vit .tib-vit-ici{
font-family:"Outfit",sans-serif; font-weight:500;
font-size:var(--tib-fs-etiquette); line-height:1.3; letter-spacing:.14em; text-transform:uppercase;
color:var(--tib-soft);
}
/* 36.3 Le bloc simple, sans image (hub Expertises, « Des missions qui se
complètent », 18/10) : le chapeau des pages métier (§ 17.3), titre de
section à gauche, texte à droite, au corps et à la couleur du texte courant. */
.tib-chapeau--titre .e-con.tib-chapeau__a{ flex:1 1 0; }
.tib-chapeau--titre .e-con.tib-chapeau__b{ flex:1.2 1 0; padding-top:30px; }
.tib-chapeau--titre .tib-chapeau__b p{ margin:0; max-width:60ch; font-size:var(--tib-fs-intro); line-height:1.65; color:var(--tib-ink); }
.tib-chapeau--titre .tib-chapeau__b p + p{ margin-top:18px; }
.tib-chapeau--titre .tib-chapeau__b strong{ font-weight:700; color:var(--tib-navy); }
@media (max-width:767px){
.tib-chapeau--titre .e-con.tib-chapeau__b{ padding-top:0; }
}
/* 36.4 Le bloc partagé « Ce que vous obtenez » (pages mission, 18/10, d'après
la planche envoyée par Sven, sans la double image) : à gauche le titre, le
texte et une rangée de pictos légendés ; à droite une photo sur toute la
hauteur, jusqu'au bord de l'écran. Le texte s'aligne sur la grille (§ 22). */
.e-con.tib-split{ --tib-grille:calc(100vw - 80px); }
@media (min-width:1025px){ .e-con.tib-split{ --tib-grille:960px; } }
@media (min-width:1201px){ .e-con.tib-split{ --tib-grille:1100px; } }
@media (min-width:1441px){ .e-con.tib-split{ --tib-grille:1300px; } }
.tib-split .e-con.tib-split__txt{
flex:1 1 50%; min-width:0; gap:56px;
padding:90px 64px 72px max(40px, calc((100vw - var(--tib-grille)) / 2));
}
.tib-split .e-con.tib-split__img{ flex:1 1 50%; min-width:0; min-height:600px; }
.tib-split .e-con.tib-split__pictos{
display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:28px 20px;
}
.tib-split .e-con.tib-split__item{ width:auto; }
.tib-split__item .qodef-section-title{ text-align:center; }
.tib-split__item .qodef-section-title .qodef-m-subtitle{
position:relative; display:block; width:44px; height:44px; margin:0 auto 14px; padding:0;
font-size:0 !important; line-height:0; color:transparent !important;
}
.tib-split__item .qodef-section-title .qodef-m-subtitle:after{ display:none; }
.tib-split__item .qodef-section-title .qodef-m-subtitle::before{
content:"" !important; display:block !important; position:absolute; inset:0; width:100%; height:100%;
background-color:var(--tib-navy);
-webkit-mask:var(--tib-picto) center / contain no-repeat;
mask:var(--tib-picto) center / contain no-repeat;
}
.tib-split__item .qodef-section-title .qodef-m-title{
font-size:var(--tib-fs-petit); line-height:1.35; letter-spacing:0; color:var(--tib-navy);
}
@media (max-width:1024px){
.tib-split .e-con.tib-split__txt{ padding:64px 40px 56px; }
.tib-split .e-con.tib-split__img{ min-height:340px; }
}
@media (max-width:767px){
.tib-split .e-con.tib-split__txt{ padding:56px 20px 48px; gap:40px; }
.tib-split .e-con.tib-split__pictos{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.tib-split .e-con.tib-split__img{ min-height:260px; }
}
/* 36.4b Pages Expertises (08/11) : sur ordinateur, partage 50/50 et la photo
prend la hauteur du texte de gauche (plus de minimum à 600 px). En dessous
de 1025 px, photo sous le texte en 4:3. */
@media (min-width:1025px){
.parent-pageid-8590 .tib-split .e-con.tib-split__img{ min-height:0; }
}
@media (max-width:1024px){
.parent-pageid-8590 .tib-split .e-con.tib-split__img{ aspect-ratio:4 / 3; min-height:0; }
}
/* 36.5 « Selon votre situation » (pages mission) : le dessin du bloc « Deux
univers, deux parcours » de l'accueil (Sven, 18/10) — photo, surtitre à
pastille de couleur, titre, texte, pastilles teintées, lien d'entrée dans
l'univers. Ici les pastilles sont des liens vers les moments
([tib_pastilles]), teintés à l'accent de l'univers. */
.tib-aqui .tib-aqui__c .tib-pro{ gap:8px; margin-top:6px; }
.tib-aqui .tib-aqui__c .tib-pro a{
border:0; border-radius:24px; padding:7px 15px;
background:var(--tib-accL); color:var(--tib-navy);
font-size:var(--tib-fs-petit); font-weight:700; line-height:1.3;
}
.tib-aqui .tib-aqui__c .tib-pro a:hover{ text-decoration:underline; text-underline-offset:3px; }
.tib-aqui .tib-aqui__c .qodef-qi-button{
background-color:transparent !important; color:#01096a !important;
padding:0 !important; border-radius:0 !important; border:0 !important;
border-bottom:2px solid currentColor !important;
font-family:"Nunito Sans",sans-serif !important; font-size:var(--tib-fs-petit) !important;
font-weight:700 !important; letter-spacing:.04em !important; text-transform:uppercase !important;
line-height:1.5 !important; margin-top:18px;
}
.tib-aqui .tib-aqui__c .qodef-qi-button .qodef-m-text{ font-size:inherit !important; letter-spacing:inherit !important; }
.tib-aqui .tib-aqui__c .qodef-qi-button:hover{ padding-left:4px !important; transition:padding .18s ease-out; }
/* 36.6 Pages mission (18/10) : le lien vers une mission voisine (.tib-lien)
garde sa flèche oblique, y compris dans le bloc simple, où la flèche du
chapeau pointe vers le bas ; la note sous la ligne de temps (.tib-meth). */
.tib-chapeau .tib-lien .qodef-button .qodef-m-arrow svg{ transform:none; }
.tib-accomp .tib-meth p{ margin:0; max-width:820px; font-size:var(--tib-fs-petit); line-height:1.6; color:var(--tib-soft); }
.tib-accomp .tib-meth strong{ color:var(--tib-navy); }
/* 36.7 Pages mission, variante Obligations (18/10) : la carte « Et de votre
côté » de la grille « Ce que le cabinet prend en charge » (pleine largeur,
fond blanc, surtitre en toutes lettres à la place du rond), la limite à
connaître dans le bandeau (.tib-relance) avec son lien, la ligne des
sources (.tib-src) — aussi sous le bloc partagé et dans le bloc simple. */
.tib-questions .tib-q-grille > .e-con.tib-q.tib-q--vous{ background-color:#fff; border:1px solid var(--tib-bord); }
.tib-questions .tib-q--vous .qodef-section-title .qodef-m-subtitle{
display:block; width:auto; height:auto; margin:0 0 10px; border:0; border-radius:0; background:none;
font-size:var(--tib-fs-etiquette) !important; letter-spacing:.14em !important; text-transform:uppercase;
color:var(--tib-soft) !important;
}
.tib-questions .e-con.tib-relance{ border-left:3px solid var(--tib-navy); }
.tib-questions .tib-relance .tib-lien{ flex:0 0 auto; }
.tib-src p, p.tib-src{ margin:0; max-width:820px; font-size:var(--tib-fs-petit); line-height:1.6; color:var(--tib-soft); }
.tib-src strong, p.tib-src strong{ color:var(--tib-navy); font-weight:600; }
.tib-chapeau--titre p.tib-src{ margin-top:22px; }
/* 37 Retours graphiques de Sven (18/10, soir).
37.1 Cartes « Vous exercez un autre métier » / « Vous êtes dans un autre cas » :
la flèche ronde de .tib-carte__lien (carte Itinéraire de la page Contact)
ne s'applique pas aux cartes des voisins, qui ont déjà leur flèche oblique. */
.tib-crt .tib-carte__lien:after{ content:none; display:none; }
/* 37.2 Boutons pleins : la flèche prend la couleur du texte (blanc sur le bleu),
et suit l'inversion au survol. */
.qodef-button.qodef-layout--filled .qodef-m-arrow{ color:inherit; }
.qodef-button.qodef-layout--filled .qodef-m-arrow svg,
.qodef-button.qodef-layout--filled .qodef-m-arrow svg path{ fill:currentColor; }
/* 37.3 Tableaux des pages légales (Politique de confidentialité) : cadre
arrondi, en-tête teinté, filets horizontaux seulement, première colonne
en bleu. Défilement horizontal sur mobile plutôt qu'un tableau écrasé. */
.tib-legal table{
width:100%; border-collapse:separate; border-spacing:0;
margin:12px 0 24px; border:1px solid var(--tib-bord) !important; border-radius:12px; overflow:hidden;
font-size:var(--tib-fs-petit); line-height:1.5; background:#fff;
}
.tib-legal th, .tib-legal td{
border:0 !important; border-bottom:1px solid var(--tib-bord) !important;
padding:14px 18px !important; text-align:left; vertical-align:top;
}
.tib-legal thead th{
background:#f0f0f6; color:var(--tib-navy);
font-family:"Nunito Sans",sans-serif; font-size:var(--tib-fs-etiquette); font-weight:700;
letter-spacing:.12em; text-transform:uppercase;
}
.tib-legal tbody tr:last-child td{ border-bottom:0 !important; }
.tib-legal tbody td:first-child{ color:var(--tib-navy); font-weight:600; }
.tib-legal tbody tr:nth-child(even) td{ background:#fafafd; }
@media (max-width:767px){
.tib-legal table{ display:block; overflow-x:auto; font-size:var(--tib-fs-mention); }
.tib-legal th, .tib-legal td{ padding:10px 12px !important; min-width:140px; }
}
/* 37.4 Le bouton détouré dans un texte de page légale (Rendez-vous confirmé) :
pas le soulignement des liens de texte. */
.tib-legal a.qodef-button{ text-decoration:none; }
.tib-legal p.tib-retour{ margin-top:28px; }
/* 37.5 Méga-menu : l'encart Expertises prend le bleu Tiberias pour son filet
(il était blanc, donc invisible sur le fond blanc du menu). */
.tib-mm-card{ --mm-acc:#01096a; --mm-arrow:#fff; }
.tib-mm-card--sante{ --mm-acc:#0E9570; }
.tib-mm-card--entreprises{ --mm-acc:#E85F12; }
/* 38 Retours de Sven (19/10). 38.1 Les liserés de frise (étapes des moments,
ligne de temps des pages mission et moment, étapes « Pour avancer ») :
2 px, à l'accent de l'univers mêlé au filet de la charte, pour rester
visibles sur les bandes teintées. Filet seul en repli. */
.tib-eta__e:before{ height:2px !important; background:#c3c4de !important; background:color-mix(in srgb, var(--tib-acc) 55%, #c3c4de) !important; }
.qodef-qi-timeline .qodef-e-line-holder{ height:2px; }
.qodef-qi-timeline .qodef-e-line{ height:2px !important; background-color:#c3c4de !important; background-color:color-mix(in srgb, var(--tib-acc) 55%, #c3c4de) !important; }
.e-con.tib-etape{ border-left-width:2px !important; border-left-color:#c3c4de !important; border-left-color:color-mix(in srgb, var(--tib-acc) 55%, #c3c4de) !important; }
/* 39 Retours de Sven (22/10, soir).
39.1 Heros des pages métier et moment : l'image 21:9 était rognée de près de
moitié en hauteur (bandeau de 360 px pour 1 425 px de large). Le bandeau suit
la largeur de l'écran, borné entre 360 et 480 px (Sven, 23/10 : 600 trop haut). Mobile inchangé. */
@media (min-width:1025px){ .elementor .e-con.tib-hero{ min-height:clamp(360px, 32vw, 480px) !important; } }
/* 39.2 Cartes des voisins : « Voir la page » calé en bas de chaque carte. La
règle de la carte Itinéraire (margin-top:14px) passait devant le margin-top:auto. */
.tib-crt .tib-carte__lien{ margin-top:auto; padding-top:16px; }
/* 39.3 FAQ des pages : le bouton « Voir toutes les questions », passé en détouré,
respire davantage sous la liste (44 px au lieu de 28). */
.e-con.tib-faq .elementor-widget-onegoal_core_button{ margin-top:16px; }
/* 39.4 Hero FAQ (image commune Santé / Entreprises) : cadrage haut pour que le chapô reste sur le mur clair, au-dessus du meuble bas (24/10). */
@media (min-width:1025px){ .elementor .e-con.tib-hero--faq{ background-position:right top !important; } }
/* 40 Blocs retenus par Sven (23/10) sur la page d'essai : pistes A partout,
en CSS seul, sans retoucher les pages.
40.1 Réponse courte : carte flottante, sans liseré, pastille « En bref ». */
.tib-reponse .elementor-widget.tib-reponse__encart{
border-left:0; border-radius:20px; padding:36px 40px 38px;
box-shadow:0 1px 0 rgba(1,9,106,.04), 0 24px 48px -28px rgba(1,9,106,.22);
}
.tib-reponse .elementor-widget.tib-reponse__encart:before{
content:"En bref"; display:inline-flex; align-items:center; margin:0 0 18px; padding:6px 12px 6px 26px; border-radius:999px;
background:var(--tib-accL) radial-gradient(circle at 14px 50%, var(--tib-acc) 3.5px, transparent 4px);
font-family:"Outfit",sans-serif; font-weight:500; font-size:13px; line-height:1; letter-spacing:.06em; color:var(--tib-navy);
}
@media (max-width:767px){ .tib-reponse .elementor-widget.tib-reponse__encart{ padding:24px; } }
/* 40.2 Tableau comparatif : épuré. Plus de cadre ni de filets verticaux ; les
deux options en tête, soulignées de bleu ; les libellés de ligne en petites
capitales. La dernière ligne n'est pas mise en avant : elle ne conclut pas
sur toutes les pages. */
.tib-cmp-s .elementor-widget.tib-cmp-w{
border:0; border-radius:20px; padding:8px 28px 12px;
box-shadow:0 24px 48px -32px rgba(1,9,106,.22);
}
@media (min-width:768px){
.tib-cmp-s .tib-cmp th, .tib-cmp-s .tib-cmp td{ border-top:0; border-bottom:1px solid var(--tib-bord); padding:20px; }
.tib-cmp-s .tib-cmp tr > :not(:first-child){ border-left:0; }
.tib-cmp-s .tib-cmp tbody tr:last-child > *{ border-bottom:0; }
.tib-cmp-s .tib-cmp thead th, .tib-cmp-s .tib-cmp thead td{
background:none; padding-top:24px; padding-bottom:18px; border-bottom:2px solid var(--tib-navy);
font-family:"Outfit",sans-serif; font-weight:400; font-size:22px; line-height:1.2; color:var(--tib-navy);
}
.tib-cmp-s .tib-cmp tbody th{
font-family:"Nunito Sans",sans-serif; font-weight:600; font-size:12.5px; line-height:1.5;
letter-spacing:.12em; text-transform:uppercase; color:var(--tib-soft); padding-top:23px;
}
}
@media (max-width:767px){ .tib-cmp-s .elementor-widget.tib-cmp-w{ padding:0; } }
/* 40.3 Cartes de chiffres : registre horizontal. Une ligne par chiffre (chiffre,
titre et phrase, ouverture) ; le détail se déplie sous la ligne, la grille ne
se décale plus. Les wrappers de l'accordéon passent en display:contents pour
que sa barre et son contenu prennent place dans la grille de la ligne. */
.tib-enjeux .tib-enj-grille{
flex-direction:column !important; flex-wrap:nowrap !important; gap:0 !important;
background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 24px 48px -34px rgba(1,9,106,.24);
}
.tib-enjeux .tib-enj-grille > .e-con.tib-enj{
--display:grid; display:grid !important; grid-template-columns:minmax(150px,220px) minmax(0,1fr) auto; column-gap:32px; align-items:center;
width:100% !important; --width:100%; max-width:none; flex-grow:0; align-self:stretch !important;
padding:26px 32px; border-radius:0; border-top:1px solid var(--tib-bord); box-shadow:none !important; background:#fff;
transition:background-color .2s ease-out;
}
.tib-enjeux .tib-enj-grille > .e-con.tib-enj:first-child{ border-top:0; }
.tib-enjeux .tib-enj-grille > .e-con.tib-enj:hover,
.tib-enjeux .tib-enj-grille > .e-con.tib-enj:has(.ui-state-active){ background:var(--tib-band); }
.tib-enjeux .e-con.tib-enj > .elementor-widget.tib-enj__chiffre{ grid-column:1; grid-row:1; margin:0; }
.tib-enjeux .tib-enj__chiffre .qodef-custom-font{ font-size:40px; }
.tib-enjeux .e-con.tib-enj > .elementor-widget.tib-enj__titre{ grid-column:2; grid-row:1; margin:0 !important; }
.tib-enjeux .e-con.tib-enj > .elementor-widget.tib-enj__detail,
.tib-enjeux .tib-enj__detail > .elementor-widget-container,
.tib-enjeux .tib-enj__detail .qodef-accordion{ display:contents; }
.tib-enjeux .tib-enj__detail .qodef-accordion.qodef-layout--simple .qodef-accordion-title{
grid-column:3; grid-row:1; padding:0; background:none !important; white-space:nowrap; font-size:14px;
}
.tib-enjeux .tib-enj__detail .qodef-accordion.qodef-layout--simple .qodef-accordion-content{
grid-column:2 / 4; grid-row:2; margin:18px 0 0; padding:18px 0 2px; border-top:1px dashed rgba(1,9,106,.16);
}
@media (max-width:767px){
.tib-enjeux .tib-enj-grille > .e-con.tib-enj{ grid-template-columns:minmax(0,1fr) auto; row-gap:6px; padding:22px 20px; }
.tib-enjeux .tib-enj__chiffre .qodef-custom-font{ font-size:var(--tib-fs-chiffre); }
.tib-enjeux .e-con.tib-enj > .elementor-widget.tib-enj__titre{ grid-column:1 / -1; grid-row:2; }
.tib-enjeux .tib-enj__detail .qodef-accordion.qodef-layout--simple .qodef-accordion-title{ grid-column:2; grid-row:1; }
.tib-enjeux .tib-enj__detail .qodef-accordion.qodef-layout--simple .qodef-accordion-title .qodef-tab-title{ display:none; }
.tib-enjeux .tib-enj__detail .qodef-accordion.qodef-layout--simple .qodef-accordion-content{ grid-column:1 / -1; grid-row:3; }
}
@media (prefers-reduced-motion:reduce){ .tib-enjeux .tib-enj-grille > .e-con.tib-enj{ transition:none; } }
/* Toute la ligne est cliquable (tib-motion.js, 25/10) ; le détail déplié garde un curseur normal. */
.tib-enjeux .tib-enj-grille > .e-con.tib-enj{ cursor:pointer; }
.tib-enjeux .tib-enj-grille > .e-con.tib-enj .qodef-accordion-content{ cursor:auto; }
/* 40.3b Chiffres en deux rangées titrées (Startup & scale-up, 24/10) : deux
tableaux distincts au lieu d'un seul. L'intitulé de chaque rangée se pose
au-dessus de son tableau, hors du blanc ; chaque groupe de lignes forme sa
propre carte (coins arrondis en haut et en bas du groupe). L'ombre est portée
par chaque ligne ; seule celle de la dernière ligne d'un groupe reste visible. */
.tib-enjeux .tib-enj-grille:has(> .tib-enj__rang){ background:none; border-radius:0; overflow:visible; box-shadow:none; }
.tib-enjeux .tib-enj-grille:has(> .tib-enj__rang) > .e-con.tib-enj:has(+ .tib-enj__rang),
.tib-enjeux .tib-enj-grille:has(> .tib-enj__rang) > .e-con.tib-enj:last-child{ box-shadow:0 24px 48px -34px rgba(1,9,106,.24) !important; }
.tib-enjeux .tib-enj-grille > .elementor-widget.tib-enj__rang{ margin:56px 0 18px !important; }
.tib-enjeux .tib-enj-grille > .elementor-widget.tib-enj__rang:first-child{ margin-top:0 !important; }
.tib-enjeux .tib-enj__rang p:before{
content:""; display:inline-block; width:7px; height:7px; margin:0 10px 2px 0; border-radius:50%;
background:var(--tib-acc); vertical-align:middle;
}
.tib-enjeux .tib-enj-grille > .tib-enj__rang + .e-con.tib-enj{ border-top:0; border-radius:20px 20px 0 0; }
.tib-enjeux .tib-enj-grille:has(> .tib-enj__rang) > .e-con.tib-enj:has(+ .tib-enj__rang),
.tib-enjeux .tib-enj-grille:has(> .tib-enj__rang) > .e-con.tib-enj:last-child{ border-radius:0 0 20px 20px; }
.tib-enjeux .tib-enj-grille > .tib-enj__rang + .e-con.tib-enj:has(+ .tib-enj__rang),
.tib-enjeux .tib-enj-grille > .tib-enj__rang + .e-con.tib-enj:last-child{ border-radius:20px; }
@media (max-width:767px){ .tib-enjeux .tib-enj-grille > .elementor-widget.tib-enj__rang{ margin:40px 0 14px !important; } }
/* 40.6 Pages mission : la carte « Et de votre côté » et l'encart « Une limite à
connaître » (25/10). La liste à filets (40.4) avait ôté le retrait intérieur de
la carte : le texte collait au cadre. Elle redevient une vraie carte, blanche,
sans filet, aux mêmes angles que l'encart qui la suit, et les deux textes
partent du même bord. */
.tib-questions .tib-q-grille > .e-con.tib-q.tib-q--vous{
background:#fff; border:0 !important; border-radius:16px; padding:26px 32px 28px;
margin-top:28px; box-shadow:0 24px 48px -34px rgba(1,9,106,.24);
}
.tib-questions .tib-q--vous .qodef-section-title .qodef-m-subtitle{ display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:flex-start; gap:10px; margin:0 0 10px !important; text-align:left; color:var(--tib-navy) !important; }
.tib-questions .tib-q--vous .qodef-section-title .qodef-m-subtitle:before{
content:""; display:block !important; flex:0 0 7px; width:7px; height:7px; border-radius:50%; background:var(--tib-acc) !important;
position:static; margin:0;
}
.tib-questions .tib-q--vous .tib-q__texte{ padding-left:0; margin-top:6px; }
.tib-questions .tib-q-grille:has(> .tib-q--vous) + .e-con.tib-relance{ margin-top:-12px; }
.tib-questions .e-con.tib-relance:not(:has(.qodef-button.qodef-layout--filled)){ padding:22px 28px 22px 32px; }
@media (max-width:767px){
.tib-questions .tib-q-grille > .e-con.tib-q.tib-q--vous{ padding:22px 20px 24px; }
.tib-questions .e-con.tib-relance:not(:has(.qodef-button.qodef-layout--filled)){ padding:20px; }
}
/* 40.4 Questions à se poser : liste à filets. Plus de boîtes ; un filet à
l'accent au-dessus de chaque question ; le picto, sans pastille, devant le titre. */
.tib-questions .tib-q-grille > .e-con.tib-q{
background:none; border-radius:0; padding:28px 0 30px; border-top:1px solid var(--tib-rule);
}
.tib-questions .tib-q .elementor-widget[class*="tib-picto--"] .qodef-section-title{
display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:18px; align-items:start;
}
.tib-questions .tib-q .elementor-widget[class*="tib-picto--"] .qodef-section-title .qodef-m-subtitle{
width:30px; height:30px; margin:2px 0 0; background:none;
}
.tib-questions .tib-q .elementor-widget[class*="tib-picto--"] .qodef-section-title .qodef-m-subtitle::before{
width:30px; height:30px; margin:-15px 0 0 -15px;
}
.tib-questions .tib-q:has(.elementor-widget[class*="tib-picto--"]) .tib-q__texte{ padding-left:48px; margin-top:8px; }
/* 40.5 Bandeau de relance : sans liseré, sur l'accent clair, angles de carte
(16 px, pas de pilule). Quand il porte le bouton « Parlons-en », la photo de
Samuel ouvre la phrase. Les encarts « Une limite à connaître » des pages
Expertises (sans bouton) restent sans photo. */
.tib-questions .e-con.tib-relance{
background:var(--tib-accL); border:0 !important; border-radius:16px; padding:16px 16px 16px 20px;
}
.tib-questions .tib-relance:has(.qodef-button.qodef-layout--filled) > .elementor-widget.tib-relance__texte{
display:flex; align-items:center; gap:18px;
}
.tib-questions .tib-relance:has(.qodef-button.qodef-layout--filled) > .elementor-widget.tib-relance__texte:before{
content:""; flex:0 0 56px; height:56px; border-radius:50%;
background:#fff url("/wp-content/uploads/2026/09/samuel-A-150x150.webp") center 20% / cover no-repeat;
box-shadow:0 0 0 3px #fff;
}
@media (max-width:767px){
.tib-questions .e-con.tib-relance{ padding:18px; }
.tib-questions .tib-relance:has(.qodef-button.qodef-layout--filled) > .elementor-widget.tib-relance__texte:before{ flex-basis:48px; height:48px; }
}
/* 41 Page Le cabinet (Sven, 03/11/2026).
41.1 Hero des pages internes sur la façade (image claire) : voile bleu à
gauche pour que le titre blanc se lise. Le chapô passe dans le bloc dessous. */
.e-con.tib-hero--cab{ position:relative; isolation:isolate; }
.e-con.tib-hero--cab::before{
content:""; position:absolute; inset:0; z-index:-1;
background:linear-gradient(90deg, rgba(1,9,106,.90) 0%, rgba(1,9,106,.72) 45%, rgba(1,9,106,.12) 100%);
}
/* 41.2 « Qui tient le cabinet » dans le cadre : photo dans la grille, arrondie,
texte centré en hauteur (au lieu de la photo jusqu'au bord de l'écran). */
.e-con.tib-split--cadre .e-con.tib-split__txt{ padding:0 64px 0 0; justify-content:center; }
.e-con.tib-split--cadre .e-con.tib-split__img{ min-height:560px; border-radius:25px; overflow:hidden; }
@media (max-width:1024px){
.e-con.tib-split--cadre .e-con.tib-split__txt{ padding:0 0 40px; }
.e-con.tib-split--cadre .e-con.tib-split__img{ min-height:460px; }
}
.elementor .e-con.tib-split--cadre{ padding-left:40px !important; padding-right:40px !important; }
@media (max-width:767px){
.elementor .e-con.tib-split--cadre{ padding-left:20px !important; padding-right:20px !important; }
.e-con.tib-split--cadre .e-con.tib-split__img{ min-height:360px; }
}
/* 41.3 « Dans les deux cas » sur toute la largeur du bloc. */
.tib-constats__fin.tib-constats__fin--large p{ max-width:none; }
/* 41.4 « Qui tient le cabinet » passé en bande teintée (alternance avec le chapô blanc) : la photo respire dans la bande. */
.elementor .e-con.tib-split--cadre{ padding-top:90px !important; padding-bottom:90px !important; }
@media (max-width:767px){ .elementor .e-con.tib-split--cadre{ padding-top:56px !important; padding-bottom:56px !important; } }
/* 41.5 Logo de l'Ordre sous le titre du bloc « Le cadre de la profession » (lien vers l'annuaire). */
.elementor-widget.tib-ordre-logo{ margin-top:32px; }
.tib-ordre-logo img{ display:block; height:auto; }
/* 41.6 Partenaires : zone logo à droite du nom, quand un logo est posé
( dans le