/*!* ==========================================================================*/
/*   CHAMINA VOYAGES - UNIFIED STYLES*/
/*   ========================================================================== *!*/

/*!* Reset & Base Styles*/
/*   ========================================================================== *!*/
/**,*/
/**::before,*/
/**::after {*/
/*    box-sizing: border-box;*/
/*    margin: 0;*/
/*    padding: 0;*/
/*}*/

/*!* CSS Custom Properties (Variables)*/
/*   ========================================================================== *!*/
:root {
    /* Couleurs additionnelles */
    --site__background--lightest: #f8f6f0;
    --site__background--lighter: #FAFAFA;
    --site__border--light: #CCCCCC;
    --site__border--lighter: #e8e8e8;
    --site__border--muted: #6f747e;
    --site__text--popup-title: #e8b96b;
    --site__background--participant-block: #E9E9DF;
    --site__button--hover: #939393;
    --site__button-precedent--hover: #989898;
    --site__text--nav-link: #B33452;
    --site__select--background: #DDDDDDFF;

    /* Typography */
    --font-family-sans: "Inter", sans-serif;
    --font__family--base: 'Roboto', Arial, Verdana, Helvetica, sans-serif;
    --font__family--heading: 'grotesque', sans-serif;
    --font-weight-normal: 400;
    --font-weight-medium: 500;

    /* Spacing */
    --no-spacing: 0rem;
    /* rem spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm-rem: 0.5rem;
    --spacing-md-rem: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl-rem: 2rem;
    --spacing-2xl: 2.5rem;
    --spacing-3xl: 3rem;
    /* em spacing */
    --spacing-sm-em: 0.5em;
    --spacing-md-em: 1em;
    --spacing-xl-em: 2em;

    /* Layout */
    --container-max-width: 90rem;
    --header-height: 80px;
    --border-radius-full: 9999px;
    --border-radius-sm: 4px;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;

    /* Shadows & Effects */
    --shadow-hover: rgba(0, 0, 0, 0.05);
    --shadow-separator: rgba(255, 255, 255, 0.3);

    /* Tailles de police */
    --font__size--base: 1rem; /* équivalent à 16px */
    --font__size--large: 2em; /* titres h1 mobile */
    --font__size--medium: 1.4em; /* utilisé pour #votrevoyage */
    --font__size--xlarge: 2.8em; /* titres h1 desktop */

    /* Espacements */

    /* Rayons */
    --radius__default: 4px;


    /***************************************** VARIABLES FROM FIGMA ***********************************/
    /* Primary colors */
    --color-primary-white: #FFFFFF;
    --color-primary-black: #000000;
    --color-primary-grey-100: #F5F5F5;
    --color-primary-grey-300: #BEBEBE;
    --color-primary-grey-900: #1A1A1A;
    --color-primary-yellow-100: #F9F7D9;
    --color-primary-yellow-400: #EEB649;
    --color-primary-green-100: #EDEDE8;
    --color-primary-green-200: #D2D1C4;
    --color-primary-green-400: #6A663C;
    --color-primary-beige-50: #F8F6F0;
    --color-primary-beige-100: #F7F4EA;
    --color-primary-beige-300: #C9A183;
    --color-primary-pink-400: #FCCAC9;
    --color-primary-orange-400: #C65306;
    --color-primary-blue-400: #B1DCE4;
    --color-primary-blue-500: #387C72;
    --color-primary-blue-600: #237287;
    --color-primary-transparent: transparent;
    /* Warn, validation, errors colors */
    --color-red-300: #FFE0E0;
    --color-red-400: #C21B1B;
    --color-orange-200: #FFF7EF;
    --color-orange-300: #D2853D;
    --color-green-200: #DAECDF;
    --color-green-300: #4DA374;
    /* Text wording */
    --text-xl: 20px;
    --text-lg: 18px;
    --text-basic: 16px;
    --text-sm: 14px;
    --text-xs: 12px;
    --text-xxs: 10px;
    /* Desktop typography */
    --font-size-desktop-h1: 2.2rem;
    --font-size-desktop-h2: 1.6em;
    --font-size-desktop-h3: 1em;
    --font-size-desktop-h4: 36px;
    --font-size-desktop-h5: 24px;
    --font-size-desktop-h6: 30px;
    --font-size-btn-1: 16px;
    --font-size-paragraphe: 16px;
    --font-size-btn-2: 18px;
    --font-size-link-1: 14px;
    --font-size-link-2: 20px;
    /* Mobile typography */
    --font-size-mobile-h1: 2em;
    --font-size-mobile-h2: 1.6em;
    --font-size-mobile-h3: 1em;
    --font-size-mobile-h4: 24px;
    --font-size-mobile-h5: 20px;
    --font-size-mobile-h6: 24px;
    /* WYSIWYG typography */
    --font-size-wysiwyg-h1: 60px;
    --font-size-wysiwyg-h2: 40px;
    --font-size-wysiwyg-h3: 48px;
    --font-size-wysiwyg-h4: 30px;
    --font-size-wysiwyg-h5: 24px;
    --font-size-wysiwyg-h6: 30px;
    /* mobile WYSIWYG typography */
    --font-size-mobile-wysiwyg-h1: 48px;
    --font-size-mobile-wysiwyg-h2: 30px;
    --font-size-mobile-wysiwyg-h3: 36px;
    --font-size-mobile-wysiwyg-h4: 24px;
    --font-size-mobile-wysiwyg-h5: 20px;
    --font-size-mobile-wysiwyg-h6: 24px;
    /* Text decorations */
    --text-decoration-underline: underline;
    --text-no-decoration: none;
    --text-italic: italic;
    --text-uppercase: uppercase;
    /* Font weights */
    --font-weight-regular: 300;
    --font-weight-basic: 400;
    --font-weight-bold: 600;
    /* Font family */
    --font-family-freight-pro: 'freight-text-pro';
    --font-family-stevie-sans: 'stevie-sans';
    --font-family-adobe-caslon-pro: 'adobe-caslon-pro';
    /*  Global size  */
    --font-size-btn: 16px;
    --font-size-link: 14px;
}


/* Classes from figma wireframe */

.btn {
    gap: 10px;
    color: var(--color-primary-black);
    font-family: var(--font-family-stevie-sans), serif;
    text-decoration: var(--text-no-decoration);
    font-size: var(--font-size-btn);
    text-align: center;
    font-weight: var(--font-weight-regular) !important;
}

.btn-outline {
    border: 1px solid var(--color-primary-black);
    background-color: var(--color-primary-transparent);
    border-color: var(--color-primary-black);
    padding: 8px 16px;
    border-radius: 30px;
}

.btn-outline:hover {
    color: var(--color-primary-white);
    background-color: var(--color-primary-black);
}

.btn-outline:disabled {
    border: 1px solid var(--color-primary-grey-300);
    color: var(--color-primary-grey-300);
}

.btn-outline-white {
    color: var(--color-primary-white);
    border: 1px solid var(--color-primary-white);
    background-color: var(--color-primary-transparent);
    border-color: var(--color-primary-white);
    padding: 8px 16px;
    border-radius: 30px;
}

.btn-outline-white:hover {
    border: 1px solid var(--color-primary-black);
    color: var(--color-primary-white);
    background-color: var(--color-primary-black);
}

.btn-outline-white:disabled {
    border: 1px solid var(--color-primary-grey-300);
    color: var(--color-primary-grey-300);
}

.btn-yellow {
    padding: 8px 18px;
    border-radius: 100px;
    background-color: var(--color-primary-yellow-400) !important;
    border: none;
    color: var(--color-primary-black);
}

.btn-yellow2 {
    background-color: var(--color-primary-yellow-100) !important;
}

.btn-yellow:hover {
    color: var(--color-primary-white) !important;
    background-color: var(--color-primary-black) !important;
}

.btn-yellow:disabled {
    background-color: var(--color-primary-grey-300);
    color: var(--color-primary-white);
}

.btn-link-icon {
    color: var(--color-primary-black);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    text-decoration: var(--text-no-decoration);
    font-weight: var(--font-weight-basic);
    font-family: var(--font-family-stevie-sans), serif;
}

.btn-link-icon:disabled {
    color: var(--color-primary-grey-300);
    pointer-events: none;
}

.btn-link-icon:hover .icon {
    background-color: var(--color-primary-black);
    color: var(--color-primary-white);
}

.btn-link-icon .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    top: -0px;
    left: -0px;
    border: 1px solid var(--color-primary-black);
    border-radius: 50%;
    background-color: var(--color-primary-white);
}

.btn-link-icon .text {
    text-decoration: var(--text-decoration-underline);
}

/* Style commun */
.rounded-btn-icon {
    width: 40px; /* taille du bouton */
    height: 40px;
    border-radius: 50%; /* rond */
    font-size: 18px; /* taille de la flèche */
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.rounded-btn-icon-regular {
    width: 40px;
    height: 40px;
}

.rounded-btn-icon-xl {
    width: 64px;
    height: 64px;
    font-size: 3rem;
}

.rounded-btn-icon-outline {
    background-color: var(--color-primary-transparent);
    border: 1px solid;
}

.rounded-btn-icon-outline-black {
    color: var(--color-primary-black);
    border-color: var(--color-primary-black);
}

.rounded-btn-icon-outline-black:hover {
    background-color: var(--color-primary-black);
    color: var(--color-primary-white);
    border-color: var(--color-primary-black);
}

.rounded-btn-icon-outline-black:disabled {
    color: var(--color-primary-grey-300);
    border-color: var(--color-primary-grey-300);
}

.rounded-btn-icon-outline-white {
    color: var(--color-primary-white);
    border-color: var(--color-primary-white);
}

.rounded-btn-icon-outline-white:hover {
    background-color: var(--color-primary-white);
    color: var(--color-primary-black);
    border-color: var(--color-primary-white);
}

.rounded-btn-icon-outline-white:disabled {
    color: var(--color-primary-grey-300);
    border-color: var(--color-primary-grey-300);
}

.rounded-btn-icon-white {
    color: var(--color-primary-black);
    background-color: var(--color-primary-white);
}

.rounded-btn-icon-white:hover {
    color: var(--color-primary-white);
    background-color: var(--color-primary-black);
}

.rounded-btn-icon-white:disabled {
    color: var(--color-primary-grey-300);
}

.alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 100px;
    font-weight: var(--font-weight-basic);
    padding: .5rem .5rem;
    font-family: var(--font-family-stevie-sans), serif;
}

/* Variantes */
.alert--error {
    background: var(--color-red-300);
    color: var(--color-red-400);
}

.alert--warning {
    background: var(--color-orange-200);
    color: var(--color-orange-300);
}

.alert--success {
    background: var(--color-green-200);
    color: var(--color-green-300);
}

/* Texte */
.alert__text {
    flex: 1;
    text-align: center;
}

/* Bouton de fermeture (X) */
.alert__close {
    inline-size: 28px;
    block-size: 28px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: currentColor; /* prend la couleur de l’alerte */
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    transition: transform .15s ease, background .15s ease, opacity .15s;
}

.alert__close:hover {
    background: rgba(0, 0, 0, .06);
}

.alert__close:active {
    transform: scale(.95);
}

/* État désactivé (si besoin) */
.alert[aria-disabled="true"],
.alert.is-disabled {
    opacity: .6;
    pointer-events: none;
}

/* ====================== Select & input (BEM) ====================== */

/* Wrapper + label */
.field {
    margin: 12px 0;
    color: var(--color-primary-black);
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: .2rem;
}

.field__label {
    display: flex;
    flex-direction: row;
    justify-content: start;
    font-size: var(--font-size-mobile-h3);
    line-height: 1;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-primary-green-400);
}

/* Base PILL commune */
.input {
    display: block;
    min-height: 2.5rem !important;
    padding: 0.3em 0.7em 0.3em 0.7em !important;
    border: 1px solid var(--color-primary-green-200) !important; /* gris par défaut */
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--color-primary-black) !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
    box-sizing: border-box !important;
    font-family: var(--font-family-stevie-sans), serif !important;
}

#recapitulatif .input {
    display: block;
}

.bloc_participant input[type="text"],
.bloc_participant input[type="date"],
.bloc_participant select,
#bloc_nom_email input[type="text"],
#bloc_nom_email select,
#bloc_add input[type="text"],
#bloc_add select {
    width: 100%;
}

/* Focus = bord noir (pas de saut de layout) */
.input:focus,
.input:focus-visible {
    outline: 0;
    border-color: var(--color-primary-black);
    box-shadow: 0 0 0 1px var(--color-primary-black);
}

/* Disabled */
.input:disabled {
    cursor: not-allowed;
    border-color: var(--color-primary-grey-100);
    background: var(--color-primary-grey-100) !important;
    color: var(--color-primary-green-200) !important;
    box-shadow: none !important;
}

/* couleur du placeholder (quand le champ est vide) */
.input::placeholder {
    color: var(--color-primary-green-200); /* choisis ta couleur */
    opacity: 1; /* utile pour Firefox qui baisse l’opacité par défaut */
}

/* ===== SELECT ===== */
.input--select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 16px 16px !important;
    /* chevron bas par défaut (noir) */
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\
</svg>") !important;
    padding: 0 2.5rem 0 20px !important;
    color: var(--color-primary-black);
}

/* focus = chevron haut (noir) */
.input--select:focus {
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path d='M6 15l6-6 6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\
</svg>") !important;
}

/* Placeholder “Choisir” voulu noir */
.input--select:invalid {
    color: var(--color-primary-black);
}

/* Options = largeur du select + même typo (desktop) */
.input--select option {
    min-width: 100%;
    box-sizing: border-box;
    font: inherit;
    color: var(--color-primary-black);
}

/* quand le placeholder est sélectionné → vert */
@supports selector(:has(*)) {
    select.input.input--select:has(option:checked[value="0"]),
    select.input.input--select:has(option:checked[value="null"]),
    select.input.input--select:has(option:checked[value=""]),
    select.input.input--select:has(option:checked[value="reset"]) {
        color: var(--color-primary-green-200) !important;
    }

    select#sactransporte.input.input--select:has(option:checked[value="null"]) {
        color: var(--color-primary-green-200) !important;
    }

    select#sactransporte.input.input--select:has(option:checked[value="0"]) {
        color: var(--color-primary-black) !important;
    }
}

/* ===== DATE ===== */
/* défaut : vert (vide / invalide) */
.input--date {
    appearance: none;
    -webkit-appearance: none;
    color: var(--color-primary-green-200) !important;
}

/* Quand la date est VALIDE (remplie et >= min et <= max) → noir */
.input--date:valid {
    color: var(--color-primary-black) !important;
}

/* WebKit : colorer le “texte” interne */
.input--date::-webkit-datetime-edit,
.input--date::-webkit-datetime-edit-fields-wrapper {
    color: var(--color-primary-green-200) !important;
}

.input--date:valid::-webkit-datetime-edit,
.input--date:valid::-webkit-datetime-edit-fields-wrapper {
    color: var(--color-primary-black) !important;
}

/* Optionnel : au focus, garde le vert si invalide */
.input--date:focus:invalid::-webkit-datetime-edit,
.input--date:focus:invalid::-webkit-datetime-edit-fields-wrapper {
    color: var(--color-primary-green-200) !important;
}

/* Firefox n’a pas les sous-éléments WebKit : ceci suffit */
.input--date:valid {
    color: var(--color-primary-black) !important;
}

.input--date::-webkit-datetime-edit-year-field,
.input--date::-webkit-datetime-edit-month-field,
.input--date::-webkit-datetime-edit-day-field {
    padding: 0 2px;
}

.option-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

/* ===== TEXTAREA ===== */
.input--textarea {
    border-radius: 0 !important;
    /* hérite de .input */
    display: block; /* s'assure d'un flux bloc */
    width: 100%;
    min-height: 6rem; /* hauteur de départ confortable */
    line-height: 1.4;
    padding: .6em .9em; /* un peu plus d'aisance que les inputs */
    resize: vertical; /* redimensionnement vertical uniquement */
    overflow: auto; /* scroll si contenu long */
    white-space: pre-wrap; /* garde les retours à la ligne */
    -webkit-font-smoothing: antialiased;
}

#recapitulatif .input--textarea {
    display: block;
    min-height: 6rem !important;
}

/* Placeholder (option) */
.input--textarea::placeholder {
    color: var(--color-primary-black);
    opacity: .45; /* lisible sans dominer */
}

/* Disabled (hérite de .input:disabled, on ajuste juste le curseur texte) */
.input--textarea:disabled {
    cursor: not-allowed;
}

/* État erreur (option) */
.input--textarea[aria-invalid="true"],
.input--textarea.input--error {
    border-color: var(--color-feedback-error, #d92d20);
    box-shadow: 0 0 0 1px var(--color-feedback-error, #d92d20);
}

/* Variante sans redimensionnement (option) */
.input--textarea--noresize {
    resize: none;
}

/* Limite visuelle quand très long (option) */
.input--textarea--maxed {
    max-height: 16rem;
}

/* Accessoire : compteur (option) */
.textarea-counter {
    margin-top: .25rem;
    font-size: .875rem;
    line-height: 1;
    color: var(--color-primary-grey-600, #6b7280);
    text-align: right;
}

/* ===================== Checkbox & Radio (BEM) ===================== */

/* Reset rapide */
.control {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font: 400 16px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--color-primary-black);
    cursor: pointer;
    user-select: none;
}

/* Input natif masqué visuellement (accessible) */
.control__input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
    white-space: nowrap;
    border: 0;
}

/* Boîte personnalisée */
.control__box {
    inline-size: 18px;
    block-size: 18px;
    display: inline-block;
    box-sizing: border-box;
    position: relative;
    flex: 0 0 18px;
    background: var(--color-primary-white);
    border: 1px solid var(--color-primary-black);
    border-radius: 4px; /* carré pour checkbox */
}

/* Radio ⇒ rond */
.control--radio .control__box {
    border-radius: 50%;
}

/* Survol (léger) */
.control:hover .control__box {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary-black) 10%, transparent);
}

/* Focus clavier visible */
.control__input:focus-visible + .control__box {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-black) 18%, transparent);
}

/* ===================== États sélectionnés ===================== */
/* Checkbox : petit carré jaune centré */
.control--checkbox .control__box::after {
    font-family: var(--font-family-stevie-sans), serif;
    content: "";
    position: absolute;
    inset: 4px; /* marge interne */
    border-radius: 3px;
    background: var(--color-primary-yellow-400);
    transform: scale(0);
    transform-origin: center;
    transition: transform .12s ease-out;
}

.control--checkbox .control__input:checked + .control__box::after {
    transform: scale(1);
}

/* Radio : pastille jaune centrée */
.control--radio .control__box::after {
    font-family: var(--font-family-stevie-sans), serif;
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--color-primary-yellow-400);
    transform: scale(0);
    transform-origin: center;
    transition: transform .12s ease-out;
}

.control--radio .control__input:checked + .control__box::after {
    transform: scale(1);
}

/* ===================== Disabled ===================== */
.control__input:disabled + .control__box {
    border-color: var(--color-primary-grey-300);
    background: color-mix(in srgb, var(--color-primary-grey-300) 20%, var(--color-primary-white));
    box-shadow: none;
}

.control__input:disabled + .control__box::after {
    opacity: .5; /* atténue le carré/rond jaune si coché */
}

.control__input:disabled ~ .control__label {
    color: var(--color-primary-grey-300);
    cursor: not-allowed;
}

/* ===================== Checkbox & Radio (BEM) (Adapt to black case code) ===================== */

/* Container */
.respdosok {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--color-primary-black);
    cursor: pointer;
    user-select: none;
}

/* Cache accessible de l'input */
.respdosok input[type="checkbox"] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
    white-space: nowrap;
    border: 0;
}

