/* ============================================================
   Brenne Box — Design system (v2 2024)
   Codes couleur & typo : cf. document technique, slide 3
   ============================================================ */

:root {
    /* Couleurs de marque */
    --bb-orange:        #F26722;
    --bb-orange-dark:   #d9531a;
    --bb-red:           #b10f2b;
    --bb-teal:          #26B4BA;
    --bb-teal-dark:     #143B48;   /* bloc « Nos Services » foncé */
    --bb-teal-darker:   #0e2a34;
    --bb-gray:          #888888;
    --bb-gray-light:    #f2f2f2;   /* fonds gris « qui débordent du body » */
    --bb-gray-border:   #e2e2e2;
    --bb-white:         #ffffff;
    --bb-ink:           #2a2a2a;

    /* Typographie */
    --bb-font: 'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --bb-fs-h1: clamp(2.5rem, 4vw + 1rem, 3.75rem);   /* ~60px */
    --bb-fs-h2: clamp(2.25rem, 3.5vw + 1rem, 3.75rem); /* 60px */
    --bb-fs-h3: clamp(1.75rem, 2.2vw + 1rem, 2.5rem);  /* 40px */
    --bb-fs-h4: clamp(1.375rem, 1.4vw + 1rem, 1.875rem); /* 30px */
    --bb-fs-h5: 1.5rem;   /* 24px */
    --bb-fs-p:  1.125rem; /* 18px */

    /* Rythme */
    --bb-container: 1200px;
    --bb-container-wide: 1400px;
    --bb-space: clamp(3rem, 6vw, 6rem);
    --bb-radius: 4px;
}

/* ── Base ──────────────────────────────────────────────────── */
body {
    font-family: var(--bb-font);
    font-size: var(--bb-fs-p);
    line-height: 1.65;
    color: var(--bb-ink);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--bb-font);
    font-weight: 700;
    line-height: 1.15;
    color: var(--bb-teal-dark);
    margin: 0 0 .6em;
}
h1 { font-size: var(--bb-fs-h1); }
h2 { font-size: var(--bb-fs-h2); }
h3 { font-size: var(--bb-fs-h3); }
h4 { font-size: var(--bb-fs-h4); font-weight: 600; }
h5 { font-size: var(--bb-fs-h5); font-weight: 600; }

a { color: var(--bb-teal); text-decoration: none; }
a:hover { color: var(--bb-teal-dark); }

p { margin: 0 0 1rem; }
img { max-width: 100%; height: auto; }

/* Titres « section » avec slash, comme « Nos Services / », « Notre Histoire / » */
.bb-title-slash::after {
    content: " /";
    color: var(--bb-orange);
}

