/*
#062696 bleu foncé
#00cddd bleu clair

h1 : GoshiHand 52px
h2 : Montserrat 25px

Fond blanc
h1 : GoshiHand 52px #062696 bleu foncé
h2 : Montserrat 25px #062696 bleu foncé

Fond bleu foncé : #062696
h1 : #ffffff blanc
h2 : #00cddd bleu clair
*/

/******************************************************************************
 * Box model
 ******************************************************************************/
html {
    -webkit-box-taizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
*, *:before, *:after {
    -webkit-box-sizing: inherit;
       -moz-box-sizing: inherit;
            box-sizing: inherit;
}

body {
    background-color: #062696;
    background-image: url('../img/vague.png'), url('../img/fond02-30.jpg');
    background-position: center top, center top;
    background-size: 100% auto, 100% 100vh;
    background-repeat: no-repeat;
    background-attachment: scroll, fixed;
}

body.auth {
    background-color: #062696;
    background-image: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

/******************************************************************************
 * TEXTE
 ******************************************************************************/
h1 {
    color:#062696;
}

h2 {
    color:#062696;

}

h3 {
    color:#062696;
}

strong  {
    color:#062696;
}

.main ul {
    margin:0;
    padding-left:15px;
}
.main ul li {
    text-align:left;
}
.main ul ul li {
    text-align:left;
}

/* Supprimer les marges entre p et ul */
.main p + ul {
    margin-top: 0;
}
.main p:has(+ ul) {
    margin-bottom: 0;
}
.main ul + p {
    margin-top: 0;
}

/* Réduire l'espace des br avant les ul dans la section vols */
.section h4 + br + ul,
.section p + br + ul {
    margin-top: -25px;
}

.main .transports ul {
    list-style: disc;
    padding:0;
    margin-left:20px;
}
.main .transports ul li {
    background-image: none;
    padding-left:0;
}
ul.error-message {
    list-style: none;
    padding:15px;
    margin-left:0;
}
ul.error-message li {
    background-image: none;
    padding-left:0;
}

/******************************************************************************
 * header et footer
 ******************************************************************************/
.header {
    font-size:1.4rem;
    width:1280px;
    max-width:100%;
    margin:0 auto;
}
.header .bandeau {
    position:relative;
    padding:60px 30px 30px 30px;
}
.header .bandeau .logo {
    display: block;
    width:540px;
    margin:0 auto;
}
.header a {
    color:#ffffff;
    text-decoration: none;
    font-weight:normal;
}
.footer {
    width: 1280px;
    background:#00cddd;
    background:#062696;
    color:#ffffff;
    max-width:100%;
    border-radius:10px 10px 0 0;
    margin:0 auto;
    padding:30px;
}
.footer ul {
    list-style:none;
    padding:0;
    margin:0;
}
.footer li {
    display:inline-block;
    padding-right:10px;
}
.footer a {
    display:block;
    line-height:40px;
    color:#ffffff;
    font-weight:normal;
    font-size:1.4rem;
    text-transform: uppercase;
    text-decoration:none;
}
.footer .laforet {
    display:block;
    float:right;
    height:40px;
}


.menu {
    padding:0 30px;
    background: #062696;
    border-radius:0 0 10px 10px;
}
.header ul {
    margin:0;
    padding:0;
    list-style: none;
}
.header li {
    display:inline-block;
    padding:0 5px;
}
.header a {
    display: inline-block;
    line-height:40px;
    padding: 0 0 10px 0;
    color:#ffffff;
    border-top: 10px solid transparent;
}
.header li:first-child {
    margin-left: -5px;
}
.header li.active a {
    border-color: #00cddd;
}

.main {
    width:1280px;
    max-width:100%;
    margin:30px auto;
    background:#fff;
    border-radius:10px;
    padding:0;
    min-height:400px;
    overflow:hidden;
}
.section {
    padding:30px 30px 30px 30px;
}
.section-blue {
    color:#e3f1f6;
    background:#062696;
}
.section-blue h1, .section-blue h2, .section-blue h3 {
    color:#e3f1f6;
}
.section-lightblue {
    background:#00cddd;
}
.section-grey {
    background:#eeeeee;
}
.section-vagues {
    color:#062696;
    background-color:#00cddd;
    background-image:url(../img/vagues-blanches.svg);
    background-size:800px auto;
    background-position: left top;
    background-repeat: repeat;
}
/******************************************************************************
 * CGV H4 titles
 ******************************************************************************/
.section h4 {
    color:#062696;
    font-weight:bold;
    margin-top:20px;
}
/******************************************************************************
 * Yann Jehanno
 ******************************************************************************/
.photo {
    width:70%;
    border-radius:100%;
    border:#eeeeee 5px solid;
}

 /******************************************************************************
 * directeur
 ******************************************************************************/
.directeur {
    float:right;
    padding-right:20px;
}

/******************************************************************************
 * gototop
 ******************************************************************************/
 #gototop {
    background:rgba(0,0,0, 0.6);
    position:fixed;
    bottom:20px;
    right:20px;
    width:42px;
    height:42px;
    border-radius:21px;
    text-align:center;
    line-height:42px;
    color:#fff;
    cursor:pointer;
    display:none;
 }

/******************************************************************************
 * breadcrumb
 ******************************************************************************/
.breadcrumb {
    margin:1rem 0;
    padding:0;
    list-style:none;
}
.breadcrumb li {
    display:inline;
}
.breadcrumb a, .breadcrumb span {
    display:inline-block;
    color:inherit;
    text-decoration:none;
    width:32px;
    height:32px;
    line-height:32px;
    padding-top:2px;
    text-align:center;
}
.breadcrumb a.unlocked {
    background:#ccc;
    border-radius:50%;
}
.breadcrumb a.active {
    background:#062696;
    border-radius:50%;
    color:#ffffff;
}

/******************************************************************************
 * Uploads
 ******************************************************************************/
.uploadContainer {
    position:relative;
}
.uploadButton {
    display:inline-block;
    border-radius:3px;
    padding: 5px 7px;
    text-decoration:none;
    border: 1px solid #999;
    background:#ccc;
    color: #222;
    cursor:pointer;
}
.uploadField {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

/******************************************************************************
 * summary
 ******************************************************************************/

.summary li, .summary li a {
    color:#062696;
}
.summary li:hover, .summary li:hover a {
    color:#333366;
}

/******************************************************************************
 * likes
 ******************************************************************************/
.vote i {
    color : #999;
}
.liked i {
    color:#062696;
}
a.vote i.waiting {
    color: #000;
}


/******************************************************************************
 * forms
 ******************************************************************************/
 form {
    margin-bottom:2rem;
 }
.field-combo {
    display:flex;
}
.field-combo input[type=text] {
    vertical-align:top;
    border:1px solid #ccc;
    padding:5px 10px;
    background-color:#e3f1f6;
    border-radius:3px 0 0 3px;
    border-right:0;
    font-size:1.6rem;
    line-height:2rem;
    width:100%;
}
.field-combo button {
    vertical-align:top;
    border:1px solid #ccc;
    background:#e3f1f6;
    border-left:none;
    padding:5px 7px;
    border-radius:0 3px 3px 0;
    font-size:1.6rem;
    line-height:2rem;
    min-width:30px;
    cursor:pointer;
}
.field {
    padding-bottom:1em;
}
label {
    display:block;
}
input[type=text], input[type=password], select, textarea {
    vertical-align:top;
    border:1px solid #ccc;
    padding:5px 7px;
    background-color:#e3f1f6;
    border-radius:3px;
    font-size:1.6rem;
    line-height:2rem;
    width:100%;
}
input:disabled {
    background-color:#eeeeee;
    color: #999;
}
textarea {
    height:89px;
}
input[type=text].auto, input[type=password].auto, input[type=submit].auto, .button-main.auto, select.auto, textarea.auto {
    width:auto;
}
input[type=text].medium, input[type=password].medium, input[type=submit].medium, .button-main.medium, select.medium, textarea.medium {
    max-width:480px;
}
input[type=text].small, input[type=password].small, input[type=submit].small, .button-main.small, select.small, textarea.small {
    max-width:240px;
}
.button-main.smaller {
    max-width: 150px;
    display:inline;
    padding: 10px 30px;
}

.hint {
    display:block;
    font-style:italic;
}
.error-message {
    border:1px solid #c00;
    background:#fee;
    padding:15px;
    color:#c00;
    list-style: none;
}
.error label {
    color:#c00;
}
.error input, .error select, .error textarea {
    border:1px solid #c00;
    background:#fee;
    color:#c00;
}
.error .hint {
    color:#c00;
}
.error-hint {
    display:block;
    font-style:italic;
    color:#c00;
}

input:focus {
    background:#e0e0e0;
}
input::placeholder {
    color:#a0a0a0;
}

input[type=submit], .button-main, .button-secondary, .button-cancel {
    display:block;
    width:100%;
    border-radius:10px;
    margin-top:1rem;
    padding: 15px 30px 10px 30px;
    text-decoration:none;
    text-align:center;
    cursor:pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
}
input[type=submit], .button-main {
    border: 0px solid #062696;
    background:#062696;
    color: #eee;
}
input[type=submit].button-secondary, .button-secondary {
    border: 1px solid #999;
    background:#ccc;
    color: #222;
}
input[type=submit].button-cancel, .button-cancel {
    border:none;
    background:none;
    color: #222;
    text-decoration: underline;
}

/******************************************************************************
 * Uploads
 ******************************************************************************/
.uploadContainer {
    position:relative;
}
.uploadButton {
    display:inline-block;
    border-radius:3px;
    padding: 5px 7px;
    text-decoration:none;
    border: 1px solid #999;
    background:#ccc;
    color: #222;
    cursor:pointer;
    width:auto !important;
}
.uploadField {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

/******************************************************************************
 * Tables par défaut
 ******************************************************************************/
table.transports td {
    border:none;
    vertical-align:top;
    padding:0;
}
table.transports td:first-child {
    padding:15px 5px 15px 0;
}
.pack-transport {
    background:#eee;
    border:3px solid #eee;
    border-radius: 7px;
    padding:15px;
}
.pack-transport.checked {
    border:3px solid #F29200;
}
.pack-transport label {
    color:#F29200;
}

div.ajoute {
    color: #c00;
    font-style: italic;
    font-size: 1.6rem;
}
div.supprime {
    color: #c00;
    font-style: italic;
    font-size: 1.6rem;
}
td.ajoute {
    color: #c00;
    text-decoration: line-through;
}

/******************************************************************************
 * Tables par défaut
 ******************************************************************************/
table {
    border-collapse: collapse;
    margin-bottom:1rem;
    width:100%;
}
th {
    font-weight:bold;
    text-align:left;
    border-bottom:1px solid #ccc;
    padding:2px 10px;
}
th.options {
    text-align:center;
}
td {
    text-align:left;
    border-bottom:1px solid #ccc;
    padding:2px 10px;
}
td.options {
    text-align:center;
}

th.optionsbis {
    text-align:left;
}
td.optionsbis {
    text-align:left;
    font-weight: normal;
}
/******************************************************************************
 * Stages
 ******************************************************************************/
ul.stages {
    margin:0 0 1rem 0;
    padding:0;
    list-style:none;
}
ul.stages li {
    padding:0;
    display:inline-block;
    margin-right:5px;
    background:none;
}
ul.stages li span {
    display:inline-block;
    padding:3px 10px;
}
ul.stages li a {
    display:inline-block;
    padding:3px 10px;
    line-height:1.6rem;
    text-decoration:none;
    color:inherit;
    font-weight:normal;
    background:#777;
    color:#fff;
    border-radius:13px;
}
ul.stages li.active a {
    background:#204e8e;
    background:#062696;
}


/******************************************************************************
 * Clear Floated Elements
 * http://sonspring.com/journal/clearing-floats
 ******************************************************************************/
.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

/*******************************************************************************
 * http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified
 * slightly enhanced, universal clearfix hack
 *******************************************************************************/
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: ".";
    clear: both;
    height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

/*******************************************************************************
 * lomitko
 *******************************************************************************/
.lomitko {
    background: #eee;
    border: 1px solid transparent #ccc;
    padding: 10px;
}

.lomitko h4 {
    font-weight: bold;
    line-height:2.2rem;
}

.red {
    font-weight: bold;
    color: #f0134d;
}

.thumb {
    padding: 10px;
    margin-bottom:20px;
}

/*******************************************************************************
 * TABLE
 *******************************************************************************/
table.thumb {
    width: 100%;
    vertical-align:top;
    border:1px solid #ccc;
    background:#e3f1f6;
    padding:5px 7px;
    border-radius:0 3px 3px 0;
    font-size:1.6rem;
    line-height:2rem;
    min-width:30px;
    border-collapse: collapse;
}

table.thumb td {
    text-align:left;
    border-bottom:1px solid #ccc;
    vertical-align:middle;
    padding:2px 10px;
}

table.thumb th {
    text-align:left;
    border-bottom:1px solid #ccc;
    padding:2px 10px;
}

table.thumb th:last-child {
    text-align: right;
}

table.thumb td:last-child {
    text-align: right;
}

table.thumb td.head {
    text-align:left;
    font-weight:bold;
    background-color:#ffffff;
}

td.options a {
    margin:0 5px;
    text-decoration:none;
    color:inherit;
}

table.thumb2 {
    width: 50%;
    vertical-align:top;
    border:1px solid #ccc;
    background:#e3f1f6;
    padding:5px 7px;
    border-radius:0 3px 3px 0;
    font-size:1.6rem;
    line-height:2rem;
    min-width:30px;
    border-collapse: collapse;
}

table.thumb2 td {
    text-align:left;
    border-bottom:1px solid #ccc;
    vertical-align:middle;
    padding:2px 10px;
}

table.thumb2 th {
    text-align:left;
    border-bottom:1px solid #ccc;
    padding:2px 10px;
}

table.thumb2 th:last-child {
    text-align: right;
}

table.thumb2 td:last-child {
    text-align: right;
}

table.thumb2 td.head {
    text-align:left;
    font-weight:bold;
    background-color:#ffffff;
}

table.thumb3 {
    width: 50%;
    vertical-align:top;
    border:1px solid #ccc;
    background:#e3f1f6;
    padding:5px 7px;
    border-radius:0 3px 3px 0;
    font-size:1.6rem;
    line-height:2rem;
    min-width:30px;
    border-collapse: collapse;
}

table.thumb3 td {
    text-align:left;
    border-bottom:1px solid #ccc;
    vertical-align:middle;
    padding:5px 10px;
}

table.thumb3 th {
    text-align:left;
    border-bottom:1px solid #ccc;
    padding:5px 10px;
}

table.thumb3 th:last-child {
    text-align: left;
}

table.thumb3 td:last-child {
    text-align: left;
}

table.thumb3 td.head {
    text-align:left;
    font-weight:bold;
    background-color:#ffffff;
}

table.thumb4 {
    width: 100%;
    vertical-align:top;
    border:1px solid #ccc;
    background:#e3f1f6;
    padding:5px 7px;
    border-radius:0 3px 3px 0;
    font-size:1.6rem;
    line-height:2rem;
    min-width:30px;
    border-collapse: collapse;
}

table.thumb4 td {
    text-align:left;
    border-bottom:1px solid #ccc;
    vertical-align:middle;
    padding:2px 10px;
}

table.thumb4 th {
    text-align:left;
    border-bottom:1px solid #ccc;
    padding:2px 10px;
}

table.thumb4 th:last-child {
    text-align:left;
}

table.thumb4 td:last-child {
    text-align:left;
}

table.thumb4 td.head {
    text-align:left;
    font-weight:bold;
    background-color:#ffffff;
}

td.options a {
    margin:0 5px;
    text-decoration:none;
    color:inherit;
}
table.program {
    border-top: 1px solid #ccc;
    border-collapse: collapse;

}
table.program th {
    border-bottom: 1px solid #ccc;
    width:250px;
    text-align:left;
    color:#00cddd;
    font-weight: bold;
    vertical-align:top;
    padding:10px;
}
table.program td {
    border-bottom: 1px solid #ccc;
    width:500px;
    text-align:left;
    padding:10px;
}
/*
div.options a {
    margin:0 5px;
    text-decoration:none;
    color:inherit;
    border: 1px solid #062696;
    background:#062696;
}
*/

a {
    color:#062696;
    font-weight: bold;
}

.summary a {
    color:#062696;
    font-weight: bold;
    text-decoration:none;
}

.illustration {
    width:500px;
}

.blue {
    color:#062696;
}

.yellow {
    color:#e39827;;
}

a.underline {
    text-decoration:underline;
}

div.conseils {
    font-weight:bold;
    padding-left:45px;
}

.daphotos img {
    display:block;
    height:200px;
    float:left;
    margin-right:10px;
    margin-bottom:10px;
}


tr.init td {
    background-color:#fee;
    color:#c00;
}
p.init {
    color:#c00;
}
tr.annulation td {
    background:#eee;
}

/******************************************************************************
 * Authentication Layout
 ******************************************************************************/

/* Mobile: Full width, stacked layout */
.auth-main {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
}

.auth-image {
    width: 100%;
    overflow: hidden;
}

.auth-image img {
    width: 100%;
    height: auto;
    display: block;
}

.auth-content {
    flex: 1;
    background-color: #ffffff;
    padding: 30px;
}

/* Desktop: Side-by-side 50/50 split, centered */
@media (min-width: 768px) {
    .auth-main {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 0;
        max-width: 1200px;
        height: 600px;
        min-height: 0;
        margin: 40px auto;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    }

    .auth-image {
        width: 50%;
        max-width: 600px;
        height: 600px;
    }

    .auth-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .auth-content {
        width: 50%;
        max-width: 600px;
        height: 600px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .auth-content > * {
        width: 100%;
    }
}

/******************************************************************************
 * Tables de prix (CGV)
 ******************************************************************************/
.price-table {
    width: 100%;
    max-width: 700px;
    border-collapse: collapse;
    margin: 30px auto;
    font-size: 15px;
    line-height: 1.6;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.price-table td,
.price-table th {
    border: 1px solid #062696;
    padding: 20px;
    vertical-align: top;
}

.price-table th {
    background-color: #f0f0f0;
    font-weight: bold;
    text-align: left;
}

.price-table .price-details {
    width: 65%;
}

.price-table .price-amount {
    width: 35%;
    text-align: center;
    vertical-align: middle;
}

.price-table .price-title {
    font-weight: bold;
    font-size: 1.1em;
    margin-top: 0;
    margin-bottom: 15px;
    color: #062696;
}

.price-table ul {
    padding-left: 20px;
    margin: 0;
    list-style-type: disc;
}

.price-table ul li {
    margin-bottom: 8px;
    line-height: 1.5;
}

.price-table ul ul {
    margin-top: 8px;
    padding-left: 20px;
}

.price-table ul ul li {
    margin-bottom: 5px;
}

.price-table .price-value {
    font-size: 1.6em;
    font-weight: bold;
    color: #062696;
    display: block;
    margin: 10px 0;
}

.price-table .price-label {
    font-style: italic;
    display: block;
    margin-bottom: 5px;
}

.price-table .price-note {
    font-style: italic;
    font-size: 0.9em;
    color: #666;
    margin-top: 15px;
}

.price-table .price-ttc {
    font-weight: bold;
    margin: 5px 0;
}

/* Table de suppléments */
.price-table .supplement-row td {
    font-weight: bold;
}

@media (max-width: 768px) {
    .price-table {
        font-size: 14px;
    }
    
    .price-table td {
        padding: 15px;
    }
    
    .price-table .price-value {
        font-size: 1.4em;
    }
}