/* ═══════════════════════════════════════════════════════════
   CHROME COMMUN — accueil immersif ET pages intérieures
   menu mobile plein écran, bouton menu, icônes des réseaux,
   colonnes du pied de page. Autonome : ne dépend ni de
   public/immersif/styles.css ni du bundle Tailwind.
   ═══════════════════════════════════════════════════════════ */
:root {
    --ch-bg: #141311;
    --ch-surface: #201f1c;
    --ch-fg: #f2f1ec;
    --ch-muted: #9a9d98;
    --ch-line: rgb(242 241 236 / 0.12);
    --ch-brand: #ff5a14;
    --ch-on-brand: #1a1915;
    --ch-sans: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
    --ch-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --ch-ease: cubic-bezier(0.19, 1, 0.22, 1);
    --ch-ease-inout: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ═══ bouton menu (mobile uniquement) ═══ */
.mburger {
    display: none;
    position: relative;
    flex: none;
    width: 38px;
    height: 38px;
    margin-left: 6px;
    padding: 0;
    border: 1px solid var(--ch-line);
    border-radius: 2px;
    background: transparent;
    color: var(--ch-fg);
    cursor: pointer;
}
.mburger span {
    position: absolute;
    left: 10px;
    right: 10px;
    height: 1.5px;
    background: currentColor;
    transition: transform 0.5s var(--ch-ease), top 0.5s var(--ch-ease);
}
.mburger span:nth-child(1) { top: 14px; }
.mburger span:nth-child(2) { top: 22px; }
html.mmenu-open .mburger span:nth-child(1) { top: 18px; transform: rotate(45deg); }
html.mmenu-open .mburger span:nth-child(2) { top: 18px; transform: rotate(-45deg); }
.mburger:focus-visible { outline: 2px solid var(--ch-brand); outline-offset: 2px; }
@media (max-width: 900px) {
    .mburger { display: inline-block; }
}

/* ═══ menu mobile plein écran ═══ */
.mmenu {
    position: fixed;
    inset: 0;
    z-index: 95; /* sous l'entête (100) qui garde le bouton de fermeture, sous le rideau de transition */
    background: var(--ch-bg);
    color: var(--ch-fg);
    font-family: var(--ch-sans);
    visibility: hidden;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.7s var(--ch-ease-inout), visibility 0s linear 0.7s;
}
html.mmenu-open {
    overflow: hidden;
}
html.mmenu-open .mmenu {
    visibility: visible;
    clip-path: inset(0 0 0 0);
    transition: clip-path 0.7s var(--ch-ease-inout), visibility 0s;
}
/* le bouton WhatsApp flottant ne passe pas devant le menu */
html.mmenu-open .whatsapp-btn { opacity: 0; pointer-events: none; }

.mmenu__inner {
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 104px 22px max(24px, env(safe-area-inset-bottom));
}
.mmenu__kicker {
    margin: 0 0 14px;
    font-family: var(--ch-mono);
    font-size: 11px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ch-muted);
}
.mmenu__links {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--ch-line);
}
.mmenu__links li {
    overflow: hidden;
    border-bottom: 1px solid var(--ch-line);
}
.mmenu__links a {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 12px 0 10px;
    color: var(--ch-fg);
    text-decoration: none;
    transform: translateY(105%);
    transition: transform 0.8s var(--ch-ease), color 0.3s;
    transition-delay: calc(0.18s + var(--mi, 0) * 0.06s);
}
html.mmenu-open .mmenu__links a { transform: none; }
.mmenu__n {
    flex: none;
    width: 22px;
    font-family: var(--ch-mono);
    font-size: 11px;
    color: var(--ch-muted);
}
.mmenu__label {
    font-size: clamp(34px, 10.5vw, 58px);
    font-weight: 400;
    letter-spacing: -0.035em;
    line-height: 1.02;
}
.mmenu__links a:hover,
.mmenu__links a.is-active { color: var(--ch-brand); }
.mmenu__links a.is-active .mmenu__n { color: var(--ch-brand); }

.mmenu__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 26px;
    padding: 16px 18px;
    border-radius: 2px;
    background: var(--ch-brand);
    color: var(--ch-on-brand);
    font-family: var(--ch-mono);
    font-size: 13px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s var(--ch-ease), transform 0.8s var(--ch-ease);
}
html.mmenu-open .mmenu__cta {
    opacity: 1;
    transform: none;
    transition-delay: 0.5s;
}
.mmenu__foot {
    margin-top: auto;
    padding-top: 28px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    opacity: 0;
    transition: opacity 0.5s;
}
html.mmenu-open .mmenu__foot { opacity: 1; transition-delay: 0.6s; }
.mmenu__meta {
    margin: 0;
    font-family: var(--ch-mono);
    font-size: 11px;
    line-height: 1.7;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ch-muted);
}
.mmenu__meta a { color: var(--ch-fg); text-decoration: none; }

