/* =========================
   PALETTE
========================= */

:root {
    --white:      #FEFEFE;
    --cream:      #FFFEB0;
    --orange:     #E64605;
    --blue:       #03428D;
    --dark-blue:  #022b5e;
    --mid-blue:   #0458b8;
    --light-blue: #B6DDFE;
    --aqua:       #84EDF8;
}

/* =========================
   BODY
========================= */

body {
    background:  #f7fbff;
    font-family: Arial, sans-serif;
    color:       #1f1f1f;
    line-height: 1.8;
}

/* =========================
   HEADER PUBLIC
========================= */

header#header {
    background: var(--dark-blue);
}

/* =========================
   MENU
========================= */

header#header #menu {
    width:      100%;
    max-width:  100%;
    background: linear-gradient(90deg, #022b5e 0%, #03428D 45%, #0458b8 100%);
    box-shadow: 0 4px 18px rgba(0,0,0,0.08);
}

header#header #menu a {
    color:       white !important;
    font-weight: 600;
    transition:  0.3s;
}

header#header #menu a:hover {
    color: var(--cream) !important;
}

/* =========================
   HERO
========================= */

header#header #hero-banner {
    background:     linear-gradient(135deg, #03428D 0%, #0458b8 55%, #6ebff2 100%);
    padding-top:    90px;
    padding-bottom: 90px;
}

#hero-banner .title {
    font-size:    64px !important;
    line-height:  1.1;
    font-weight:  900;
    color:        var(--cream);
    max-width:    1250px;
    margin-left:  auto;
    margin-right: auto;
    text-align:   center;
    padding-left:  20px;
    padding-right: 20px;
    text-shadow:  0 3px 12px rgba(0,0,0,0.28);
}

#hero-banner .location {
    text-align: center;
}

#hero-banner .location p {
    font-size: 20px;
    color:     rgba(255,255,255,0.92);
}

/* =========================
   CONTENU GLOBAL
========================= */

main {
    max-width: 1400px;
    margin:    auto;
    padding:   50px 20px;
}

main:not(:has(article:nth-of-type(2) img[src*="L_innovation_organisationnelle"])) article {
    max-width:    1000px;
    margin-left:  auto;
    margin-right: auto;
}

/* =========================
   BLOCS TEXTE
========================= */

main article {
    background:    white;
    border-radius: 30px;
    padding:       50px;
    margin-bottom: 45px;
    box-shadow:    0 12px 35px rgba(0,0,0,0.08);
    border:        2px solid rgba(3,66,141,0.10);
    position:      relative;
    overflow:      hidden;
}

main article::before {
    content:    "";
    position:   absolute;
    top:        0;
    left:       0;
    width:      100%;
    height:     8px;
    background: linear-gradient(90deg, #FFFEB0, #FFF7A0);
}

/* =========================
   TITRES
========================= */

main h1 {
    color:         var(--blue);
    font-size:     42px;
    text-align:    center;
    margin-bottom: 35px;
    position:      relative;
}

main h1::after {
    content:       "";
    display:       block;
    width:         120px;
    height:        5px;
    margin:        18px auto 0 auto;
    border-radius: 10px;
    background:    var(--cream);
}

main h1:empty::after                        { display: none; }
main article:nth-of-type(2) h1:empty        { display: none; }
main article:nth-of-type(2) h1:empty::after { display: none; }

main h2,
main h3 {
    color: var(--orange);
}

/* =========================
   PARAGRAPHES
========================= */

main p {
    font-size:   19px;
    line-height: 1.95;
    text-align:  justify;
}

/* =========================
   IMAGES (hors Leaflet)
========================= */

main img:not(.leaflet-tile):not(.leaflet-marker-icon):not(.leaflet-marker-shadow) {
    display:       block;
    margin:        auto;
    max-width:     100%;
    border-radius: 24px;
    box-shadow:    0 14px 40px rgba(0,0,0,0.16);
    border:        6px solid white;
}

/* =========================
   LIENS
========================= */

main a {
    color:           inherit;
    font-weight:     inherit;
    text-decoration: none;
}

main a:hover {
    color: inherit;
}

/* =========================
   FOOTER
========================= */

footer#footer {
    background: var(--dark-blue);
    color:      white;
    margin-top: 70px;
}

footer#footer a {
    color: var(--cream);
}

/* =========================
   LISTES
========================= */

#page ul {
    list-style: disc inside;
}

/* =========================================
   HOMEPAGE UNIQUEMENT
========================================= */

@media (min-width: 1001px) {

    body.home main {
        display:               grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(420px, 0.95fr);
        gap:                   35px;
        align-items:           start;
    }

    body.home main article:first-of-type  { grid-column: 1; }

    body.home main article:nth-of-type(2) {
        grid-column: 2;
        position:    sticky;
        top:         30px;
        align-self:  start;
        margin-top:  0;
        padding:     20px;
    }

    body.home main article:nth-of-type(2) img {
        width:         calc(100% + 20px);
        max-width:     none;
        margin-left:   -10px;
        margin-right:  -10px;
        border-radius: 20px;
        height:        auto;
    }

    body.home main article:last-of-type {
        grid-column: 1 / -1;
    }
}