/* Boîte de la checkbox */
.respdosok::before {
    content: "";
    inline-size: 18px;
    block-size: 18px;
    flex: 0 0 18px;
    box-sizing: border-box;
    display: inline-block;

    /* style de la boîte */
    background: var(--color-primary-white);
    border: 1px solid var(--color-primary-black);
    border-radius: 4px;

    /* prépare l’“insert” jaune : le padding crée une marge interne,
       et background-clip garde le jaune à l’intérieur */
    padding: 4px;
    background-clip: content-box;
    /* par défaut, pas de jaune */
    --check-bg: transparent;

    /* applique la couleur interne (carré 10x10) */
    background-image: linear-gradient(var(--check-bg), var(--check-bg));
    transition: box-shadow .12s ease-out, background-color .12s ease-out, background-image .12s ease-out;
}

/* Survol léger */
.respdosok:hover::before {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary-black) 10%, transparent);
}

/* Focus clavier : halo sur la boîte */
.respdosok:has(input[type="checkbox"]:focus-visible)::before {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-black) 18%, transparent);
}

/* État coché : on remplit l’intérieur en jaune */
.respdosok:has(input[type="checkbox"]:checked)::before {
    --check-bg: var(--color-primary-yellow-400);
}

/* Container */
label:has(input[type="checkbox"]) {
    display: inline-flex;
    align-items: flex-start; /* le texte long s’aligne bien */
    gap: .5rem;
    color: var(--color-primary-black);
    cursor: pointer;
    user-select: none;
    position: relative;
}

/* Input natif masqué visuellement */
label:has(input[type="checkbox"]) input[type="checkbox"] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
    white-space: nowrap;
    border: 0;
}

/* Boîte visuelle de la checkbox */
label:has(input[type="checkbox"])::before {
    content: "";
    inline-size: 18px;
    block-size: 18px;
    flex: 0 0 18px;
    display: inline-block;
    box-sizing: border-box;

    background: var(--color-primary-white);
    border: 1px solid var(--color-primary-black);
    border-radius: 4px;
    padding: 4px;
    background-clip: content-box;

    /* carré interne géré via variable */
    --check-bg: transparent;
    background-image: linear-gradient(var(--check-bg), var(--check-bg));

    transition: box-shadow .12s ease-out, background-image .12s ease-out;
}

/* Survol */
label:has(input[type="checkbox"]):hover::before {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary-black) 10%, transparent);
}

/* Focus clavier */
label:has(input[type="checkbox"]):has(input[type="checkbox"]:focus-visible)::before {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-black) 18%, transparent);
}

/* État coché : remplissage jaune */
label:has(input[type="checkbox"]):has(input[type="checkbox"]:checked)::before {
    --check-bg: var(--color-primary-yellow-400);
}

/* Container (label, h3, etc.) qui contient un input radio */
.checkbox-container:has(input[type="radio"]) {
    align-items: center;
    gap: .5rem;
    color: var(--color-primary-black);
    cursor: pointer;
    user-select: none;
    position: relative;
    display: flex;
}

/* Input natif masqué visuellement (accessible) */
.checkbox-container:has(input[type="radio"]) input[type="radio"] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
    white-space: nowrap;
    border: 0;
}

/* Cercle externe du radio (dessiné sur le container) */
.checkbox-container:has(input[type="radio"])::before {
    content: "";
    inline-size: 18px;
    block-size: 18px;
    flex: 0 0 18px;
    display: inline-block;
    box-sizing: border-box;

    background: var(--color-primary-white);
    border: 1px solid var(--color-primary-black);
    border-radius: 50%; /* radio = rond */

    /* Pastille interne (contrôlée par variable) */
    --dot-bg: transparent;
    background-image: radial-gradient(circle at center, var(--dot-bg) 60%, transparent 61%);
    transition: box-shadow .12s ease-out, background-image .12s ease-out;
    margin-right: 1rem;
}

/* Survol */
.checkbox-container:has(input[type="radio"]):hover::before {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary-black) 10%, transparent);
}

/* Focus clavier → halo sur le cercle */
.checkbox-container:has(input[type="radio"]:focus-visible)::before {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-black) 18%, transparent);
}

/* Radio sélectionné → pastille jaune */
.checkbox-container:has(input[type="radio"]:checked)::before {
    --dot-bg: var(--color-primary-yellow-400);
    margin-right: 1rem;
}

/* (Optionnel) Logos moyens si présents dans le titre/label */
.checkbox-container .cb {
    height: 20px;
    width: auto;
    vertical-align: middle;
    margin-left: .25rem;
}


/* ========================================== Global =========================================== */

.dynamic-width {
    width: var(--dynamic-width, auto) !important;
}

.w-full {
    width: 100% !important;
}

.divider {
    border-top: 1px solid var(--color-primary-grey-300);
    margin: .5em 0;
}

h1 {
    font-family: var(--font-family-freight-pro), serif !important;
    font-size: var(--font-size-mobile-h1);
    font-weight: var(--font-weight-basic);
    line-height: 1.5em;
    letter-spacing: 0;
    color: var(--color-primary-black);
    text-transform: none !important;
    text-align: left;
}

h2 {
    font-family: var(--font-family-stevie-sans), serif !important;
    font-size: var(--font-size-mobile-h2);
    font-weight: var(--font-weight-bold);
    line-height: 36px;
    letter-spacing: 0;
}

h3 {
    font-family: var(--font-family-freight-pro), serif !important;
    font-size: var(--font-size-mobile-h3);
    font-weight: var(--font-weight-bold);
    line-height: 30px;
    letter-spacing: 0;
}

#contenu_devis h3 {
    margin-left: 1rem;
}

h4 {
    font-family: var(--font-family-stevie-sans), serif !important;
    font-size: var(--font-size-mobile-h4);
    font-weight: var(--font-weight-bold);
    line-height: 24px;
    letter-spacing: 0;
}

h5 {
    font-family: var(--font-family-stevie-sans), serif !important;
    font-size: var(--font-size-mobile-h5);
    font-weight: var(--font-weight-bold);
    line-height: 28px;
    letter-spacing: 0;
}

h6 {
    font-family: var(--font-family-freight-pro), serif !important;
    font-size: var(--font-size-mobile-h6);
    font-weight: var(--font-weight-basic);
    line-height: 24px;
    letter-spacing: 0;
}

span, p {
    font-family: var(--font-family-adobe-caslon-pro), serif !important;
    font-size: var(--font-size-paragraphe);
}

span, p, div {
    font-weight: var(--font-weight-regular);
}

#centersubmit {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
}

#contenu_devis_bouton {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
}

#recapitulatif #contenu_devis {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    max-width: none;
    margin-left: 0;
    width: 100%;
}

/* =================================== arianne BI =================================== */

#ariane_BI {
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 96%;
    margin-bottom: 1rem;
}


#ariane_BI div {
    display: inline-block;
    background-color: var(--color-primary-green-200);
    font-size: 0.9rem;
    color: var(--color-primary-black);
    /*width: 32.1428571%;*/
    width: 100%;
    /*text-align: right;*/
    text-align: center;

    font-family: var(--font-family-stevie-sans), sans-serif;
    font-weight: var(--font-weight-basic);
    box-sizing: border-box;
    padding-right: 1.7057143%;
    height: 34px;
    line-height: 34px;
    text-transform: uppercase;
    border-radius: 40px;
}

#ariane_BI div.clactive {
    background-color: var(--color-primary-green-400);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-white);
}

#ariane_BI div.clactive span {
    font-weight: var(--font-weight-bold);
}

#ariane_BI div:not(.clactive) {
    display: none;
}

#ariane_BI div a {
    text-decoration: none;
    color: var(--color-primary-black);
}

#ariane_BI span {
    padding-right: 9px;
    font-family: var(--font-family-stevie-sans), serif;
}

#ariane_BI div.clcliquable {
    text-decoration: none;
    margin-left: 0;
}

#ariane_BI div.clvalide {
    background-color: var(--color-primary-green-200);
}

#container #recapitulatif .libelle {
    font-family: var(--font-family-stevie-sans), serif !important;
    font-weight: var(--font-weight-medium);
}

/* Accessibility
   ========================================================================== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.hidden {
    display: none;
}

.libelle_option .myoption i,
.libelle_frais i,
#affiche_assurance h3,
#affiche_assurance p,
.labelpaiement h3,
.warning span,
.detailinscription span,
#formID i {
    font-family: var(--font-family-stevie-sans), serif !important;
}

/* Logo Component (BEM)
   ========================================================================== */

.logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.logo__brand {
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.025em;
    color: inherit;
}

.logo__subtitle {
    font-size: 12px;
    letter-spacing: 0.2em;
    font-family: var(--font-family-sans), sans-serif;
    margin-left: 4px;
    color: inherit;
}

@media (min-width: 768px) {
    .logo__brand {
        font-size: 30px;
    }

    .logo__subtitle {
        font-size: 14px;
    }
}

/* Header Component (BEM)
   ========================================================================== */

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    background-color: var(--color-primary-beige-50);
    padding: 0;
}

.header > .container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 var(--spacing-md-rem); /* même padding qu’avant */
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 100%
}

@media (min-width: 768px) {
    .header {
        padding: 0 var(--spacing-xl-rem);
    }

    .header > .container {
        padding: 0 var(--spacing-xl-rem); /* même padding desktop qu’avant */
    }

    .header__nav {
        display: flex;
    }

    /* inchangé */
    .mobile-menu {
        display: none;
    }
}

.header__logo {
    color: var(--color-primary-black);
}

.header__nav {
    display: none;
    align-items: center;
    gap: var(--spacing-md-rem);
}

@media (min-width: 768px) {
    .header__nav {
        display: flex;
    }
}

/* Mobile Menu Component (BEM)
   ========================================================================== */

.mobile-menu {
    display: block;
}

@media (min-width: 768px) {
    .mobile-menu {
        display: none;
    }
}

.mobile-menu__trigger {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
}

.mobile-menu__trigger:hover {
    background-color: var(--shadow-hover);
}

.mobile-menu__trigger svg {
    width: 24px;
    height: 24px;
}

.mobile-menu__overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--color-primary-beige-50);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0s ease;
}

.mobile-menu__overlay--open {
    transform: translateX(0);
}

.mobile-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    padding: 0 var(--spacing-md-rem);
    background-color: var(--color-primary-beige-50);
    border-bottom: 1px solid #e0e0e0;
}

.mobile-menu__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md-rem);
    padding: var(--spacing-lg);
    flex-grow: 1;
}

.mobile-menu__footer {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md-rem);
    padding: var(--spacing-lg);
}

.mobile-menu__link {
    width: 100%;
    text-align: center;
    padding: 0;
    font-size: 16px;
    text-decoration: none;
    color: var(--color-primary-black);
}

/* Footer Component (BEM)
   ========================================================================== */

.footer {
    background-color: var(--color-primary-green-400) !important;
    color: var(--color-primary-white);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: var(--spacing-md-rem);
    font-family: var(--font-family-sans), sans-serif;
}

.footer__main {
    background-color: var(--color-primary-green-400) !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    width: 100%;
}

.footer__section {
    background-color: var(--color-primary-green-400) !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 100%;
}

.footer__logo {
    color: var(--color-primary-white);
    margin-top: var(--spacing-2xl)
}

.footer__cta {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm-rem);
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    white-space: nowrap;
}

.footer__cta a {
    text-decoration: none !important;
}

/* Social Media Component (BEM)
   ========================================================================== */

.social {
    display: flex;
    flex-direction: column;
    justify-content: end;
    margin-top: 15px;
}

.social__heading {
    font-size: 18px;
    margin-top: 15px;
    margin-bottom: 10px;
    color: var(--color-primary-white);
    white-space: nowrap;
    font-weight: var(--font-weight-normal);
}

.social__icons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.social__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius-full);
    background-color: var(--color-primary-white);
    color: var(--color-primary-green-400);
    transition: background-color var(--transition-fast), color var(--transition-fast);
    text-decoration: none;
}

.social__icon:hover {
    background-color: var(--color-primary-black);
    color: var(--color-primary-white);
}

.social__icon svg {
    width: 20px;
    height: 20px;
}

/* Social icon variants for different SVG types */

.social__icon svg.fill-only path {
    fill: var(--color-primary-green-400);
    stroke: none;
    transition: fill var(--transition-fast);
}

.social__icon:hover svg.fill-only path {
    fill: var(--color-primary-white);
}

.social__icon svg.stroke-only path {
    stroke: var(--color-primary-green-400);
    fill: none;
    transition: stroke var(--transition-fast);
}

.social__icon:hover svg.stroke-only path {
    stroke: var(--color-primary-white);
}

.social__icon svg.fill-stroke path {
    fill: var(--color-primary-green-400);
    stroke: var(--color-primary-green-400);
    transition: fill var(--transition-fast), stroke var(--transition-fast);
}

.social__icon:hover svg.fill-stroke path {
    fill: var(--color-primary-white);
    stroke: var(--color-primary-white);
}

/* Navigation Component (BEM)
   ========================================================================== */

.nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.nav__link {
    color: var(--color-primary-white);
    text-decoration: none;
    transition: text-decoration var(--transition-fast);
}

.nav__link:hover {
    text-decoration: underline;
}

/* Payment Icons Component (BEM)
   ========================================================================== */

.payment {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.payment__icon {
    height: 25px;
    width: auto;
}

/* Footer Bottom Component (BEM)
   ========================================================================== */

.footer__separator {
    border: none;
    border-top: 1px solid var(--shadow-separator);
    width: 90%;
    max-width: 1000px;
    margin: 40px auto;
}

.footer__bottom {
    background-color: var(--color-primary-green-400) !important;
    width: 100%;
    margin-inline: auto;
    color: var(--color-primary-white) !important;
    padding: 0;
}

.footer__bottom .container {
    padding-bottom: 0 !important;
}

.footer__legal {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    list-style: none;
    padding: calc(var(--spacing-xs) * 9);
    column-gap: calc(var(--spacing-xs) * 10);
    row-gap: calc(var(--spacing-xs) * 2);
    margin: 0;
    font-size: var(--font-size-link-1) !important;
    font-family: var(--font-family-stevie-sans), sans-serif !important;
}

.footer__legal li a {
    color: var(--color-primary-white);
    text-decoration: none;
}

.footer__legal li a:hover {
    text-decoration: underline;
}

.footer__copyright {
    color: var(--color-primary-white);
    font-size: var(--font-size-link-1) !important;
    font-family: var(--font-family-stevie-sans), sans-serif !important;
}

#copyright-year {
    font-size: var(--font-size-link-1) !important;
    font-family: var(--font-family-stevie-sans), sans-serif !important;
}

.footer__section--links {
    margin-top: 2rem;
}

/* Desktop Responsive Styles
   ========================================================================== */
@media (min-width: 768px) {
    .footer__cta {
        flex-direction: row;
        margin-top: 0;
    }

    .footer__main {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        margin: 0;
        align-items: unset;
        margin-inline: auto;
        padding: 3rem 6rem;
        padding-bottom: 0;
    }

    .footer__section--logo {
        flex-basis: 35%;
        align-items: flex-start;
        max-width: fit-content;
        row-gap: calc(var(--spacing-xs) * 12);
    }

    .footer__section--links {
        max-width: 300px;
        align-items: flex-start;
        justify-content: space-between;
        width: fit-content;
        margin-top: 0;
    }

    .footer__bottom {
        padding: 0 6rem;
    }

    .payment {
        justify-content: flex-start;
        margin-top: 0;
    }

    .footer__logo {
        margin-top: var(--no-spacing);
    }

    .footer__logo,
    .social__icons,
    .nav {
        align-items: flex-start;
        justify-content: flex-start;
        gap: calc(var(--spacing-xs) * 4);
    }

    .footer__legal {
        flex-direction: row !important;
        justify-content: center;
        border-top: 1px solid var(--color-primary-white);
    }

    .social {
        margin-top: 0;
    }

    .social__container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        gap: 1.5rem;
    }

    .social__heading {
        font-size: 1.875rem;
        margin: 0;
        line-height: 1.3;
        max-width: 250px;
        text-align: start;
    }

    .social__icons {
        display: flex;
        gap: 10px;
    }

    .footer__main > .container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: unset;
        gap: 3rem;
        width: 100%;
    }
}

/* Utility Classes
   ========================================================================== */

.container {
    max-width: 1300px !important;
    margin: 0 auto !important;
    padding: var(--spacing-xl-rem) !important;
}

/* Module BI liberté
   ========================================================================== */

html, body {
    background-color: var(--color-primary-white);
    height: 100%;
}

#centerwebsite {
    width: 100%;
    position: relative;
    background-color: var(--color-primary-black);
    height: auto;
}

#TopBar {
    position: relative;
    margin: auto;
    padding: auto;
    width: 50%;
    z-index: 300;
    height: auto;
}

#centerwebsite img {
    width: 100%;
    height: auto;
    max-width: 180px;
}


#container {
    width: 100%;
    font-size: 0.625em;
    font-family: var(--font-family-stevie-sans), sans-serif;
    background-color: var(--color-primary-white) !important;
    text-align: justify;
    margin: auto;
    font-weight: 500;
    box-sizing: border-box;
    padding: 3%;
}

#container select {
    box-sizing: border-box;
    font-size: 1.05em;
}

#container #ch1 #codeproduit {
    font-size: 1.4em;
    width: 96%;
    margin: 0;
    display: block;
    margin-left: 2%;
    margin-bottom: 1em;
    text-align: left;
    text-transform: uppercase;

}

#container #ch1 #codeproduit a {
    color: var(--color-primary-yellow-400);
}

#container #ch1 h1 span {
    display: block;
    width: 100%;
    font-size: 0.85em;
    font-weight: normal;
    color: var(--color-primary-black);
    font-family: var(--font-family-stevie-sans), 'serif' !important;
}

#votrevoyage {
    position: relative;
    width: 96%;
    display: block;
    margin: auto;
    padding: auto;
    font-size: var(--font__size--medium);
    padding: 1em;
    box-sizing: border-box;
    margin-bottom: 1em;
    background-color: var(--color-primary-beige-50);
    min-height: 200px;
    border-radius: 20px;
}

.reinitialize {
    display: none;
    box-sizing: border-box;
}

#votrevoyage h2 {
    font-size: 1.6em;
    margin-top: 0;
    color: var(--color-primary-black);
    font-weight: normal;
    font-family: var(--font__family--heading), sans-serif;
}

#contenu_devis {
    display: block;
    margin: auto;
    padding: auto;
    font-size: 1.5em;
    width: 96%;
    position: relative;
    box-sizing: border-box;
    margin-bottom: 2em;
    color: var(--color-primary-black);
}

div.reinitialise {
    width: 100%;
    padding: 2.5em 0 0em 0;
    text-align: center;
}

div.reinitialise a {
    color: var(--color-primary-grey-300);
    font-style: italic;
}

div.reinitialise a:hover {
    color: var(--color-primary-black);
    font-style: italic;
}


.paragraphe {
    margin: 1.666667%;
}

.paragraphe ul li b {
    font-family: var(--font__family--heading), sans-serif;
    font-weight: 500;
}

.information, .warning, .error, .labelpaiement {
    width: 96.666666%;
    padding: 0.6em;
    box-sizing: border-box;
    padding: auto;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    margin: 1.666667% 0;
    border-radius: var(--radius__default);
    line-height: 1.5em;
    background-color: var(--color-primary-white);
    border: 1px solid var(--color-primary-green-200);
    box-shadow: 1px 1px 5px var(--color-primary-green-200);
}


.labelpaiement .cb {
    width: 35px;
    height: auto;
    padding-left: 5px;
    margin-bottom: -4px;
}


#reglement_par_cache, #reglement_par_cache2, #reglement_par_cache3 {
    display: none;
}

.labelpaiement label {
    display: block;
    width: 100%;
    margin: 0.5em;
    color: var(--color-primary-black);
    padding-right: 0.5em;
    box-sizing: border-box;
}

.specialgris {

    background-color: #f6f7f4;
}

.labelpaiement h3, .masuite h3 {
    text-transform: uppercase;
    color: var(--color-primary-black);
    font-family: var(--font__family--heading), sans-serif;
    font-weight: normal;
}

.information span, .warning span {
    font-weight: bold;
    font-size: 1em;
}

.information span {
    color: var(--color-primary-black);
}

.information_white {
    color: var(--color-primary-black);
}


.information2 {
    width: 96.666666%;
    padding: 0.6em;
    box-sizing: border-box;
    padding: auto;
    line-height: 1.5em;
}