/* ── Conteneurs & sections ─────────────────────────────────── */
.bb-container { max-width: var(--bb-container); margin-inline: auto; padding-inline: 1.25rem; }
.bb-section { padding-block: var(--bb-space); }
.bb-section--gray { background: var(--bb-gray-light); }
.bb-section--teal { background: var(--bb-teal); color: #fff; }
.bb-section--dark { background: var(--bb-teal-dark); color: #fff; }
.bb-section--dark h2, .bb-section--dark h3, .bb-section--teal h2, .bb-section--teal h3 { color: #fff; }

/* Fond couleur qui « déborde du body » (demandé plusieurs fois dans le pptx) :
   à poser sur une section Elementor pleine largeur. */
.bb-bleed { position: relative; }
.bb-bleed--gray { background: var(--bb-gray-light); }
.bb-bleed--teal { background: var(--bb-teal); color: #fff; }

/* ── Boutons ───────────────────────────────────────────────── */
.bb-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .85rem 1.6rem;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .02em;
    border-radius: var(--bb-radius);
    border: 2px solid transparent;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
    cursor: pointer;
}
.bb-btn--orange { background: var(--bb-orange); color: #fff; }
.bb-btn--orange:hover { background: var(--bb-orange-dark); color: #fff; }
.bb-btn--teal { background: var(--bb-teal); color: #fff; }
.bb-btn--teal:hover { background: var(--bb-teal-dark); color: #fff; }
.bb-btn--ghost { background: transparent; border-color: currentColor; color: inherit; }
.bb-btn--ghost:hover { background: rgba(255,255,255,.12); }
.bb-btn--white { background: #fff; color: var(--bb-teal-dark); }

/* Lien « En savoir + » */
.bb-more {
    display: inline-block;
    font-weight: 700;
    color: var(--bb-teal-dark);
    border-bottom: 2px solid var(--bb-orange);
    padding-bottom: 2px;
}
.bb-section--teal .bb-more, .bb-section--dark .bb-more { color: #fff; }

/* ── Blocs « Nos Services » (grille colorée de l'accueil) ──── */
.bb-services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: var(--bb-gray-border);
}
.bb-service {
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    background: #fff;
}
.bb-service__icon { width: 56px; height: 56px; }
.bb-service__title { font-size: var(--bb-fs-h4); margin: 0; }
.bb-service__text { font-size: 1rem; color: var(--bb-gray); flex: 1; }
.bb-service--dark   { background: var(--bb-teal-dark); color: #fff; }
.bb-service--dark .bb-service__title { color: #fff; }
.bb-service--teal   { background: var(--bb-teal); color: #fff; }
.bb-service--teal .bb-service__title, .bb-service--teal .bb-service__text { color: #fff; }
.bb-service--orange { background: var(--bb-orange); color: #fff; align-items: center; text-align: center; justify-content: center; }
.bb-service--orange .bb-service__title { color: #fff; }
.bb-service--feature { justify-content: center; }
.bb-service--feature .bb-service__title { font-size: var(--bb-fs-h3); }

/* ── Timeline « Notre Histoire » ───────────────────────────── */
.bb-timeline { position: relative; padding-left: 0; }
.bb-timeline__track { position: relative; margin-left: 1.5rem; padding-left: 2.5rem; border-left: 3px solid var(--bb-teal); }
.bb-timeline__item { position: relative; padding-bottom: 2.5rem; }
.bb-timeline__item::before {
    content: "";
    position: absolute;
    left: calc(-2.5rem - 9px);
    top: .35rem;
    width: 15px; height: 15px;
    border-radius: 50%;
    background: var(--bb-teal-dark);
    box-shadow: 0 0 0 4px #fff;
}
.bb-timeline__year { color: var(--bb-orange); font-weight: 800; font-size: 1.5rem; }
.bb-timeline__badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 84px; height: 84px; padding: 0 .75rem;
    border-radius: 50%;
    background: var(--bb-teal-dark); color: #fff;
    font-weight: 700; font-size: 1.25rem;
}

/* ── Bandeau statistiques (orange) ─────────────────────────── */
.bb-stats {
    background: var(--bb-orange);
    color: #fff;
    padding-block: clamp(2rem, 4vw, 3.5rem);
}
.bb-stats__grid {
    max-width: var(--bb-container);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    text-align: center;
    padding-inline: 1.25rem;
}
.bb-stat__icon { height: 34px; margin-bottom: .5rem; opacity: .95; }
.bb-stat__value { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; line-height: 1; }
.bb-stat__label { font-size: 1rem; margin-top: .35rem; }

/* ── Galerie photos ────────────────────────────────────────── */
.bb-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.bb-gallery img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

/* ── Image de couverture (pages internes) ──────────────────── */
.bb-cover { position: relative; min-height: 60vh; display: flex; align-items: center; }
.bb-cover__media { position: absolute; inset: 0; }
.bb-cover__media img { width: 100%; height: 100%; object-fit: cover; }
.bb-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,59,72,.72), rgba(20,59,72,.25)); }
.bb-cover__inner { position: relative; z-index: 2; max-width: var(--bb-container); margin-inline: auto; padding: 3rem 1.25rem; color: #fff; }
.bb-cover__inner h1, .bb-cover__inner h2 { color: #fff; }
.bb-cover__inner p { font-size: 1.15rem; max-width: 46ch; }

/* ── Blocs ancres colorés (coworking / cyber / fablab) ─────── */
.bb-anchor-nav { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 2rem; }
.bb-anchor-nav a { padding: .5rem 1rem; border-radius: 999px; background: var(--bb-gray-light); font-weight: 600; font-size: .95rem; }
.bb-anchor-nav a:hover, .bb-anchor-nav a.is-active { background: var(--bb-teal); color: #fff; }
.bb-block { scroll-margin-top: 110px; }

/* ── Grille partenaires ────────────────────────────────────── */
.bb-partners { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.5rem 2rem; align-items: center; }
.bb-partners img { max-height: 90px; width: auto; margin-inline: auto; filter: none; }
.bb-partners--cols3 { grid-template-columns: repeat(3, 1fr); }
.bb-partners-group h3 { font-size: var(--bb-fs-h5); text-transform: uppercase; letter-spacing: .05em; color: var(--bb-gray); }

/* ── Coworkers ─────────────────────────────────────────────── */
.bb-coworkers { background: var(--bb-teal); color: #fff; }
.bb-coworkers .bb-coworker { text-align: center; }
.bb-coworker__photo { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; margin-inline: auto; }
.bb-coworker__name { font-weight: 700; margin-top: .75rem; }
.bb-coworker__role { font-size: .95rem; opacity: .9; }

/* ── Visite 360 ────────────────────────────────────────────── */
.bb-360 { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.bb-360 iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── Actus (grille) ───────────────────────────────────────── */
.bb-news { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.bb-news__card { background: #fff; border: 1px solid var(--bb-gray-border); border-radius: var(--bb-radius); overflow: hidden; display: flex; flex-direction: column; }
.bb-news__thumb { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.bb-news__body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; gap: .5rem; }
.bb-news__date { font-size: .85rem; color: var(--bb-gray); text-transform: uppercase; letter-spacing: .04em; }
.bb-news__title { font-size: 1.25rem; margin: 0; }

/* ── En-tête (de secours — remplaçable par un header Elementor) ── */
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 1000; background: #fff; padding: .5rem 1rem; }

.bb-header { background: #fff; border-bottom: 1px solid var(--bb-gray-border); position: sticky; top: 0; z-index: 500; }
.bb-header__inner { max-width: var(--bb-container-wide); margin-inline: auto; padding: .75rem 1.25rem; display: flex; align-items: center; gap: 1.5rem; }
.bb-header__brand img { max-height: 52px; width: auto; }
.bb-header__brand-text { font-weight: 800; letter-spacing: .04em; color: var(--bb-teal-dark); font-size: 1.25rem; }
.bb-header__nav { margin-left: auto; display: flex; align-items: center; gap: 1.5rem; }
.bb-menu { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.bb-menu a { color: var(--bb-teal-dark); font-weight: 600; font-size: .95rem; text-transform: uppercase; letter-spacing: .02em; padding: .25rem 0; }
.bb-menu a:hover, .bb-menu .current-menu-item > a { color: var(--bb-orange); }
.bb-header__burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: .5rem; cursor: pointer; }
.bb-header__burger span { width: 24px; height: 2px; background: var(--bb-teal-dark); }

@media (max-width: 960px) {
    .bb-header__burger { display: flex; margin-left: auto; }
    .bb-header__nav { position: absolute; inset: 100% 0 auto 0; background: #fff; flex-direction: column; align-items: stretch; gap: 0; padding: 1rem 1.25rem; border-bottom: 1px solid var(--bb-gray-border); display: none; }
    .bb-header__nav.is-open { display: flex; }
    .bb-menu { flex-direction: column; gap: 0; }
    .bb-menu a { padding: .75rem 0; border-bottom: 1px solid var(--bb-gray-light); display: block; }
    .bb-header__cta { margin-top: .75rem; justify-content: center; }
}

/* ── Pied de page (de secours) ─────────────────────────────── */
.bb-footer { background: var(--bb-gray-light); color: var(--bb-ink); padding-top: var(--bb-space); font-size: 1rem; }
.bb-footer__grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.3fr; gap: 2.5rem; padding-bottom: 3rem; }
.bb-footer__title { font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bb-teal); margin-bottom: 1rem; }
.bb-footer__menu { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.bb-footer__menu a { color: var(--bb-teal); }
.bb-footer__label { font-weight: 700; color: var(--bb-teal-dark); }
.bb-footer__map img { border-radius: var(--bb-radius); }
.bb-footer__social { margin-top: .75rem; display: flex; gap: 1rem; }
.bb-footer__partners { text-align: center; padding-block: 2rem; border-top: 1px solid var(--bb-gray-border); }
.bb-footer__financed { font-weight: 700; color: var(--bb-gray); margin-bottom: 1rem; }
.bb-footer__legal { text-align: center; padding-block: 1.25rem; border-top: 1px solid var(--bb-gray-border); font-size: .85rem; color: var(--bb-gray); }
.bb-footer__legal a { color: var(--bb-gray); text-decoration: underline; }

/* ── Bouton retour haut ────────────────────────────────────── */
.bb-totop {
    position: fixed; right: 1.25rem; bottom: 1.25rem;
    width: 44px; height: 44px; display: grid; place-items: center;
    border-radius: 50%; background: var(--bb-teal); color: #fff; font-size: 1.1rem;
    opacity: 0; pointer-events: none; transform: translateY(10px);
    transition: opacity .2s ease, transform .2s ease; z-index: 900;
}
.bb-totop.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.bb-totop:hover { background: var(--bb-teal-dark); color: #fff; }

@media (max-width: 720px) {
    .bb-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .bb-footer__grid { grid-template-columns: 1fr; }
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .bb-services { grid-template-columns: repeat(2, 1fr); }
    .bb-stats__grid { grid-template-columns: repeat(2, 1fr); }
    .bb-gallery { grid-template-columns: repeat(2, 1fr); }
    .bb-news { grid-template-columns: repeat(2, 1fr); }
    .bb-partners--cols3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .bb-services { grid-template-columns: 1fr; }
    .bb-stats__grid { grid-template-columns: 1fr 1fr; }
    .bb-news { grid-template-columns: 1fr; }
    .bb-partners--cols3 { grid-template-columns: 1fr; }
    .bb-cover { min-height: 48vh; }
}