/* ====================== CONTACT : LOCALISATION ====================== */
/* La carte occupe toute la largeur du contenu ; un panneau blanc flotte dessus (adresse, horaires, zone, boutons).
   Mouvement : la carte se devoile, une route pointillee se trace du panneau vers le repere, un paquet la parcourt,
   le repere emet un signal, les infos arrivent en cascade. Tout rejoue aller et retour (classe .is-visible). */

.cl-section {
    position: relative;
    padding: 96px 0 112px;
    background: linear-gradient(180deg, #f4f7fb 0%, #eef4fa 100%);
}

.cl-stage {
    position: relative;
    display: grid;
    width: min(100% - 64px, 1216px);
    margin-inline: auto;
}

/* ---------- Carte : plan fixe (tuiles OpenStreetMap assemblees une fois, ASSETS/atelier-map.webp) ----------
   Rien ne se deplace : le repere, la route et l'etiquette sont places au pixel pres sur le plan.
   Position de l'atelier sur l'image : 800 x 449 px (--pin-x / --pin-y = ou on la montre dans le cadre). */
.cl-map {
    --pin-x: 66%;
    --pin-y: 50%;
    --px: 0;
    --py: 0;
    position: relative;
    grid-area: 1 / 1;
    height: 620px;
    border: 1px solid var(--home-rule, #dde6f1);
    border-radius: 6px;
    background: #eef3f9;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.035);
    overflow: hidden;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.1s;
}

.cl-section.is-visible .cl-map { clip-path: inset(0 0 0 0); }

/* le « monde » (plan + repere + etiquette) bouge d'un bloc avec le pointeur */
.cl-world {
    position: absolute;
    inset: 0;
    transform: translate3d(calc(var(--px) * -12px), calc(var(--py) * -8px), 0) scale(1.1);
    transform-origin: var(--pin-x) var(--pin-y);
    transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}

.cl-section.is-visible .cl-world { transform: translate3d(calc(var(--px) * -12px), calc(var(--py) * -8px), 0) scale(1); }

.cl-img {
    position: absolute;
    left: calc(var(--pin-x) - 800px);
    top: calc(var(--pin-y) - 449px);
    width: 1536px;
    height: 1024px;
    max-width: none;
    /* couleurs standard de la carte : aucun filtre */
    filter: none;
    user-select: none;
    -webkit-user-drag: none;
}

.cl-tint {
    /* pas de teinte : seul un leger degrade blanc a gauche aide la lecture du panneau */
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 45%);
    pointer-events: none;
}

/* repere de l'atelier */
.cl-pin {
    position: absolute;
    left: var(--pin-x);
    top: var(--pin-y);
    width: 0;
    height: 0;
    pointer-events: none;
}

.cl-pin i {
    position: absolute;
    left: -80px;
    top: -80px;
    width: 160px;
    height: 160px;
    border: 1.5px solid rgba(36, 92, 255, 0.6);
    border-radius: 50%;
    opacity: 0;
    animation: clRing 3.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.cl-pin i:nth-child(2) { animation-delay: 1.8s; }

@keyframes clRing {
    0% { opacity: 0; transform: scale(0.1); }
    15% { opacity: 0.9; }
    100% { opacity: 0; transform: scale(1); }
}

.cl-pin b {
    position: absolute;
    left: -11px;
    top: -11px;
    width: 22px;
    height: 22px;
    border: 4px solid #ffffff;
    border-radius: 50%;
    background: #245cff;
    box-shadow: 0 0 0 7px rgba(36, 92, 255, 0.22), 0 10px 22px rgba(36, 92, 255, 0.45);
    opacity: 0;
    transform: translateY(-34px) scale(0.6);
    transition: opacity 0.4s ease 1.3s, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 1.3s;
}

.cl-section.is-visible .cl-pin b { opacity: 1; transform: none; }

/* routes : deux trajets calcules par le script qui SUIVENT LA ROUTE jaune (D20, depuis le nord et depuis le sud)
   puis la rue de l'atelier jusqu'a l'epingle (trace releve sur le plan, voir contact-map.js).
   Trait doux : un coeur bleu et un halo large, sans lueur. Des vehicules y circulent (voir .cl-v). */
.cl-arc {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.cl-arc path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.9s;
}

.cl-arc-halo { stroke: rgba(36, 92, 255, 0.16); stroke-width: 11; }
.cl-arc-base { stroke: rgba(36, 92, 255, 0.62); stroke-width: 5; }

.cl-section.is-visible .cl-arc path { stroke-dashoffset: 0; }

/* circulation : voitures, camionnettes et motos vues de dessus, suivant la route jaune dans les deux sens */
.cl-traffic {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.cl-v {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    opacity: 0;
    filter: drop-shadow(0 1.5px 2px rgba(7, 18, 37, 0.3));
    will-change: offset-distance;
}

.cl-v svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cl-v-car { width: 32px; height: 13px; }
.cl-v-van { width: 42px; height: 15px; }
.cl-v-moto { width: 21px; height: 7px; }

/* anneau d'impact sur le repere : meme cycle que la livraison */
.cl-pin u {
    position: absolute;
    left: -60px;
    top: -60px;
    width: 120px;
    height: 120px;
    border: 2px solid #245cff;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}

/* etiquette collee au repere */
.cl-callout {
    position: absolute;
    left: calc(var(--pin-x) + 30px);
    top: calc(var(--pin-y) - 30px);
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 10px 16px 10px 12px;
    border: 1px solid var(--home-rule, #dde6f1);
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16);
    opacity: 0;
    transform: translate3d(-10px, 0, 0);
    transition: opacity 0.7s ease 1.7s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.7s;
    pointer-events: none;
}

.cl-section.is-visible .cl-callout { opacity: 1; transform: none; }

.cl-callout-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    position: relative;
    background: #35d07f;
}

/* halo : disque translucide qui grossit et s'estompe (remplace l'animation de box-shadow) */
.cl-callout-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(53, 208, 127, 0.5);
    --ring: 2.1111;
    pointer-events: none;
    animation: ccOnline 2.4s ease-in-out infinite;
}

.cl-callout span:last-child { display: grid; gap: 1px; }
.cl-callout b { color: var(--home-ink, #071225); font-size: 0.9rem; font-weight: 650; }
.cl-callout small { color: #66758a; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }

.cl-credit {
    position: absolute;
    left: auto;
    right: 12px;
    bottom: 8px;
    z-index: 4;
    margin: 0;
    padding: 2px 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.85);
    color: #66758a;
    font-size: 0.68rem;
}

.cl-credit a { color: inherit; text-decoration: underline; }

/* reperes d'angle */
.cl-brackets i {
    position: absolute;
    width: 22px;
    height: 22px;
    border: 0 solid #245cff;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease 1.1s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.1s;
}

.cl-brackets i:nth-child(1) { top: 12px; right: 12px; border-top-width: 2px; border-right-width: 2px; transform: translate(-10px, 10px); }
.cl-brackets i:nth-child(2) { bottom: 12px; right: 12px; border-bottom-width: 2px; border-right-width: 2px; transform: translate(-10px, -10px); }
.cl-brackets i:nth-child(3) { bottom: 12px; left: 12px; border-bottom-width: 2px; border-left-width: 2px; transform: translate(10px, -10px); }
.cl-brackets i:nth-child(4) { display: none; }

.cl-section.is-visible .cl-brackets i { opacity: 1; transform: none; }

/* ---------- Panneau flottant ---------- */
.cl-panel {
    position: relative;
    z-index: 2;
    grid-area: 1 / 1;
    align-self: center;
    justify-self: start;
    width: min(420px, calc(100% - 48px));
    margin: 24px;
    padding: 32px 32px 28px;
    border: 1px solid var(--home-rule, #dde6f1);
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 24px 60px -20px rgba(15, 23, 42, 0.28);
    opacity: 0;
    transform: translate3d(-28px, 0, 0);
    transition: opacity 0.8s ease 0.5s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.5s;
}

.cl-section.is-visible .cl-panel { opacity: 1; transform: none; }

.cl-panel .section-kicker { margin: 0 0 14px; }

.cl-title {
    margin: 0;
    color: var(--home-ink, #071225);
    font-size: clamp(1.8rem, 2.6vw, 2.3rem);
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.08;
}

.cl-title::after {
    content: "";
    display: block;
    width: 48px;
    height: 2px;
    margin-top: 16px;
    border-radius: 2px;
    background: #0575e6;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.9s;
}

.cl-section.is-visible .cl-title::after { transform: scaleX(1); }

.cl-lead {
    max-width: 38ch;
    margin: 16px 0 20px;
    color: var(--home-muted, #4f6177);
    font-size: 0.97rem;
    line-height: 1.55;
}

.cl-facts {
    display: grid;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--home-rule, #dde6f1);
}

.cl-facts li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid var(--home-rule, #dde6f1);
    opacity: 0;
    transform: translate3d(-12px, 0, 0);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.cl-section.is-visible .cl-facts li { opacity: 1; transform: none; }
.cl-section.is-visible .cl-facts li:nth-child(1) { transition-delay: 0.85s; }
.cl-section.is-visible .cl-facts li:nth-child(2) { transition-delay: 0.95s; }
.cl-section.is-visible .cl-facts li:nth-child(3) { transition-delay: 1.05s; }

.cl-facts svg {
    flex: 0 0 auto;
    box-sizing: content-box;
    width: 18px;
    height: 18px;
    padding: 8px;
    border-radius: 6px;
    background: rgba(36, 92, 255, 0.08);
    fill: none;
    stroke: #245cff;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: background-color 0.3s ease, stroke 0.3s ease;
}

.cl-facts li:hover svg { background: #245cff; stroke: #ffffff; }

.cl-facts span { display: grid; gap: 2px; }
.cl-facts small { color: #66758a; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; }
.cl-facts b { color: var(--home-ink, #071225); font-size: 0.97rem; font-weight: 600; line-height: 1.3; }

.cl-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 22px;
}

/* ---------- Tablette et mobile : la carte puis le panneau, empiles ---------- */
@media (max-width: 1080px) {
    .cl-section { padding: 72px 0 88px; }
    .cl-stage { width: min(100% - 40px, 720px); display: block; }
    .cl-map { --pin-x: 50%; --pin-y: 50%; height: 380px; }
    .cl-panel { width: auto; margin: -56px 16px 0; align-self: auto; }
    .cl-callout { left: calc(var(--pin-x) + 24px); top: calc(var(--pin-y) - 28px); }
}

@media (max-width: 560px) {
    .cl-stage { width: min(100% - 48px, 1216px); }
    .cl-map { height: 340px; }
    .cl-panel { margin: -44px 0 0; padding: 26px 22px 22px; }
    .cl-callout { left: 16px; right: 16px; top: auto; bottom: 64px; }
}

@media (prefers-reduced-motion: reduce) {
    .cl-map { clip-path: none; transition: none; }
    .cl-world, .cl-section.is-visible .cl-world { transform: none; transition: none; }
    .cl-pin b { opacity: 1; transform: none; transition: none; }
    .cl-panel, .cl-facts li, .cl-callout, .cl-brackets i { opacity: 1; transform: none; transition: none; }
    .cl-arc path { stroke-dashoffset: 0; transition: none; }
    .cl-traffic, .cl-pin u { display: none; }
    .cl-pin i, .cl-callout-dot, .cl-callout-dot::after { animation: none; }
    .cl-title::after { transform: none; transition: none; }
}