.information2 {
    color: var(--color-primary-black);
    font-size: 1.1em;

}

.information2 span {
    font-weight: bold;
}


.information {
    color: var(--color-primary-black);

}

.warning span {
    color: var(--color-primary-orange-400);
}

.warning {
    color: var(--color-orange-300);
}

.error span {
    color: var(--color-red-400);
    font-weight: bold;
}

.error {
    color: var(--color-red-400);
    text-align: left;
}

#forfait_sous_total .error span {
    font-size: 1.5em;
}

#frais_inscription, #total, #forfait_sous_total, #mon_assurance, #ma_chambre_single, #mes_options, #nuit_supp, #mon_portecarte, #mon_bento, #mon_chronopost, #mon_cgos_chamina {
    margin: 0.5em 0 0.5em 0;
    width: 94.59%;
    text-align: right;
    box-sizing: border-box;
    display: block;
    font-weight: var(--font-weight-bold) !important;
    margin: 0.5em 2.7027027% 2.7027027% 2.7027027%;
    padding-top: 0.5em;
    color: var(--color-primary-black);
    font-size: 1.2rem;
}


div.numtel a {
    text-decoration: none;
    color: var(--color-primary-white);
    display: block;
    text-align: center;
    margin: auto;
    padding: auto;
    border-radius: var(--radius__default);
    width: 80%;
    height: 40px;
    line-height: 40px;
    font-size: 1.2em;
    margin-top: 1em;
    box-sizing: border-box;
    background-color: var(--color-primary-yellow-400);
    border: 1px solid var(--color-primary-yellow-400);
    background-image: url("/inscription-voyages/phone.png");
    background-repeat: no-repeat;
    background-position: 2em;
    padding-left: 1em;
}

div.numtel a:hover {
    background-color: var(--color-primary-blue-500);
    border: 1px solid var(--color-primary-blue-500);
}


div.numtel span {
    display: block;
    width: 100%;
    font-size: 0.9em;
    text-align: center;
    color: grey;
    margin-top: 0.5em;
    margin-bottom: 1.5em;
}

#contenu_devis #changedateforfait {
    cursor: pointer;
}

#mon_portecarte {
    border-top: 0;
}

div.alignright a.assurance {
    font-size: 1em;
}

#mon_assurance {
    font-weight: normal;
}

span.ttc {
    font-weight: normal;
    font-size: 0.7em;
}

#forfait_sous_total .warning {
    font-size: 0.6em;
    text-align: left;
    background-color: white;
}


#divfor1, #divfor2, #divfor3, #divfor4, #divfor5, #divfor6, #divfor7, #divfor8, #divtotal {
    margin-top: 0px;
    border: 0;
    width: 100%;
    box-sizing: border-box;
    display: block;
    color: var(--color-primary-black);
    background-color: var(--color-primary-beige-50);
    margin-bottom: 2em;
    padding-bottom: 0.5em;
    border-radius: 20px;
}

#divfor2 i {
    width: 100%;
    display: block;
    padding-left: 2.7027027%;
    padding-right: 2.7027027%;
    box-sizing: border-box;
}

.ensavoirplus {
    font-size: 1rem;
    padding-top: 0.3em;
    padding-bottom: 1.2em;
    color: var(--color-primary-blue-600);
    font-weight: normal;
}

.ensavoirplus:hover {
    color: var(--color-primary-orange-400);
}


div.alignright {
    text-align: left;
    display: block;
    width: 100%;
    color: var(--color-primary-black);
    width: 100%;
    padding-left: 2.7027027%;
    padding-right: 2.7027027%;
    box-sizing: border-box;
}

div.alignright div {
    padding-bottom: 0.4em;
}

div.alignright div span {

}

div.alignright h3 {

    margin-left: 0 !important;
    margin-bottom: 0.5em !important;
}

div.alignright span.b {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .5rem;
}

span.faux_select {

}

#divfor4 select {
    width: 100%;
}

div.alignright div {
    margin: 0.2em 0 0.7em 0;

}

.sstitle {
    color: var(--color-primary-black);
    margin: 0;
    padding: 0;
    padding-left: 2.7027027%;
    padding-right: 2.7027027%;
    box-sizing: border-box;
    height: 2em;
    line-height: 2em;
    width: 100%;
    background-color: var(--color-primary-beige-100);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.calendrierperso {
    width: 100%;
    display: block;
    border: 0;
    height: auto;
    font-size: 1em;
    border: 0 !important;
}

.calendrierperso .cptitre {
    font-weight: bold;
}

div.clear {
    clear: both;
    border: 0 !important;
}

.calendrierperso .cliquable {
    border: 1px solid var(--site__border--lighter);
    float: left;
    box-sizing: border-box;
    margin: 0.75%;
    width: 12.78%;
    height: 2.4em;
    line-height: 2.4em;
    text-align: center;
    color: black;
    background-color: var(--color-primary-white);
    font-size: 0.9em;
}

.calendrierperso .cliquable:hover {
    text-decoration: underline;
}

.calendrierperso .noncliquable {


    border: 1px solid var(--site__border--lighter);
    float: left;
    box-sizing: border-box;
    margin: 0.75%;
    width: 12.78%;
    height: 2.4em;
    line-height: 2.4em;
    text-align: center;
    color: var(--color-primary-grey-100);
    background-color: var(--color-primary-white);
    font-size: 0.9em;


}

#resume_liberte {
    width: 100%;
    font-size: 1.45em;
    color: black;
    box-sizing: border-box;
    padding: 0.4em;
    background-color: var(--color-primary-white);
    margin-bottom: 0;
}

#resume_liberte div.essai_tran {
    box-sizing: border-box;
    width: 97%;
    margin-bottom: 0.1em;
    font-weight: normal;
    text-transform: normal;
    border-bottom: 1px solid var(--site__border--muted);
    line-height: 1.8em;
    margin: 0 1.5% 0 1.5%;
}

#resume_liberte div.aligndate {
    min-width: 50%;
    display: inline;
}

h2.ssmv {
    display: block;
    width: 100%;
    color: var(--color-primary-black);
    box-sizing: border-box;
    font-size: 1.2em !important;
}

#ensemble_resume {
    background-color: var(--site__background--lightest);
}

#ensemble_resume h2 {
    padding-left: 1%;
    font-size: 1.8em !important;
    font-family: var(--font__family--heading), sans-serif;
    font-weight: normal;
    padding-top: 1.3em;
}

div.resume_global {
    width: 100%;
    font-size: 1.45em;
    color: var(--color-primary-black);
    box-sizing: border-box;
    padding: 0.4em;
}

div.resume_intitule {
    display: block;
    box-sizing: border-box;
}

div.resume_calcul {
    display: inline-block;
    width: 64%;
}

div.resume_sstotal {
    font-weight: normal;
    display: inline-block;
    width: 100%;
    text-align: left;
    box-sizing: border-box;
    font-weight: 600;
}

div.specialacompte {
    margin-top: 0.5em;
    font-weight: 500;
}

#loadmdp {
    text-align: justify;
}

div.detailinscription, div.detailinscription_perso {
    width: 100%;
    display: block;
    background-color: var(--color-primary-beige-100);
    color: var(--color-primary-black);
    transition: all 0.3s ease;
    font-size: 2.2em;
    font-weight: normal;
    min-height: 2em;
    text-decoration: none;
    box-sizing: border-box;
    padding: 2%;
    cursor: pointer;
}

div.detailinscription {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

div.detailinscription_perso {
    margin-top: 2em;
}

div.detailinscription:hover, div.detailinscription_perso:hover {
    color: var(--color-primary-beige-300);
}

div.detailinscription span, div.detailinscription_perso span {
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 0.7em;
    display: block;
    padding-top: 0.7em;
}

div.resume_global_total {
    padding-top: 1em;
    box-sizing: border-box;
    background-color: var(--color-primary-beige-100);
    color: var(--color-primary-black);
    border-top: 1px solid white;
    font-size: 1.6em;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}


/*
 *  PAGE 2 INFORMATIONS
 *
 * */

#bloc_add_complement {

    display: none;
}

#lien_add_complement {
    cursor: pointer;
    font-weight: bold;
    color: var(--color-primary-grey-300);
}

#recapitulatif, #recapitulatif_perso {
    display: block;
    margin: auto;
    padding: auto;
    width: 96%;
    margin-bottom: 2em;
}

#sauvegarde {
    padding-left: 2.7027027%;
    padding-right: 2.7027027%;
    padding-bottom: 2em;
}

div.supplement_area, #supplement_transport {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding-left: 2.7027027%;
    padding-right: 2.7027027%;
    padding-bottom: 2em;
}

div.supplement_area textarea.autredemande {
    min-height: 120px;
}

#recapitulatif a.retour {
    text-decoration: none;
    font-weight: bold;
    color: black;
}

#recapitulatif a.retour:hover {
    color: #CCC;
}

.contenu_infos_persos {
    display: block;
    margin: auto;
    padding: auto;
    font-size: 1.5em;
    width: 100%;
    position: relative;
    box-sizing: border-box;
    margin-bottom: 2em;
    border-radius: 20px;
}

.contenu_infos_persos .sstitle {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    height: unset !important;
    padding: .5rem 1.5rem;
}

.contenu_infos_persos {
    background-color: var(--color-primary-beige-50);
    margin-top: 1.5em;
    position: relative;
}

.contenu_infos_persos .libelle, .formulaireGRP .libelle {
    display: none;
}

#bloc_nom_email, #bloc_add {
    margin-bottom: 1.5em;
    width: 96%;
    position: relative;
    display: block;
    margin-left: 2%;
}

#texteemail, #inputemail, #submitemail {
    width: 100%;
}

#sauvegarde form {
    padding-top: 2em;
}

div.centragelabel, div.centragelabelfinal {
    color: var(--color-primary-grey-300);

}

div.centragelabel div {
    display: block;
    margin-bottom: 0.5em;
}

div.centragelabel label, div.centragelabelfinal label {
    color: var(--color-primary-black);

}

div.centragelabelfinal {
    margin-bottom: 2em;
    font-size: 1.4em;
}

.nobloc {
    display: inline !important;
    margin-left: 0 !important;
}

#texteemail {
    display: none;
}

#inputemail input {
    width: 100%;
    border: 1px solid #D1D2C2;
    margin: 1em 0 1em 0;
    font-size: 1em;
    box-sizing: border-box;
}

#submitemail input {
    width: 100%;
    border: 1px solid #D1D2C2;

}

.bloc_participant label.respdosok {
    font-size: 1em;
    color: var(--color-primary-black);
    font-weight: normal;
    font-style: normal;
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 1em;
    text-decoration: none;
}

.bloc_participant label.respdosok:hover {
    text-decoration: underline;
}

hr.bloc_hr {
    display: none;
}

#affiche_train .train_date {
    width: 74%;
    display: block;
    float: left;
}

#affiche_train .train_horaire {
    width: 25%;
    margin-left: 1%;
    display: block;
    float: left;
}

#affiche_train, #affiche_avion {
    padding-top: 1em;
}

#affiche_train textarea {
    width: 98%;
    max-width: 98%;
    min-height: 80px;
}

#affiche_train label {
    width: 48%;
    display: inline-block;
    text-align: center;
    margin-top: 1em;
}

#c33cent, div.c50cent, div.formulairesmGtext {
    display: block;
    width: 100%;
    text-align: right;
    position: relative;
}

div.c25cent {
    display: none;
}


.formulaireGRP form {
    padding: 2.7%;
    box-sizing: border-box;
}

div.formulaireGRP textarea {
    width: 98%;
    max-width: 98%;
    min-height: 100px;
    margin-top: 0.5em;
    border: 1px solid #D1D2C2;
    margin-bottom: 2em;
}

.contenu_infos_persos h2 {
    margin-top: 2em;
    margin-bottom: 1em;
}

.bloc_participant {
    background-color: #F4F5F0;
    box-sizing: border-box;
    padding: 2%;
    margin-bottom: 1.5em;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    width: 100%;
    min-height: 100px;
    position: relative;
}

.bloc_participant h3 {
    margin-top: 0;
    color: var(--color-primary-black);
    text-transform: uppercase;
}

#newsletterinsc {
    background-color: var(--site__background--lighter);
    padding: 0.8em 4em 0.8em 1em;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    box-sizing: border-box;
    display: block;
    width: 100%;
    margin-bottom: 2em;
    font-size: 0.9em;
    color: #555555;
    text-align: left;

}

#newsletterinsc input {
    margin-top: 0.5em;
    width: 2em !important;
    float: left;
}

.contenu_infos_persos input[type="checkbox"] {
    height: 1.2em;
}

#bloc_add #separation {
    margin-top: 1.5em;
}


footer {
    margin-top: 2em;
    height: 2em;
}


#fade {
    display: none;
    background: #000;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    opacity: .80;
    z-index: 9999;
}

.popup_block {
    display: none;
    background: #fff;
    padding: 20px;
    border: 1px solid black;
    float: left;
    font-size: 1em;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 99999;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    width: 80%;
}

#popup2 {
    max-width: 650px;
}

#popup3 {
    max-width: 680px;
}

.popup_block h2 {
    color: var(--color-primary-black);
    text-align: center;
    padding: 0 3%;
}

.popup_block .portec1, .popup_block .portec2, .popup_block .monbento1, .popup_block .monbento2 {
    display: block;
    width: 100%;
}

.popup_block .portec2 img, .popup_block .monbento2 img {
    width: 100%;
    max-width: 440px;
    height: auto;
}

i.btn_close {
    float: right !important;
    margin: -10px -10px 0 0 !important;
    color: var(--color-primary-black);
    width: unset !important;
    padding-right: 0 !important;
}

.popup p {
    padding: 5px 10px;
    margin: 5px 0;
}


/* PAGE 3 recapitulatif RESPONSABLE ET UTILISATEUR*/

#recapitulatif_cache_perso {
    background-color: var(--site__background--lightest);
    font-size: 1.5em;
}

#mode_responsable, #mode_participants, #transport {
    box-sizing: border-box;
    padding-top: 1em;
    padding-left: 2.7027027%;
    line-height: 1.5em;
    padding-right: 2.7027027%;
    padding-bottom: 2em;
}

#mode_responsable {
    background-color: var(--color-primary-white);
}

div.masuite {
    box-sizing: border-box;
    padding-left: 2.7027027%;
    line-height: 1.5em;
    padding-right: 2.7027027%;
    text-align: justify;
}

div.recape-devis, div.recape-liens {
    box-sizing: border-box;
    font-size: 0.98em;
    padding-left: 2.7027027%;
    padding-right: 2.7027027%;
    text-align: justify;
    width: 100%;
}


div.recape-liens a {
    display: block;
    width: 100%;
    color: black;
    padding: 0.8em 0 0.8em 0;
    font-weight: bold;
    text-decoration: none;
}

div.recape-liens a.erase {
    font-size: 0.9em;
    color: red;
    font-weight: normal;
}

div.recape-liens a.en-cours {
    display: block;
    text-align: center;
    margin: auto;
    padding: auto;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--color-primary-yellow-400);
    font-weight: bold;
    color: white;
    margin: 1em 0% 1em 0%;
}

div.recape-liens a.finalise {
    display: block;
    text-align: center;
    margin: auto;
    padding: auto;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--site__border--light);
    font-weight: bold;
    color: white;
    margin: 1em 0% 1em 0%;
}

h2.sstitlemesdevis {
    height: auto;
}

h2.sstitlemesdevis span {
    display: block;
    width: 100%;
}


div.masuite a {
    text-decoration: none;
    display: block;
    width: 90%;
    margin-left: 5%;
    color: black;
    margin-top: 01em;
}

div.masuite a:hover {
    color: var(--color-primary-beige-300);
}

#lien-voir-mes-devis {
    display: none;
}

/*--Making IE6 Understand Fixed Positioning--*/

* html #fade {
    position: absolute;
}

* html .popup_block {
    position: absolute;
}


select {
    background: transparent;
    -webkit-appearance: none;
    background: url(fleche-select.png) no-repeat right #ddd;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

}


#lien_enchainement {
    display: block;
    width: 100%;
    text-align: right;
    color: var(--site__text--nav-link);
    margin-top: 1em;
}

#lien_enchainement:hover {
    display: block;
    width: 100%;
    text-align: right;
    color: var(--site__text--nav-link);
    margin-top: 1em;
    cursor: pointer;
}

#affiche_enchainement {
    display: none;
}

#affiche_enchainement select {
    width: 95%;
}

/**
  * Module BI Accompagné
 */

@font-face {
    font-family: 'grotesque';
    src: url('/css/geogrotesque.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

::-webkit-input-placeholder {
    font-weight: normal;
    color: #b8b8b8;
}

::-moz-placeholder {
    font-weight: normal;
    color: #b8b8b8;
}

:-ms-input-placeholder {
    font-weight: normal;
    color: #b8b8b8;
}

:-moz-placeholder {
    font-weight: normal;
    color: #b8b8b8;
}

.clear {
    clear: both;
}

.container2 .affiche_oui_kit, .container2 .affiche_non_kit {
    width: 100%;
    display: none;
}

#affiche_jpj, #affiche_compris, #affiche_hebergement, #affiche_libre {
    display: none;
}

#headerWS {
    width: 100%;
    position: relative;
    background-color: var(--color-primary-black);
    height: auto;
    min-height: 45px;
    box-sizing: border-box;
    padding: 1%;
}

#headerWS #logo {
    width: 30%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 270px;
}

#preHeaderWS span, #numberphone, #retourSite {
    display: none;
}


.message_initial .message_contenu {
    padding: 2%;
    box-sizing: border-box;
    background-color: #F8F8F8;
}

.submitbouton,
#submitButton2,
a.button_contact {
    padding: 0.8em 2em 0.8em 2em;
    margin-top: 0.8em;
    text-align: center !important;
}

#submitButton2 {
    width: 100% !important;
}


.liste_destination span {
    padding: 10px 18px 10px 18px;
    color: #012A32;
    text-transform: uppercase;
    margin-right: 20px;
    background-color: white;
    font-size: 0.8em;
    border: 1px solid #012A32;
    border-radius: 5px;
}

.liste_destination {
    margin-bottom: 2em;
}

.messagerie_table {
    width: 96%;
    border: 1px solid #CCCCCC;
    border-radius: 10px;
    padding: 2%;
    box-sizing: border-box;
    margin: 2%;
}

.messagerie_table .de {
    width: 100%;
    font-size: 0.85em;
    color: grey;
}

.messagerie_table .titre {
    width: 100%;
}

.messagerie_table .bouton {
    width: 100%;
}

.messagerie_table div {
    margin_bottom: 10px;
    display: block;
}

.messagerie_table .bouton {
    margin-top: 1em;
}

.colororange {
    color: orange;
}

.colorred {
    color: red;
}

.colorgreen {
    color: green;
}

.colorgrey {
    color: grey;
}

#montzel {
    width: 80%;
    margin-left: 10%;
    padding: 5%;
    box-sizing: border-box;
    background-color: #edf6f6;
    text-align: left;
}

#montzel a {
    font-size: 2em;
    color: #2E6071;
    font-weight: bold;
    text-decoration: none;
}

/* WRAPPER (porte la bordure extérieure et l’arrondi) */
.table-container {
    overflow-x: auto; /* scroll horizontal si besoin */
    display: block; /* pas besoin de flex ici */
    border: 1px solid var(--color-primary-green-200); /* tour visible */
    border-radius: 1.25rem; /* coins externes */
    background-color: #fff; /* utile si fond de page ≠ blanc */
}

/* TABLEAU (pas de bordure extérieure, pas d’overflow hidden) */
table.tablechamina {
    border-collapse: collapse;
    width: max-content;
    border: 0; /* on laisse le “tour” au wrapper */
    border-radius: 0;
    overflow: visible;
}

/* cellules : styles communs */
.tablechamina tr > * {
    font-size: 0.9em;
    padding: 8px;
    min-width: 100px;
    text-align: center;
    border: 0; /* pas de bordure complète sur la cellule */
}

