/* head.css — L'EN-TÊTE UNIQUE, identique sur TOUTES les pages : site et outils.
   Un seul markup, un seul style, un seul comportement. Il vit à part pour qu'aucune page
   ne puisse en avoir une version à elle. Hauteur : var(--head-h), 44 px partout.
   Les outils calent leurs panneaux sur cette variable, jamais sur un nombre écrit à la main. */
:root { --head-h: 44px; --head-bg: #191919; --head-line: #333; --head-txt: #e0e0e0; --head-sub: #a5a5a5; --head-teal: #009ba0; }
@media (max-width: 820px) { :root { --head-h: 44px; } }

.pro-header {
    position: fixed; top: 0; left: 0; right: 0; height: var(--head-h); z-index: 1001;
    display: flex; align-items: center; background: transparent;
    transition: background-color .3s ease, box-shadow .3s ease;
    font-family: Arial, sans-serif;
}
.pro-header.scrolled, .pro-header.solid { background: var(--head-bg); box-shadow: 0 2px 14px #0008; }
.pro-header .head-in { width: 100%; padding: 0 20px; display: flex; align-items: center; gap: 20px; }
.pro-header .logo-wrapper { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; z-index: 1002; }
.pro-header .logo-wrapper svg { width: 22px; height: 22px; color: var(--head-teal); display: block; }
.pro-header .site-name { font-size: 1.05rem; font-weight: 400; line-height: 1; letter-spacing: 1px; color: var(--head-txt); }
.pro-header .pro-nav { margin-left: auto; display: flex; align-items: center; }
.pro-header .pro-nav a {
    color: var(--head-txt); text-decoration: none; font-size: 14px; font-family: Arial, sans-serif;
    padding: 5px 10px; transition: color .2s ease; display: block; white-space: nowrap; border: 0; background: none;
}
.pro-header .pro-nav a:hover { color: #00d4db; background: none; }
.pro-header .pro-nav a.active { color: var(--head-teal); font-weight: 500; background: none; }

.pro-header .nav-toggle { display: none; }
.pro-header .nav-toggle-label { display: none; }
@media (max-width: 900px) {
    .pro-header .nav-toggle-label {
        display: flex; flex-direction: column; justify-content: center; gap: 5px;
        width: 40px; height: var(--head-h); margin-left: auto; cursor: pointer; z-index: 1003;
    }
    .pro-header .nav-toggle-label span { display: block; width: 22px; height: 2px; background: var(--head-txt); transition: transform .25s, opacity .25s; }
    .pro-header .nav-toggle:checked ~ .head-in .nav-toggle-label span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .pro-header .nav-toggle:checked ~ .head-in .nav-toggle-label span:nth-child(2) { opacity: 0; }
    .pro-header .nav-toggle:checked ~ .head-in .nav-toggle-label span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .pro-header .pro-nav {
        position: fixed; top: 0; right: 0; bottom: 0; width: min(300px, 84vw);
        background: var(--head-bg); flex-direction: column; align-items: flex-start;
        padding: calc(var(--head-h) + 20px) 24px 24px; gap: 4px;
        transform: translateX(100%); transition: transform .28s ease; box-shadow: -10px 0 40px #000a;
    }
    .pro-header .nav-toggle:checked ~ .head-in .pro-nav { transform: translateX(0); }
    .pro-header .pro-nav a { font-size: 16px; padding: 12px 0; width: 100%; border-bottom: 1px solid var(--head-line); }
    .pro-header .pro-nav a:last-child { border-bottom: none; }
    /* téléphone = le SITE : les outils du méta-site n'apparaissent pas dans le menu */
    .pro-header .pro-nav a.app { display: none; }
}

/* ============================================================================
   LE PIED DE PAGE UNIQUE — une seule ligne quand elle tient, sinon elle se replie
   d'elle-même. Tout y est à la même taille : le nom du site n'est pas plus discret
   que le nom de David. Même pied sur toutes les pages, ordinateur et téléphone. (03/08)
   ============================================================================ */
.site-foot { flex: 0 0 auto; margin-top: auto; background: #141414; border-top: 1px solid var(--head-line); }
.site-foot .sf-in {
    max-width: 1200px; margin: 0 auto; padding: 0 20px; min-height: 50px;
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 0 14px;
    font: 13px/1 Arial, sans-serif; color: var(--head-sub);
}
/* la puce de séparation vit dans le CSS : le HTML reste propre */
.site-foot .sf-in > * + *::before { content: '·'; color: #4a4a4a; margin-right: 14px; }
.site-foot a { color: var(--head-sub); text-decoration: none; display: inline-flex; align-items: center; }
.site-foot a:hover { color: var(--head-txt); }
.site-foot .sf-brand { gap: 8px; color: var(--head-teal); font-size: 14.5px; font-weight: 600; letter-spacing: .2px; }
.site-foot .sf-brand:hover { color: #00d4db; }
.site-foot .sf-brand img { display: block; border-radius: 3px; }
.site-foot .sf-c { color: var(--head-sub); }
.site-foot .sf-soc { display: inline-flex; align-items: center; gap: 13px; }
.site-foot .sf-soc a::before { content: none; }
.site-foot .sf-soc a { color: var(--head-sub); }
.site-foot .sf-soc a:hover { color: var(--head-teal); }
/* le bouton du chat flotte AU-DESSUS : il ne prend aucune place, le pied de page
   reste centré sur toute la largeur, sur une seule ligne. */
@media (max-width: 560px) {
    .site-foot .sf-in { padding: 0 12px; gap: 0 10px; font-size: 12px; }
    .site-foot .sf-in > * + *::before { margin-right: 10px; }
    .site-foot .sf-brand { font-size: 13px; }
    .site-foot .sf-soc { gap: 11px; }
}

/* page embarquée dans une autre (schéma dans un article, matrice dans l'accueil) :
   ni en-tête ni pied de page, c'est une vignette et non une visite. */
.embedded .pro-header, .embedded .site-foot { display: none !important; }