/* ============================================================
    A Box IT — Design "fiche d'intervention"
    Palette atelier : papier kraft, bleu de travail, cuivre, encre de tampon.
    ============================================================ */
:root{
    --paper:       #fffffc;   /* papier kraft clair — fond de page */
    --paper-deep:  #e9dfc2;   /* kraft plus soutenu — sections alternées */
    --ink:         #161652;   /* bleu de travail très sombre — texte, nav, footer */
    --ink-soft:    #171717;   /* texte secondaire */
    --copper:      #B5692C;   /* cuivre — CTA, prix, liens */
    --copper-dark: #8A4C1F;   /* cuivre foncé — texte sur fond clair */
    --stamp:       #A6392A;   /* encre de tampon — accents rares */
    --line:        #C9BB97;   /* lignes pointillées / perforations */
    --radius-card: 14px;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
    font-family:'Public Sans', system-ui, sans-serif;
    background-color:var(--paper);
    color:var(--ink);
    font-size:1.02rem;
    line-height:1.65;
}

h1,h2,h3,h4,h5{
    font-family:'Big Shoulders Display', sans-serif;
    font-weight:700;
    letter-spacing:0.01em;
    color:var(--ink);
}

.font-mono{ font-family:'JetBrains Mono', monospace; }

.eyebrow{
    font-family:'JetBrains Mono', monospace;
    font-size:0.78rem;
    font-weight:600;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--copper-dark);
}

a{ color:var(--copper-dark); }
a:hover{ color:var(--copper); }

:focus-visible{ outline:2px solid var(--copper); outline-offset:3px; }

