body { margin:0; background:#FFFFFF; font-family:'Work Sans', sans-serif; color:#2E2E2E; -webkit-font-smoothing:antialiased; }
* { box-sizing:border-box; }
a { color:#1E6685; text-decoration:none; }
a:hover { color:#10465C; text-decoration:underline; }
input, select, textarea { font-family:'Work Sans', sans-serif; font-size:15px; }
input:focus, select:focus, textarea:focus { outline:2px solid #1E6685; outline-offset:1px; }
textarea { resize:vertical; }

/* Défilement doux vers les ancres de la page (nav, CTA « Je m'inscris dès maintenant »).
   Le scroll-margin compense le header sticky, sinon le titre de section finit dessous. */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.sc-btn-primary { border:0; cursor:pointer; background:#1E6685; color:#fff; font-family:'Montserrat',sans-serif; font-weight:600; font-size:14px; padding:13px 26px; border-radius:999px; display:inline-block; text-decoration:none; }
.sc-btn-primary:hover { background:#10465C; color:#fff; text-decoration:none; }

.sc-btn-outline { background:#fff; border:1px solid #D2C1AD; color:#2E2E2E; font-family:'Montserrat',sans-serif; font-weight:600; font-size:14px; padding:14px 26px; border-radius:999px; display:inline-flex; align-items:center; gap:10px; text-decoration:none; cursor:pointer; }
.sc-btn-outline:hover { border-color:#1E6685; color:#1E6685; text-decoration:none; }

.sc-fare-card { transition: border-color .15s; }
.sc-fare-card:hover { border-color:#1E6685; }

.sc-nav-link { color:#2E2E2E; }
.sc-nav-link:hover { color:#1E6685; text-decoration:none; }

/* Rendu des formulaires Symfony (form_row) : on reprend le style des inputs de la maquette.
   Symfony ne place pas l'input DANS le <label> (contrairement à la maquette source),
   donc chaque règle est explicite plutôt que de compter sur l'héritage flex du label. */
.sc-form > div { margin-bottom: 18px; }
.sc-form label {
    display:block; margin-bottom:7px; font-size:13px; font-weight:500; color:#3A3A3A;
    font-family:'Work Sans', sans-serif;
}
.sc-form input[type="text"], .sc-form input[type="email"], .sc-form input[type="tel"],
.sc-form select, .sc-form textarea {
    display:block;
    width:100%;
    box-sizing:border-box;
    padding:12px 12px;
    border:1px solid #DED2C0;
    border-radius:3px;
    font-family:'Work Sans', sans-serif;
    font-size:15px;
    color:#2E2E2E;
    background:#fff;
    line-height:1.4;
    appearance:auto;
    -webkit-appearance:none;
}
.sc-form select {
    -webkit-appearance:none;
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%238A7A66' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 14px center;
    padding-right:36px;
}
.sc-form textarea { min-height: 90px; }
.sc-form textarea::placeholder, .sc-form input::placeholder { color:#A79B87; }
/* Astérisque des champs obligatoires (Symfony pose la classe .required sur le label). */
.sc-form label.required::after { content:'\00a0*'; color:#1E6685; }

/* Présence au cocktail : la phrase et son astérisque tiennent sur une seule
   ligne (la liste reste à droite). Sous le breakpoint mobile, la ligne se
   remet à passer normalement, faute de place. */
.sc-cocktail-row label { white-space: nowrap; font-size: 13.5px; }
.sc-form .form-widget-checkbox { display:flex; gap:14px; align-items:flex-start; }
.sc-form input[type="checkbox"] { margin-top:3px; width:16px; height:16px; accent-color:#1E6685; flex:none; }
.sc-form ul.form-errors { color:#B0453C; font-size:13px; padding-left:0; list-style:none; margin:4px 0 0; }

/* Mobile hamburger - caché par défaut (uniquement affiché sous le breakpoint) */
.sc-nav-toggle {
    display: none;
    border: 0;
    background: none;
    cursor: pointer;
    padding: 6px;
    color: #1E6685;
}
.sc-nav-toggle svg { display: block; }

/* ---------------------------------------------------------------------
   Responsive mobile - le site source (maquette desktop) définit ses
   colonnes en style inline, donc on force leur écrasement ici avec
   !important : un style inline gagne toujours sur une règle de feuille
   de style classique, quelle que soit sa spécificité.
   --------------------------------------------------------------------- */
@media (max-width: 860px) {
    /* Toutes les grilles marquées .sc-grid (édito, programme, lieu,
       tarifs, conditions d'annulation, coopérateur, footer, formulaire) */
    .sc-grid { grid-template-columns: 1fr !important; }

    section, #contact, #edito, #programme, #lieu, #inscription, #cooperateur {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
    #edito, #programme, #lieu, #inscription { padding-top: 52px !important; }

    /* En-tête : la nav desktop devient un menu déroulant sous le logo */
    .sc-nav-toggle { display: inline-flex; }
    .sc-main-nav {
        display: none !important;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        border-bottom: 1px solid #EDE4D8;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0 !important;
        padding: 8px 18px 16px;
    }
    .sc-main-nav.sc-nav-open { display: flex !important; }
    .sc-main-nav a { padding: 10px 0; width: 100%; }

    /* Compte à rebours : les 4 blocs débordent en ligne sur petit écran */
    #cd-days, #cd-hours, #cd-minutes, #cd-seconds { font-size: 30px !important; }
    .sc-countdown-values { gap: 14px !important; flex-wrap: wrap !important; }
    .sc-countdown-values > div { min-width: 60px !important; }

    /* Édito : les intervenants restent l'un sous l'autre comme en version web,
       la colonne fixe de 300px cédant simplement toute la largeur. */
    #edito h2 { font-size: 26px !important; }

    /* Cartes tarifs / avantages coopérateur : déjà gérées par .sc-grid,
       on ajuste juste les titres de section */
    .sc-section h2, #edito h2, #programme h2, #lieu h2, #inscription h2 { font-size: 26px !important; }

    /* Formulaires d'inscription : les grilles à colonnes fixes (170px/200px) passent en 1 colonne */
    .sc-form .sc-grid { gap: 12px !important; }

    /* Cocktail : la phrase reprend sa mise en page normale, au-dessus de la liste */
    .sc-cocktail-row { flex-wrap: wrap !important; }
    .sc-cocktail-row label { white-space: normal; font-size: 14.5px; }
    .sc-cocktail-row select { width: 100% !important; }

    /* CTA / bandeau footer : centrer proprement en colonne */
    footer .sc-grid { text-align: left; }
}