/* ═══ icônes des réseaux ═══ */
.socials-row {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.socials-row a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--ch-line);
    border-radius: 50%;
    color: var(--ch-fg);
    transition: background 0.3s, border-color 0.3s, color 0.3s, transform 0.4s var(--ch-ease);
}
.socials-row a:hover {
    background: var(--ch-brand);
    border-color: var(--ch-brand);
    color: var(--ch-on-brand);
    transform: translateY(-2px);
}
.socials-row svg { display: block; }

/* ═══ colonnes du pied de page ═══ */
.fcols {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: 40px 32px;
    padding: 56px 0 8px;
    text-align: left;
    font-family: var(--ch-sans);
    color: var(--ch-fg);
}
.fcols a { color: inherit; text-decoration: none; }
.fcols__logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 19px;
    font-weight: 500;
    letter-spacing: -0.01em;
}
.fcols__logo img { width: 40px; height: 40px; border-radius: 50%; }
.fcols__brand p {
    margin: 16px 0 22px;
    max-width: 34ch;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ch-muted);
}
.fcols h3 {
    margin: 0 0 16px;
    font-family: var(--ch-mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ch-brand);
}
.fcols ul { list-style: none; margin: 0; padding: 0; }
.fcols__col li { margin-bottom: 10px; font-size: 15px; line-height: 1.4; }
.fcols__col a {
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
    transition: background-size 0.5s var(--ch-ease), color 0.3s;
}
.fcols__col a:hover { color: var(--ch-brand); background-size: 100% 1px; }
.fcols__muted { color: var(--ch-muted); }
.fcols__mail img { display: block; max-width: 100%; height: auto; }


/* ═══ pied de page unique (partials/site-footer) ═══ */
.sfooter {
    position: relative;
    z-index: 3;
    overflow: hidden;
    background: var(--ch-bg);
    color: var(--ch-fg);
    font-family: var(--ch-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: normal;
    -webkit-font-smoothing: antialiased;
    padding: 16vh clamp(20px, 4vw, 64px) 36px;
}
.sfooter h2,
.sfooter h3 { font-family: var(--ch-sans); }
.sfooter > * {
    max-width: 1280px;
    margin-inline: auto;
}
.sfooter__cta {
    text-align: center;
    padding-bottom: 11vh;
    border-bottom: 1px solid var(--ch-line);
}
.sfooter__kicker,
.sfooter__reassurance {
    margin: 0;
    font-family: var(--ch-mono);
    font-size: 12px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ch-muted);
}
.sfooter__mail {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35em;
    margin: 22px 0 18px;
    font-size: clamp(34px, 4.6vw, 64px);
    letter-spacing: -0.025em;
    line-height: 1.05;
    color: var(--ch-fg);
    text-decoration: none;
}
.sfooter__mail span {
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
    padding-bottom: 4px;
    transition: background-size 0.6s var(--ch-ease-inout);
}
.sfooter__mail i {
    font-style: normal;
    color: var(--ch-brand);
    transition: transform 0.5s var(--ch-ease);
}
.sfooter__mail:hover span { background-size: 100% 1px; }
.sfooter__mail:hover i { transform: translateX(10px); }

/* nom géant : lettres qui montent (structure .fw > .ch > .chi, classe in-view) */
.sfooter__name {
    margin: 7vh auto 0;
    text-align: center;
    white-space: nowrap;
    font-size: min(6.9vw, 170px);
    font-weight: 400;
    letter-spacing: -0.035em;
    line-height: 1.04;
    color: var(--ch-fg);
}
.sfooter__name .ch {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}
.sfooter__name .chi {
    display: inline-block;
    transform: translateY(108%);
    transition: transform 1.1s var(--ch-ease);
    transition-delay: calc(var(--i, 0) * 28ms);
}
.sfooter__name.in-view .chi { transform: none; }

.sfooter__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
    margin-top: 6vh;
    padding-top: 18px;
    border-top: 1px solid var(--ch-fg);
}
.sfooter__bottom p {
    margin: 0;
    font-family: var(--ch-mono);
    font-size: 11px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ch-muted);
}

/* apparition des blocs (public/js/chrome.js) */
[data-sf-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1s var(--ch-ease), transform 1.2s var(--ch-ease);
}
[data-sf-reveal].is-in { opacity: 1; transform: none; }
html:not(.js-chrome) [data-sf-reveal] { opacity: 1; transform: none; }

@media (max-width: 900px) {
    .sfooter { padding-top: 11vh; }
    .sfooter__name { white-space: normal; font-size: 12.4vw; line-height: 1.02; }
    .sfooter__bottom { flex-direction: column; }
}

@media (max-width: 1000px) {
    .fcols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fcols__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
    .fcols { grid-template-columns: 1fr; gap: 30px; padding-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    .mmenu,
    .mmenu__links a,
    .mmenu__cta,
    .mmenu__foot,
    .mburger span,
    .sfooter__name .chi,
    [data-sf-reveal] { transition: none !important; }
    .sfooter__name .chi { transform: none; }
    [data-sf-reveal] { opacity: 1; transform: none; }
}