/* =========================================================================
   MOF Lunetiers — feuille de style consolidée
   Remplace : bootstrap 3.3.7 + bootstrap-theme + layout.css + flexslider.css
              + lytebox.css + print.css + les <style> inline.
   Objectif : rendu identique à la version validée, sans dépendance.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Reset / bases (sous-ensemble de Bootstrap 3 « Reboot » réellement utile)
   ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #fff;
    background: #000009;
}

a, a:hover, a:active, a:focus, a:visited { color: #fff; }
a:hover, a:focus { text-decoration: underline; }

img { border: 0; vertical-align: middle; max-width: 100%; }

h1, h2, h3, h4, h5, h6 { font-family: inherit; font-weight: bold; }
h1 { margin: 20px 0 10px; color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 20px; }
h2 { margin: 0; padding: 0 0 20px; font-family: Arial, Helvetica, sans-serif; font-size: 20px; }
h3 { margin: 10px 0; font-size: 1.1em; font-weight: bold; }

p { margin: 0 0 10px; }

button, input, optgroup, select, textarea { margin: 0; font: inherit; color: #000; }
input:focus { outline: none; }

fieldset { margin: 0; padding: 0; border: 0; }

/* -------------------------------------------------------------------------
   2. Grille (portage fidèle de la grille Bootstrap 3 : flottants, 15px)
   ---------------------------------------------------------------------- */
.container { max-width: 980px; margin: 0 auto; padding: 0; }
@media (min-width: 980px) { .container { width: 980px; } }

.row { margin-left: -15px; margin-right: -15px; }
.row::before, .row::after,
.container::before, .container::after { content: " "; display: table; }
.row::after, .container::after { clear: both; }

[class^="col-"], [class*=" col-"] {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

.col-xs-1, .col-xs-4, .col-xs-8, .col-xs-12 { float: left; }
.col-xs-12 { width: 100%; }
.col-xs-8  { width: 66.66666667%; }
.col-xs-4  { width: 33.33333333%; }
.col-xs-1  { width: 8.33333333%; }
.col-xs-offset-2 { margin-left: 16.66666667%; }

@media (min-width: 768px) {
    .col-sm-4, .col-sm-6, .col-sm-8, .col-sm-12 { float: left; }
    .col-sm-12 { width: 100%; }
    .col-sm-8  { width: 66.66666667%; }
    .col-sm-6  { width: 50%; }
    .col-sm-4  { width: 33.33333333%; }
}

@media (min-width: 992px) {
    .col-md-2, .col-md-3, .col-md-5, .col-md-6, .col-md-7, .col-md-9, .col-md-10, .col-md-12 { float: left; }
    .col-md-12 { width: 100%; }
    .col-md-10 { width: 83.33333333%; }
    .col-md-9  { width: 75%; }
    .col-md-7  { width: 58.33333333%; }
    .col-md-6  { width: 50%; }
    .col-md-5  { width: 41.66666667%; }
    .col-md-3  { width: 25%; }
    .col-md-2  { width: 16.66666667%; }
}

/* Utilitaires d'affichage Bootstrap 3 */
.text-center { text-align: center; }
.img-responsive { display: block; max-width: 100%; height: auto; }

@media (max-width: 767px) { .hidden-xs { display: none !important; } }
@media (min-width: 768px) and (max-width: 991px) { .hidden-sm { display: none !important; } }
@media (min-width: 992px) and (max-width: 1199px) { .hidden-md { display: none !important; } }
@media (min-width: 1200px) { .hidden-lg { display: none !important; } }

/* -------------------------------------------------------------------------
   3. Structure de page
   ---------------------------------------------------------------------- */
#all {
    margin: 0 auto;
    padding: 0;
    background-color: #000009;
    box-shadow: 0 0 40px 0 rgba(26, 21, 26, 0.4);
    animation: mof-fade-in .4s ease both;
}
@media (min-width: 992px) { #all { width: 980px; } }
@keyframes mof-fade-in { from { opacity: 0; } to { opacity: 1; } }

#header { margin: 0; position: relative; }
#header h1 { font-size: 1.5em; font-weight: normal; text-transform: uppercase; }

#logo {
    position: relative;
    margin-top: 0;
    font-size: 1em;
    font-weight: bold;
    text-align: center;
    text-transform: none;
    z-index: 0;
}
#logo img { display: block; }

.top-phrase { padding-bottom: 30px; }

#main { margin: 0; padding: 10px; position: relative; }