/* traits internes verticaux (toutes colonnes sauf la dernière) */
.tablechamina tr > *:not(:last-child) {
    border-right: 1px solid var(--color-primary-green-200);
}

/* traits internes horizontaux (toutes lignes sauf la dernière) */
.tablechamina tr:not(:last-child) > * {
    border-bottom: 1px solid var(--color-primary-green-200);
}

.tablechamina tr > td:first-child {
    background-color: var(--color-primary-beige-100);
}

/* header */
.tablechamina th {
    background: var(--color-primary-green-400);
    color: #fff;
    font-size: 0.95em;
    padding-block: 1.75rem;
}

.tablechamina td {
    padding-block: 1.25rem;
}

/* 1re colonne plus large + alignée à gauche */
.tablechamina th:first-child,
.tablechamina td:first-child {
    min-width: 250px;
    text-align: center !important;
}

table.tablechamina a {
    color: var(--color-primary-black);
    text-transform: uppercase;
    font-size: 0.8em;
    text-decoration: none;
    font-weight: bold;

}

table.tablechamina a.travel {
    display: inline-block;
    width: 140px;
    padding: 8px;
}

.tableau_laravel {
    border: 1px solid #ddd;
    overflow-x: auto; /* Permet le défilement horizontal si nécessaire */
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
    width: 100%; /* Assure que le tableau prend toute la largeur du conteneur */
    font-family: 'Arial', sans-serif; /* Améliore la lisibilité avec une police propre */
}

.tableau_laravel th, .tableau_laravel td {
    padding: 12px; /* Augmente légèrement le padding pour un espace plus aéré */
    text-align: left;
    border: 1px solid #ddd;
    vertical-align: middle; /* Aligne le texte au milieu verticalement pour un rendu plus propre */
}

.tableau_laravel th {
    color: white;
    background-color: #0A4B5E;
    text-transform: uppercase; /* Transforme le texte en majuscules pour un effet plus professionnel */
    letter-spacing: 1px; /* Ajoute un espacement entre les lettres pour améliorer la lisibilité */
    font-size: 1em;
}

.tableau_laravel tr:nth-child(even) {
    background-color: #f2f2f2; /* Ajoute une couleur de fond pour les lignes paires pour un effet zébré */
}

.tableau_laravel tr:hover {
    background-color: #e0f7fa; /* Change la couleur de fond au survol pour une meilleure interactivité */
}

.tableau_laravel td:last-child a {
    display: block;
    width: 100%;
    padding: 10px 0; /* Ajoute du padding pour centrer verticalement le texte du lien */
    text-align: center;
    box-sizing: border-box;
    color: white;
    font-family: 'Grotesque', sans-serif;
    background-color: #ccb964;
    text-decoration: none; /* Supprime le soulignement du lien */
    border-radius: 4px; /* Arrondit les coins pour un effet plus doux */
    transition: background-color 0.3s ease; /* Ajoute une transition fluide pour l'effet au survol */
}

.tableau_laravel td:last-child a:hover {
    background-color: #b89a56; /* Change légèrement la couleur au survol pour indiquer l'interactivité */
}

.container2 {
    width: 100%;
    font-size: 0.625em;
    font-family: var(--font-family-stevie-sans), sans-serif;
    text-align: justify;
    margin: auto;
    width: 100%;
    font-weight: 500;
    box-sizing: border-box;
    padding: 3%;
    min-height: 75%;
    color: var(--color-primary-black);
}

#container p {
    font-size: 1.6em;
}

#container form.connexion input[type='text'], #container form input[type='password'] {
    font-size: 1.6em;
    width: 100%;
    box-sizing: border-box;
    padding: 0.8em 0.5em 0.8em 0.5em;
    background-color: #FFFFFF;
    border: 1px solid #7ca3ae;
    font-family: 'Roboto', sans-serif;
    color: var(--color-primary-black);
    margin-top: 1em;

}

#container form.connexion input[type='submit'] {
    font-size: 1.9em;
    font-weight: 500;
    width: 100%;
    box-sizing: border-box;
    padding: 0.8em 0.3em 0.8em 0.3em;
    background-color: #ccb964;
    border: 0;
    font-family: 'grotesque', sans-serif;
    color: #FFFFFF;
    margin-top: 1em;
    font-weight: 500;
    margin-top: 0.8em;
    transition: all 0.3s ease;
}

#container form.connexion input[type='submit']:hover {

    background-color: #306272;
}

#container .accompte, #container .accompte21 {
    font-size: 1.4em;
    font-weight: 500;
    width: 100%;
    box-sizing: border-box;
    padding: 0.8em 0.3em 0.8em 0.3em;
    background-color: #ccb964;
    border: 0;
    font-family: 'grotesque', sans-serif;
    color: #FFFFFF;
    margin-top: 1em;
    font-weight: 500;
    margin-top: 0.8em;
    transition: all 0.3s ease;
    max-width: 480px;
    border-radius: 4px;
}

#container .accompte:hover, #container .accompte21:hover {

    background-color: #306272;
}


#container .mon_option {
    padding: 0.5em 5% 0.5em 5%;
    width: 100%;
    display: block;
    box-sizing: border-box;

}

#moncgos input {
    width: 100% !important;
}

#moncgos {
    width: 100%;
    max-width: 500px;
    background-color: #D2EBEA;
    padding: 2.5em;
    box-sizing: border-box;
}

#logo-cgos {
    max-width: 100%;
}

/* Fin style page CGOS */

#container .intitule_form {
    display: none;
}

#container #formulaire_brochure {
    font-size: 1.5em;
}

#formulaire_brochure input[type='submit'] {

    text-align: center;
    margin: auto;
    padding: 0.8em 0.5em 0.8em 0.5em;
    width: 100%;
    box-sizing: border-box;
    background-color: #ccb964;
    border: 0;
    transition: all 0.3s ease;
    font-family: 'grotesque', sans-serif;
    font-size: 1.4em;
    color: white;
}

#boite_brochure .libelle_brochure {
    display: none;
}

#boite_brochure .double_bottom {
    margin-bottom: 2.5em;
}

#boite_brochure input[type='text'], #boite_brochure select {
    width: 100%;
    display: block;
    padding: 0.8em 0.5em 0.8em 0.5em;
    display: block;
    margin: auto;
    margin-top: 0;
    margin-bottom: 0;
    margin: 1em 0 1em 0;
    background-color: #FFFFFF;
    border: 1px solid var(--color-primary-black);
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
    font-weight: 600;
}

.img_brochure {
    margin-top: 2em;
    margin-bottom: 1em;
}

#container .all_special_integration {
    display: none;
}

#container .special_integration label {
    margin-top: 0.5em;
    display: block;
}

#container h1.dossier {
    text-align: center;
    margin-bottom: 0em;
    padding: 0;
}

#container h2 {
    text-align: left;
}

#container h2.dossier {
    color: #61b1b2;
    font-size: 2.1em;
    text-align: center;
    margin-top: 0;
    padding-top: 0;
    font-style: italic;
    font-weight: normal;
    font-family: "Roboto", sans-serif;
}

#container div.monconseiller {
    padding-left: 15px;
    display: block;
}

#fmon-form p {
    font-size: 1.25em;
    font-style: italic;
    margin-top: 1.5em
}

#container table.paiement {
    width: 100%;
    margin-top: 2em;
}

#container table.paiement td.txtp {
    text-align: right;
    width: 78%;
}

#container table.paiement td.sommep {
    text-align: right;
    width: 22%;
    box-sizing: border-box;
    padding-left: 1em;
}

div.dossier a.paiementenligne {
    font-family: 'grotesque', sans-serif;
    color: #FFFFFF;
    background-color: #ccb964;
    font-size: 1.05em;
    text-decoration: none;
    display: block;
    box-sizing: border-box;
    text-align: center;
    font-weight: 500;
    padding: 0.8em 0.3em 0.8em 0.3em;
    box-sizing: border-box;
    margin-top: 1em;
    margin-bottom: 1em;
    transition: all 0.3s ease;
    width: 100%;
    text-transform: uppercase;

}

.margin_auto {
    margin: auto;
    display: block;
}

.margin_auto .c-picto {
    display: none;
}


.encadre_bleu {
    background-color: var(--color-primary-beige-100);
    width: 100%;
    padding: 0.1em 2em 2em 2em;
    box-sizing: border-box;
    margin-top: 3em;
    margin-bottom: 3em;
}

.encadre_bleu a {
    color: var(--color-primary-black);
    text-transform: uppercase;
    font-weight: 500;
    text-decoration: none;
    display: block;
    text-align: left;
    margin-bottom: 1em;
    transition: all 0.3s ease;

}


.encadre_bleu a span {

    font-weight: 500;
    font-size: 1.2em;
    padding-right: 0.5em;
    color: #CCB964;
}

.encadre_bleu a:hover {
    color: #CCB964;
}

#footer-insc {
    clear: both;
    background-color: #024351;
    display: block;
    margin-top: 3em;
    width: 100%;
    box-sizing: border-box;
    padding-top: 3em;
    padding-bottom: 1em;
    font-family: 'Roboto', sans-serif;
    padding-bottom: 5em;
}

#footer-insc #first_element {
    padding-bottom: 2em;
}

#footer-insc #logo_footer {
    width: 55%;
    float: left;
}

#footer-insc #logo_footer img {

    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    max-width: 220px;
}

#footer-insc #inside {
    width: 45%;
    float: left;
}

#footer-insc #liens_utiles {
    display: none;
}

#footer-insc #inside a.tel {
    font-family: 'Archivo Narrow', sans-serif;
    color: #FFFFFF;
    font-size: 1.5em;
    text-decoration: none;
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    font-weight: 500;
    font-weight: 700;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}


.icon_chamina {
    width: auto;
    height: 28px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0 20px;
    color: #fff;
    font-family: "grotesque";
    font-size: 16px;
    text-transform: uppercase;
    background: #024351;
    transition: all 0.3s ease;
    text-decoration: none;
    float: right;
}

.icon_chamina:hover {
    color: #ccb964;

}

.icon_chamina span {
    display: none !important;
}


.container2 {
    font-size: 1em;
}

/* *********************** MODE BI ACCOMPAGNE **********************/

#carre_en_cours {
    display: block;
    background-color: var(--color-primary-green-400);
    font-size: 1.3em;
    color: var(--color-primary-white);
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    padding-right: 1.7057143%;
    height: 34px;
    line-height: 34px;
    text-transform: uppercase;
    border-radius: 20px;
    font-weight: var(--font-weight-bold);
}

.carre {
    display: none;
    border-radius: 20px;
}

.phase4 {
    display: none;
}

.contenu_margin {
    padding-left: 2%;
    padding-right: 2%;
}

.contenu_margin a {
    display: block;
    margin: 0.7em 0 0.7em 0;
    text-decoration: none;
    transition: all 0.3s ease;
    color: var(--color-primary-black);
    text-transform: uppercase;
    font-size: var(--font-size-link-1);
}

.contenu_margin a span {
    color: var(--color-primary-beige-300);
}

.contenu_margin a:hover {
    color: var(--color-primary-beige-300);
    text-decoration: underline;
}

/* PAGE 1 */

.container2 h1 span {
    display: block;
    width: 100%;
    font-size: var(--font-size-desktop-h5);
    font-weight: normal;
    color: var(--color-primary-black);
}

.container2 #cp1 input[type='text'] {
    width: 52%;
    box-sizing: border-box;
    padding: 0.5em;
    background-color: #FFFFFF;
    float: left;
}

.container2 #discoverLunch, .container2 #discoverAssurance, .container2 #bouton_option2, .container2 #bouton_option3 {
    color: var(--color-primary-blue-600);
    cursor: pointer;
    margin: 1.5% 2.7027027%;
    font-size: 1em;
    font-weight: var(--font-weight-bold);
    transition: all 0.3s ease;
    text-align: justify;
}

.container2 #discoverLunch span, .container2 #discoverAssurance span, .container2 #bouton_option2 span, .container2 #bouton_option3 span {
    color: var(--color-orange-300);;
}

.container2 #discoverLunch:hover, .container2 #discoverAssurance:hover, .container2 #bouton_option2:hover, .container2 #bouton_option3:hover {
    color: var(--color-orange-300);
}

.container2 #cp1 input.train_date {
    width: 32%;
}

.container2 #cp1 select.horaire {
    width: fit-content;
    margin: 0;
}

.container2 div.center {
    text-align: center;
    display: block;
    width: 100%;
    margin-top: 1em;
    margin-bottom: 1em;
}

.container2 #cp1, .container2 #cp3, .container2 #cp4, .container2 #cp5 {
    background-color: var(--site__background--lightest);
    border-radius: 20px;
    padding-top: 10px;
    padding-bottom: 10px;

}

#cp4 .checkbox-container {
    margin-bottom: 1rem;
}

#cp3 {
    text-align: left;
    border-radius: 20px;
}

#cp3 h2 {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.container2 .carte_abo {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.5em;
}

.container2 #cp1 h2, .container2 #cp2 h2, .container2 #cp3 h2, .container2 #cp4 h2, .container2 #cp5 h2 {
    color: var(--color-primary-black);
    margin: 0;
    padding-top: .1rem;
    padding-bottom: .1rem;
    padding-left: 2.7027027%;
    padding-right: 2.7027027%;
    box-sizing: border-box;
    text-transform: uppercase;
    width: 100%;
/ / background-color: var(--color-primary-beige-100);
    margin-bottom: 1em;
    font-size: 1.2em;
}

.container2 #cp2 h2:first-of-type {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.container2 .nbparticipants_libelle {
    text-transform: uppercase;
    width: 40%;
    font-size: 0.85rem;
    text-align: RIGHT;
    float: left;
    font-weight: 600;
    height: 2.4rem;
    line-height: 2.4rem;
    padding-right: 1%;
    box-sizing: border-box;
}

.container2 .carte_abo div.textea {
    text-transform: uppercase;
    width: 100%;
    font-size: 0.8rem;
    text-align: left;
    font-weight: 600;
    line-height: 1.2rem;
    padding-right: 1%;
    box-sizing: border-box;
    margin: 0.7em 0 0.4em 0;

}

.container2 .carte_abo select {
    width: 100% !important;
    margin-top: 0 !important;

}

.container2 .carte_abo textarea {
    width: 98.5%;
    min-height: 70px;
    box-sizing: border-box;
    padding: 0.5em;
    border: 1px solid var(--color-primary-black);
}

.container2 .nbparticipants_libelle2 {
}

.container2 .nbparticipants_libelleHoraire {
    width: 5%;
}

.container2 #desinscription input[type=text], .container2 #desinscription input[type=submit] {
    width: 100%;
    margin-top: 6px;
    padding: 0.5em;
    box-sizing: border-box;
}

.container2 .kit_campaign_gauche {
    width: 100%;
    margin-right: 0;
}

.container2 .kit_campaign_droite {
    width: 100%;
    margin-top: 3em;
}

#valide_formulaire.final-step {
    display: flex;
    flex-direction: column;
}

#valide_formulaire {
    overflow: auto;
    padding: 1rem;
    align-items: end;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Bouton précédent à gauche : 40% */
#valide_formulaire .submitprecedent {
    float: left !important;
    width: 100% !important;
    text-align: center; /* centre le texte à l'intérieur */
    box-sizing: border-box;
}

/* Bouton suivant à droite : 40% */
#valide_formulaire .submit2 {
    float: right !important;
    width: 100% !important;
    text-align: center;
    box-sizing: border-box;
}

/* Texte en dessous du bouton de droite */
#valide_formulaire .info {
    float: right !important;
    clear: right;
    width: 100%; /* s’aligne pile sous le bouton droit */
    text-align: right;
    margin-top: 6px;
    line-height: 1.3;
    font-family: var(--font-family-stevie-sans), 'serif' !important;
}

/* Neutralisation des div clear parasites */
#valide_formulaire > .clear,
#valide_formulaire > div[style*="clear"] {
    display: none !important;
}

.container2 span.obli,
#container span.obli {
    color: red;
}

#info_gauche {
    display: none;
}

/* PAGE 2 */

#formulaire_deux .text_dep {
    text-align: left;
    margin-bottom: 1.5em;
}

#cp2 {
    background-color: var(--color-primary-beige-50);
    border-radius: 20px;
    padding-bottom: 1rem;
}

#contenulive p {
    font-size: 0.9em !important;
}

.container2 #enfantotal, .container2 #adultetotal, .container2 #sup1total, .container2 #sup2total, .container2 #sup3total, .container2 #total, .container2 #monbentototal {
    background-color: var(--color-primary-white) !important;
}

.container2 .fauxinput {
    width: 18%;
    margin-left: 1%;
    margin-right: 1%;
    font-size: 1em !important;
    text-align: center;
    display: inline-block;
}

.container2 .fauxinput.input {
    display: inline-flex; /* override le display:block de .input */
    align-items: center; /* centre verticalement */
    justify-content: center; /* centre horizontalement (tu as déjà text-align, mais propre) */
    min-height: 2.5rem; /* garde ta hauteur mini */
}

.container2 #cp2 .nb_f {
    text-align: right;
    font-weight: 600;
    float: left;
    height: 2.3rem;
    line-height: normal;
    box-sizing: border-box;
}

.container2 #cp2 .nb_f_1 {
    width: 35%;
    padding-right: 2%;
    display: flex;
    flex-direction: row;
    justify-content: end;
    gap: 1.5rem;
    margin-top: .5rem;
}

.container2 #cp2 .nb_f_2 {
    width: 19%;
}

.container2 #cp2 .nb_f_3 {
    width: 12%;
    text-align: left;
    padding-left: 2%;
    margin-top: .5rem;
}

.container2 #cp2 .nb_f_4 {
    width: 19%;
    text-align: left;
}

.container2 #cp2 .nb_f_2 input, .container2 #cp2 .nb_f_4 input {
    width: 100%;
    text-align: center;
}

.container2 #cp2 .nb_f_5 {
    width: 15%;
    text-align: left;
    padding-left: 2%;
    padding-right: 0;
    margin-top: .5rem;
}

.container2 div#gestion_option .nb_f.nb_f_1 {
    display: inline-flex; /* pour aligner proprement */
    align-items: flex-start;
    font-size: 0;
    margin-top: 0 !important;
}

.container2 div#gestion_option .nb_f.nb_f_1 select {
    font-size: 14px;
    margin-right: -15%;
}

.container2 div#gestion_option .nb_f.nb_f_1::after {
    content: "X";
    display: inline-block;
    font-size: 14px; /* même taille que le select */
    margin-top: .75rem;
}

.container2 #cp2 .nb_f_5 span, .container2 .nb_f_monbento span {
    font-weight: 400;
    text-transform: uppercase;
    font-size: 0.7em;
}

.container2 .titreh3 {
    margin-left: 2%;
    display: block;
    width: 98%;
    font-family: var(--font-family-stevie-sans), 'serif' !important;
}

.container2 #cp2 .nb_f_monbentoselect {
    width: 25%;
}

.container2 #cp2 .nb_f_monbento {
    width: 100%;
    text-align: right;
    padding-right: 9.6%;
}

.container2 #cp2 .nb_f_monbento input[type='text'] {
    float: none;
    margin-left: 3%;
    margin-right: 1.5%;
    width: 20%;
    text-align: center;
}

#cp2 #afficheLunch {
    display: none;
}

#cp2 .block_insc {
    font-weight: 500;
    display: block;
    width: 100%;
    text-align: right;
    padding-right: 7.5%;
    box-sizing: border-box;
}

#cp2 .libelle_frais {
    padding-left: 2.7027027%;
    padding-right: 2.7027027%;
    box-sizing: border-box;
    display: block;
    width: 100%;
}

.libelle_frais {
    font-family: var(--font-family-adobe-caslon-pro), serif;
}

.container2 #cp2 .info_bento {
    font-style: italic;
    width: 95%;
    display: block;
    text-align: right;
    padding: 0.5em;
    box-sizing: border-box;
    margin-top: 0.5em;
}

.container2 #cp2 input.titre_option[type=text] {
    width: 100%;
}