/* =========================
   PAGE ACCÈS / MAP
========================= */

article:has(#map-canvas) {
    overflow: visible !important;
}

article:has(#map-canvas)::before,
article:has(#map-canvas)::after {
    display: none !important;
}

.config_fond_bloc {
    display:         flex;
    justify-content: center;
    align-items:     center;
    position:        relative;
    z-index:         1;
}

#map-canvas {
    width:         100%   !important;
    max-width:     900px;
    height:        450px  !important;
    margin:        35px auto 0 auto;
    border-radius: 24px;
    overflow:      hidden !important;
    border:        6px solid white;
    box-shadow:    0 14px 40px rgba(0,0,0,0.14);
    position:      relative;
    z-index:       1;
}

/* -----------------------------------------------
   LEAFLET — CORRECTIFS CRITIQUES
----------------------------------------------- */

/* Tiles : taille fixe 256×256, aucun style parasite
   IMPORTANT : on exclut le marker et son ombre,
   sinon le sélecteur écrase le style du point rouge */
#map-canvas img:not(.leaflet-marker-icon):not(.leaflet-marker-shadow),
.leaflet-container img:not(.leaflet-marker-icon):not(.leaflet-marker-shadow),
.leaflet-tile-pane img,
.leaflet-tile {
    max-width:     none   !important;
    max-height:    none   !important;
    width:         256px  !important;
    height:        256px  !important;
    border-radius: 0      !important;
    box-shadow:    none   !important;
    border:        none   !important;
    display:       inline !important;
}

/* Panes : pas de clipping */
.leaflet-map-pane,
.leaflet-tile-pane,
.leaflet-overlay-pane,
.leaflet-marker-pane,
.leaflet-shadow-pane,
.leaflet-popup-pane,
.leaflet-tooltip-pane {
    overflow: visible !important;
}

/* Marker : petit point rouge dessiné en CSS */
/* Marker : pin de localisation rouge dessiné en SVG inline */
.leaflet-marker-icon {
    width:           24px !important;
    height:          36px !important;
    background:      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 36'><path d='M12 0 C5.4 0 0 5.4 0 12 C0 21 12 36 12 36 C12 36 24 21 24 12 C24 5.4 18.6 0 12 0 Z' fill='%23e63946' stroke='white' stroke-width='1.5'/><circle cx='12' cy='12' r='3.5' fill='white'/></svg>") center/contain no-repeat !important;
    border:          none !important;
    border-radius:   0 !important;
    box-shadow:      none !important;
    filter:          drop-shadow(0 3px 4px rgba(0,0,0,0.35)) !important;
    /* On masque le PNG d'origine de Leaflet */
    object-fit:      none !important;
    object-position: -9999px -9999px !important;
    zoom:            1 !important;
    /* Pointe du pin centrée pile sur la coordonnée */
    margin-left:     -12px !important;
    margin-top:      -36px !important;
}

/* Cacher l'ombre du marker */
.leaflet-marker-shadow {
    display: none !important;
}

/* Pas de halo focus */
.leaflet-marker-icon:focus,
.leaflet-interactive:focus,
.leaflet-container a:focus,
.leaflet-container {
    outline:    none !important;
    box-shadow: none !important;
}

/* =========================
   BOUTONS INSCRIPTION
========================= */

.btn,
a.btn,
input.btn,
button.btn {
    background:    linear-gradient(135deg, #022b5e 0%, #03428D 50%, #0458b8 100%) !important;
    color:         white     !important;
    border:        none      !important;
    border-radius: 16px      !important;
    padding:       14px 28px !important;
    font-weight:   700       !important;
    font-size:     16px      !important;
    box-shadow:    0 8px 22px rgba(3,66,141,0.20);
    transition:    0.25s ease;
}

.btn:hover,
a.btn:hover,
input.btn:hover,
button.btn:hover {
    background: linear-gradient(135deg, #0458b8 0%, #03428D 50%, #022b5e 100%) !important;
    transform:  translateY(-2px);
    box-shadow: 0 12px 28px rgba(3,66,141,0.28);
}

.btn-tertiary,
a.btn-tertiary {
    background:   transparent  !important;
    color:        var(--orange) !important;
    border:       none         !important;
    font-weight:  700          !important;
    margin-top:   10px;
    display:      inline-block;
}

.btn-tertiary:hover,
a.btn-tertiary:hover {
    color:           #c63d04   !important;
    text-decoration: underline !important;
}

/* =========================
   BLOCS CONNEXION
========================= */

#deja_compte,
#pas_encore_compte {
    background:    white;
    border-radius: 26px;
    padding:       40px;
    border:        2px solid rgba(3,66,141,0.08);
    box-shadow:    0 12px 30px rgba(0,0,0,0.06);
}

#deja_compte h4,
#pas_encore_compte h4 {
    color:         var(--blue);
    font-size:     28px;
    margin-bottom: 18px;
    text-align:    center;
}

#selecteur {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   30px;
    align-items:           stretch;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 1000px) {
    body.home main { display: block; }
    #selecteur     { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    #hero-banner .title { font-size: 42px !important; line-height: 1.2; }
    main article        { padding: 30px; }
    main p              { font-size: 17px; }
}