/* Outils, proposition "onglets par profil" choisie par Lilian le 30/09/2026 (outils-profils.html) : une fenêtre à onglets,
   "Tous (8)" ouvert d'office, un onglet par profil de visiteur, et sur chaque carte le temps, "sans compte" et un aperçu
   du résultat. Sous la fenêtre, l'offre qui prolonge l'onglet ouvert. S'ajoute à onglets.css, boutons-surlignage.css,
   accueil-fidele.css et organisation-fidele.css. */

.page-outils .hero{padding-top:var(--e-8);padding-bottom:var(--e-8)}
.outils-hero{display:grid;gap:var(--e-4);max-width:46rem}
.outils-hero h1{font-size:var(--t-2xl)}
.outils-promesses{display:flex;flex-wrap:wrap;gap:var(--e-2);margin-top:var(--e-2)}
.outils-promesses span{padding:6px 12px;border-radius:var(--pilule);background:rgb(var(--sur-scene-rvb) / .12);color:var(--sur-scene);font-family:var(--police-fichier);font-size:var(--t-xs);font-weight:700}

/* La fenêtre à onglets */
.boite-outils{margin-top:calc(var(--e-6) * -1);position:relative;z-index:1}
.profils{display:flex;gap:var(--e-1);overflow-x:auto;padding:var(--e-2) var(--e-2) 0;background:var(--fond-2);border-bottom:1px solid var(--filet);scrollbar-width:thin}
.profil{flex:0 0 auto;display:flex;align-items:center;gap:var(--e-2);min-height:48px;padding:0 var(--e-4);border:0;border-radius:var(--rayon-onglet) var(--rayon-onglet) 0 0;background:transparent;box-shadow:inset 0 3px 0 transparent;color:var(--encre-douce);font:700 var(--t-sm) var(--police);white-space:nowrap;cursor:pointer}
.profil span{font-family:var(--police-fichier);font-size:var(--t-xs);font-weight:400}
.profil:hover{background:var(--filet)}
.profil[aria-selected="true"]{background:var(--fenetre);box-shadow:inset 0 3px 0 var(--rouge);color:var(--encre)}
.profil:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
html:not(.js) .profils{display:none}
.panneau-outils{padding:var(--e-5)}
.panneau-outils:focus-visible{outline:2px solid var(--focus);outline-offset:-4px}
.grille-outils{display:grid;gap:var(--e-5)}
@media(min-width:900px){.grille-outils{grid-template-columns:repeat(2,minmax(0,1fr))}.panneau-outils{padding:var(--e-6)}}

/* Une carte d'outil */
.outil{display:grid;grid-template-rows:auto auto 1fr auto;gap:var(--e-3);padding:var(--e-5);border-radius:var(--rayon-fenetre);background:var(--fenetre);box-shadow:inset 0 0 0 1px var(--filet),var(--ombre-fenetre)}
.outil[hidden]{display:none}
.outil-tete{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2)}
.outil-tete .puce-temps,.outil-tete .puce-compte{padding:4px 10px;border-radius:var(--pilule);font-family:var(--police-fichier);font-size:var(--t-xs);font-weight:700;color:var(--nuit)}
.puce-temps{background:var(--lilas)}
.puce-compte{background:var(--vert-moyen)}
.outil-nom{margin-left:auto;font-family:var(--police-fichier);font-size:var(--t-xs);color:var(--encre-douce)}
.outil h3{font-size:var(--t-lg);line-height:1.15;letter-spacing:-.02em;color:var(--titre)}
.outil p{font-size:var(--t-sm);line-height:1.55;color:var(--encre-douce)}
.outil-pied{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--e-3);padding-top:var(--e-3);border-top:1px solid var(--filet)}
.outil-pied .lien{font-size:var(--t-base)} /* un lien en bandeau par carte : le seul bouton plein de l'écran reste celui de la passerelle */
.outil--signature{box-shadow:inset 0 0 0 2px var(--rouge),var(--ombre-fenetre)}
.outil--signature .etiquette-signature{font-family:var(--police-fichier);font-size:var(--t-xs);font-weight:700;color:var(--rouge-texte)}
:root[data-theme="dark"] .outil--signature .etiquette-signature{color:var(--rouge-texte)}

/* L'aperçu du résultat : un schéma de ce que l'outil rend, jamais un faux chiffre */
.apercu{display:grid;gap:var(--e-2);padding:var(--e-3) var(--e-4);border-radius:var(--rayon-onglet);background:var(--fond-2);font-size:var(--t-xs)}
.apercu-titre{font-family:var(--police-fichier);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--encre-douce)}
.apercu ul{display:grid;gap:6px}
.apercu li{display:flex;align-items:center;gap:var(--e-2);color:var(--encre);font-size:var(--t-sm)}
.apercu li::before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:2px;background:var(--c,var(--rouge))}
.apercu .trait{display:block;height:6px;border-radius:3px;background:var(--filet);flex:1}
.apercu .trait b{display:block;height:100%;width:var(--l,60%);border-radius:3px;background:var(--c,var(--rouge))}

/* La passerelle sous la fenêtre, qui suit l'onglet ouvert */
.passerelle{display:grid;gap:var(--e-4);margin-top:var(--e-7)}
.passerelle[hidden]{display:none}
.passerelle h2{font-size:var(--t-xl)}
.passerelle p{max-width:56ch;color:var(--sur-scene-doux)}
.passerelle .hero-actions{margin-top:var(--e-2)}
html:not(.js) .passerelle[data-profil]:not([data-profil="tous"]){display:none}