::selection{ background:var(--copper); color:#fff; }

/* ---------- Sections de fond ---------- */
.section-paper{ background:var(--paper); }
.section-deep{ background:var(--paper-deep); }
.section-ink{ background:var(--ink); color:var(--paper); }
.section-ink .eyebrow{ color:#D9A86B; }
.section-ink h2{ color:var(--paper); }
.section-ink p{ color:#C7D0D8; }

/* ---------- Navbar ---------- */
.navbar-byw{
    background-color:var(--ink);
    border-bottom:1px solid #34465A;
}
.navbar-byw .navbar-brand{
    font-family:'Big Shoulders Display', sans-serif;
    font-weight:800;
    font-size:1.5rem;
    color:var(--paper);
    letter-spacing:0.02em;
}
.navbar-byw .navbar-brand .accent{ color:#D9A86B; }
.navbar-logo{
    height:50px;
    width:auto;
    display:block;
}
.navbar-byw .nav-link{
    color:#C7D0D8;
    font-weight:500;
    font-size:0.95rem;
}
.navbar-byw .nav-link:hover{ color:#fff; }
.navbar-toggler{ border-color:#34465A; }
.navbar-toggler-icon{
    filter:invert(1) brightness(1.6);
}

.btn-ticket{
    background-color:var(--copper);
    border:none;
    color:#fff;
    font-weight:600;
    border-radius:8px;
    transition:transform .15s ease, background-color .15s ease;
}
.btn-ticket:hover{ background-color:#9A5523; color:#fff; transform:translateY(-1px); }
.btn-ticket:active{ transform:translateY(0); }

.btn-outline-ink{
    border:1.5px solid var(--ink);
    color:var(--ink);
    font-weight:600;
    border-radius:8px;
    background:transparent;
}
.btn-outline-ink:hover{ background-color:var(--ink); color:var(--paper); }

.btn-outline-paper{
    border:1.5px solid #C7D0D8;
    color:var(--paper);
    font-weight:600;
    border-radius:8px;
    background:transparent;
}
.btn-outline-paper:hover{ background-color:var(--paper); color:var(--ink); }

/* ---------- Hero ---------- */
.hero{
    position:relative;
    padding:5.5rem 0 4rem;
    background-image:
        radial-gradient(circle, rgba(61, 33, 33, 0.10) 1px, transparent 1px);
    background-size:18px 18px;
    overflow:hidden;
}
.hero h1{
    font-size:clamp(2.4rem, 5vw, 3.6rem);
    line-height:1.08;
}
.hero .lead{
    color:var(--ink-soft);
    font-size:1.15rem;
    max-width:42rem;
}

.stamp{
    position:absolute;
    top:1.5rem;
    right:6%;
    width:140px;
    height:140px;
    transform:rotate(-12deg);
    opacity:0.92;
}
@media (max-width: 991px){ .stamp{ display:none; } }

.trust-strip{
    border-top:1px dashed var(--line);
    border-bottom:1px dashed var(--line);
}
.trust-strip .trust-item{
    font-family:'JetBrains Mono', monospace;
    font-size:0.82rem;
    font-weight:500;
    color:var(--ink-soft);
    letter-spacing:0.01em;
}
.trust-strip .trust-item i{ color:var(--copper); }
.trust-strip .divider{
    width:1px;
    background:var(--line);
}

/* ---------- Process (comment ça marche) ---------- */
.process-num{
    font-family:'JetBrains Mono', monospace;
    font-size:2.6rem;
    font-weight:600;
    color:var(--copper);
    line-height:1;
}
.process-total{
    font-family:'JetBrains Mono', monospace;
    font-size:1.1rem;
    color:var(--ink-soft);
}
.process-col{ position:relative; }
.process-rail{
    position:absolute;
    top:1.4rem;
    left:0;
    width:100%;
    height:0;
    border-top:2px dashed var(--line);
    z-index:0;
}
@media (max-width: 767px){ .process-rail{ display:none; } }

/* ---------- Tickets (tarifs) ---------- */
.ticket{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--radius-card);
    position:relative;
    height:100%;
    transition:transform .2s ease, box-shadow .2s ease;
}
.ticket:hover{ transform:translateY(-4px); box-shadow:0 14px 28px -16px rgba(33,47,61,0.35); }

.ticket--featured{
    border-color:var(--copper);
    box-shadow:0 16px 32px -18px rgba(181,105,44,0.45);
}
@media (min-width: 992px){
    .ticket--featured{ transform:rotate(-1deg) translateY(-6px); }
    .ticket--featured:hover{ transform:rotate(-1deg) translateY(-10px); }
}

.ticket__flag{
    position:absolute;
    top:-14px;
    right:18px;
    background:var(--stamp);
    color:#fff;
    font-family:'JetBrains Mono', monospace;
    font-size:0.72rem;
    font-weight:600;
    letter-spacing:0.05em;
    padding:5px 12px;
    border-radius:20px;
    transform:rotate(3deg);
    box-shadow:0 4px 10px rgba(0,0,0,0.2);
}

.ticket__top{ padding:2rem 1.85rem 1.5rem; }
.ticket__top h4{ font-size:1.35rem; margin-bottom:0.2rem; }
.ticket__top .tagline{ color:var(--ink-soft); font-size:0.92rem; }

.ticket__perf{
    position:relative;
    margin:0 1.5rem;
    border-top:2px dashed var(--line);
}
.ticket__perf::before, .ticket__perf::after{
    content:'';
    position:absolute;
    top:-9px;
    width:18px;
    height:18px;
    border-radius:50%;
    background:var(--paper-deep);
}
.ticket__perf::before{ left:-1.65rem; }
.ticket__perf::after{ right:-1.65rem; }

.ticket__stub{ padding:1.4rem 1.85rem 1.85rem; text-align:center; }
.price-tag{
    font-family:'JetBrains Mono', monospace;
    font-size:2.3rem;
    font-weight:600;
    color:var(--ink);
}
.sap-badge{
    display:inline-block;
    font-family:'JetBrains Mono', monospace;
    font-size:0.78rem;
    font-weight:500;
    background-color:#E7EFE6;
    color:#2F6B3C;
    padding:4px 11px;
    border-radius:20px;
}
.ticket ul{ list-style:none; padding:0; margin:1.1rem 0 0; text-align:left; }
.ticket ul li{ font-size:0.92rem; color:var(--ink-soft); margin-bottom:0.5rem; }
.ticket ul li i{ color:var(--copper); }

/* secondary tickets */
.ticket-mini{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--radius-card);
    padding:1.6rem 1.8rem;
    height:100%;
}
.ticket-mini .price-tag{ font-size:1.6rem; }
.ticket-mini ul{ list-style:none !important; padding:0; margin:1rem 0 0; text-align:left; }
.ticket-mini ul li{ font-size:0.88rem; color:var(--ink-soft); margin-bottom:0.45rem; }
.ticket-mini ul li i{ color:var(--copper); }

/* options à la carte, à l'intérieur du forfait Diagnostic Express */
.ticket__addons{
    border-top:2px dashed var(--line);
    text-align:left;
}
.addon-title{
    font-family:'JetBrains Mono', monospace;
    font-size:0.85rem;
    font-weight:600;
    color:var(--ink);
}
.addon-title i{ color:var(--copper); }
.addon-item{
    background:var(--paper-deep);
    border:1px solid var(--line);
    border-radius:10px;
    padding:0.8rem 1.05rem;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:0.75rem;
    transition:border-color .15s ease, background-color .15s ease;
}
.addon-item__name{
    font-size:0.88rem;
    color:var(--ink-soft);
    font-weight:500;
    line-height:1.3;
}
.addon-item__price{
    font-family:'JetBrains Mono', monospace;
    font-weight:600;
    color:var(--copper-dark);
    font-size:0.95rem;
    white-space:nowrap;
    flex-shrink:0;
}
.addon-note{
    font-size:0.82rem;
    color:var(--ink-soft);
}
.addon-item[data-bs-toggle="tooltip"]{ cursor:help; }
.addon-item[data-bs-toggle="tooltip"]:hover,
.addon-item[data-bs-toggle="tooltip"]:focus-visible{
    border-color:var(--copper);
    background-color:#F3ECD6;
}
.addon-item[data-bs-toggle="tooltip"] .addon-item__name{
    text-decoration:underline;
    text-decoration-style:dotted;
    text-decoration-color:var(--copper);
    text-underline-offset:3px;
}
.addon-item__hint{
    color:var(--copper);
    font-size:0.76rem;
    margin-left:2px;
    vertical-align:1px;
}

/* Info-bulles (Bootstrap) aux couleurs du site */
.tooltip{ --bs-tooltip-max-width: 230px; }
.tooltip .tooltip-inner{
    background-color:var(--ink);
    color:var(--paper);
    font-family:'Public Sans', system-ui, sans-serif;
    font-size:0.82rem;
    line-height:1.5;
    text-align:left;
    padding:0.65rem 0.9rem;
    border-radius:8px;
    box-shadow:0 10px 22px -10px rgba(22,22,82,0.5);
}
.tooltip .tooltip-arrow::before{ border-top-color:var(--ink); border-bottom-color:var(--ink); }

/* ---------- A propos ---------- */
.tech-card{
    position:relative;
    max-width:280px;
}
.tech-photo{
    width:100%;
    display:block;
    border-radius:var(--radius-card);
    border:1px solid var(--line);
    box-shadow:0 16px 32px -18px rgba(22,22,82,0.4);
    transform:rotate(-2deg);
}
.tech-card__tag{
    position:absolute;
    bottom:-14px;
    right:-8px;
    background:var(--stamp);
    color:#fff;
    font-family:'JetBrains Mono', monospace;
    font-size:0.72rem;
    font-weight:600;
    letter-spacing:0.05em;
    padding:5px 14px;
    border-radius:20px;
    transform:rotate(4deg);
    box-shadow:0 4px 10px rgba(0,0,0,0.2);
}

.apropos-fact{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:10px;
    padding:0.85rem 1rem;
    font-size:0.9rem;
    color:var(--ink-soft);
    height:100%;
}
.apropos-fact i{ color:var(--copper); }

.action-text{
    color:var(--ink-soft);
}

/* ---------- Zone map ---------- */
.map-wrap{
    background:var(--paper-deep);
    border:1px solid var(--line);
    border-radius:var(--radius-card);
    padding:1rem;
}
.map-caption{
    font-family:'JetBrains Mono', monospace;
    font-size:0.78rem;
    color:var(--ink-soft);
}

/* ---------- Carte interactive (Leaflet / OpenStreetMap) ---------- */
.leaflet-container{
    background:#EFEAD9;
    font-family:'Public Sans', system-ui, sans-serif;
}
.leaflet-control-attribution{
    background:rgba(255,255,252,0.88) !important;
    color:var(--ink-soft) !important;
    font-family:'JetBrains Mono', monospace;
    font-size:0.68rem;
}
.leaflet-control-attribution a{ color:var(--copper-dark) !important; }
.leaflet-control-zoom a{
    background-color:var(--paper) !important;
    color:var(--ink) !important;
    border-color:var(--line) !important;
}
.leaflet-control-zoom a:hover{ background-color:var(--paper-deep) !important; }

.zone-tooltip{
    background:var(--paper);
    border:1px solid var(--line);
    color:var(--ink);
    font-family:'JetBrains Mono', monospace;
    font-size:0.72rem;
    padding:3px 9px;
    border-radius:6px;
    box-shadow:0 2px 6px rgba(22,22,82,0.12);
    white-space:nowrap;
}
.zone-tooltip::before{ display:none; }
.zone-tooltip--principal{
    color:var(--ink);
    font-family:'Big Shoulders Display', sans-serif;
    font-weight:700;
    font-size:0.85rem;
    letter-spacing:0.01em;
    border-color:var(--copper);
}

/* ---------- Vérificateur de zone (15 km) ---------- */
.zone-checker{
    background:var(--paper-deep);
    border:1px solid var(--line);
    border-radius:var(--radius-card);
    padding:1.5rem 1.75rem;
}
.zone-checker__intro{
    font-family:'JetBrains Mono', monospace;
    font-size:0.9rem;
    font-weight:600;
    color:var(--ink);
    margin-bottom:0;
}
.zone-checker__intro i{ color:var(--copper); }
.zone-checker__form{
    display:flex;
    flex-wrap:wrap;
    gap:0.75rem;
}
.zone-checker__form .form-control{
    flex:1 1 240px;
    background-color:var(--paper);
    border:1px solid var(--line);
    color:var(--ink);
    border-radius:8px;
}
.zone-checker__form .form-control:focus{
    background-color:var(--paper);
    color:var(--ink);
    border-color:var(--copper);
    box-shadow:0 0 0 0.2rem rgba(181,105,44,0.18);
}
.zone-checker__form .btn{ flex:0 0 auto; }
.zone-checker__result:not(:empty){ margin-top:1.1rem; }
.zone-result{
    display:block;
    font-family:'JetBrains Mono', monospace;
    font-size:0.85rem;
    line-height:1.55;
    padding:0.8rem 1rem;
    border-radius:10px;
}
.zone-result a{ font-weight:600; }
.zone-result--in{
    background-color:#E7EFE6;
    color:#2F6B3C;
}
.zone-result--out{
    background-color:#FBEAE6;
    color:var(--stamp);
}
.zone-result--error{
    background-color:#FDF3E7;
    color:var(--copper-dark);
}
.zone-result--loading{
    background-color:var(--paper);
    color:var(--ink-soft);
    border:1px dashed var(--line);
}

/* ---------- Communes couvertes (référencement local) ---------- */
.fil-ariane{
    font-family:'JetBrains Mono', monospace;
    font-size:0.78rem;
    color:var(--ink-soft);
}
.fil-ariane a{ color:var(--copper-dark); text-decoration:none; }
.fil-ariane a:hover{ color:var(--copper); text-decoration:underline; }
.fil-ariane span[aria-hidden]{ margin:0 0.4rem; color:var(--line); }

.epci-jump{
    display:flex;
    flex-wrap:wrap;
    gap:0.5rem;
    padding-top:1.5rem;
    border-top:1px dashed var(--line);
}
.epci-jump a{
    display:inline-flex;
    align-items:center;
    gap:0.45rem;
    font-family:'JetBrains Mono', monospace;
    font-size:0.76rem;
    color:var(--ink);
    background:var(--paper-deep);
    border:1px solid var(--line);
    border-radius:999px;
    padding:0.3rem 0.85rem;
    text-decoration:none;
    transition:border-color .2s ease, color .2s ease;
}
.epci-jump a:hover,
.epci-jump a:focus-visible{ border-color:var(--copper); color:var(--copper-dark); }
.epci-jump a span{
    font-weight:600;
    color:var(--copper-dark);
}

/* Décale l'ancre sous la barre de navigation collante */
.zone-epci{ scroll-margin-top:90px; }

.zone-link{
    font-family:'JetBrains Mono', monospace;
    font-size:0.85rem;
    font-weight:600;
    color:var(--copper-dark);
    text-decoration:none;
    border-bottom:1px solid var(--line);
}
.zone-link:hover{ color:var(--copper); border-bottom-color:var(--copper); }

.zone-communes{
    display:grid;
    grid-template-columns:1fr;
    gap:1.25rem;
}
@media (min-width: 992px){
    .zone-communes{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .zone-communes > .zone-epci:first-child{ grid-column:1 / -1; }
}

.zone-epci{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--radius-card);
    padding:1.4rem 1.6rem 1.1rem;
}
.zone-epci:first-child{ border-color:var(--copper); }

.zone-epci__title{
    font-family:'Big Shoulders Display', sans-serif;
    font-size:1.35rem;
    font-weight:700;
    color:var(--ink);
    margin:0 0 0.35rem;
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:0.6rem;
}
.zone-epci__count{
    font-family:'JetBrains Mono', monospace;
    font-size:0.72rem;
    font-weight:500;
    color:var(--copper-dark);
    border:1px solid var(--line);
    border-radius:999px;
    padding:1px 9px;
    white-space:nowrap;
}
.zone-epci__intro{
    font-size:0.92rem;
    color:var(--ink-soft);
    margin:0 0 0.9rem;
}
.zone-epci__list{
    list-style:none;
    margin:0;
    padding:0;
    columns:2;
    column-gap:1.5rem;
    font-size:0.9rem;
    line-height:1.75;
}
@media (min-width: 576px){ .zone-epci__list{ columns:3; } }
@media (min-width: 992px){ .zone-epci__list{ columns:2; } }
@media (min-width: 1200px){ .zone-epci__list{ columns:3; } }
.zone-communes > .zone-epci:first-child .zone-epci__list{ columns:2; }
@media (min-width: 576px){ .zone-communes > .zone-epci:first-child .zone-epci__list{ columns:3; } }
@media (min-width: 992px){ .zone-communes > .zone-epci:first-child .zone-epci__list{ columns:4; } }

.zone-epci__list li{
    break-inside:avoid;
    color:var(--ink);
    border-bottom:1px dotted var(--line);
    padding-right:0.4rem;
}
.zone-epci__cp{
    font-family:'JetBrains Mono', monospace;
    font-size:0.72rem;
    color:var(--ink-soft);
    opacity:0.65;
}
.zone-epci__star{
    color:var(--copper);
    text-decoration:none;
    border:0;
    cursor:help;
}
.zone-epci__note{
    font-size:0.8rem;
    color:var(--ink-soft);
    margin:0.9rem 0 0;
    padding-top:0.7rem;
    border-top:1px dashed var(--line);
}

/* ---------- Contact ---------- */
.ticket-form{
    background:var(--paper-deep);
    border-radius:var(--radius-card);
    border:1px solid var(--line);
    overflow:hidden;
}
.tear{ display:block; width:100%; height:14px; }
.ticket-form .form-control,
.ticket-form .form-select{
    background-color:var(--paper);
    border:1px solid var(--line);
    color:var(--ink);
    border-radius:8px;
}
.ticket-form .form-control:focus,
.ticket-form .form-select:focus{
    background-color:var(--paper);
    color:var(--ink);
    border-color:var(--copper);
    box-shadow:0 0 0 0.2rem rgba(181,105,44,0.18);
}
.ticket-form label{ font-weight:600; font-size:0.9rem; color:var(--ink); margin-bottom:0.3rem; }
.contact-info-strip{
    font-family:'JetBrains Mono', monospace;
    font-size:0.92rem;
}
.contact-info-strip a{ color:var(--ink); font-weight:600; }

/* ---------- Footer ---------- */
.footer-byw{ background:var(--ink); color:#9FB0BC; }
.footer-byw a{ color:#9FB0BC; font-weight:600; text-decoration:none; }

/* ---------- Popup de lancement (compte à rebours) ---------- */
body.modal-open-launch{ overflow:hidden; }

.launch-overlay{
    position:fixed;
    inset:0;
    background:rgba(22,22,82,0.55);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    z-index:3000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:1.5rem;
}
.launch-overlay[hidden]{ display:none; }

.launch-modal{
    position:relative;
    background:var(--paper);
    border-radius:var(--radius-card);
    border:1px solid var(--line);
    box-shadow:0 25px 60px rgba(0,0,0,.35);
    max-width:460px;
    width:100%;
    padding:2.75rem 2rem 2rem;
    text-align:center;
    overflow:hidden;
}
.launch-modal::before{
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height:6px;
    background:var(--copper);
}
.launch-modal__close{
    position:absolute;
    top:0.9rem;
    right:0.75rem;
    background:none;
    border:none;
    font-size:1.6rem;
    line-height:1;
    color:var(--ink-soft);
    cursor:pointer;
    padding:0.3rem 0.6rem;
    border-radius:6px;
}
.launch-modal__close:hover{ color:var(--copper); background:rgba(181,105,44,0.08); }
.launch-modal__countdown{
    font-family:'JetBrains Mono', monospace;
    font-size:1.2rem;
    font-weight:700;
    color:var(--copper-dark);
    background:var(--paper-deep);
    border-radius:10px;
    padding:0.85rem 1rem;
    letter-spacing:0.02em;
}
@media (max-width:400px){
    .launch-modal{ padding:2.5rem 1.25rem 1.5rem; }
    .launch-modal__countdown{ font-size:1rem; }
}

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .reveal{ opacity:1; transform:none; transition:none; }
    .ticket, .btn-ticket, .ticket--featured{ transition:none; }
}

.visually-hidden-focusable:not(:focus){
    position:absolute !important;
    width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);
}

/* Mise en page propre à la page mentions légales : article long format, lisible */
        .legal-main{ max-width:820px; }
        .legal-main h2{ font-size:1.4rem; margin-top:2.75rem; margin-bottom:0.9rem; }
        .legal-main h2:first-of-type{ margin-top:0; }
        .legal-main p, .legal-main li{ color:var(--ink-soft); }
        .legal-main ul{ padding-left:1.2rem; }
        .legal-main .legal-meta{
            font-family:'JetBrains Mono', monospace;
            font-size:0.82rem;
            color:var(--ink-soft);
        }
        .legal-toc{
            background:var(--paper-deep);
            border:1px solid var(--line);
            border-radius:10px;
            padding:1.25rem 1.5rem;
        }
        .legal-toc a{ display:block; padding:0.2rem 0; }
        .todo-fill{
            background:#FDF3E7;
            border:1px dashed var(--copper);
            border-radius:4px;
            padding:0 5px;
            color:var(--copper-dark);
            font-weight:600;
        }