.contentdescription { padding: 0; overflow: hidden; }
.grey-bg { background-color: #686869; }
.black { color: #000; }

/* -------------------------------------------------------------------------
   4. Slider (remplace flexslider — fondu enchaîné, sans contrôle)
   ---------------------------------------------------------------------- */
.flexslider {
    position: relative;
    width: 100%;
    height: 410px;
    margin: 0 auto;
    overflow: hidden;
    background-color: #3F3F40;
}
.flexslider .slides { position: relative; height: 100%; margin: 0; padding: 0; list-style: none; }
.flexslider .slides > li {
    position: absolute;
    inset: 0;
    height: 410px;
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 0 10px 0 rgb(0, 0, 0);
    opacity: 0;
    transition: opacity .6s ease;
}
.flexslider .slides > li.is-active { opacity: 1; }
/* Repli sans JavaScript : première image visible */
html:not(.js) .flexslider .slides > li:first-child { opacity: 1; }

/* -------------------------------------------------------------------------
   5. Liste des ateliers
   ---------------------------------------------------------------------- */
.ateliers-liste { margin-left: -10px; margin-right: -15px; }
@media (max-width: 980px) { .ateliers-liste { margin-right: 0; } }

.bloc-atelier {
    max-width: 480px;
    min-height: 200px;
    margin: 0 5px 10px 5px;
    padding: 8px;
    background-color: #3f3f40;
    color: #fff;
    text-transform: uppercase;
    vertical-align: top;
}

.atelier-no { padding: 10px; }

@media (min-width: 980px) {
    .vcenter { display: flex; align-items: center; }
}

/* Bouton « Réserver » / « valider » (image) */
input[type="submit"] {
    width: 132px;
    height: 44px;
    border: none;
    background: transparent url('../images/btn-reserver-small.png') no-repeat;
    text-indent: -9999px;
    overflow: hidden;
    cursor: pointer;
}
input[type="submit"]:hover { opacity: .8; }
@media (min-width: 980px) { input[type="submit"] { float: right; } }
.contact-form input[type="submit"] { background-image: url('../images/btn-valider-small.png'); }

/* Ligne d'actions du formulaire d'inscription : « Retour » collé à gauche du bouton image */
.form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}
.form-actions input[type="submit"] { float: none !important; }
.btn-retour {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 20px;
    border: 1px solid #fff;
    border-radius: 4px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 13px;
}
.btn-retour:hover, .btn-retour:focus { background: #fff; color: #000; text-decoration: none; }

/* -------------------------------------------------------------------------
   6. Bloc « Exposition Design Challenge »
   ---------------------------------------------------------------------- */
.expo-prix { color: #ffee00; }
.expo-prix.titre {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 40px;
}

/* -------------------------------------------------------------------------
   7. Pied de page — partenaires
   ---------------------------------------------------------------------- */
.white { background-color: #fff; padding: 2px; }
.white p { color: #000; }
.partner { margin: 10px; }
.no_cadre { text-decoration: none; border: none; color: #fff; }
.partner p img { vertical-align: middle; margin: 2px; }

/* -------------------------------------------------------------------------
   8. Pages inscription / confirmation
   ---------------------------------------------------------------------- */
h2.notice {
    text-align: center;
    color: #fff;
    font-size: 1.6em;
    font-weight: normal;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 4px;
    background-color: #686869;
}

.mof_small { float: left; margin-right: 15px; }
.atelier-inscription { padding-right: 40px; }
.atelier-confirmation { padding: 40px; }

/* -------------------------------------------------------------------------
   8b. Page de confirmation d'inscription — carte claire sur fond sombre
   ---------------------------------------------------------------------- */
.conf-card {
    max-width: 620px;
    margin: 24px auto;
    background: #fff;
    color: #1c1c1e;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 44px rgba(0, 0, 0, .4);
}
.conf-badge {
    padding: 12px 20px;
    background: #d2be4c;
    color: #1c1c1e;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: .6px;
    text-align: center;
    text-transform: uppercase;
}
.conf-body { padding: 26px 22px 30px; }
@media (min-width: 600px) { .conf-body { padding: 34px 40px 38px; } }

.conf-title { margin: 0 0 4px; color: #1c1c1e; font-size: 20px; line-height: 1.3; }
@media (min-width: 600px) { .conf-title { font-size: 23px; } }
.conf-sub { margin: 0 0 20px; color: #777; font-size: 14px; }
.conf-hello { margin: 0 0 22px; color: #1c1c1e; font-size: 16px; font-weight: bold; }

.conf-recap { width: 100%; border-collapse: collapse; border: 1px solid #e6e6e6; border-radius: 10px; }
.conf-recap th,
.conf-recap td { padding: 11px 14px; font-size: 14px; text-align: left; vertical-align: top; border-top: 1px solid #f0f0f0; }
.conf-recap tr:first-child th,
.conf-recap tr:first-child td { border-top: 0; }
.conf-recap th { color: #888; font-weight: normal; width: 42%; }
.conf-recap td { color: #1c1c1e; font-weight: bold; }
@media (min-width: 600px) { .conf-recap th { width: 130px; } }

.conf-warn {
    margin: 16px 0 0;
    padding: 13px 16px;
    background: #fff8e6;
    border: 1px solid #f0dfa8;
    border-radius: 8px;
    color: #7a5b00;
    font-size: 13px;
    line-height: 1.5;
}
.conf-warn strong { color: #7a5b00; }

.conf-note { margin: 18px 0 0; color: #999; font-size: 13px; }

.conf-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.conf-btn {
    flex: 1 1 auto;
    min-width: 150px;
    padding: 13px 20px;
    border: 1px solid #1c1c1e;
    border-radius: 6px;
    background: #1c1c1e;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
/* :link/:visited explicites : la règle globale « a:visited { color:#fff } » est
   plus spécifique qu'une simple classe et rendrait le bouton clair illisible. */
.conf-btn:link, .conf-btn:visited { color: #fff; }
.conf-btn:hover, .conf-btn:focus { background: #000; color: #fff; text-decoration: none; }
.conf-btn-ghost,
.conf-btn-ghost:link,
.conf-btn-ghost:visited { background: #fff; color: #1c1c1e; }
.conf-btn-ghost:hover, .conf-btn-ghost:focus { background: #f0f0f0; color: #1c1c1e; }

.conf-links { max-width: 620px; margin: 0 auto 36px; text-align: center; }
.conf-acuite {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 9px;
    padding: 12px 18px;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
}
.conf-acuite:link, .conf-acuite:visited { color: #fff; }
.conf-acuite-logo { flex: none; width: auto; height: 19px; position: relative; top: 1px; }
.conf-acuite:hover .conf-acuite-logo,
.conf-acuite:focus .conf-acuite-logo { opacity: .85; }
.conf-acuite:hover span,
.conf-acuite:focus span { text-decoration: underline; }
.conf-fb {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    color: #fff;
    font-size: 13px;
    text-decoration: none;
}
.conf-fb:hover, .conf-fb:focus { text-decoration: underline; }

/* Formulaire (portage des classes Bootstrap 3 utilisées) */
.form-group { margin-bottom: 15px; }
.form-horizontal .form-group { margin-left: -15px; margin-right: -15px; }
/* clearfix : les colonnes flottantes doivent réétendre la .form-group */
.form-group::before, .form-group::after { content: " "; display: table; }
.form-group::after { clear: both; }
.control-label { display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: bold; }
@media (min-width: 768px) {
    .form-horizontal .control-label { text-align: right; margin-bottom: 0; padding-top: 7px; }
}
.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.form-control:focus {
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}
form#inscription input[type="text"] { line-height: 21px; border: 1px solid #fff; }
.radio { position: relative; display: block; margin-top: 10px; margin-bottom: 10px; }
.radio label { padding-left: 20px; margin-bottom: 0; font-weight: normal; cursor: pointer; }
.radio input[type="radio"] { position: absolute; margin-left: -20px; margin-top: 4px; }
.radio-inline {
    position: relative;
    display: inline-block;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: normal;
    vertical-align: middle;
    cursor: pointer;
}
.radio-inline + .radio-inline { margin-left: 10px; }
.radio-inline input[type="radio"] { position: absolute; margin-left: -20px; margin-top: 4px; }

/* Champ invalide (validation HTML5 native, remplace validationEngine) */
.form-control:invalid.is-touched,
input:invalid.is-touched { border-color: #ee0101; }
.field-error { display: block; margin-top: 4px; color: #ee0101; font-size: 11px; }

/* -------------------------------------------------------------------------
   9. Modale « Inscriptions terminées » (remplace la modale Bootstrap)
   ---------------------------------------------------------------------- */
dialog.fermeture {
    width: 600px;
    max-width: calc(100% - 20px);
    padding: 0;
    border: none;
    border-radius: 6px;
    background: #333;
    color: #fff;
    box-shadow: 0 27px 24px 0 rgba(0, 0, 0, .2), 0 40px 77px 0 rgba(0, 0, 0, .22);
}
dialog.fermeture::backdrop { background: rgba(0, 0, 0, .5); }
dialog.fermeture .modal-header { position: relative; padding: 24px 24px 0; }
dialog.fermeture .modal-title {
    margin: 10px 0 0;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
    text-transform: uppercase;
    color: #d2be4c;
}
dialog.fermeture .modal-body { padding: 24px; font-size: 20px; }
dialog.fermeture .modal-footer { padding: 0 24px 24px; text-align: right; }
dialog.fermeture .close {
    position: absolute;
    top: 0;
    right: 12px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 21px;
    line-height: 1;
    color: #fff;
    opacity: .45;
    cursor: pointer;
    text-shadow: none;
}
dialog.fermeture .close:hover,
dialog.fermeture .close:focus-visible { color: yellow; opacity: 1; }
dialog.fermeture:focus-visible { outline: none; }

.btn {
    display: inline-block;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
}
.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
    text-shadow: 0 1px 0 #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
}
.btn-default:hover, .btn-default:focus { color: #333; background-color: #e6e6e6; border-color: #adadad; }

/* -------------------------------------------------------------------------
   10. Impression
   ---------------------------------------------------------------------- */
@media print {
    body, #all { background: #fff; color: #000; }
    #all { width: auto; box-shadow: none; }
    .flexslider, dialog.fermeture, input[type="submit"],
    .conf-actions, .conf-fb { display: none !important; }
    a { color: #000; }
    .conf-card { box-shadow: none; border: 1px solid #ccc; margin: 0; }
    .conf-acuite, .conf-acuite:link, .conf-acuite:visited { color: #000; } /* le logo suit (fill: currentColor) */
}