#cp2 .libelle {
    text-transform: uppercase;
    width: 100%;
    font-size: 0.9rem;
    text-align: left;
    font-weight: 600;
    padding-right: 1%;
    box-sizing: border-box;
    margin-bottom: 0.5em;
    padding-left: 2.7027027%;
}

#cp2 .libelle_marge {
    margin-top: 1.5em;
}

.container2 .libelle_option {
    padding-left: 2.7027027%;
}

.myoption {
    display: block;
    margin-bottom: 0.5em;
}

#cp2 #gestion_option .libelle_option input {

    margin-bottom: 1em;
}

#cp2 #tva {
    padding: 0.5em !important;
}

#affiche_assurance {
    display: none;
    padding: 0 2% 2% 2%;
    box-sizing: border-box;
}

.intitule_remarque {
    font-size: 1.2em;
}

#cp2 #tva {
    float: left;
    width: 60%;
    margin-left: 2.5%;
    margin-right: 2.5%;
}

.container2 .mbottom {
    margin-bottom: 1.5em;
}

#cp2 .nbtotal {
    width: 66%;
    float: left;
    display: block;
}

#cp2 #affiche_option2, #cp2 #affiche_option3, #contenu_resumer {
    display: none;
}

#contenu_resumer {
    background-color: var(--color-primary-beige-50);
}

#click_recapitulatif {
    font-weight: normal;
    font-size: 0.7em;
    font-family: var(--font-family-stevie-sans), 'serif' !important;
}

#pave_voyage h3,
.ensemble_resumer h3,
#votrevoyage h3,
#formulaire2 h3,
#formulaire2 span,
.resume_global.resume_global_total span,
.information2 span,
#special_supplement h3 {
    font-family: var(--font-family-stevie-sans), 'serif' !important;
}

.container2 #cp3 .ter_libelle {
    text-transform: uppercase;
    width: 46%;
    font-size: 0.8rem;
    text-align: RIGHT;
    float: left;
    display: block;
    font-weight: 600;
    margin-top: 1em;
    padding-right: 1%;
    box-sizing: border-box;
    margin-bottom: 1em;
}

.container2 #recapdo {
    width: 100%;
    border: 0 !important;
}

.container2 h2 {
    margin-top: 2em;
    text-transform: uppercase;
    text-align: left;
}

.container2 table.paiement {
    width: 100%;
    border: 0;
}

.container2 table.paiement td {
    border: 0;
}

.container2 table.paiement td.sommep {
    text-align: right;
}


#recapdo td {
    border: 0 !important;
}

#recapdo td:first-child {
    text-align: right;
    color: grey;

}

.container2 #cp3 .libelle_add {
    text-transform: uppercase;
    width: 46%;
    font-size: 0.9rem;
    text-align: right;
    display: block;
    font-weight: 600;
    margin-top: 0;
    padding-right: 1%;
    box-sizing: border-box;
    margin-bottom: 0.5em;
}

#cp3 .mini {
    font-size: 0.85em;
    display: block;
    width: 100%;
    margin-top: 0.2em;
}

#cp3 #insc_news:hover {
    transition: all 0.3s ease;
}

#cp3 #insc_news:hover {
    color: #ccb964;
}

.container2 #cp3 input.width_100[type='text'], .container2 #cp3 select.width_100 {
    width: 100%;
    margin: 0;
}


#cp3 textarea {
    width: 100%;
    min-height: 80px;
    box-sizing: border-box;
    padding: 0.5em;
    border: 1px solid var(--color-primary-black);
    margin-top: 0.7em;
}


#resumer {
    display: none;
    border-radius: 20px;
}

#titre_resumer {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}


/* *********************** MODE BI ACCOMPAGNE **********************/


.information, .warning, .error, .labelpaiement {
    width: 100%;
    padding: 0.6em;
    box-sizing: border-box;
    padding: auto;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    margin-bottom: 1.666667%;
    margin-top: 1.666667%;
    border-radius: 4px;
    line-height: 1.5em;
    background-color: #FFFFFF;
    border: 1px solid #cecfc7;
    text-align: justify;
    color: var(--color-primary-black);
}


.information span, .warning span, .error span {
    font-weight: 500;
}

.information {
    border: 1px solid var(--color-primary-black);
    border-left: 0.5em solid var(--color-primary-black);
}

.warning {
    border: 1px solid var(--color-primary-orange-400);
    border-left: 0.5em solid var(--color-primary-orange-400);
}

.error {
    border: 1px solid var(--color-red-400);
    border-left: 0.5em solid var(--color-red-400);
}

.warning a, .information a, .error a {
    font-weight: 500;
    text-decoration: underline;
    transition: all 0.3s ease;
    font-weight: 500;
    color: #024351;
}

.warning a:hover, .information a:hover, .error a:hover {
    color: var(--color-primary-orange-400);
}


.docjointe {
    border: 0;
    font-size: 1.1em;
}


.votredossiervoyage {
    float: none;
    width: 94%;
    margin: 3%;
    padding: 1.5%;
    box-sizing: border-box;
    background-color: #FFFFFF;
}

.votredossierinscription {
    float: none;
    width: 100%
}

.contactconseiller {
    float: none;
    width: 94%;
    margin: 3%;
    padding: 1.5%;
    box-sizing: border-box;
    background-color: #FFFFFF;
}

.formulaireconseiller {
    float: none;
    width: 94%;
    margin: 0 3% 2em 3%

}

#container a.button_contact, .container2 a.button_contact {
    float: right;
    width: 100%;
}

div.c-picto {
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-preferred-size: 58px;
    flex-basis: 58px;
    max-width: 58px;
    height: 58px;
    width: 58px;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #61b1b2;
    background: transparent;
    border: 1px solid #d6ebeb;
    border-radius: 50%;
    font-size: 28px;
}

div.c-text {
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-preferred-size: calc(100% - 58px);
    flex-basis: calc(100% - 58px);
    max-width: calc(100% - 67px);
    padding-left: 80px;
    padding-right: 6px;
    font-weight: 700;
    text-align: left;
}

.message_int_info .user_publiee {
    display: block;
    width: 100%;
}

.message_int_info .date_publiee {
    display: block;
    width: 100%;
    text-align: left;
    color: grey;
    font-size: 0.75em;
}

.message_int_info .date_publiee span {
    display: none;
}

.listingmess .lm1, .listingmess .lm3 {
    font-size: 1em;
    font-weight: 700;
}

.listingmess .lm2 {
    font-size: 0.9em;
}

.listingmess .lm2 div.astrong {
    font-size: 1.2em;
    font-weight: 500;
    text-transform: uppercase;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.listingmess .lm2 div.info_i {

    font-style: italic;
    color: grey;
}

.listingmess .lm2 {
    margin-bottom: 0.5em;
}

.listingmess .lm3 {

    color: grey;
}

,
. listingmess strong {
    display: inline;
    color: #61b1b2;
    font-family: "grotesque";
    font-weight: 400;

    text-transform: uppercase;
    letter-spacing: .4px;
    margin-top: 10px;
    margin-bottom: 3px;
}


#footer-insc #inside a.tel:hover {
    color: #ccb964;
}

#footer-insc #inside a.button_contact {
    font-family: 'grotesque', sans-serif;
    color: #FFFFFF;
    background-color: #ccb964;
    max-width: 170px;
    font-size: 1.05em;
    text-decoration: none;
    display: block;
    margin: auto;
    box-sizing: border-box;
    text-align: center;
    font-weight: 500;
    padding: 0.8em 0.3em 0.8em 0.3em;
    box-sizing: border-box;
    margin-top: 0.8em;
    transition: all 0.3s ease;
}


#footer-insc #inside a.button_contact:hover {
    background-color: #306272;
}

#footer-insc #lgo {
    margin: auto;
    padding: auto;
    width: 100%;
    background-color: #0A4B5E;
    padding-top: 2em;
    padding-bottom: 2em;
    text-align: center;
    display: block;
}

#footer-insc .logo {
    width: 33.3333332%;
    display: inline-block;
    text-align: center;
    max-width: 180px;
    margin: auto;
    opacity: 0.7;
    padding: 2%;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

#footer-insc .logo:hover {
    opacity: 1;
}

#footer-insc .logo img {
    border: 0;
    width: 100%;
}

#liste_de_liens {
    padding: 5%;
    box-sizing: border-box;
    color: #286774;
    margin: auto;
}

#footer-insc #liste_de_liens .bis {
    font-family: "Roboto", sans-serif;
    color: #FFFFFF;
    font-size: 0.9em;
    text-decoration: none;
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
    display: inline-block;
    color: #fff;
    margin-bottom: 10px;
    padding: 0 10px;
    letter-spacing: .6px;
     font-family: "Roboto", sans-serif;
     font-weight: 500;
    transition: all 0.3s ease;
    text-align: left;
}

#footer-insc #liste_de_liens .bis:hover {
    color: #ccb964;
    text-decoration: underline;
}

#reassurance {
    display: none;
}

/************************************ MA SELECTION ***************/

.o-travel {
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    background: #fff;
    transition: all 0.3s ease;
    margin-bottom: 24px;
    border: 1px solid #80c1c1;

}

.c-travel__picture {
    width: 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    position: relative;
    display: block;
    -ms-flex-item-align: start;
    align-self: flex-start;
}

.c-travel__picture img {
    width: 100%;
    transition: all 0.3s ease;
}

.c-travel__inner {
    padding-top: 10px;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    padding-top: 1px;
    text-align: center;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
    -ms-flex-pack: justify;
    justify-content: space-between;
    text-decoration: none;
}

.c-travel__inner h3 {
    color: #022a31;
    min-height: 48px;
    width: 100%;
    display: block;
    padding: 0 10px;
}

.c-travel__place {
    color: #61b1b2;
    font-family: 'grotesque', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.c-travel__thumbs {
    width: 100%;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: 24px;
    border-top: 1px solid #80c1c1;
}

.macolonne {
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 6px;
    padding-right: 6px;
}

.c-travel__type {
    width: 100%;
    display: block;
    position: absolute;
    padding: 4px 12px;
    top: 0;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    color: #fff;
    background: #61b1b2;
    font-family: 'grotesque', sans-serif;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
}

.c-liberty {
    max-width: 77px;
    background: #ccb964;
}

.c-accompagny {
    max-width: 104px;
    background: #61b1b2;
}

.c-row {
    width: 100%;
    max-width: 85.25em;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    margin: 0 auto;
    padding: 0;
    flex-wrap: wrap;
}

.c-travel__difficulty {
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-preferred-size: 52px;
    flex-basis: 52px;
    max-width: 52px;
    padding: 0;

}

.c-travel__availabilities {
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-preferred-size: calc(75% - 52px);
    flex-basis: calc(75% - 52px);
    max-width: calc(75% - 52px);
    padding: 12px 5px;
}

.c-travel__availabilities {
    width: 100%;
    border-left: 1px solid #80c1c1;
    border-right: 1px solid #80c1c1;
}

.c-travel__price {
    color: #61b1b2;
    font-family: "Oswald", sans-serif;
    font-size: 35px;
    line-height: 32px;
    position: relative;
    top: -2px;
}

.c-travel__price {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
    font-size: 9px;
    line-height: 15px;
    color: #61b1b2;
    text-transform: uppercase;
    text-align: center;
}

.c-travel__price {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
    font-family: 'grotesque', sans-serif;
    font-size: 9px;
    line-height: 15px;
    color: #61b1b2;
    text-transform: uppercase;
    text-align: center;
}

.c-travel__price strong {
    display: block;
    font-weight: 400;
    font-size: 20px;
    color: #074350;
}

.o-availabilities {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.c-month {

    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
    display: block;
    padding: 5px 3px;
    color: #c8d6da;
    font-family: 'grotesque', sans-serif;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
}

.c-month.is-available {
    color: #2c616f;
}

[class*="o-travel"]:active, [class*="o-travel"]:hover {
    box-shadow: 0 8px 18px 0 rgba(7, 56, 88, 0.17);
}


/* MODULE DEVIS */

.container2 #intro_avec_image {
    width: 100%;
    position: relative;
    margin: 1em 0 1em 0;
}

.container2 #intro_avec_image picture img {
    width: 100%;
    filter: brightness(75%);
    height: auto;
}

.container2 #intro_avec_image h1 {
    width: 100%;
    position: absolute;
    text-align: center;
    bottom: 1.5em;
    left: 0;
    color: white;
    font-size: 1.8em;
}

.container2 #intro_avec_image p {
    width: 100%;
    position: absolute;
    text-align: center;
    bottom: 0.5em;
    left: 0;
    color: white;
    font-size: 1.2em;
    font-weight: bold;
}

.container2 #blockConseiller {
    background-color: var(--color-primary-beige-100);
    padding: 2em 2% 2em 2%;
    box-sizing: border-box;
    width: 100%;
    font-size: 1em;
    border-radius: 20px;
    margin-bottom: 1rem;
}

.container2 #annula {
    margin-top: 2em;
    background-color: var(--color-primary-beige-50);
    box-sizing: border-box;
    padding: 0.5em
}

.container2 #affgrat {
    color: #02a1e2;
    font-style: normal;
    cursor: pointer
}

.container2 #affichegrat {
    text-align: left;
    font-style: normal;
    color: #3e3e3e;
}

#blockConseiller .gros {
    font-size: 2.5em;
}

#blockDevis, #presentation, #blockCalendar, #blockDev {
    padding-top: 1em;
    padding-bottom: 1em;
}

.presentation2 {
    padding-top: 0;
    padding-bottom: 0.5em;
    text-align: left;
    float: left;
    width: 75%;
}

.presentation2 a {
    color: var(--color-primary-black);
    text-decoration: none;
}

.presentation2 a:hover {
    text-decoration: underline;
}

#blockConseiller span.svg {
    float: left;
    width: 25%;
    text-align: center;
}

#blockConseiller span.svg2 {
    float: left;
    width: 25%;
    text-align: center;
}

#blockConseiller span.svg img {
    width: 60%;
    height: auto;
    border-radius: 50%;
}

#blockConseiller span.grey, #blockConseiller span.textdev {
    float: left;
    width: 75%;
    text-align: left;
}

#blockConseiller span.grey {
    color: grey;
}

#liste_liens_a_lire a {
    display: block;
    color: black;
    font-weight: bold;
    margin: 0.5em 2% 0.5em 2%;
    text-decoration: none;
}

#liste_liens_a_lire a:hover {

    text-decoration: underline;
}

#reglement_par_cache, #reglement_par_cache2, #reglement_par_cache3 {
    display: none;
}

.labelpaiement .cb {
    width: 35px;
    height: auto;
    padding-left: 5px;
    margin-bottom: -4px;
}

h2.titreligne {
    display: table;
    text-align: center;
    margin-top: 2.5em;
    margin-bottom: 1.5em;
    font-size: var(--font-size-mobile-h3);
}

h2.titrelignessm {
    margin-top: 0em;
}

h2.titreligne:before, h2.titreligne:after {
    content: "";
    display: table-cell;
    width: 50%;
    background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=) repeat-x left center;
}

h2.title {
    color: var(--color-primary-green-400);
    font-size: 1.5em;
}

#detailtexte .mondetail {
    border-top: 1px solid var(--color-primary-beige-300);
    border-left: 1px solid var(--color-primary-beige-300);
    border-right: 1px solid var(--color-primary-beige-300);
}

#detailtexte {
    margin-top: 2em;
    border-bottom: 1px solid var(--color-primary-beige-300);
    box-sizing: border-box;
    margin-bottom: 2em;
}

#detailtexte h2 {
    margin: 0;
    padding: 0.7em 3% 0.7em 3%;
    font-size: 1.2em;
    cursor: pointer;
    width: 100%;
    display: block;
    box-sizing: border-box;
}

#detailtexte h2:hover {
    background-color: var(--color-primary-beige-100);
}

#detailtexte .mondetail .affiche_texte {
    padding: 3%;
}

#detailtexte .mondetail .affiche_texte * {
    font-size: inherit !important;
    font-family: inherit !important;
}

#detailtexte h3 {
    margin: 0.7em 0 0 0;
    text-decoration: underline;
    padding: 0;

}

#phrase {
    margin-bottom: 2em;
    text-align: left;
}

#phrase span {
    text-align: right;
    display: block;
    width: 100%;
    font-style: italic;
}

#titre_forfait {
    width: 100%;
    border-bottom: 3px solid var(--color-primary-black);
    box-sizing: border-box;
    padding: 0.5em 0 0.3em 0;
    margin-bottom: 0.5em;

}

#totaly {
    text-align: right;
    font-size: 1.4em;
    line-height: 1.4em;
    margin-bottom: 2em;
}

.participants select {
    padding: 0.45em 0.3em 0.4em 0.3em;
    background-color: #FFFFFF;
    box-sizing: border-box;
    margin: 0;
    width: 100%;
    margin-bottom: 0.2em;
}

.participants {
    margin-bottom: 2em;
}

.participants span {
    margin-bottom: 0.3em;
    display: block;
    width: 100%;
}

.participants span.chambrete {

    line-height: 1.4em;
    text-align: left;
}

#adr {
    width: 100%;
    min-height: 200px;
}

#affiche_coord {
    display: none;
}

#majcoord {
    float: right;
    padding: 5px 8px 5px 8px;
    color: orange;
    border: 1px solid orange;
    border-radius: 15px;
    text-align: center;
    font-size: 0.9em;
    margin: 1em 0 1em 0;
    cursor: pointer;
}

#majcoord:hover {
    padding: 5px 8px 5px 8px;
    background-color: orange;
    color: white;
    border: 1px solid orange;
    transition: all 0.3s ease;
}

#proposition .forfait {
    float: left;
    width: 80%;
    font-size: 0.95em;
}

#proposition .forfait .text, #proposition .forfait .calc {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .25rem;
}

#proposition .ligne {
    border-bottom: 1px solid #ddd;
    position: relative;
    padding: 0.5em 0 0.5em 0;
}

.moddate {
    text-align: right;
    margin: 1em 0 1em 0;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: .5rem;
}

.moddate input {
    width: 100%;
}

#proposition .tarif {
    width: 20%;
    float: left;
    text-align: right;
    font-size: 1.2em;
    vertical-align: bottom;
    line-height: 1.4em;
}

#proposition .total {
    margin-bottom: 1em;
    position: relative;
    color: black;
}

#proposition .calcultotal {
    width: 20%;
    float: left;
    text-align: right;
    font-size: 1.4em;
    line-height: 2em;
    vertical-align: bottom;
    font-family: var(--font-family-stevie-sans), sans-serif !important;
}

#proposition .texttotal {
    float: left;
    width: 80%;
    font-size: 1em;
    font-weight: bold;
    box-sizing: border-box;
    padding-top: 0.8em;
    font-family: var(--font-family-stevie-sans), sans-serif !important;
}

#boxcontact {
    margin-top: 1rem;
}


#boxcontact input[type=text] {
    width: 100%;
    padding: 2%;
    box-sizing: border-box;
}

#boxcontact textarea {
    width: 100%;
    padding: 2%;
    box-sizing: border-box;
    min-height: 150px;
    margin-bottom: 1em;
}

#finalise {
    margin-top: 1em;
}

#finalise a {
    display: block;
    text-decoration: none
}

#finalise .cgv {
    text-align: center;
    padding: 0.8em 0.5em 0.8em 0.5em;
    width: 100%;
    box-sizing: border-box;
    background-color: #ffffff;
    transition: all 0.3s ease;
    font-size: 1em;
    color: var(--color-primary-black);
    border: 1px solid #ddd;
    margin-top: 0.5em;
}

#finalise .cgv:hover {
    background-color: #ddd;
}

#finalise .cgv span.svg {
    float: left;
    width: 20%;
    text-align: center;
}

#finalise .cgv span.lnk {
    float: left;
    width: 75%;
    text-align: left;
}

#texteassurance {
    display: none;
}

#buttonassurancetr {
    font-weight: bold;
    color: #02a1e2;
}

#buttonassurancetr:hover {
    text-decoration: underline;
    cursor: pointer;

}

.devisperime {
    width: 25%;
    float: right;
    margin-top: 0;
    margin-right: 3%;
    text-align: center;
    padding: 0.8em 0.5em 0.8em 0.5em;
    box-sizing: border-box;
    background-color: #ffffff;
    transition: all 0.3s ease;
    font-size: 1em;
    color: red;
    border: 1px solid red;
}


/* FIN MODULE DEVIS */


/* MODULE PAIEMENT */

.moitie {
    width: 100%;
    font-size: 1em;
    padding: 2%;
}

.moitie p {
    font-size: 1em !important;
}

.moitie input {
    width: 100%;
    margin-top: 5px;
    padding: 8px 6px 8px 6px;
    display: block;
}

.theinfo {
    background-color: #D6EBEA;
}

.moitie select {
    width: 100%;
    padding: 8px 6px 8px 6px;
    margin-top: 5px;
    display: block;
}


.prestataires label {
    display: block;
    width: 100%;
    text-align: left;
    border: 1px solid grey;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 5px;
}

.prestataires label.green {
    background-color: #76d394;
}

.prestataires label.red {
    background-color: #ef9f9f;
}

.prestataires textarea {
    width: 100%;
    height: 180px;
    margin-bottom: 1.5em;
}

.prestataires table td {
    padding: 5px;
    border: 1px solid grey;
}

.prestataires table.laravel td {
    border: 0;
}

.prestataires table.laravel {
    border: 0;
}

.prestataires label {
    width: auto !important;
    border: 0;
/ / display: block !important;
    padding: 0;
}

.prestataires table {
    border: 1px solid grey;
    margin-top: 2em;
}

.etapes_prestataires span {
    border: 4px solid #3C8DBC;
    -moz-border-radius: 45px;
    -webkit-border-radius: 45px;
    border-radius: 45px;
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 1.3em;

}

.etapes_prestataires {
    color: #3C8DBC;

}

.alignright {
    text-align: right;
}

/* Debut style DEMANDE DE  DEVIS */

#form_surmesure {
    font-size: 1.4em;
    margin: 2%;
}

#form_surmesure input,
#form_surmesure select {
    margin-bottom: 1em;
    width: 100%;
    padding: 14px 12px;
}

#form_surmesure input[type=radio] {
    width: 25px !important;
    border: 1px solid #7f7f7f;
    border-radius: 10px;
    background-color: #fff;
    line-height: 24px;
    color: #383632;
    padding: 14px 12px;
    height: initial;
    margin-bottom: 0 !important;
    box-sizing: border-box;
    float: none;
}

#form_surmesure input[type=checkbox] {
    width: 25px !important;
    border: 1px solid #7f7f7f;
    border-radius: 10px;
    background-color: #fff;
    line-height: 24px;
    color: #383632;
    padding: 14px 12px;
    height: initial;
    margin-bottom: 0 !important;
    box-sizing: border-box;
    float: none;
}

#detailtexte .mondetail .affiche_texte * {
    font-size: inherit !important;
    font-family: inherit !important;
}

#form_surmesure label {
    border-radius: 999px;
    padding: 3%;
    width: 100%;
    display: flex;
    align-items: center;
}

#form_surmesure label.checkboxlabel {
    padding: 3% 3% 3% 0;
}

#form_surmesure label.checked {
    background-color: var(--color-primary-beige-50);
    color: var(--color-primary-black);
    font-weight: bold;
}

#form_surmesure .detail, #form_surmesure .detail2, #form_surmesure .detail_label {
    text-align: left !important;
    display: block;
    width: 100%;
    padding: 0.5em;
}

#form_surmesure textarea {
    width: 100%;
    min-height: 180px;
    border: 1px solid #7f7f7f;
    border-radius: 10px;
    background-color: #fff;
    line-height: 24px;
    color: #383632;
    padding: 14px 12px;
    height: initial;
    margin-bottom: 2em;
    box-sizing: border-box;
}

#form_surmesure .submit {
    margin-top: 2em;
    margin-bottom: 1em;
}

/* Fin style DEMANDE DE DEVIS */

/* Ajout style page bon cadeau */

#panneau_cadeau {
    background-color: #f7f5f2;
    padding: 5%;
    line-height: 23px;
    font-size: 1.1em;
}

#panneau_cadeau picture {
    float: left;
    max-width: 160px;
    padding-right: 30px;
}

#panneau_cadeau picture img {
    width: 100%
}

.panneau_untiers {
    width: 100%;
    background-color: var(--color-primary-beige-50);
    color: var(--color-primary-black);
    margin-bottom: 5px;
    box-sizing: border-box;
    padding: 3%;
}

.panneau_demi {
    width: 95%;
    border: 1px solid var(--color-primary-beige-300);
    color: var(--color-primary-black);
    margin: 2.5%;
    box-sizing: border-box;
    padding: 3%;
    line-height: 1.8em;
}

#detailtexte .mondetail .affiche_texte * {
    font-size: inherit !important;
    font-family: inherit !important;
}

#form_surmesure .detail, #form_surmesure .detail2, #form_surmesure .detail_label {
    text-align: left !important;
    display: block;
    width: 100%;
    padding: 0.5em;
}

.detail_montant label {
    display: inline-block !important;
    width: auto !important;
    margin-bottom: 5px;
    padding: 15px !important;
    border: 1px solid #ccc;

}

.detail_montant label.autre {
    background-color: #f2f2f2;
    color: #666666;
}

.detail_montant label.fond_noir {
    background-color: black;
    color: white;
}

.detail_montant input[type="radio"] {
    display: none;
}

/* Fin style page bon cadeau */

/* Style page CGOS */

#cgos-visualize-container {
    display: flex;
    flex-direction: column !important;
    width: 100%;
    gap: 1rem;
}

.cgos-visualize-sub-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 94%;
    margin: .6rem;
}

.card {
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    border-radius: 8px;
}

/* L'image couvre toute la largeur du conteneur avec une hauteur adaptable */

.cgos-visualize-sub-container img {
    width: 100%; /* L'image couvre toute la largeur */
    height: auto; /* Laisse la hauteur s'ajuster automatiquement selon la largeur */
    aspect-ratio: 16/9; /* Maintient un ratio d'aspect pour éviter les déformations */
    object-fit: cover; /* Remplit l'espace tout en coupant l'image si nécessaire pour éviter la distorsion */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* Le corps des cartes prend tout l'espace disponible */

.cgos-visualize-sub-container-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Espace entre le texte et le bouton */
    width: 100%;
    height: 100%; /* Pour que le conteneur occupe tout l'espace vertical */
}

.cgos-visualize-sub-container-header {
    width: 100%;
}

.cgos-visualize-sub-container-body-sub {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: space-between;
    height: 100%;
}

#remind-container {
    display: flex;
    flex-direction: row;
}

#remind-subcontainer {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 3%;
}

.actions-card {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

#box-connexion-subcontainer {
    width: 100%;
}

#logout-container {
    display: flex;
    flex-direction: row;
    justify-content: end;
}

#header-cgos-account-container {
    display: flex;
    flex-direction: column;
    padding: .6rem !important;
    width: 100% !important;
}

#remind-container, #logout-container {
    margin: .6rem;
}

.global-cgos-coontainer {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
}

#devis-viacompo-button {
    background: #ffffff !important;
    color: #9D8452 !important;
    border: 1px solid #9D8452 !important;
    padding: 0.675rem 1.5rem !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

#devis-viacompo-button:hover {
    background: #9D8452 !important;
    color: white !important;
    padding: 0.675rem 1.5rem !important;
    text-decoration: none !important;
    border-radius: 4px !important;
}

#viacompo-box {
    color: #000000;
}

.untiers {
    width: 100%;
}

.deuxtiers {
    width: 100%;
}

.container2 .c50_cent {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 0.1em;
    margin-bottom: 1em;
    padding-right: 1rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.container2 .c50_cent.bedroom-text-container {
    flex-direction: column !important;
    justify-content: flex-start;
    align-items: flex-start;
}

.container2 .c50_cent.bedroom-text-container .libelle_add {
    text-align: left !important;
    width: 100% !important;
}

*, ::before, ::after {
    box-sizing: inherit;
}

#boxcontact input[type="submit"],
.container2 .submit2 {
    width: 100%;
    padding: 8px 18px;
    border-radius: 100px;
    background-color: var(--color-primary-yellow-400) !important;
    border: none;
    color: var(--color-primary-black);
}

#finalise input[type="submit"] {
    width: 100%;
    margin-bottom: .75rem;
}

.participants span, .participants select, .participants input[type=text], .participants input[type=date], .participants input[type=email] {
    width: 100%;
    float: left;
    display: block;
    margin-right: 1.5%;
    margin-top: 0.5em;
}

.infos_persos select, .infos_persos input[type=text] {
    width: 100%;
    --dynamic-width: 100%;
    margin-top: .5rem;
}

#testboncadeau h3 {
    font-size: var(--font-size-desktop-h2);
}

#module_connexion .blocpswd {
    width: 100%;
    position: relative;
    margin: 1rem 0 0;
}

#module_connexion .blocpswd input[type="password"] {
    padding-right: 2.5rem;
}

#module_connexion .blocpswd #togglePassword,
#module_connexion .blocpswd #togglePassword2 {
    position: absolute;
    right: 0.75rem; /* au lieu de 5% (plus fiable) */
    top: 50%;
    transform: translateY(-50%);
    color: grey;
    line-height: 1; /* évite les décalages avec l’icône */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.25rem; /* optionnel, pour cliquer facilement */
    width: 1.25rem; /* optionnel */
    cursor: pointer;
}

#box_connexion h1 {
    text-align: center;
    width: 100%;
}

#container3 #module_connexion #complement_login {
    text-align: right;
    margin: 1.6em 0;
}

#container3 #module_connexion #complement_login a {
    color: var(--color-primary-black);
    font-size: var(--font-size-link-1);
    font-weight: var(--font-weight-basic);
}

#container3 #module_connexion input[type="submit"] {
    margin-top: 1.6em;
}

.block {
    display: block;
}

#regles_validite {
    margin-top: 1em;
    font-size: 0.9em;
    box-sizing: border-box;
    padding: 2rem;
    border-radius: 40px;
    background-color: var(--color-primary-beige-100);
    color: var(--color-primary-black);
}

#container3 #module_connexion #actionconfid {
    margin: 0.5em 0 1em 0;
    color: var(--color-primary-black);
    text-decoration: underline;
    cursor: pointer;
}

#monmenu_c {
    width: 100%;
    border: 1px solid #CCCCCC;
    background-color: #ffffff;
    box-sizing: border-box;
    padding: 5%;
    font-size: 0.95em;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

#listing_c a {
    width: 100%;
    display: block;
    border: 1px solid #CCCCCC;
    background-color: #ffffff;
    border-top: 0;
    box-sizing: border-box;
    padding: 5%;
    font-size: 0.95em;
    text-decoration: none;
    color: black;
}

#listing_c a.deconnecte {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

#listing_c a:hover {
    font-weight: bold;
}

#listing_c a.deconnecte {
    color: red;
}

#accueil h1 {
    margin: 0;
}

#accueil h3 {
    margin-top: 0;
}

#container3 #encart_principal {
    padding: 0%;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.3s ease;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--color-primary-beige-100);
    border-radius: 20px;
}

.typeliberte {
    color: var(--color-primary-white);
    border-radius: 100px;
    padding: 10px 18px 10px 18px;
    background-color: var(--color-primary-orange-400);
    /*display: block;*/
    display: none !important;
    margin-bottom: 1rem; /* optionnel pour un léger espace */
    text-align: center;
}

#encart_principal .deuxtiers h2 {
    text-align: center;
    margin-top: 0;
}

#encart_principal .bouton_voyage {
    margin-top: 1rem;
    display: block;
}

#encart_principal .encart_principal_content {
    text-align: center;
    padding: 15px !important;
}

#container3 .encart_secondaire {

    transition: all 0.3s ease;
    margin-bottom: 24px;
    background-color: var(--color-primary-beige-100);
    border-radius: 20px;
    text-align: center;
    padding: 15px !important;
}

#container3 #modification_livraison {
    display: none;

}

#ariane {
    margin-bottom: 1rem;
}

#ariane a {
    color: var(--color-primary-black);
}

#monadresse select,
#monadresse input {
    display: inline !important;
    width: 100%;
    margin-bottom: 5px;
}

#monadresse {
    text-align: left;
}

.formulaireinfospersonnelles {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.quotation-request {
    background-color: var(--color-primary-beige-100) !important;
}

#mnimen {
    width: 100%;
    position: relative;
    margin-top: -45px;
    z-index: 999;
    display: block;
    background-color: #FFFFFF;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 2em;
}

#mnimen a {
    text-decoration: none;
    padding: 12px;
    padding-left: 35px;
    display: block;
    font-weight: bold;
    font-size: 1.2em;
}

#mnimen a:hover {
    text-decoration: underline;
    cursor: pointer;
}

.chamina #mnimen a {
    color: var(--color-primary-black);
    font-family: 'grotesque', sans-serif;
}

#mnimen a i {
    margin-right: 10px;
}

#container3 .fond_encart {
    padding: 2em !important;
    margin-bottom: 2em;
}

#container3 #resume .fond_encart {
    width: 100% !important;
}

#container3 .resume-quotation {
    width: 100% !important;
}

.chamina .fond_encart {
    border-radius: 40px;
    background-color: var(--color-primary-beige-100);
}

#container3 #recapdone {
    border: 0 !important;
    margin-top: 0;
}

#container3 #recapdone, #container3 #recapdone td {
    border: 0;
}

#container3 #recapdone td.one {
    text-align: right;
}

.chamina a.lien {
    color: #b7a03c;
    background-color: #f9f6e8;
}

#container3 a.lien {
    transition: all 0.3s ease;
    border-radius: 5px;
    padding: 4px 8px 4px 8px;
    display: inline-block;
    font-weight: bold;
    text-decoration: none;
}

#carnet h3,
.monconseiller h3 {
    margin-top: 0;
    text-align: start;
}

#container3 .encadre_gpx a, #container3 .encadre_pdf a {
    border: 1px solid var(--color-primary-beige-300);
    border-radius: 5px;
    width: 100%;
    text-align: left;
    color: var(--color-primary-black);
    text-decoration: none;
    display: block;
    box-sizing: border-box;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 0.9em;
    font-weight: bold;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

#container3 .encadre_gpx a:hover, #container3 .encadre_pdf a:hover, #container3 .encadre_pdf a.select, #container3 .encadre_gpx a.select {
    background-color: var(--color-primary-beige-300);;
    color: var(--color-primary-white);;
}

#messagerie .deuxtiers {
    padding-right: 0 !important;
}

#messagerie .alignright {
    padding-left: 0 !important;
}

.reglementation-container {
    width: 100% !important;
}

#menu_c #listing_c {
    display: none;
}

#container form input[type='text'],
#container form input[type='password'],
#container .specialparticipant input {
    margin-top: 0.2em;
    margin-bottom: 0.7em;
}

#pack {
    width: 100%;
}

#four_etapes {
    display: flex;
    flex-direction: column;
}

#affiche_train center a {
    color: var(--color-primary-black) !important;
}

div.nb_f.nb_f_4 input[name="total"] {
    margin-top: 0 !important;
    margin-right: 0 !important;
    font-weight: normal !important;
}

.container2 #proposition {
    background-color: var(--color-primary-beige-100) !important;
    padding: 1rem;
    border-radius: 20px;
    margin-bottom: 1rem;
}

#intro_sans_image h1 {
    font-size: 2em !important;
}

#proposition h2 {
    font-size: 1.2em;
}

.bi-title {
    color: var(--color-primary-green-400);
    text-align: start;
    font-family: var(--font-family-stevie-sans), serif !important;
}

/* Media queries for middle screen */
@media screen and (min-width: 640px) {

    *, ::before, ::after {
        box-sizing: border-box;
    }

    .c-row {
        flex-direction: row;
    }

    h2.titreligne {
        white-space: nowrap;
    }

    .container2 .c50_cent.bedroom-text-container {
        width: 46% !important;
    }

    .container2 .libelle_option {
        padding-left: 2.7027027%;
        padding-right: 2.7027027%;
    }

    .container2 div#gestion_option .nb_f.nb_f_1 select {
        margin-right: 0;
    }

    .container2 div#gestion_option .nb_f.nb_f_1 {
        margin-left: 0;
    }

    #four_etapes {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-bottom: 1rem;
    }

    #four_etapes div:not(.carre, #carre_en_cours) {
        display: none;
    }

    #special_supplement .warning {
        margin: 0 2.7027027%;
        width: auto !important;
    }

    #recapitulatif .input {
        display: inline;
    }

    #menu_c #listing_c {
        display: block;
    }

    #container a.button_contact, .container2 a.button_contact {
        width: 25%;
    }

    .untiers {
        width: 33.33332% !important;
        float: left;
        padding: 2%;
    }

    .deuxtiers {
        width: 66.33332% !important;
        float: left;
    }

    #container3 #resume .fond_encart,
    #container3 #messagerie .fond_encart,
    #container3 .dossier .untiers {
        width: 40% !important;
    }

    #container3 .resume-quotation,
    #container3 #messagerie .deuxtiers,
    #container3 .dossier .deuxtiers {
        width: 60% !important;
    }

    #mnimen a {
        display: inline-block;
    }

    #mnimen {
        margin-bottom: 6em;
    }

    #ariane {
        margin-top: 0;
    }

    #monadresse select,
    #monadresse input {
        display: inline;
        width: 45%;
        margin-bottom: 5px;
    }

    #monadresse {
        text-align: right;
    }

    #encart_principal .encart_principal_content {
        text-align: left;
    }

    #encart_principal .deuxtiers h2 {
        text-align: left;
    }

    .typeliberte {
        display: inline;
        margin-bottom: 0; /* on annule l'espace si besoin */
    }

    #container3 #encart_principal {
        flex-direction: row;
    }

    #container3 .bouton_voyage {
        float: right;
        margin-top: -1.5em;
    }

    #menu_c {
        float: left;
        width: 20%;
        max-width: 240px;
    }

    #regles_validite {
        margin-top: 0;
    }


    #module_connexion #regles_validite {
        float: left;
        width: 49%;
    }

    #module_connexion #connect_create {
        float: left;
        width: 49%;
        margin-right: 2%;
    }

    .header .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #container3 #module_connexion #mode_connect {
        max-width: 450px;
        margin: auto;
    }

    .box-connexion-container {
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 80%;
    }

    #box_connexion {
        width: 100%;
        margin: auto;
        max-width: 880px;
    }

    .infos_persos select, .infos_persos input[type=text] {
        margin-top: 0;
    }

    .container2 .infos_persos .input[name='add2'],
    .container2 .infos_persos .input[name='add3'],
    .container2 .infos_persos .input[name='add4'] {
        margin-top: .5rem;
    }

    .container2 .infos_persos .input {
        display: unset;
    }

    h2.titreligne {
        font-size: var(--font-size-mobile-h2);
    }

    .moddate {
        flex-direction: row;
        justify-content: end;
        align-items: center;
    }

    .moddate input {
        width: 30%;
    }

    #boxcontact input[type="submit"],
    #finalise input[type="submit"],
    .container2 .submit2 {
        width: 32%;
        float: right;
        text-align: center;
    }

    #headerWS {
        min-height: auto;
        padding: 0;
    }

    #preHeaderWS {
        width: 100%;
        background-color: var(--color-primary-black);
        border-bottom: 1px solid var(--color-primary-black);
        box-sizing: border-box;
        font-size: 0.625em;
        font-family: 'grotesque', sans-serif;
    }

    #preHeaderWS span {
        color: var(--color-primary-white);
        font-size: 1.6em;
        letter-spacing: 0.5px;
        padding: 0.6%;
        padding-left: 2em;
        float: left;
        display: block;
        text-decoration: none;
    }

    #numberphone {
        float: right;
        padding: 0.5%;
        padding-right: 20px;
        display: block;
    }

    #preHeaderWS a.tel {
        width: 100%;
        color: var(--color-primary-white);
        font-size: 2em;
        letter-spacing: 0.5px;
        text-decoration: none;
    }

    #preHeaderWS a.tel:hover, #retourSite:hover {
        color: #ccb964;
    }

    #retourSite {
        display: block;
        float: right;
        padding-right: 40px;
        color: var(--color-primary-white);
        text-transform: uppercase;
        font-family: 'grotesque', sans-serif;
        text-decoration: none;
        transition: all 0.3s ease;
        vertical-align: bottom;
        padding-top: 55px;
    }

    #container {
        padding: 1.5%;
    }

    .docjointe {
        width: 40%;
        float: right;
        border: 1px solid #D8E5EE;
        border-left: 0.5em solid #D8E5EE;
        color: #024351 !important;

    }

    .docjointe span {

        color: #024351 !important;

    }

    .special_mobile {
        display: none;
    }


    #container .intitule_form {
        display: block;
    }

    /* BI ACC */
    #carre_en_cours {
        display: block;
        float: left;
        font-size: 0.85em;
        width: 24%;
        padding-right: 0;
        height: auto;
        line-height: auto;
        min-height: 35px;
    }

    .carre {
        display: block;
        float: left;
        background-color: var(--color-primary-green-200);
        font-size: 0.9em;
        color: var(--color-primary-black);
        width: 24%;
        text-align: center;
        box-sizing: border-box;
        padding-right: 0;
        line-height: 34px;
        height: auto;
        min-height: 35px;
        line-height: auto;
        font-family: var(--font-family-stevie-sans), sans-serif;
        font-weight: var(--font-weight-basic);
        text-transform: uppercase;
    }

    .carre a {
        color: var(--color-primary-black);
        text-decoration: none;
    }


    #resumer {
        display: block;
        width: 100%;
        background-color: var(--color-primary-white);
        margin-bottom: 2em;
    }

    #titre_resumer {
        width: 100%;
        display: block;
        background-color: var(--color-primary-beige-100);
        color: var(--color-primary-black);
        transition: all 0.3s ease;
        font-size: 1.3em;
        font-family: var(--font-family-stevie-sans), sans-serif;
        min-height: 2em;
        text-decoration: none;
        box-sizing: border-box;
        padding: 2%;
        cursor: pointer;
    }

    #titre_resumer:hover {
        color: var(--color-orange-300);
    }

    #resumer .libelle_gauche {
        float: left;
    }

    #resumer .libelle_droite {
        float: right;
        text-align: right;
    }

    #resumer .libelle_droite span {
        font-size: 0.8em;
    }

    #resumer #value_resumer {
        text-align: right;
        width: 100%;
        background-color: var(--color-primary-beige-100);
        margin-top: 1px;
        box-sizing: border-box;
        padding: 0.7em 0.5% 0.5% 0.5%;
        font-size: 1em;
        line-height: 1.4em;
        font-weight: 600;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
    }

    #resumer #value_resumer span {
        font-size: 0.7em;
    }

    #resumer #value_resumer #acompte {
        display: block;
        width: 100%;
        font-weight: normal;
    }

    .container2 .carte_abo {
        display: block;
        width: auto;
        box-sizing: border-box;
        padding: 0.5em;
    }

    .container2 .carte_abo div.textea {
        text-align: right;
        padding-right: 1em;
    }

    .container2 .carte_abo textarea {
        width: 94%;
    }

    .container2 #cp1 select {
        margin: 0;
    }

    .container2 .submit4 {
        width: 60%;
        margin-left: 20%;
        float: none;

    }

    .container2 #desinscription input[type=text], .container2 #desinscription input[type=submit] {
        max-width: 250px;
        margin-right: 20px;
    }

    .container2 .kit_campaign_gauche {
        float: left;
        width: 65%;
        margin-right: 5%;
    }

    .container2 .kit_campaign_droite {

        float: left;
        width: 30%;
        margin-top: 0;
    }

    #contenu_resumer h3 {
        display: block;
        width: 100%;
        color: var(--color-primary-black);
        box-sizing: border-box;
        font-size: 1.4em;
        font-weight: bold;
        font-weight: normal;
        text-transform: normal;
        margin: 0.5em 0 0.5em 0;
    }

    #pave_voyage {
        width: 32.1425%;
        display: inline-block;
        background-color: white;
        color: black;
        box-sizing: border-box;
        margin-top: 0;
        margin-bottom: 0;
        padding: 1em;
        padding-left: 1.6666667%;
        vertical-align: top;
        border-radius: 0 20px 20px 0;

        border-left: 1px solid var(--color-primary-beige-50);
    }

    .renseignements_persos {
        width: 32.1425%;
        display: inline-block;
        background-color: white;
        color: black;
        box-sizing: border-box;
        margin-top: 0;
        margin-bottom: 0;
        padding: 1em;
        padding-left: 1.6666667%;
        vertical-align: top;
        border-radius: 0 20px 20px 0;
        border-left: 1px solid var(--color-primary-beige-50);
    }

    #contenu_resumer {
        font-size: 0.9em;
    }

    #contenu_resumer .essai_tran {
        box-sizing: border-box;
        width: 97%;
        margin-bottom: 0.1em;
        font-weight: normal;
        text-transform: normal;
        border-bottom: 1px solid #6f747e;
        line-height: 1.8em;
        margin: 0.35em 1.5% 0 1.5%;
    }

    .container2 #cp3 select {
        margin: 0.3em 0 0 0;
    }

    .container2 .libelle_option {
        padding-bottom: 0.2em;
    }

    #contenu_resumer .essai_trangris {
        border-bottom: 1px solid #CCCCCC;
    }

    .ensemble_resumer {
        width: 67.8571429%;
        display: inline-block;
        color: black;
        box-sizing: border-box;
        margin-left: 1.7857143%;
        background-color: var(--color-primary-beige-50);
        margin-top: 0;
        margin-bottom: 0;
        margin-left: 0;
        padding: 1em;
        min-height: 250px;
    }

    #typechambre1 {
        margin-top: 2.2em !important;
        margin-left: 5% !important;
        width: 92.7% !important;
    }

    .container2 #cp3 .ter_libelle {

        font-size: 0.9rem;
    }

    .container2 .titreh3 {
        margin-left: 2%;
        display: block;
        width: 98%;
        box-sizing: border-box;
        padding-left: 5%;
    }

    #insc_news {
        margin-top: 2.4em;
        margin-left: 4%;
        width: 96%;
        display: block;
    }

    /* FIN BI ACC */
    .intro_dossier p.intro_texte {
        float: left;
        width: 50%;
        padding-right: 20px;
        box-sizing: border-box;
    }

    .intro_dossier #fmon-form {
        width: 50%;
        float: left;
        background-color: #D2EBEA;
        padding: 2.5em;
        box-sizing: border-box;
    }

    #boite_brochure input[type='text'] {
        margin-top: 0;
        margin-bottom: 0;
    }

    #boite_brochure select {
        margin-top: 0;
        margin-bottom: 0.7em;
    }

    #boite_brochure input[type='submit'] {
        max-width: 400px;
        margin-bottom: 0.7em;
    }

    #formulaire_brochure {
        max-width: 1100px;
    }

    #fmon-form .intitule_form {
        font-family: 'grotesque', sans-serif;
        text-transform: uppercase;
        color: var(--color-primary-black);
        font-weight: bold;
        font-size: 2em;
        text-align: left;
        margin-bottom: 0em;
        padding: 0;
    }

    .margin_auto {
        width: 80%;
    }

    .margin_auto .c-picto {
        display: -ms-flexbox;
        display: flex;
    }

    .message_int_info .user_publiee {
        display: inline;
        width: 45%;
    }

    .encadre_bleu a {
        margin-left: 2em;
    }

    .message_int_info .date_publiee span {
        display: inline;
    }

    .message_int_info .date_publiee {
        float: right;
        width: 45%;
        text-align: right;
        color: grey;
        line-height: 30px;
        display: inline;
        font-size: 0.9em;
    }

    .listingmess strong {
        display: block;
        color: #61b1b2;
        font-family: "grotesque";
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: .4px;
        margin-top: 10px;
        margin-bottom: 3px;
    }

    .listingmess .lm1, .listingmess .lm3 {
        font-weight: 400;
    }

    .listingmess .lm2 div.astrong {
        margin-top: 0em;
        margin-bottom: 0.3em;
        font-size: 1.2em;
    }

    .listingmess .lm2 {
        padding-top: 0.5em;
    }

    #container table.paiement, div.dossier a.paiementenligne {
        max-width: 450px;
    }

    #container .special_integration {
        width: 62%;
        float: left;
        margin-top: 1em;
    }

    #container .all_special_integration {
        width: 36%;
        float: left;
        display: block;
    }

    #container h1.dossier2 span {
        font-size: 0.8em;
        color: #CCB964;
        line-height: 1.2em;
        display: block;
    }

    #boite_brochure .libelle_brochure {
        display: block;
        float: left;
        text-transform: uppercase;
        width: 46%;
        font-size: 0.85rem;
        text-align: RIGHT;
        font-weight: 600;
        height: 2.4rem;
        line-height: 2.4rem;
        padding-right: 1%;
        box-sizing: border-box;
        margin-bottom: 0.5em;
    }

    #boite_brochure input[type="text"], #boite_brochure select {
        display: block;
        float: left;
        width: 46%;
    }


    .votredossiervoyage {
        float: left;
        width: 29%;
    }

    .votredossierinscription {
        float: left;
        width: 65%;
    }

    .contactconseiller {
        float: left;
        width: 29%;
        margin: 4.5em 3%;
    }

    .formulaireconseiller {
        float: left;
        width: 59%;
        margin: 0 3% 2em 3%

    }


    #footer-insc {
        padding-bottom: 0;
    }

    #footer-insc #lgo {
        padding-top: 0;
        padding-bottom: 0;
    }

    #footer-insc .logo {
        max-width: 215px;
    }

    #liste_de_liens {
        padding: 0.8%;
        max-width: 1100px;
        margin: auto;
    }


    #footer-insc #logo_footer img {
        max-width: none;
    }

    #footer-insc #liste_de_liens {
        text-align: center;
    }

    #first_element {
        max-width: 1100px;
        margin: auto;
    }


    #footer-insc #logo_footer {
        width: auto;
    }

    #footer-insc #inside {
        width: auto;
    }


    .macolonne {
        flex: 0 0 33.33333%;
        max-width: 33.33333%;
    }

    /* MODULE DEVIS */
    .container2 #blockConseiller, .container2 #phrase {
        float: left;
        width: 27%;
    }

    .container2 #detailtexte, .container2 #proposition {
        float: left;
        width: 71%;
        margin-left: 2%;
        margin-top: 0;
    }

    .container2 #phrase {
        margin-top: 2em;
        font-size: 0.95em;
        padding-right: 2%;
        box-sizing: border-box;

    }

    #blockConseiller span.svg {
        min-height: 60px;
    }

    #finalise .cgv {
        width: 25%;
        float: right;
        margin-top: 0;
        margin-right: 3%;
    }

    #boxcontact textarea {
        width: 100%;
        padding: 0.5em 1% 0.5em 1%;
        box-sizing: border-box;
        min-height: 150px;
        margin-bottom: 1em;
    }

    #rappelcontact {
        float: left;
        width: 27%;
    }

    #boxcontact {
        float: left;
        width: 71%;
        margin-left: 2%;
        margin-top: 0;
    }

    .infos_persos {
        text-align: right;
    }

    .infos_persos select, .infos_persos input[type=text] {
        width: 32%;
        --dynamic-width: 65%;
    }

    .infos_persos input[type=text].add {
        width: 65%;

    }

    .participants span, .participants select, .participants input[type=text], .participants input[type=date], .participants input[type=email] {
        width: 23%;
    }

    .participants input[type=email] {
        width: 47.5%;
        float: left;
        display: block;
        margin-right: 1.5%;
    }

    .participants {
        clear: both;
    }

    .participants span {
        line-height: 2.5em;
        vertical-align: center;
    }

    .moitie {
        width: 50%;
        float: left;
    }

    .prestataires label {
        display: inline-block;
        width: 48%;
        margin-right: 1%;
    }

    #container3 .specialpcdecale {
        margin-top: 105px;

    }

    table.tablechamina {
        width: 100%;
    }

    #specialsansfiltre {
        margin-top: 0;
    }

    /* Debut style DEMANDE DE DEVIS */
    #form_surmesure .detail, #form_surmesure .detail_label, #form_surmesure input {
        float: left;
    }

    #form_surmesure .detail {
        width: 48% !important;
    }

    #form_surmesure .detail_label {
        width: 50% !important;
        float: left;
    }

    #form_surmesure .detail2 {
        margin-top: 2em;
        display: block;
    }

    #form_surmesure input, #form_surmesure select {
        float: left;
        width: 52%;
    }

    #form_surmesure .submit {
        margin-left: 25% !important;
    }

    #form_surmesure i {
        display: block;
        width: 100%;
        text-align: center;
    }


    /* Fin style DEMANDE DE DEVIS */
    /* Ajout style page bon cadeau */
    #panneau_cadeau picture {
        float: left;
        max-width: 275px;
        padding-right: 30px;
    }

    .panneau_untiers {
        float: left;
        width: 32%;
        margin: 1%;
        min-height: 180px;
    }

    .premier {
        margin-left: 0;
        margin-right: 1%;
    }

    .dernier {
        margin-right: 0;
        margin-left: 1%;
    }

    #form_surmesure .detail {
        width: 48%;
        text-align: right !important;
    }

    .panneau_demi {
        float: left;
        width: 49%;
        margin: 1%;
        min-height: 220px;
    }

    .first {
        margin-left: 0;
        margin-right: 1%;
    }

    .second {
        margin-right: 0;
        margin-left: 1%;
    }

    /* Fin style page bon cadeau */
    /* Style page CGOS */
    #cgos-visualize-container {
        display: flex;
        flex-direction: row !important;
        width: 100%;
        gap: 1rem;
        justify-content: center;
    }

    .cgos-visualize-sub-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0;
        box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    }

    /* Fixe la hauteur des images pour qu'elles aient la même taille */
    .cgos-visualize-sub-container img {
        width: 100%;
        height: 200px; /* Fixer une hauteur égale pour toutes les images */
        object-fit: cover; /* Ajuste l'image pour qu'elle remplisse l'espace sans distorsion */
    }

    /* Assurer que le corps des cartes prend tout l'espace disponible */
    .cgos-visualize-sub-container-body {
        display: flex;
        flex-direction: column;
        justify-content: space-between; /* Espace entre le texte et le bouton */
        width: 100%;
        height: 100%; /* Pour que le conteneur occupe tout l'espace vertical */
    }

    .box-connexion-container {
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 80%;
    }

    .box-connected-container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        width: 73% !important;
        margin: 0;
    }

    #header-cgos-account-container {
        width: 50%;
        padding: 0 !important;
    }

    #remind-container, #logout-container {
        margin: 0 !important;
    }

    /* Fin style page CGOS */
    #centerwebsite {
        width: 100%;
        position: relative;
        background-color: var(--color-primary-black);
        height: auto;
    }

    #TopBar {
        position: relative;
        margin: auto;
        padding: auto;
        width: 100%;
        z-index: 300;
        height: auto;
    }

    #centerwebsite img {
        width: 50%;
        height: auto;
        max-width: 180px;
    }

    #container h1 span {
    }

    #votrevoyage {
        margin-bottom: 50px;
    }

    .masuite h3 {
        text-align: center;
    }

    .masuite2 {
        text-align: center !important;
    }

    .masuite label h3 {
        text-align: left;
    }

    .masuite2 .submit3 {
        width: 50%;
        margin-top: var(--spacing-xl-em) !important;
    }

    #divfor1, #divfor2, #divfor3, #divfor4, #divfor5, #divfor6, #divfor7, #divfor8, #divtotal {

    }

    div.centragelabelfinal {
        text-align: left;
        width: 70%;
        margin-left: 20%;
    }

    #divfor4 select {
        width: 50%;
        font-size: 1em;
    }

    div.alignright div {
        text-align: left;
    }

    div.alignright div h3 {
        text-align: left;
    }

    div.alignright div span {
        display: inline;
        text-align: left;
        margin-left: 6px;
    }

    input.submitfinal {
        width: 260px;
    }

    .contenu_infos_persos #bloc_email label {
        font-size: 1.1em;
    }


    .calendrierperso {
        width: 31.3333%;
        height: auto;
        margin: 1% !important;
        font-size: 1em;
        display: inline-block;
    }

    .calendrierperso .cliquable {

    }

    div.reinitialise {
        box-sizing: border-box;
        text-align: right;
        padding-right: 2.3333333%;
    }


    /*
     *  PAGE 2 INFORMATIONS
     *
     * */
    #recapitulatif {
        width: 93.333333332%;
        margin: 3em 3.3333333% 2em 3.3333333%;
    }

    #recapitulatif_cache {
        background-color: var(--site__background--lightest);
    }


    #resume_liberte {
        width: 32.1428571%;
        display: inline-block;
        font-size: 1.4em;
        color: black;
        box-sizing: border-box;
        margin-top: 0;
        margin-bottom: 0;
        padding: var(--spacing-md-em);
        padding-left: 1.6666667%;
        vertical-align: top;
        text-align: left;
        border-radius: 0 20px 20px 0;
        border-left: 1px solid var(--site__background--lightest);
    }

    #resume_liberte h2 {
        margin-top: 0;
    }

    #resume_liberte div.essai_ajout {
        margin-top: 0;
    }

    #ensemble_resume {
        width: 67.8571429%;
        display: inline-block;
        color: black;
        box-sizing: border-box;
        margin-left: 1.7857143%;
        background-color: var(--site__background--lightest);
        margin-top: 0;
        margin-bottom: 0;
        margin-left: 0;
        padding: var(--spacing-md-em);
        min-height: 250px;
    }

    #ensemble_resume h2 {
        display: block;
        width: 99%;
        padding: 0.2em 0 0.5em 0;
        padding-left: 0.7857143%;
        background-color: var(--site__background--lightest);
        margin: 0;
    }

    div.resume_global {
        border-bottom: 1px solid var(--site__border--light);
    }

    div.resume_global_sstotal {
        text-align: right;
        background-color: var(--site__background--lightest);
    }


    div.resume_global_total {
        text-align: right;
    }

    div.detailinscription span, div.detailinscription_perso span {
        font-size: 0.75em;
        display: inline;
    }

    #sauvegarde .centragemail {
        box-sizing: border-box;
        margin-right: 31%;
        width: 69%;
        margin-top: 1.3em;
    }

    #sauvegarde form {
        padding-top: 0;
    }

    div.centragelabel {
        color: var(--color-primary-grey-300);
        width: 77%;
        text-align: left;
        display: block;
        clear: both;
        margin-left: 23%;
        padding-top: 0;
        padding-bottom: 0;
    }

    div.centragelabel input {
        text-align: left;
        margin-left: 0;
        margin-top: var(--spacing-sm-em);
    }

    #texteemail {
        width: 50%;
        float: left;
        padding: var(--spacing-sm-em);
        box-sizing: border-box;
        margin: 0 0 0 0;
        text-align: right;
        display: block;
        font-weight: bold;
    }

    #inputemail {
        width: 50%;
        float: left;
    }


    #submitemail {
        margin-left: 31%;
        width: 38%;
        float: none;
        margin-top: 1.5em;
    }

    #submitemail input, #inputemail input {
        width: 100%;
        margin: 0;
    }


    #bloc_nom_email {
        width: 38%;
        padding-left: 2%;
        text-align: center;
        float: left;
        text-align: right;
        box-sizing: border-box;
    }

    #bloc_nom_email, #bloc_nom, #bloc_add, #bloc_email, #bloc_tel {
        margin-left: 0;
    }

    #bloc_add {
        width: 62%;
        float: left;
        text-align: right;
        padding-right: 2%;
        box-sizing: border-box;
    }


    #bloc_nom_email select, #bloc_nom_email input[type="text"], #newsletterinsc {
        display: block;
        width: 90%;
    }

    #newsletterinsc {
        padding: var(--spacing-sm-em);
        margin-top: 0;
    }

    #newsletterinsc i {
        font-size: 0.8em;
    }

    #bloc_add select, #bloc_add input[type="text"] {
        display: block;
        width: 90%;
        margin-left: 10%;
    }

    #bloc_email {
        margin-top: var(--spacing-xl-em);
    }

    .contenu_infos_persos {
        width: 100%;
    }

    .bloc_participant {
        padding: 3%;
        width: 47%;
        margin: 1.5%;
        float: left;
        min-height: 310px;
        background-color: var(--site__background--participant-block);
    }


    div.supplement_area {
        display: block;
        width: 50%;
        float: left;
        padding-left: 2.7027027%;
        padding-right: 2.7027027%;
        padding-bottom: var(--spacing-xl-em);
    }

    div.saautredemande {
        clear: both;
        width: 100%;
    }

    textarea {
        border: 1px solid #D1D2C2;
        box-sizing: border-box;
        padding: var(--spacing-sm-em);
    }

    div.saautredemande textarea.autredemande {
        min-height: 100px;
        width: 100%;
        max-width: 100%;
    }

    div.supplement_area textarea {
        width: 100%;
        max-width: 100%;
    }

    #affiche_avion {
        height: auto;
    }

    #supplement_transport div.information, #supplement_transport div.agauche {
        width: 100%;
        display: block;
        float: left;
        margin: 0;
        padding-top: var(--spacing-xl-em);
        box-sizing: border-box;
    }

    #supplement_transport div.information {
        margin-top: 2.7%;
    }

    #intro_transport, #select_transport {
        width: 50%;
        float: left;
    }

    #intro_transport {
        text-align: right;
        box-sizing: border-box;
        padding-right: 2.7%;
        padding-top: 0.3em;
    }

    #intro_transport span {
        display: block;
        width: 100%;
        font-style: italic;
        color: #888;
    }

    #affiche_train {

    }

    /*# SPECIAL DEVIS GROUPES */
    .formulaireGRP input[type="text"] {
        display: inline-block;
        width: 49%;
        margin-right: 1%;
        box-sizing: border-box;
    }

    .formulaireGRP textarea {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0;
        clear: both;
    }

    div.resume_sstotal {
        text-align: right;
    }


    /* PAGE 3 recapitulatif RESPONSABLE ET UTILISATEUR*/
    #mode_responsable, #mode_participants {
        width: 50%;
        float: left;
        padding-left: 2%;
        padding-right: 2%;

    }

    #transport {
        padding: 2%;
        clear: both;
    }


    /* MES DEVIS */
    div.recape-devis, div.recape-liens {
        float: left;
        width: 50%;
    }

    #lien-voir-mes-devis {
        display: block;
        position: absolute;
        top: 0;
        right: 3%;
        box-sizing: border-box;
        padding: var(--spacing-sm-em) 2em var(--spacing-sm-em) 2em;
        background-color: var(--color-primary-black);
        font-size: 0.80em;
    }

    #lien-voir-mes-devis a {
        color: var(--color-primary-white);
        text-decoration: none;
        font-weight: bold;
    }


    .popup_block .portec1, .popup_block .portec2 {
        display: inline-block;
        width: 40%;
        vertical-align: top;
        line-height: 1.7em;
        padding: 3%;
    }

    .popup_block .portec2 {
        width: 50%;
        text-align: center;
        padding: 0;
    }

    .popup_block .portec2 img {
        width: 100%;
        max-width: 440px;
        height: auto;
        margin: auto;
        padding: auto;
    }

    .popup_block .monbento1 {
        display: inline-block;
        width: 67%;
        vertical-align: middle;

        line-height: 1.7em;
        padding: 5%;
        box-sizing: border-box;
    }

    .popup_block .monbento2 {
        display: inline-block;
        width: 25%;
        text-align: center;
        padding: 0;
        vertical-align: middle;

        height: auto;
    }

    .popup_block .portec2 img {
        width: 100%;
        max-width: 440px;
        height: auto;
        margin: auto;
        padding: auto;
    }


    #affiche_enchainement select {
        width: 50%;
    }

    #valide_formulaire {
        overflow: hidden;
        padding: 1rem 2.7027027% 0 2.7027027%;
        display: block;
    }

    #valide_formulaire .submit2 {
        width: 40% !important;
    }

    #valide_formulaire .info {
        width: 40%;
    }

    #valide_formulaire .submitprecedent {
        width: 40% !important;
    }

    .container2 .c50_cent {
        width: 47%;
        float: left;
        margin-bottom: 0.2em;
        margin-top: 0.1em;
    }

    .container2 .c50_cent_right {
        width: 50% !important;
    }
}

/* Large devices (desktops, 1024px and up) */
@media screen and (min-width: 1024px) {

    .mobile-menu__link {
        text-align: left;
    }

    #container {
        max-width: 1300px !important;
        margin: auto;
        padding: auto;
        position: relative;
    }

    .container2 {
        max-width: 1300px !important;
        margin: auto;
        position: relative;
    }

    .container2.customer-space {
        max-width: unset !important;
    }

    #info_gauche {
        display: block;

    }


    #footer-insc #liens_utiles {
        display: block;
        float: left;
        margin-left: 45px;
    }

    #footer-insc #liens_utiles ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    #footer-insc #liens_utiles ul li {

        margin: 0;
        padding: 0;
        margin-bottom: 7px;

    }

    #footer-insc #liens_utiles ul li a {

        position: relative;
        display: block;
        color: #fff;
        padding-left: 17px;
        font-family: "Roboto", sans-serif;
        font-size: 0.9em;
        font-weight: 700;
        line-height: normal;
        letter-spacing: .6px;
        transition: all 0.3s ease;
        text-decoration: none;
    }

    #footer-insc #liens_utiles a span {

        color: #ccb964;
    }

    #footer-insc #liens_utiles ul li a:hover {
        text-decoration: underline;
        color: #ccb964;
    }

    .margin_auto {
        width: 50%;
    }


    #footer-insc #liens_utiles span.titre {
        width: 100%;
        display: block;
        margin: 0 0 15px;
        font-family: "grotesque", sans-serif;
        font-size: 26px;
        line-height: 24px;
        font-weight: 400;
        letter-spacing: .25px;
        text-transform: uppercase;
        color: #ccb964;
    }

    #reassurance {
        background-color: #D6EBEA;
        width: 100%;
        display: block;
        min-height: 50px;
        margin-bottom: -3em;
        margin-top: 2em;
        -webkit-font-smoothing: antialiased;
        padding-bottom: 2em;
    }

    #reassurance .cb {
        width: 30px;
        margin-bottom: -5px;
    }

    #reassurance .cadenas {
        height: 25px;
        margin-bottom: -5px;
    }

    #reassurance h3 {
        width: 100%;
        display: block;
        padding: 0.8em 0 1em 0;
        color: #024351;
        font-family: "grotesque", sans-serif;
        font-size: 2.1em;
        font-weight: 400;
        letter-spacing: .25px;
        text-transform: uppercase;
        text-align: center;
        margin: 0;
    }

    #reassurance #inclue {
        margin: auto;
        max-width: 1340px;

    }

    #reassurance .choix {
        width: 20%;
        margin-left: 2.5%;
        margin-right: 2.5%;
        float: left;
    }

    #reassurance .c-icon {
        width: 55px;
        height: 55px;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin: 0 auto 20px;
        padding: 13px;
        background: #61b1b2;
        border-radius: 50%;
        text-align: center;
    }

    #reassurance .choix h4 {
        width: 100%;
        display: block;
        margin: 0 0 24px;
        color: #61b1b2;
        font-family: "grotesque", sans-serif;
        font-size: 1.6em;
        font-weight: 400;
        letter-spacing: .25px;
        text-transform: uppercase;
        text-align: center;
    }

    #reassurance .choix p {
        display: block;
        margin: 0 20px 24px 20px;
        color: #024351;
        font-family: "Roboto";
        font-size: 14px;
        font-weight: 600;
        line-height: 24px;
        letter-spacing: .6px;
        text-align: center;
    }

    #reassurance #reassure {
        display: block;
        color: #024351;
        font-family: "Roboto";
        font-size: 14px;
        font-weight: 600;
        line-height: 24px;
        letter-spacing: .6px;
        text-align: justify;
        margin: auto;
        max-width: 1024px;
        padding-top: 3em;
    }

    #reassurance #reassure hr {
        width: 50%;
        margin-left: 25%;
        border: 1px solid #024351;
        margin-top: 2em;
    }

    .macolonne {
        flex: 0 0 25%;
        max-width: 25%;
    }

    /* Ajout style page bon cadeau */
    #testboncadeau {
        padding-top: 2.75rem;
    }

    /* Fin style page bon cadeau */
    body {
        overflow-y: scroll;
    }

    #centerwebsite {
        z-index: 1000;
        top: 0;
    }

    #TopBar {
        max-width: 1200px !important;
    }

    #container #ch1 {
        width: 94.6667%;
        max-width: 1300px;
        margin-left: 3.33333332%;
    }

    #container #ch1 #codeproduit {

        width: 100%;
        display: inline-block;
        text-align: right;
        margin: -1em 0 1.7em 0;


    }

    #votrevoyage {
        float: left;
        width: 30%;
        margin-left: 3.33333332%;
    }

    .reinitialize {
        position: absolute;
        bottom: -50px;
        color: red;

    }

    #contenu_devis {
        width: 61.6666667%;
        float: left;
        max-width: 780px;
        margin-left: 1.6666667%;
        margin-right: 3.33333332%;
    }

    .information, .warning, .error, #divfor1, .labelpaiement {
        margin-top: 0;
    }

    #votrevoyage #datedep input {
        margin: 0;
    }

    #resume_liberte {
        text-align: left;
    }


    div.resume_intitule {
        display: inline-block;
        width: 54.5%;

    }

    div.resume_calcul {
        display: inline-block;
        width: 29.5%;
        text-align: left;
        color: black;
        padding-left: 2%;
        box-sizing: border-box;
    }

    div.resume_sstotal {
        display: inline-block;
        width: 16%;
    }

    #loadmdp, #displaymdp {
        box-sizing: border-box;
        padding-left: 7%;
        padding-right: 7%;
    }

    .resume_global_total div.resume_sstotal {
        width: 30%;
    }

    div.numtel a {
        width: 35%;
        background-position: 1.8em;
    }

    /*
     *  PAGE 2 INFORMATIONS
     *
     * */
    #bloc_nom_email {
        width: 100%;
        text-align: left;
        float: none;
        display: block;
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
    }

    #bloc_nom {
        margin-bottom: 0;
        width: 95%;
        float: none;
    }

    #bloc_email, #bloc_tel, #bloc_add {
        margin-top: 0;
        width: 95%;
    }

    #bloc_add {
        padding: 0;
        float: none;
    }

    hr.bloc_hr {
        display: block;
        height: 1px;
        background-color: var(--site__border--light);
        width: 100%;
        border: 0;
        margin-top: 1em;
        margin-bottom: 1em;
    }

    #bloc_nom_email .libelle, #bloc_add .libelle {
        width: 13%;
        display: inline-block;
        box-sizing: border-box;
        text-align: right;
        padding-right: 0.7em;
        line-height: 2.2em;
        font-size: 15px;
        text-transform: uppercase;
        font-weight: bold;
    }

    #bloc_nom_email input[type="text"], #bloc_nom_email select {
        width: 27%;
        display: inline-block;
        font-size: 1.1em;
        padding: 0.4em;

    }

    #bloc_nom_email .civilite, .bloc_participant .civilite {
        width: 10% !important;
        display: inline-block;
        box-sizing: border-box;

        padding-right: 0.4em;
        font-size: 15px;
    }

    #bloc_email .libelle {
        width: 33%;
    }

    #bloc_tel .tel1 {
        width: 33%;
    }


    #newsletterinsc {
        display: inline-block;
        margin: 0;
        background-color: #F4F5F0;
        line-height: 1.4em;
        height: 1.4em;
        width: 40%;
        text-align: right;
    }

    #newsletterinsc i {
        display: inline-block;
        font-size: 0.8em;
        font-style: normal;
        text-align: right;

    }

    #newsletterinsc input {
        margin-top: 00em;
        width: 1em !important;
        float: none;
        height: auto;
    }

    .formulaireGRP .centrage {
        box-sizing: border-box;
        margin-right: 31%;
        width: 69%;
    }

    .formulaireGRP .libelle {
        width: 35%;
        display: inline-block;
        text-align: right;
        padding-right: 1em;
        line-height: 2.2em;
    }


    #bloc_add .libelle {
        display: inline-block;
        margin: 0;
        width: 33%;
        box-sizing: border-box;
    }


    #bloc_add input[type="text"], #bloc_add select {
        width: 67% !important;
        display: inline-block;
        margin: 0;
        font-size: 1.1em;
        padding: 0.4em;

    }

    #fin_adresse {
        margin-top: 1em;
    }

    #fin_adresse .libelle {
        width: 13%;
    }

    #bloc_add .cp_ville {
        width: 30%;
    }

    #fin_adresse input[type="text"], #fin_adresse select {
        width: 27% !important;
        display: inline-block;

    }

    #fin_adresse #vide {
        width: 40%;
        display: inline-block;

    }

    #bloc_add #separation {
    }

    .contenu_infos_persos input[type="text"], .contenu_infos_persos input[type="date"], .contenu_infos_persos select, .formulaireGRP input[type="text"] {
        padding: 0.4em;
        font-size: 1.1em;
    }


    #intro_transport {
        width: 65%;
        font-size: 1.1em;
    }

    #select_transport {
        width: 35%;
    }

    .bloc_participant {
        padding: 0%;
        width: 100%;
        float: none;
        min-height: auto;
        background-color: transparent;
        margin: 0;
        margin-bottom: 2em;
        border-bottom: 1px solid var(--site__border--light);
        padding-bottom: 2em;
        border-radius: 0;
        moz-border-radius: 0;
    }

    .bloc_participant div.specialparticipant {
        width: 95%;
        box-sizing: border-box;
        padding: 0;
        display: inline-block;
    }


    .bloc_participant label.respdosok {

        padding-left: 8.4%;
        margin-bottom: 1em;
    }

    .bloc_participant h3 {
        padding-left: 1.6027027%;
    }

    .bloc_participant .libelle {
        margin: 0;
        float: none;
        width: 13%;
        display: inline-block;
        box-sizing: border-box;
        text-align: right;
        padding-right: 0.4em;
        font-size: 15px;
        line-height: 2.2em;

        font-family: "Roboto", sans-serif;
        text-transform: uppercase;
        font-weight: bold;
    }

    .bloc_participant .margelibelle {
        width: 33%;
        display: inline-block;
        box-sizing: border-box;
    }

    .bloc_participant input[type="text"], .bloc_participant input[type="date"], .bloc_participant select {
        width: 27%;
        margin: 0;
    }


    /* SPECIAL DEVIS GROUPE */
    .formulaireGRP .libelle {
        display: inline-block;
        width: 47.5%;
        text-align: right;

    }

    .formulaireGRP .submit3 {
        width: 35%;
    }

    .formulaireGRP input[type="text"] {
        width: 47%;
        margin-right: 2%;
    }

    #ensemble_resume {

    }

    #affiche_train .demande_specifique {
        margin-top: 1em;
    }

    #supplement_transport {
        border-top: 1px solid var(--color-primary-grey-300);
        clear: both;
        padding-top: 2em;
    }

    #supplement_transport div.information, #supplement_transport div.agauche {
        width: 100%;
        display: block;
        float: none;
        margin: 0;
        box-sizing: border-box;

    }

    #mode_responsable {
        width: 32.1428571%;
        border-radius: 0 20px 20px 0;
    }

    #mode_participants {
        width: 67.8571429%;
    }

    #affiche_avion div.agauche {

    }

    .contenu_infos_persos .libelle {
        display: inline-block;
    }

    .contenu_infos_persos h2 {
        margin-bottom: 0.7em;
    }

    .contenu_infos_persos input[type="checkbox"] {
        height: auto;
    }

    #supplement_transport .libelle {
        width: 15%;
        text-align: right;
        box-sizing: border-box;
        font-family: "Roboto", sans-serif;
        text-transform: uppercase;
        font-weight: bold;
        padding-right: 0.5em;
    }

    #supplement_transport .libellehoraire {
        width: 8.5%;
    }

    #supplement_transport input {
        width: 35%;
        display: inline-block;
        margin: 0 !important;
    }

    #affiche_train .train_date {
        width: 18%;
        display: inline-block;
        float: none;
        margin: 0 !important;

    }

    #affiche_train .train_horaire {
        width: 8.5%;
        display: inline-block;
        float: none;
        margin-left: 0;

    }

    #affiche_train .train_confort {
        width: 34%;
        display: inline-block;

    }

    #affiche_train .train_confort {
        width: 34%;
        display: inline-block;

    }

    #affiche_train label {
        text-align: right;
        width: 50%;
    }

    #affiche_train .carte-abo {
        width: 50.55%;
        display: inline-block;
        text-align: right;

        padding-right: 0em;
        font-family: "Roboto", sans-serif;
        text-transform: uppercase;
        font-weight: bold;
        box-sizing: border-box;
        font-size: 1em;
    }

    #affiche_train .carte-abo select {
        width: 26%;
        margin-left: 0.5em;
    }

    /*
    div.supplement_area{
        display:block;
    width:100%;
    float:left;
    padding-left: 2.7027027%;
    padding-right: 2.7027027%;
    padding-bottom:2em;
    }/*
    span.intitule_remarque{

    display:inline-block;
    width:35%;
    text-align:right;box-sizing:border-box;
    padding-right:1.7%;height:2em;line-height:2em;border:1px solid grey;margin:0;

    }
    div.supplement_area textarea,div.saautredemande textarea.autredemande{
    width:100%;
    min-height:2em !important;height:2em;margin:0;
    padding:0.3em;box-sizing:border-box;
    }

    div.special_area{
    display:inline-block;
    width:65%;margin:0;
    padding:0.3em;box-sizing:border-box;	margin-top:0.3em;border:1px solid grey;
    }
    */
    /* MES DEVIS */
    div.recape-devis {
        float: left;
        width: 30%;
    }


    /* MES DEVIS */
    div.recape-liens {
        float: left;
        width: 40%;
    }

    div.recape-liens a.finalise, div.recape-liens a.en-cours {
        margin: 0 0 0.5em 0;
    }

    #lien_enchainement {
        display: none;
    }

    #affiche_enchainement {
        display: block;
    }

    #affiche_enchainement select {
        width: 95% !important;
    }

    h1 {
        font-size: var(--font-size-desktop-h1);
        line-height: 1.3em;
        letter-spacing: 0;
    }

    h2 {
        font-size: var(--font-size-desktop-h2);
        line-height: 48px;
        letter-spacing: 0;
    }

    h3 {
        font-size: var(--font-size-desktop-h3);
        line-height: 40px;
        letter-spacing: 0;
    }

    h4 {
        font-size: var(--font-size-desktop-h4);
        line-height: 36px;
        letter-spacing: 0;
    }

    h5 {
        font-size: var(--font-size-desktop-h5);
        line-height: 24px;
        letter-spacing: 0;
    }

    h6 {
        font-size: var(--font-size-desktop-h6);
        line-height: 30px;
        letter-spacing: 0;
    }

    #centersubmit {
        flex-direction: row-reverse;
        gap: 10%;
    }

    #contenu_devis_bouton {
        justify-content: space-between;
        flex-direction: row;
        gap: 20%;
    }

    #recapitulatif #contenu_devis {
        justify-content: space-between;
        flex-direction: row;
        gap: 20%;
    }

    #ariane_BI {
        flex-direction: row;
        width: 93.333333332%;
        margin: var(--spacing-sm-em) 3.3333333% var(--spacing-xl-em) 3.3333333%;
    }

    #ariane_BI div {
        width: 32.1428571%;

    }

    #ariane_BI div:not(.clactive) {
        display: inline-block;
    }

    .container2 #cp1 select.horaire {
        width: 27%;
    }

    .container2 .nbparticipants_libelle:not(.nbparticipants_libelleHoraire) {
        width: 36%;
    }

    .container2 #cp1 input[type='text'][name='train_garedepart'],
    .container2 #cp1 input[type='text'][name='train_garearrivee'] {
        width: 64%;
    }

    .container2 #cp3 .libelle_add2 {
        text-align: left;
    }
}