/* Cavilam — custom overrides (no build step) */
/* ── Login modal (cart checkout gate) ────────────────────────────── */
.login-modal-overlay {
position: fixed; inset: 0; z-index: 11000;
background: rgba(43, 47, 53, 0.6);
opacity: 0; pointer-events: none;
transition: opacity 0.25s ease;
}
.login-modal-overlay.open { opacity: 1; pointer-events: auto; }
.login-modal {
position: fixed; z-index: 11001;
top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95);
width: 570px; max-width: calc(100vw - 32px);
display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
opacity: 0; pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.login-modal.open {
opacity: 1; pointer-events: auto;
transform: translate(-50%, -50%) scale(1);
}
.login-modal-inner {
width: 100%; background: #F6F5EA;
padding: 48px 44px;
display: flex; flex-direction: column; gap: 25px;
box-sizing: border-box;
}
.login-modal-close {
background: none; border: 1px solid #F6F5EA; cursor: pointer;
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
padding: 5px 15px; color: #F6F5EA;
}
.login-modal-close:hover { opacity: 0.6; }
.login-modal-title {
font-size: 24px; font-weight: 500; color: #2B2F35;
margin: 0; line-height: 1.2; letter-spacing: -0.48px;
}
.login-modal-form {
display: flex; flex-direction: column; gap: 10px;
}
/* Inline email-verification (OTP) step inside the login modal.
Hidden by default; the .login-otp-mode state class on the modal swaps the
login form/bottom/title out for the OTP step. !important beats the form's
own display:flex (the theme has no global .hidden utility). */
#login-otp-step { display: none; }
.login-modal.login-otp-mode #login-otp-step { display: block; }
.login-modal.login-otp-mode .login-modal-inner > .login-modal-form,
.login-modal.login-otp-mode .login-modal-inner > .login-modal-bottom,
.login-modal.login-otp-mode .login-modal-inner > .login-modal-title {
display: none !important;
}
#login-otp-error.hidden { display: none; }
.login-modal-input {
width: 100%; padding: 15px 20px;
background: #fff; border: none;
font-size: 18px; color: #2B2F35;
box-sizing: border-box; outline: none;
line-height: 1.2; letter-spacing: -0.36px;
}
.login-modal-input::placeholder { color: #2B2F35; opacity: 0.6; }
.login-modal-input:focus { box-shadow: inset 0 0 0 1px #2B2F35; }
.login-modal-password-wrap {
position: relative;
}
.login-modal-password-wrap .login-modal-input { padding-right: 52px; }
.login-modal-eye {
position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
background: none; border: none; cursor: pointer; padding: 4px;
}
.login-modal-forgot {
display: block; margin-top: 0;
font-size: 14px; color: #2B2F35; opacity: 0.5;
text-decoration: underline; line-height: 1.5;
}
.login-modal-forgot:hover { opacity: 0.8; }
.login-modal-error {
font-size: 14px; color: #E40521;
min-height: 0; display: none; margin: 0;
}
.login-modal-error.visible { display: block; }
.login-modal-submit {
width: 100%; padding: 15px;
background: #2B2F35; color: #F6F5EA;
border: none; cursor: pointer;
font-size: 18px; font-weight: 500; line-height: 1.5;
transition: opacity 0.2s;
}
.login-modal-submit:hover { opacity: 0.85; }
.login-modal-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.login-modal-bottom {
display: flex; flex-direction: column; align-items: center; gap: 40px;
}
.login-modal-separator-box {
width: 100%; padding: 20px 0;
border-top: 1px solid #e6d5b6; border-bottom: 1px solid #e6d5b6;
display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.login-modal-separator {
margin: 0; text-align: center; width: 100%;
font-size: 16px; font-weight: 500; color: #2B2F35;
line-height: 1.2; letter-spacing: -0.32px;
}
.login-modal-signup-btn {
display: flex; align-items: center; justify-content: center;
width: 100%; padding: 15px;
background: transparent; border: 1px solid rgba(43,47,53,0.3);
font-size: 18px; font-weight: 400; color: #2B2F35; opacity: 0.8;
text-decoration: none; transition: border-color 0.2s; line-height: 1.5;
}
.login-modal-signup-btn:hover { border-color: #2B2F35; opacity: 1; }
.login-modal-guest {
display: block; text-align: center;
font-size: 16px; color: #2B2F35; text-decoration: underline;
line-height: 1.2;
}
.login-modal-guest:hover { opacity: 0.7; }
/* ── Cart page (panier) — Figma 2958-5436 ────────────────────────── */
.panier-page { background: #F6F5EA; min-height: 100vh; }
.panier-container { padding: 32px 20px 64px; max-width: 1400px; margin: 0 auto; }
/* Stepper */
.panier-stepper { display: flex; background: #fff; position: relative; padding: 0; margin-bottom: 0; }
.panier-stepper-item { flex: 1; font-size: 14px; font-weight: 400; color: rgba(43,47,53,0.6); letter-spacing: 0.28px; white-space: nowrap; padding: 14px 0; text-align: center; line-height: 1.1; border-bottom: 4px solid rgba(43,47,53,0.15); }
.panier-stepper-item.active { font-weight: 500; color: #2B2F35; border-bottom-color: #2B2F35; }
/* Layout */
.panier-layout { display: flex; gap: 30px; align-items: flex-start; }
.panier-left { flex: 1; min-width: 0; }
.panier-right { width: 512px; flex-shrink: 0; display: flex; flex-direction: column; gap: 30px; }
@media (max-width: 1023px) {
.panier-layout { flex-direction: column; }
.panier-right { width: 100%; }
}
/* White card wrapper */
.panier-white-card { background: #fff; padding: 30px 37px; }
.panier-heading { font-size: 20px; font-weight: 500; letter-spacing: 0.4px; text-transform: uppercase; color: #2B2F35; margin: 0 0 28px; line-height: 1.1; }
/* Item wrapper */
.panier-item-wrap { margin-bottom: 20px; }
.panier-item { border: 1px solid rgba(43,47,53,0.2); border-bottom: none; padding: 24px 26px; display: flex; flex-direction: column; gap: 25px; }
.panier-item-header { display: flex; gap: 20px; align-items: flex-start; }
.panier-item-title { flex: 1; font-size: 24px; font-weight: 500; color: #2B2F35; text-decoration: none; line-height: 1.2; }
.panier-item-title:hover { text-decoration: underline; }
.panier-item-price { font-size: 24px; font-weight: 500; color: #2B2F35; white-space: nowrap; text-align: right; }
/* Dates */
.panier-item-dates { display: flex; gap: 10px; align-items: center; }
.panier-item-dates svg { flex-shrink: 0; }
.panier-item-date { font-size: 16px; font-weight: 400; color: #2B2F35; text-decoration: underline; }
.panier-item-date-sep { font-size: 16px; font-weight: 400; color: #2B2F35; }
/* Tags */
.panier-item-tags { display: flex; flex-wrap: wrap; gap: 3px; }
.panier-tag { display: inline-flex; align-items: center; justify-content: center; padding: 14px; background: rgba(33,58,136,0.1); border: 1px solid rgba(33,58,136,0.2); font-size: 16px; font-weight: 500; color: #213A88; line-height: 1.2; white-space: nowrap; }
/* Services */
.panier-item-services { display: flex; flex-direction: column; gap: 10px; }
.panier-services-label { font-size: 16px; font-weight: 500; color: #2B2F35; margin: 0; line-height: 1.2; }
.panier-services-list { font-size: 14px; font-weight: 400; color: #2B2F35; line-height: 1.2; }
/* Hébergement */
.panier-item-hebergement { border-top: 1px solid #E6D5B6; border-bottom: 1px solid #E6D5B6; padding: 20px 0; display: flex; flex-direction: column; gap: 10px; }
.panier-heberg-header { display: flex; gap: 5px; align-items: center; }
.panier-heberg-title { font-size: 16px; font-weight: 600; color: #2B2F35; line-height: 1.2; }
.panier-heberg-type { font-size: 16px; font-weight: 400; color: #2B2F35; margin: 0; line-height: 1.1; letter-spacing: -0.32px; }
.panier-heberg-note { display: flex; gap: 12px; align-items: flex-start; }
.panier-heberg-info { font-size: 12px; font-weight: 400; color: #2B2F35; opacity: 0.6; line-height: 1.2; }
/* Action buttons */
.panier-item-actions { display: flex; gap: 7.5px; }
.panier-action-btn { display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; border: 1px solid rgba(43,47,53,0.2); background: none; cursor: pointer; text-decoration: none; transition: opacity 0.2s; }
.panier-action-btn:hover { opacity: 0.5; }
/* Apprenant section */
.panier-apprenant { background: #F6F5EA; border: 1px solid rgba(43,47,53,0.2); padding: 26px 32px; display: flex; flex-direction: column; gap: 24px; }
.panier-apprenant-required { font-size: 14px; font-weight: 400; color: #2B2F35; margin: 0; line-height: 1.2; }
.apprenant-modal-required { font-size: 14px; font-weight: 400; color: #2B2F35; margin: 0 0 8px; line-height: 1.2; }
.apprenant-modal-field.is-invalid .form-input,
.apprenant-modal-field.is-invalid .custom-select-trigger,
.apprenant-modal-field.is-invalid .custom-datepicker-trigger,
.apprenant-modal-field.is-invalid .civilite-group { box-shadow: inset 0 0 0 1px #E40521; }
.panier-apprenant-section { display: flex; flex-direction: column; gap: 10px; }
.panier-apprenant-label { font-size: 16px; font-weight: 400; color: #2B2F35; margin: 0; line-height: 1.2; letter-spacing: -0.32px; }
.panier-apprenant-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 52px; padding: 0 20px; background: #F6F5EA; border: 1px solid #000; cursor: pointer; font-size: 16px; font-weight: 600; color: #2B2F35; transition: background 0.2s; align-self: flex-start; }
.panier-apprenant-btn:hover { background: #ede9dc; }
.panier-apprenant-select {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 400px;
height: 48px;
padding: 0 20px;
background: #f5f1e8;
border: 1px solid rgba(43, 47, 53, 0.2);
cursor: pointer;
font-family: 'Space Grotesk', sans-serif;
font-size: 16px;
font-weight: 500;
color: #2B2F35;
transition: border-color 0.15s;
}
.panier-apprenant-select:hover {
border-color: rgba(43, 47, 53, 0.4);
}
.panier-apprenant-select span {
color: rgba(43, 47, 53, 0.5);
}
.panier-apprenant-select svg {
flex-shrink: 0;
color: rgba(43, 47, 53, 0.5);
transition: transform 0.2s;
}
.panier-apprenant-select.is-open svg {
transform: rotate(180deg);
}
.apprenant-select-row {
display: flex;
gap: 10px;
align-items: stretch;
width: 100%;
}
.apprenant-select-row .panier-apprenant-select {
flex: 1;
min-width: 0;
max-width: none;
}
.apprenant-select-row .panier-apprenant-btn {
flex-shrink: 0;
height: 48px;
}
@media (max-width: 639px) {
.apprenant-select-row {
flex-direction: column;
}
}
/* Sidebar */
.panier-sidebar-section { display: flex; flex-direction: column; gap: 20px; }
.panier-sidebar-header { display: flex; gap: 14px; align-items: center; height: 14px; }
.panier-sidebar-title { font-size: 14px; font-weight: 600; text-transform: uppercase; color: #2B2F35; white-space: nowrap; letter-spacing: 0; }
.panier-sidebar-line { flex: 1; height: 1px; background: #2B2F35; }
/* Coupon */
.panier-coupon-desc { font-size: 16px; font-weight: 400; color: #000; opacity: 0.5; margin: 0; line-height: 1.2; }
.panier-coupon-row { display: flex; gap: 10px; }
.panier-coupon-input-wrap { flex: 1; display: flex; align-items: center; gap: 10px; background: #fff; padding: 15px 20px; }
.panier-coupon-input-wrap svg { flex-shrink: 0; }
.panier-coupon-input { flex: 1; border: none; outline: none; background: none; font-size: 18px; font-weight: 400; color: #2B2F35; letter-spacing: -0.36px; }
.panier-coupon-input::placeholder { color: #2B2F35; opacity: 0.6; }
.panier-coupon-btn { width: 135px; flex-shrink: 0; background: #E6D5B6; border: none; cursor: pointer; font-size: 16px; font-weight: 600; color: #2B2F35; padding: 15px 20px; transition: opacity 0.2s; }
.panier-coupon-btn:hover { opacity: 0.8; }
.panier-coupon-msg { font-size: 13px; margin: 0; display: flex; align-items: center; justify-content: space-between; }
.panier-coupon-msg.ok { color: #0B543A; }
.panier-coupon-msg.err { color: #E40521; }
.panier-coupon-msg.hidden { display: none; }
.panier-coupon-remove {
background: none;
border: none;
cursor: pointer;
padding: 2px;
color: #0B543A;
opacity: 0.6;
transition: opacity 0.15s;
display: flex;
align-items: center;
}
.panier-coupon-remove:hover {
opacity: 1;
}
/* Summary box */
.panier-summary-box { border: 1px solid rgba(43,47,53,0.1); padding: 30px; display: flex; flex-direction: column; gap: 20px; }
.panier-summary-rows { display: flex; flex-direction: column; gap: 3px; border-bottom: 1px solid #2B2F35; padding-bottom: 25px; }
.panier-summary-row { display: flex; justify-content: space-between; align-items: center; height: 36px; font-size: 18px; font-weight: 500; color: #2B2F35; line-height: 1.2; }
.panier-summary-total { display: flex; flex-direction: column; gap: 15px; }
.panier-summary-total-row { display: flex; justify-content: space-between; align-items: center; font-size: 28px; font-weight: 500; color: #2B2F35; line-height: 1.2; }
.panier-summary-note { font-size: 16px; font-weight: 400; color: #000; margin: 0; line-height: 1.2; }
/* custom.css is unlayered; Tailwind `.hidden` lives in @layer utilities, so the
unlayered .panier-summary-row (display:flex) would otherwise win and keep the
conditional fee / discount rows visible. This override restores the toggle. */
.panier-summary-row.hidden { display: none; }
.panier-summary-total-value { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.panier-summary-ttc { font-size: 16px; font-weight: 400; color: rgba(43, 47, 53, 0.6); }
/* Suivant button */
.panier-suivant-btn { display: flex; align-items: center; justify-content: center; width: 100%; padding: 20px; background: #2B2F35; color: #fff; font-size: 16px; font-weight: 600; text-decoration: none; transition: opacity 0.2s; }
.panier-suivant-btn:hover { opacity: 0.85; }
/* Empty cart */
.panier-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 20px; text-align: center; }
.panier-empty-icon { color: #ccc; margin-bottom: 24px; }
.panier-empty-title { font-size: 24px; font-weight: 600; color: #2B2F35; margin: 0 0 12px; }
.panier-empty-text { font-size: 16px; color: rgba(43,47,53,0.6); margin: 0 0 32px; }
.panier-empty-cta { display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; background: #2B2F35; color: #F6F5EA; font-size: 15px; font-weight: 500; text-decoration: none; transition: opacity 0.2s; }
.panier-empty-cta:hover { opacity: 0.8; }
/* ── Login page ─────────────────────────────────────────────────── */
.login-section {
min-height: calc(100vh - 132px);
}
.login-card {
padding-top: 48px;
padding-bottom: 48px;
}
@media (max-width: 639px) {
.login-section {
min-height: auto;
align-items: flex-start;
padding-top: 24px;
padding-bottom: 32px;
}
.login-card {
padding-top: 28px;
padding-bottom: 28px;
}
.login-image-wrap {
display: none;
}
}
/* ── Signup page ─────────────────────────────────────────────────── */
@media (max-width: 639px) {
.signup-section { padding-top: 16px; }
.signup-inner { padding: 16px; }
.signup-header-block { margin-bottom: 20px; padding-bottom: 16px; }
.signup-header-meta { text-align: left; }
.signup-section-box { padding: 16px; }
}
/* ── Actualités — filter bar ─────────────────────────────────────── */
.media-tab-border { border-bottom-color: #F6F5EA; }
@media (max-width: 1023px) {
.media-filter-bar {
flex-direction: column;
gap: 12px;
padding: 16px;
min-height: auto;
}
.media-filter-tabs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.media-filter-tabs .media-tab-btn {
padding: 8px 12px;
border: 1px solid rgba(43, 47, 53, 0.2);
border-radius: 999px;
font-size: 14px;
line-height: 1.4;
width: 100%;
justify-content: center;
}
.media-filter-tabs .media-tab-btn.is-active {
background-color: #2B2F35;
color: #F6F5EA;
border-color: #2B2F35;
}
.media-filter-search {
order: -1;
padding-top: 0;
padding-bottom: 12px;
border-bottom: 1px solid rgba(43, 47, 53, 0.1);
}
.media-filter-search input {
font-size: 14px;
}
}
/* ── Mobile nav — language switcher ────────────────────────────── */
.mobile-lang-item {
flex: 1;
min-width: 0;
}
/* ── Login success state ────────────────────────────────────────── */
#login-success {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
padding: 80px 0;
opacity: 0;
}
#login-success-check {
position: relative;
width: 96px;
height: 96px;
margin-bottom: 32px;
transform: scale(0);
}
#login-success-check svg {
width: 100%;
height: 100%;
}
#login-success-text {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
opacity: 0;
}
#login-success-text .ls-title {
font-family: 'Space Grotesk', sans-serif;
font-weight: 500;
font-size: 28px;
letter-spacing: -0.5px;
color: #2B2F35;
}
#login-success-text .ls-subtitle {
font-family: 'Space Grotesk', sans-serif;
font-size: 14px;
color: rgba(43, 47, 53, 0.35);
}
.ls-bar-track {
width: 66%;
height: 2px;
background: rgba(43, 47, 53, 0.1);
margin-top: 40px;
overflow: hidden;
}
#login-success-bar {
height: 100%;
width: 0;
background: #E40521;
}
/* ── Shared form input style (matches signup) ───────────────────── */
.form-input {
display: flex;
align-items: flex-start;
width: 100%;
height: 48px;
padding: 12px 20px;
background: #f5f1e8;
border: 1px solid transparent;
font-family: 'Space Grotesk', sans-serif;
font-weight: 500;
font-size: 16px;
color: #2b2f35;
outline: none;
box-shadow: none;
transition: border-color 0.15s;
}
.form-input::placeholder {
color: #9d9d9c;
font-weight: 500;
font-size: 16px;
}
.form-input:focus {
outline: none;
box-shadow: none;
}
.form-input.input-error {
border-color: #E40521;
}
.form-input-icon-wrap {
position: relative;
}
.form-input-icon-wrap .form-input {
padding-right: 56px;
}
.form-input-disabled,
.form-input[disabled],
.form-input[readonly] {
background: #f0ede4;
color: rgba(43, 47, 53, 0.5);
cursor: not-allowed;
}
.form-label {
display: block;
font-family: 'Space Grotesk', sans-serif;
font-weight: 500;
font-size: 14px;
color: #2b2f35;
margin-bottom: 8px;
}
.form-textarea {
display: block;
width: 100%;
padding: 12px 20px;
background: #f5f1e8;
border: 1px solid transparent;
font-family: 'Space Grotesk', sans-serif;
font-weight: 500;
font-size: 16px;
color: #2b2f35;
outline: none;
box-shadow: none;
resize: none;
transition: border-color 0.15s;
}
.form-textarea::placeholder {
color: #9d9d9c;
font-weight: 500;
font-size: 16px;
}
.form-textarea:focus {
outline: none;
box-shadow: none;
}
/* ── Copy-address checkbox ──────────────────────────────────────── */
.copy-address-label {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
}
.copy-address-label input[type="checkbox"] {
margin-top: 3px;
}
.copy-address-label input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 16px;
height: 16px;
border: 1px solid #2b2f35;
border-radius: 0;
cursor: pointer;
flex-shrink: 0;
background: transparent;
position: relative;
}
.copy-address-label input[type="checkbox"]:checked {
background: #2b2f35;
}
.copy-address-label input[type="checkbox"]:checked::after {
content: '';
position: absolute;
left: 4.5px;
top: 1px;
width: 5px;
height: 10px;
border: solid #f5f1e8;
border-width: 0 1.5px 1.5px 0;
transform: rotate(45deg);
}
.copy-address-label input[type="checkbox"]:not(:checked):hover {
background: #f5f1e8;
}
.copy-address-label span {
font-family: 'Space Grotesk', sans-serif;
font-size: 16px;
color: #2b2f35;
}
/* Invalid consent checkbox (mandatory but unticked at submit) */
.copy-address-label.is-invalid input[type="checkbox"] {
border-color: #E40521;
box-shadow: 0 0 0 2px rgba(228, 5, 33, 0.18);
}
.copy-address-label.is-invalid span {
color: #E40521;
}
/* ── Civilité radio group ───────────────────────────────────────── */
.civilite-group {
display: flex;
gap: 30px;
}
.civilite-option {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
}
.civilite-option input[type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 14px;
height: 14px;
border: 1px solid #2b2f35;
border-radius: 50%;
cursor: pointer;
flex-shrink: 0;
background: transparent;
}
.civilite-option input[type="radio"]:checked {
border-color: #2b2f35;
background: #2b2f35;
box-shadow: 0 0 0 0.1em inset #f5f1e8;
}
.civilite-option input[type="radio"]:not(:checked):hover {
background: #f5f1e8;
}
.civilite-option span {
font-family: 'Space Grotesk', sans-serif;
font-weight: 400;
font-size: 16px;
color: #2b2f35;
line-height: 1.5;
}
/* ── Form error states ─────────────────────────────────────────── */
.input-error {
border-color: #E40521 !important;
}
.field-error {
color: #E40521;
font-size: 13px;
margin-top: 4px;
}
.alert-error {
padding: 12px;
border: 1px solid rgba(228, 5, 33, 0.3);
background: rgba(228, 5, 33, 0.05);
}
.alert-error p {
color: #E40521;
font-size: 13px;
}
/* ── Exam characteristics ────────────────────────────────────────── */
/* QA 2026-08-14 (PM): the picto list follows the BO order reading DOWN the
columns — items 1..ceil(n/2) in the left column, the rest in the right.
Desktop flow lives in the [style*="--cv-char-rows"] rule (column-major grid);
here only the base grid + the mobile single column. */
.exam-characteristics-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 24px;
/* QA 2026-09-04 (PM, Prestige): stretch so both cells of a row share one height and their bottom borders line up (start left the short cell border floating mid-row). Text stays top-aligned via .formation-char-item items-start. */
align-items: stretch;
}
.exam-characteristics-list > div {
break-inside: avoid;
}
@media (max-width: 1023px) {
.exam-characteristics-list {
grid-template-columns: minmax(0, 1fr);
}
}
/* ── Tarif pricing radios ─────────────────────────────────────── */
.tarif-radio-label input:not(:checked) + .tarif-radio-circle .tarif-radio-dot {
opacity: 0;
}
.tarif-radio-label input:checked + .tarif-radio-circle .tarif-radio-dot {
opacity: 1;
}
/* ── Inline datepicker (calendar always visible) ──────────────── */
.datepicker-inline .custom-datepicker-trigger {
display: none;
}
.datepicker-inline .custom-datepicker-dropdown {
display: flex !important;
position: static;
box-shadow: none;
background: rgba(246, 245, 234, 0.8);
overflow: visible !important;
}
.datepicker-inline .datepicker-calendar {
min-width: 0 !important;
width: 100%;
}
.datepicker-inline .datepicker-calendar {
min-width: 0 !important;
width: 100%;
padding: 30px 20px 20px !important;
gap: 16px !important;
}
.datepicker-inline .datepicker-header {
padding: 0 20px;
}
/* ── Datepicker mini selects ──────────────────────────────────── */
.dp-select {
position: relative;
}
.dp-select-trigger {
display: flex;
align-items: center;
gap: 4px;
background: none;
border: none;
cursor: pointer;
padding: 4px 0;
}
.dp-select-dropdown {
position: absolute;
top: 100%;
left: 0;
z-index: 60;
background: #F6F5EA;
border: 1px solid #ddd;
border-radius: 2px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
max-height: 180px;
overflow-y: auto;
min-width: 120px;
padding: 4px 0;
}
.dp-select-option {
padding: 6px 12px;
cursor: pointer;
color: #2B2F35;
transition: background 0.15s;
}
.dp-select-option:hover {
background: rgba(230, 213, 182, 0.5);
}
.dp-select-option.active {
font-weight: 600;
background: rgba(228, 5, 33, 0.08);
}
.dp-select-dropdown::-webkit-scrollbar {
width: 4px;
}
.dp-select-dropdown::-webkit-scrollbar-thumb {
background: #2b2f351a;
border-radius: 2px;
}
.datepicker-inline .datepicker-day {
width: calc(100% / 7);
height: auto;
aspect-ratio: 1;
border-radius: 50%;
font-size: 15px;
}
.datepicker-inline .datepicker-week {
width: 100%;
gap: 0;
overflow: visible;
}
.datepicker-inline .datepicker-days {
min-height: 0 !important;
width: 100%;
overflow: visible;
}
.datepicker-inline .flex.items-start.justify-between {
width: 100%;
}
.datepicker-inline .flex.items-start.justify-between > p {
width: calc(100% / 7) !important;
text-align: center;
font-size: 12px;
}
/* ── Day cells — always show as circles ──────────────────────── */
.datepicker-day:not(.empty) {
background-color: rgba(43, 47, 53, 0.09);
display: flex;
align-items: center;
justify-content: center;
}
.datepicker-day:not(.empty):not(.datepicker-unavailable):hover {
background-color: rgba(43, 47, 53, 0.18);
}
.datepicker-day.selected {
background-color: #E40521 !important;
color: #fff !important;
font-weight: 600;
}
/* ── Available date indicators ────────────────────────────────── */
.datepicker-unavailable {
opacity: 0.25;
cursor: not-allowed !important;
}
.datepicker-unavailable:hover {
background-color: transparent !important;
}
.datepicker-available {
font-weight: 500;
cursor: default;
}
.datepicker-available:hover {
background-color: rgba(230, 213, 182, 0.5) !important;
}
.datepicker-available.datepicker-start {
font-weight: 600;
cursor: pointer;
background-color: rgba(228, 5, 33, 0.08);
}
.datepicker-available.datepicker-start:hover {
background-color: rgba(228, 5, 33, 0.18) !important;
}
.datepicker-in-range {
background-color: #E40521 !important;
color: #fff !important;
font-weight: 500;
/* In-range days are part of the selected session, not selectable starts —
clicks are blocked in JS (QA 2026-06), so don't show a click affordance. */
cursor: default;
}
/* ── Calendar: holiday dates ──
Neutral grey + diagonal hatch so a holiday is clearly NOT a selectable
session-start (which uses red). PM 2026-05-22: the old red holiday fill was
mistaken for an available start date. */
.datepicker-holiday {
background-color: rgba(43, 47, 53, 0.06) !important;
background-image: repeating-linear-gradient(
45deg,
rgba(43, 47, 53, 0.10),
rgba(43, 47, 53, 0.10) 2px,
transparent 2px,
transparent 6px
) !important;
color: rgba(43, 47, 53, 0.45) !important;
font-weight: 500;
cursor: default !important;
position: relative !important;
overflow: visible !important;
}
.datepicker-holiday .datepicker-holiday-tooltip {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) scale(0.9);
background: #2B2F35;
color: #fff;
font-family: 'Space Grotesk', sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.2px;
padding: 5px 10px;
border-radius: 4px;
white-space: nowrap;
z-index: 20;
pointer-events: none;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
}
.datepicker-holiday .datepicker-holiday-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: #2B2F35;
}
.datepicker-holiday:hover .datepicker-holiday-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) scale(1);
}
/* Small grey dot under holiday number */
.datepicker-holiday::after {
content: '';
position: absolute;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 4px;
background: rgba(43, 47, 53, 0.45);
border-radius: 50%;
}
/* ── Calendar: complete sessions ── */
.datepicker-complete {
background-color: rgba(43, 47, 53, 0.1) !important;
color: #1a1a1a !important;
opacity: 0.5;
cursor: default !important;
pointer-events: none;
position: relative;
}
.datepicker-complete-tooltip {
position: absolute;
top: calc(100% + 4px);
left: 50%;
transform: translateX(-50%);
background: #2B2F35;
color: #fff;
font-family: 'Space Grotesk', sans-serif;
font-size: 12px;
font-weight: 500;
padding: 3px 6px;
border-radius: 3px;
white-space: nowrap;
z-index: 10;
pointer-events: none;
}
.datepicker-complete-tooltip::before {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border: 4px solid transparent;
border-bottom-color: #2B2F35;
}
/* ── Toast notification ── */
.cav-toast {
position: fixed;
top: 20px;
right: 20px;
z-index: 100000;
max-width: 400px;
padding: 14px 20px;
font-family: 'Space Grotesk', sans-serif;
font-size: 14px;
line-height: 1.4;
display: flex;
align-items: flex-start;
gap: 10px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
transform: translateX(120%);
opacity: 0;
transition: transform 0.35s ease, opacity 0.35s ease;
pointer-events: auto;
}
.cav-toast.is-visible {
transform: translateX(0);
opacity: 1;
}
.cav-toast-success {
background: #f0fdf4;
color: #15803d;
border-left: 3px solid #15803d;
}
.cav-toast-error {
background: #fef2f2;
color: #b91c1c;
border-left: 3px solid #E40521;
}
.cav-toast-icon {
flex-shrink: 0;
margin-top: 1px;
}
.cav-toast-text {
flex: 1;
}
.cav-toast-close {
background: none;
border: none;
cursor: pointer;
padding: 0;
color: inherit;
opacity: 0.5;
flex-shrink: 0;
margin-top: 1px;
transition: opacity 0.15s;
}
.cav-toast-close:hover {
opacity: 1;
}
@media (max-width: 639px) {
.cav-toast {
left: 16px;
right: 16px;
max-width: none;
}
}
/* ── Module page: bottom-center red validation toast ── */
.cv-module-toast-wrap {
position: fixed;
left: 50%;
bottom: 24px;
transform: translateX(-50%) translateY(24px);
z-index: 100000;
width: min(595px, calc(100vw - 32px));
opacity: 0;
pointer-events: none;
transition: transform .35s ease, opacity .35s ease;
}
.cv-module-toast-wrap.is-visible {
transform: translateX(-50%) translateY(0);
opacity: 1;
pointer-events: auto;
}
.cv-module-toast {
display: flex;
align-items: center;
gap: 20px;
background: #E40521;
color: #F6F5EA;
padding: 12px 12px 12px 28px;
font-family: 'Space Grotesk', sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 1;
box-shadow: 0 10px 34px rgba(0, 0, 0, 0.2);
}
.cv-module-toast-icon { flex-shrink: 0; }
.cv-module-toast-text { flex: 1; }
.cv-module-toast-close {
flex-shrink: 0;
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
background: #F6F5EA;
color: #E40521;
border: none;
cursor: pointer;
transition: opacity .15s ease;
}
.cv-module-toast-close:hover { opacity: .85; }
@media (min-width: 1024px) {
.cv-module-toast { height: 63px; padding-top: 0; padding-bottom: 0; }
}
@media (max-width: 639px) {
.cv-module-toast { font-size: 16px; gap: 12px; padding: 10px 10px 10px 18px; }
.cv-module-toast-close { width: 44px; height: 44px; }
}
/* ── Module à-la-carte: afternoon-selection cards reuse /a-la-carte/ .alc-module styling.
Unavailable (not running the chosen week) → greyed + non-interactive. ── */
.cv-module-card-off { opacity: .4; pointer-events: none; cursor: not-allowed; }
/* ── Calendar: beginner-only indicator (disabled) ── */
/* ── Formation document download bar ── */
.formation-doc-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 20px;
background: rgba(246, 245, 234, 0.6);
border: 1px solid rgba(43, 47, 53, 0.06);
margin-bottom: 16px;
width: 100%;
}
.formation-doc-text {
font-family: 'Space Grotesk', sans-serif;
font-size: 14px;
font-weight: 400;
color: #2B2F35;
margin: 0;
line-height: 1.4;
flex: 1;
}
.formation-doc-btn {
display: inline-flex;
align-items: center;
justify-content: center; /* icon counts toward centering (QA 2026-07-23) */
gap: 8px;
padding: 10px 16px;
background: #E40521;
color: #fff;
font-family: 'Space Grotesk', sans-serif;
font-size: 14px;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
transition: background 0.15s;
}
.formation-doc-btn:hover {
background: #c5041c;
color: #fff;
}
.formation-doc-btn svg {
stroke: #fff;
}
.formation-doc-btn-disabled {
background: rgba(43, 47, 53, 0.15);
color: rgba(43, 47, 53, 0.5);
cursor: not-allowed;
}
.formation-doc-btn-disabled svg {
stroke: rgba(43, 47, 53, 0.5);
}
@media (max-width: 639px) {
.formation-doc-bar {
flex-direction: column;
align-items: flex-start;
}
.formation-doc-btn {
width: 100%; /* full-width, content centered via justify-content (QA 2026-07-23) */
}
}
.formation-doc-bar--bottom {
margin-top: 40px;
}
/* ── Cart document upload rows ── */
.panier-docs-section {
display: flex;
flex-direction: column;
gap: 0;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid rgba(43, 47, 53, 0.06);
}
.panier-docs-title {
font-size: 14px;
font-weight: 500;
color: #2B2F35;
margin: 0 0 12px;
}
.panier-doc-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
border: 1px solid rgba(43, 47, 53, 0.1);
margin-bottom: -1px;
}
.panier-doc-info {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
min-width: 0;
}
.panier-doc-name {
font-size: 14px;
color: #2B2F35;
}
.panier-doc-upload-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
background: #E40521;
color: #fff;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background 0.15s;
flex-shrink: 0;
}
.panier-doc-upload-btn:hover {
background: #c5041c;
}
.panier-doc-upload-btn svg {
stroke: #fff;
}
.panier-doc-file-input {
position: absolute;
width: 0;
height: 0;
opacity: 0;
pointer-events: none;
}
.panier-doc-uploaded {
background: rgba(246, 245, 234, 0.5);
}
/* Missing required document flagged when the user tries to proceed. */
.panier-doc-row.panier-doc-error {
box-shadow: inset 0 0 0 1px #E40521;
}
.panier-doc-uploaded .panier-doc-upload-btn {
display: none;
}
/* AJAX upload in flight — dim the row and block double submissions. */
.panier-doc-row.panier-doc-uploading {
opacity: 0.55;
pointer-events: none;
}
.panier-doc-remove-btn {
background: none;
border: 1px solid rgba(43, 47, 53, 0.15);
cursor: pointer;
padding: 6px;
color: rgba(43, 47, 53, 0.4);
transition: color 0.15s;
display: flex;
align-items: center;
}
.panier-doc-remove-btn:hover {
color: #E40521;
}
.panier-doc-filename {
font-size: 13px;
color: rgba(43, 47, 53, 0.6);
margin-left: 4px;
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
vertical-align: middle;
}
/* ── Mobile menu — flush with header ───────────────────────────── */
#mobile-menu {
top: 80px !important;
}
/* ── Mobile nav items ─────────────────────────────────────────── */
.mobile-nav-list {
list-style: none;
margin: 0;
padding: 0;
}
.mobile-nav-item {
border-bottom: 1px solid rgba(43, 47, 53, 0.08);
}
.mobile-menu-item {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
font-family: 'Space Grotesk', sans-serif;
font-size: 17px;
font-weight: 500;
color: #2B2F35;
padding: 16px 0;
background: none;
border: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.mobile-menu-chevron {
stroke: #2B2F35;
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
flex-shrink: 0;
}
.mobile-menu-item[aria-expanded="true"] .mobile-menu-chevron {
transform: rotate(180deg);
}
.mobile-nav-link {
display: block;
font-family: 'Space Grotesk', sans-serif;
font-size: 17px;
font-weight: 500;
color: #2B2F35;
text-decoration: none;
padding: 16px 0;
}
/* Submenu panel */
.mobile-submenu {
overflow: hidden;
height: 0;
}
.mobile-submenu-list {
list-style: none;
margin: 0;
padding: 0 0 12px 0;
}
.mobile-submenu-link {
display: flex;
align-items: center;
gap: 12px;
font-family: 'Space Grotesk', sans-serif;
font-size: 15px;
font-weight: 400;
color: #2B2F35;
text-decoration: none;
padding: 10px 0 10px 8px;
border-radius: 8px;
transition: background-color 0.2s, color 0.2s;
}
.mobile-submenu-link:hover,
.mobile-submenu-link:active {
background-color: rgba(43, 47, 53, 0.05);
}
.mobile-submenu-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: #2B2F35;
flex-shrink: 0;
opacity: 0.25;
transition: opacity 0.2s;
}
.mobile-submenu-link:hover .mobile-submenu-dot,
.mobile-submenu-link:active .mobile-submenu-dot {
opacity: 0.6;
}
/* ── Catalogue mobile tab dropdown ─────────────────────────────── */
@media (max-width: 1023px) {
#catalogue-mobile-trigger {
padding: 12px 16px !important;
font-size: 16px !important;
text-align: left !important;
}
.catalogue-mobile-option,
#catalogue-mobile-dropdown .catalogue-tab {
width: 100%;
display: block;
text-align: left;
padding: 14px 16px;
font-family: 'Space Grotesk', sans-serif;
font-size: 16px;
font-weight: 500;
color: #2B2F35;
background: none;
border: none;
border-bottom: 1px solid rgba(43, 47, 53, 0.08);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.catalogue-mobile-option:last-child,
#catalogue-mobile-dropdown .catalogue-tab:last-child {
border-bottom: none;
}
}
/* ── Catalogue page — mobile fixes ─────────────────────────────── */
@media (max-width: 639px) {
/* Product cards: reduce content padding */
.product-card > .grow {
padding: 16px !important;
gap: 16px !important;
}
/* Product cards: reduce min-height */
.product-card {
min-height: 240px;
}
/* Card title: smaller on mobile */
.product-card h3 {
font-size: 20px;
}
/* Card separator: subtler on mobile, enforce 1px */
.product-card > .h-px {
width: calc(100% - 32px) !important;
height: 1px !important;
min-height: 0 !important;
max-height: 1px !important;
opacity: 0.5;
}
/* Card "En savoir plus" row: reduce padding */
.product-card > div:last-child {
padding-left: 16px !important;
padding-right: 16px !important;
padding-bottom: 16px !important;
}
/* Card "En savoir plus" text + arrow: smaller */
.product-card > div:last-child > span {
font-size: 16px;
}
.product-card > div:last-child svg {
width: 28px;
height: 28px;
}
/* Filter groups: constrain to viewport */
.catalogue-filter-group {
max-width: calc(100vw - 32px);
overflow: hidden;
}
/* Filter tags: more compact */
.catalogue-filter-tags {
gap: 6px !important;
}
.catalogue-filter-tag {
height: 40px !important;
padding-left: 10px !important;
padding-right: 10px !important;
font-size: 14px !important;
}
/* Filter scrollbar: hide but keep scrollable */
.catalogue-filter-tags {
scrollbar-width: none;
-ms-overflow-style: none;
}
.catalogue-filter-tags::-webkit-scrollbar {
display: none;
}
/* CTA "Modules à la carte" section: reduce gap */
.catalogue-products-panel .bg-cream-100 .flex.flex-col.md\:items-center {
gap: 24px !important;
}
/* Products grid: tighter gap */
.catalogue-products-grid {
gap: 12px !important;
}
}
/* ── Single formation page — mobile fixes ─────────────────────── */
@media (max-width: 639px) {
/* White card: reduce horizontal + top padding on mobile */
.formation-content-card {
padding-left: 16px !important;
padding-right: 16px !important;
padding-top: 20px !important;
}
/* H1 title: slightly smaller on mobile */
.formation-page-title {
font-size: 26px !important;
}
/* Intro paragraph: normalize size on mobile */
.formation-intro-text {
font-size: 16px !important;
line-height: 1.6 !important;
}
/* Characteristics items: tighter padding + smaller text */
.formation-char-item {
padding-top: 16px !important;
padding-bottom: 16px !important;
}
.formation-char-item p {
font-size: 15px !important;
line-height: 1.5 !important;
}
/* Hébergement inner card: padding handled by .formation-accom-left / .formation-accom-right rules above. */
.formation-accom-card p {
font-size: 15px !important;
}
/* Tarif outer wrapper: tighter gap */
.formation-tarif-wrap {
gap: 12px !important;
}
/* Inner price/tarif card: reduce padding */
.formation-price-box {
padding: 16px !important;
}
/* Right column in tarif: breathing room between the Incluant list and the price
card (QA 2026-07-23 — was 8px, the beige box sat glued to the bullets). */
.formation-tarif-right {
margin-top: 32px !important;
}
/* Stepper row: ensure price + counter don't overflow */
.tarif-stepper-total {
font-size: 22px !important;
}
.tarif-stepper-weeks {
font-size: 32px !important;
}
/* Calendar: reduce horizontal padding so cells are larger */
.datepicker-inline .datepicker-calendar {
padding-left: 12px !important;
padding-right: 12px !important;
padding-top: 20px !important;
}
.datepicker-inline .datepicker-header {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Day name labels: slightly more readable */
.datepicker-inline .flex.items-start.justify-between > p {
font-size: 13px !important;
}
/* Day cells: slightly larger font, ensure min tap height */
.datepicker-inline .datepicker-day {
font-size: 15px !important;
min-height: 40px !important;
}
/* Month/year labels: smaller on mobile */
.datepicker-inline .dp-select-label {
font-size: 15px !important;
}
}
/* ── Campus page — hero ─────────────────────────────────────────── */
.campus-hero-section {
min-height: calc(100vh - 128px);
padding-bottom: 64px;
}
@media (max-width: 639px) {
.campus-hero-section {
min-height: 65vh;
padding-bottom: 80px;
}
.campus-hero-title {
font-size: 36px;
line-height: 1.1;
padding-left: 16px;
padding-right: 16px;
}
}
/* ── Campus page — mobile fixes ────────────────────────────────── */
@media (max-width: 639px) {
/* Section headings: reduce from 32-36px to 26px */
.campus-h2 {
font-size: 26px !important;
line-height: 1.15 !important;
}
/* Section descriptions: reduce from 18-20px to 16px */
.campus-desc {
font-size: 16px !important;
line-height: 1.6 !important;
}
/* Cubes/stats grid: reduce cell height for more compact layout */
.campus-cubes-row > div {
height: 140px !important;
}
/* Map placeholder: taller aspect ratio on mobile */
.campus-map-box {
aspect-ratio: 16 / 9 !important;
}
/* Section top/bottom padding: tighter on mobile */
.campus-section-tight {
padding-top: 40px !important;
padding-bottom: 40px !important;
}
}
/* ── Add-to-cart button ── */
.atc-btn {
display: flex !important;
align-items: center;
justify-content: center;
width: 100%;
padding: 20px;
background-color: #2B2F35;
color: #fff;
font-family: 'Space Grotesk', sans-serif;
font-weight: 600;
font-size: 16px;
line-height: normal;
border: none;
cursor: pointer;
transition: background-color 0.2s;
}
.atc-btn:hover {
background-color: #1a1d22;
}
/* ── Cart badge: ensure hidden overrides inline-flex ── */
.cart-badge.hidden { display: none !important; }
/* ── Header language dropdown ── */
.header-lang-menu {
position: absolute;
top: calc(100% + 17px);
right: 0;
min-width: 160px;
background: #fff;
border: 1px solid rgba(43, 47, 53, 0.08);
box-shadow: 0 8px 24px rgba(43, 47, 53, 0.12), 0 2px 8px rgba(43, 47, 53, 0.06);
padding: 6px;
z-index: 200;
}
.header-lang-item {
display: block;
padding: 9px 12px;
font-family: 'Space Grotesk', sans-serif;
font-size: 14px;
font-weight: 400;
color: #2B2F35;
text-decoration: none;
border-radius: 4px;
transition: background-color 0.12s;
}
.header-lang-item:hover {
background: rgba(246, 245, 234, 0.6);
}
.header-lang-item.is-active {
background: rgba(246, 245, 234, 0.8);
}
/* ── Apprenant modal billing section ── */
.apprenant-modal-billing {
padding: 0;
}
/* space-y-4: 16px vertical rhythm between the billing rows */
.apprenant-modal-billing-fields { display: flex; flex-direction: column; gap: 16px; }
.apprenant-modal-billing-fields.hidden { display: none; }
/* Greyed/non-interactive until "renseigner une adresse différente" is ticked */
.apprenant-modal-billing-fields.is-disabled { opacity: 0.5; pointer-events: none; }
/* "Êtes-vous déjà venu au CAVILAM ?" — Oui / Non on one row */
.apprenant-deja-venu-group { display: flex; flex-direction: row; gap: 28px; flex-wrap: wrap; margin-top: 8px; }
/* Thin divider between the billing checkbox and the billing fields (Figma) */
.apprenant-billing-divider { height: 1px; background: rgba(43, 47, 53, 0.2); margin: 0; }
/* Unified field-label typography in the apprenant modal (Figma) */
.apprenant-modal-form .form-label,
.apprenant-modal-form .apprenant-modal-label {
font-family: 'Space Grotesk', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 1.2;
letter-spacing: -0.02em;
}
/* Disabled (greyed) state — e.g. billing fields before "adresse différente" is ticked */
.apprenant-modal-form .is-disabled .form-label,
.apprenant-modal-form .is-disabled .apprenant-modal-label,
.apprenant-modal-form .form-input:disabled,
.apprenant-modal-form .form-label.is-disabled {
opacity: 0.5;
}
/* ── News article photo gallery carousel (single.php) ── */
.news-gallery { width: 100%; margin-bottom: 40px; }
/* Carousel: every photo is 411px tall with its aspect ratio preserved (no
cropping). Slides are variable-width (Swiper slidesPerView:'auto') so each
slide hugs its image — images sit side by side with only the gap between
them, no empty centering space. Mixed portrait/landscape galleries stay
uniform in height. */
.news-gallery .swiper-slide { width: auto; height: 411px; display: flex; align-items: center; justify-content: center; }
.news-gallery-slide img {
width: auto;
max-width: none;
height: 411px;
display: block;
}
.news-gallery-controls {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 20px;
padding: 0 24px;
}
.news-gallery-pagination {
position: static !important; /* override Swiper's default absolute positioning */
display: flex;
align-items: center;
gap: 8px;
width: auto;
}
.news-gallery-pagination .swiper-pagination-bullet {
width: 8px;
height: 8px;
margin: 0 !important;
border-radius: 50%;
background: rgba(43, 47, 53, 0.25);
opacity: 1;
cursor: pointer;
transition: background 0.2s;
}
.news-gallery-pagination .swiper-pagination-bullet-active { background: #2B2F35; }
.news-gallery-nav { display: flex; gap: 12px; }
.news-gallery-prev,
.news-gallery-next {
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid rgba(43, 47, 53, 0.2);
background: transparent;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: opacity 0.2s, background 0.2s;
}
.news-gallery-prev:hover,
.news-gallery-next:hover { background: rgba(43, 47, 53, 0.05); }
.news-gallery-prev:disabled,
.news-gallery-next:disabled { opacity: 0.3; cursor: not-allowed; }
/* Single article image (1 gallery photo, or featured-image fallback) — bounded to 480px, aspect kept */
.news-single-image { width: 100%; margin-bottom: 40px; display: flex; justify-content: center; }
.news-single-image img { max-height: 480px; width: auto; max-width: 100%; height: auto; display: block; object-fit: contain; }
/* Partner logos — uniform height, natural width, centered & wrapping (~5 per row,
last row centered). Handles BOTH sources: a Gutenberg gallery block in the editor
content AND the ACF "partners" relationship rendered as .news-logos. */
.article-content .wp-block-gallery,
.news-logos {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 28px 48px;
margin: 24px 0;
}
.article-content .wp-block-gallery .wp-block-image,
.article-content .wp-block-gallery figure {
margin: 0;
flex: 0 0 auto;
width: auto;
}
.article-content .wp-block-gallery img,
.news-logos .news-logo {
height: 97.35px;
width: auto;
max-width: 100%;
object-fit: contain;
display: block;
}
/* ── Profile Apprenants tab (Figma design) ── */
.pf-tab-content {
display: flex;
flex-direction: column;
gap: 70px;
width: 100%;
}
.pf-section {
display: flex;
flex-direction: column;
width: 100%;
}
.pf-section > .pf-section-title {
margin-bottom: 20px;
}
.pf-section > .pf-apprenant-list:not(:empty) ~ .pf-add-btn,
.pf-section > .pf-apprenant-list:not(:empty) {
margin-top: 20px;
}
.pf-section > .pf-apprenant-list:not(:empty) {
margin-bottom: 20px;
}
.pf-section > .pf-add-form {
margin-bottom: 20px;
}
.pf-section-title {
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 1;
text-transform: uppercase;
color: #2B2F35;
margin: 0;
}
.pf-main-block {
display: flex;
flex-direction: column;
gap: 0;
}
.pf-main-name {
font-family: 'Space Grotesk', sans-serif;
font-weight: 500;
font-size: 24px;
line-height: 1.2;
letter-spacing: -0.48px;
color: #2B2F35;
margin: 0;
}
.pf-main-email {
font-family: 'Space Grotesk', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.2;
letter-spacing: -0.32px;
color: #2B2F35;
margin: 8px 0 0;
}
.pf-separator {
width: 100%;
height: 1px;
background: rgba(43, 47, 53, 0.12);
margin-top: 17px;
}
.pf-main-block .pf-separator {
margin-top: 20px;
}
/* Apprenant list */
.pf-apprenant-list {
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
}
.pf-apprenant-item {
width: 100%;
}
.pf-apprenant-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
width: 100%;
cursor: pointer;
}
.pf-apprenant-identity {
display: flex;
flex-direction: column;
gap: 6px;
}
.pf-apprenant-name {
font-family: 'Space Grotesk', sans-serif;
font-weight: 500;
font-size: 24px;
line-height: 1.2;
letter-spacing: -0.48px;
color: #2B2F35;
margin: 0;
}
.pf-apprenant-email {
font-family: 'Space Grotesk', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.2;
letter-spacing: -0.32px;
color: #2B2F35;
margin: 0;
}
.pf-apprenant-chevron {
background: none;
border: none;
cursor: pointer;
padding: 0;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.pf-apprenant-chevron svg {
transition: transform 0.25s ease;
display: block;
}
.pf-apprenant-chevron[aria-expanded="true"] svg {
transform: rotate(180deg);
}
/* Detail panel (cream background) */
.pf-detail-panel {
background: #F6F5EA;
padding: 30px;
display: flex;
flex-direction: column;
gap: 30px;
}
.pf-apprenant-body .pf-detail-panel,
.pf-add-form .pf-detail-panel {
margin-top: 0;
}
.pf-apprenant-body {
padding-bottom: 10px;
}
.pf-detail-section {
display: flex;
flex-direction: column;
gap: 20px;
}
.pf-detail-heading {
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 1;
color: #2B2F35;
margin: 0;
padding-bottom: 10px;
border-bottom: 1px solid #E6D5B6;
}
.pf-field-grid {
display: flex;
flex-direction: column;
gap: 20px;
}
.pf-field-grid .pf-field-row,
.pf-field-grid > div:not(.pf-field) {
display: flex;
gap: 20px;
}
/* Two-column pairs */
.pf-field-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.pf-field-grid .pf-field:nth-child(5) {
grid-column: 1;
}
.pf-field {
display: flex;
flex-direction: column;
gap: 10px;
}
.pf-field-label {
font-family: 'Space Grotesk', sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 1.2;
letter-spacing: -0.32px;
color: #2B2F35;
display: block;
}
.pf-field-value {
font-family: 'Space Grotesk', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.2;
letter-spacing: -0.32px;
color: #2B2F35;
opacity: 0.7;
padding-bottom: 10px;
display: block;
}
/* Detail action buttons */
.pf-detail-actions {
display: flex;
gap: 10px;
align-items: flex-start;
}
.pf-btn-filled {
background: #2B2F35;
border: 1px solid #2B2F35;
color: #F6F5EA;
font-family: 'Space Grotesk', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
padding: 10px 16px;
cursor: pointer;
transition: background 0.15s;
}
.pf-btn-filled:hover {
background: #1a1d22;
}
.pf-btn-outline {
background: transparent;
border: 1px solid #2B2F35;
color: #2B2F35;
font-family: 'Space Grotesk', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
padding: 10px 16px;
cursor: pointer;
transition: background 0.15s;
}
.pf-btn-outline:hover {
background: rgba(43, 47, 53, 0.04);
}
.pf-btn-outline-light {
background: transparent;
border: 1px solid rgba(43, 47, 53, 0.2);
color: #2B2F35;
font-family: 'Space Grotesk', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
padding: 10px 16px;
cursor: pointer;
display: flex;
gap: 10px;
align-items: center;
transition: background 0.15s;
}
.pf-btn-outline-light:hover {
background: rgba(43, 47, 53, 0.04);
}
/* Delete banner */
.pf-delete-banner {
background: #2B2F35;
padding: 20px 30px;
display: flex;
flex-direction: column;
gap: 20px;
}
.pf-delete-banner p {
font-family: 'Space Grotesk', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
color: #F6F5EA;
margin: 0;
max-width: 436px;
}
.pf-delete-actions {
display: flex;
gap: 10px;
align-items: center;
}
.pf-btn-delete-confirm {
background: rgba(246, 245, 234, 0.1);
border: none;
color: #F6F5EA;
font-family: 'Space Grotesk', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
padding: 10px 16px;
cursor: pointer;
display: flex;
gap: 10px;
align-items: center;
transition: background 0.15s;
}
.pf-btn-delete-confirm:hover {
background: rgba(246, 245, 234, 0.2);
}
.pf-btn-delete-confirm svg {
stroke: #F6F5EA;
}
.pf-btn-delete-cancel {
background: transparent;
border: 1px solid rgba(246, 245, 234, 0.2);
color: #F6F5EA;
font-family: 'Space Grotesk', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
padding: 10px 16px;
cursor: pointer;
transition: background 0.15s;
}
.pf-btn-delete-cancel:hover {
background: rgba(246, 245, 234, 0.1);
}
/* Success message */
.pf-success-msg {
display: flex;
gap: 10px;
align-items: center;
}
.pf-success-msg span {
font-family: 'Space Grotesk', sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 1.5;
color: #2B2F35;
}
/* Add button */
.pf-add-btn {
display: inline-flex;
gap: 12px;
align-items: center;
padding: 10px 16px;
background: #2B2F35;
border: none;
cursor: pointer;
transition: background 0.15s;
font-family: 'Space Grotesk', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
color: #F6F5EA;
align-self: flex-start;
}
.pf-add-btn:hover {
background: #1a1d22;
}
/* ── Profile avatar ── */
.profile-avatar-wrap {
width: 81px;
height: 81px;
border-radius: 50%;
background: #d4d4d4;
overflow: hidden;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.profile-avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.profile-avatar-initial {
font-family: 'Space Grotesk', sans-serif;
font-weight: 500;
font-size: 24px;
color: #fff;
}
@media (max-width: 767px) {
.profile-avatar-wrap { width: 60px; height: 60px; }
.profile-avatar-initial { font-size: 20px; }
}
/* ── Crop modal ── */
/* ── Crop modal — overlay ── */
.crop-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(4px);
z-index: 100000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
}
.crop-modal-overlay.is-open {
opacity: 1;
visibility: visible;
}
/* ── Crop modal — dialog ── */
.crop-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.92);
z-index: 100001;
width: 520px;
max-width: 92vw;
max-height: 90vh;
background: #fff;
border-radius: 2px;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, transform 0.3s ease-out, visibility 0.3s;
}
.crop-modal.is-open {
opacity: 1;
visibility: visible;
transform: translate(-50%, -50%) scale(1);
}
.crop-modal-inner {
display: flex;
flex-direction: column;
overflow: hidden;
}
/* ── Header ── */
.crop-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 28px;
}
.crop-modal-title {
font-family: 'Space Grotesk', sans-serif;
font-weight: 500;
font-size: 18px;
color: #2B2F35;
margin: 0;
}
.crop-modal-close {
background: none;
border: none;
cursor: pointer;
padding: 6px;
color: #2B2F35;
opacity: 0.35;
transition: opacity 0.15s;
border-radius: 50%;
}
.crop-modal-close:hover {
opacity: 1;
background: rgba(43, 47, 53, 0.06);
}
/* ── Body (crop area) ── */
.crop-modal-body {
padding: 0;
background: #1a1a1a;
display: flex;
align-items: center;
justify-content: center;
min-height: 320px;
max-height: 420px;
overflow: hidden;
}
.crop-modal-preview-area {
width: 100%;
height: 100%;
}
.crop-modal-preview-area img {
display: block;
max-width: 100%;
}
/* ── Cropper.js overrides — circular, clean ── */
.crop-modal .cropper-view-box,
.crop-modal .cropper-face {
border-radius: 50%;
}
.crop-modal .cropper-view-box {
outline: 2px solid rgba(255, 255, 255, 0.8);
outline-offset: -2px;
box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
}
.crop-modal .cropper-face {
background: transparent;
}
.crop-modal .cropper-dashed {
display: none;
}
.crop-modal .cropper-point {
background: #fff;
width: 8px;
height: 8px;
border-radius: 50%;
opacity: 0.8;
}
.crop-modal .cropper-point.point-se {
width: 8px;
height: 8px;
}
.crop-modal .cropper-line {
background: transparent;
}
.crop-modal .cropper-modal {
background: rgba(0, 0, 0, 0.55);
}
.crop-modal .cropper-bg {
background-image: none;
background: #1a1a1a;
}
/* ── Controls toolbar ── */
.crop-modal-controls {
padding: 14px 28px;
display: flex;
justify-content: center;
background: #fff;
}
.crop-modal-tools {
display: flex;
gap: 2px;
align-items: center;
background: rgba(43, 47, 53, 0.04);
border-radius: 6px;
padding: 4px;
}
.crop-tool-btn {
background: transparent;
border: none;
cursor: pointer;
padding: 8px 10px;
color: rgba(43, 47, 53, 0.6);
border-radius: 4px;
transition: background 0.15s, color 0.15s;
display: flex;
align-items: center;
justify-content: center;
}
.crop-tool-btn:hover {
background: rgba(43, 47, 53, 0.08);
color: #2B2F35;
}
.crop-tool-btn:active {
background: rgba(43, 47, 53, 0.14);
}
.crop-tool-sep {
width: 1px;
height: 18px;
background: rgba(43, 47, 53, 0.1);
margin: 0 4px;
}
/* ── Footer ── */
.crop-modal-footer {
display: flex;
justify-content: flex-end;
gap: 10px;
padding: 18px 28px;
border-top: 1px solid rgba(43, 47, 53, 0.06);
}
.crop-modal-cancel {
background: transparent;
border: 1px solid rgba(43, 47, 53, 0.2);
color: #2B2F35;
font-family: 'Space Grotesk', sans-serif;
font-weight: 400;
font-size: 15px;
padding: 10px 24px;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.crop-modal-cancel:hover {
background: rgba(43, 47, 53, 0.04);
border-color: rgba(43, 47, 53, 0.35);
}
.crop-modal-save {
background: #2B2F35;
border: 1px solid #2B2F35;
color: #F6F5EA;
font-family: 'Space Grotesk', sans-serif;
font-weight: 400;
font-size: 15px;
padding: 10px 24px;
cursor: pointer;
transition: background 0.15s;
}
.crop-modal-save:hover {
background: #1a1d22;
}
.crop-modal-save:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* Override form-input inside cream panels for contrast */
.pf-detail-panel .form-input {
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(43, 47, 53, 0.12);
}
.pf-detail-panel .form-input:focus {
border-color: #2B2F35;
}
.pf-detail-panel .civilite-option input[type="radio"]:not(:checked):hover {
background: #fff;
}
/* Form fields (reuses .form-input, .form-label, .civilite-group from global) */
.pf-form-fields {
display: flex;
flex-direction: column;
gap: 20px;
}
.pf-form-row {
display: flex;
gap: 20px;
}
.pf-form-row > .w-full {
flex: 1;
min-width: 0;
}
.pf-form-half {
max-width: calc(50% - 10px);
}
/* Add form wrapper */
.pf-add-form {
padding-bottom: 10px;
}
/* ── Header profile (logged-in) ── */
.header-profile {
position: relative;
z-index: 200;
}
.header-profile-trigger {
display: flex;
align-items: center;
gap: 8px;
height: 36px;
padding: 3px 12px 3px 3px;
border: none;
border-radius: 100px;
cursor: pointer;
transition: opacity 0.2s;
outline: none;
}
.header-profile-trigger:hover { opacity: 0.8; }
.header-profile-avatar {
width: 30px;
height: 30px;
border-radius: 50%;
background: #2B2F35;
color: #F6F5EA;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 600;
font-family: 'Space Grotesk', sans-serif;
letter-spacing: 0.5px;
flex-shrink: 0;
line-height: 1;
}
.header-profile-avatar.is-transparent {
background: rgba(246, 245, 234, 0.2);
color: #F6F5EA;
}
.header-profile-name {
font-family: 'Space Grotesk', sans-serif;
font-size: 14px;
font-weight: 500;
white-space: nowrap;
line-height: 1;
}
.header-profile-chevron {
flex-shrink: 0;
transition: transform 0.2s;
}
.header-profile.is-open .header-profile-chevron {
transform: rotate(180deg);
}
/* Dropdown menu */
.header-profile-menu {
position: absolute;
top: calc(100% + 17px);
right: 0;
min-width: 240px;
background: #fff;
border: 1px solid rgba(43, 47, 53, 0.08);
box-shadow: 0 8px 24px rgba(43, 47, 53, 0.12), 0 2px 8px rgba(43, 47, 53, 0.06);
padding: 6px;
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
.header-profile.is-open .header-profile-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.header-profile-menu-user {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 10px 12px;
}
.header-profile-menu-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: #2B2F35;
color: #F6F5EA;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 600;
font-family: 'Space Grotesk', sans-serif;
letter-spacing: 0.5px;
flex-shrink: 0;
}
.header-profile-menu-name {
display: block;
font-family: 'Space Grotesk', sans-serif;
font-size: 14px;
font-weight: 600;
color: #2B2F35;
line-height: 1.3;
}
.header-profile-menu-email {
display: block;
font-family: 'Space Grotesk', sans-serif;
font-size: 12px;
color: rgba(43, 47, 53, 0.5);
line-height: 1.3;
}
.header-profile-menu-sep {
height: 1px;
background: rgba(43, 47, 53, 0.08);
margin: 4px 10px;
}
.header-profile-menu-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 10px;
font-family: 'Space Grotesk', sans-serif;
font-size: 14px;
font-weight: 400;
color: #2B2F35;
text-decoration: none;
border-radius: 4px;
transition: background-color 0.12s;
}
.header-profile-menu-item:hover {
background: rgba(246, 245, 234, 0.6);
}
.header-profile-menu-item svg {
flex-shrink: 0;
color: rgba(43, 47, 53, 0.45);
}
.header-profile-menu-logout {
color: #E40521;
}
.header-profile-menu-logout svg {
color: #E40521;
}
/* ── Apprenant modal overlay ── */
.apprenant-modal-overlay {
position: fixed;
inset: 0;
z-index: 11002;
background: rgba(43, 47, 53, 0.8);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
}
.apprenant-modal-overlay.is-open {
opacity: 1;
pointer-events: auto;
}
/* ── Apprenant modal (centered) ── */
.apprenant-modal {
position: fixed;
z-index: 11003;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.95);
width: 808px;
max-width: calc(100vw - 32px);
max-height: calc(100vh - 60px);
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.apprenant-modal.is-open {
opacity: 1;
pointer-events: auto;
transform: translate(-50%, -50%) scale(1);
}
.apprenant-modal-close {
background: none;
border: 1px solid #F6F5EA;
cursor: pointer;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
color: #F6F5EA;
}
.apprenant-modal-inner {
width: 100%;
background: #fff;
padding: 40px 37px;
overflow-y: auto;
max-height: calc(100vh - 120px);
box-sizing: border-box;
}
.apprenant-modal-header { margin-bottom: 40px; }
.apprenant-modal-title {
font-size: 24px;
font-weight: 500;
letter-spacing: -0.48px;
color: #2B2F35;
margin: 0 0 30px;
}
.apprenant-modal-separator {
height: 1px;
background: #e6d5b6;
}
.apprenant-panel-error {
font-size: 14px;
color: #E40521;
margin-bottom: 16px;
line-height: 1.5;
white-space: pre-line;
display: none;
}
.apprenant-panel-error.visible { display: block; }
/* ── Modal section headers (Monogramme icon pattern) ── */
.apprenant-modal-section { margin-bottom: 40px; }
.apprenant-modal-section-header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 30px;
}
.apprenant-modal-section-title {
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
color: #2B2F35;
white-space: nowrap;
}
.apprenant-modal-section-line {
flex: 1;
height: 1px;
background: #2B2F35;
}
/* ── Bordered form box ── */
.apprenant-modal-box {
border: 1px solid rgba(43, 47, 53, 0.2);
padding: 30px;
display: flex;
flex-direction: column;
gap: 30px;
}
.apprenant-modal-row {
display: flex;
gap: 20px;
}
.apprenant-modal-row > .apprenant-modal-field { flex: 1; }
.apprenant-modal-field {
display: flex;
flex-direction: column;
gap: 10px;
}
.apprenant-modal-label {
font-size: 18px;
font-weight: 400;
letter-spacing: -0.36px;
color: #2B2F35;
margin: 0;
line-height: 1.2;
}
.apprenant-modal-input {
width: 100%;
padding: 15px 20px;
background: rgba(246, 245, 234, 0.7);
border: none;
font-size: 18px;
font-weight: 400;
letter-spacing: -0.36px;
color: #2B2F35;
outline: none;
box-sizing: border-box;
}
.apprenant-modal-input::placeholder {
color: #2B2F35;
opacity: 0.6;
}
.apprenant-civilite-wrap {
display: flex;
gap: 30px;
align-items: center;
padding: 10px 0;
}
.apprenant-civilite-item {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
}
.apprenant-civilite-radio {
width: 16px;
height: 16px;
accent-color: #2B2F35;
cursor: pointer;
flex-shrink: 0;
}
.apprenant-civilite-item label {
font-family: 'Space Grotesk', sans-serif;
font-size: 18px;
font-weight: 500;
color: #2B2F35;
cursor: pointer;
line-height: 1.5;
}
/* ── Checkboxes ── */
.apprenant-modal-checkboxes {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 40px;
}
.apprenant-modal-checkboxes .copy-address-label span {
font-size: 14px;
line-height: 1.4;
}
.apprenant-billing-check {
margin-bottom: 0;
}
.apprenant-modal-billing-fields:not(.hidden) {
margin-bottom: 30px;
}
/* ── Submit button ── */
.apprenant-modal-submit {
display: block;
width: 100%;
padding: 20px;
background: #2B2F35;
color: #fff;
border: none;
font-family: 'Space Grotesk', sans-serif;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s;
text-align: center;
}
.apprenant-modal-submit:hover { background: #1a1d22; }
.apprenant-modal-submit:disabled { opacity: 0.6; cursor: not-allowed; }
@media (max-width: 850px) {
.apprenant-modal-row { flex-direction: column; gap: 30px; }
.apprenant-modal-inner { padding: 24px 20px; }
}
/* ── Per-item apprenant selector ── */
.apprenant-selector { position: relative; width: 100%; }
.apprenant-select-btn {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 16px;
background: #f5f1e8;
border: 1px solid rgba(43, 47, 53, 0.15);
color: #2B2F35;
font-family: 'Space Grotesk', sans-serif;
font-size: 15px;
cursor: pointer;
width: 100%;
transition: border-color 0.15s;
text-align: left;
}
.apprenant-select-btn:hover { border-color: rgba(43, 47, 53, 0.4); }
.apprenant-dropdown-wrap { position: static; }
.apprenant-select-col {
position: relative;
flex: 1;
min-width: 0;
}
.apprenant-select-col .panier-apprenant-select {
width: 100%;
max-width: none;
}
.apprenant-dropdown {
position: absolute;
top: calc(100% + 2px);
left: 0;
right: 0;
background: #F6F5EA;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
z-index: 200;
max-height: 280px;
overflow-y: auto;
display: none;
}
.apprenant-dropdown.open { display: block; }
.apprenant-dropdown-list {
list-style: none;
margin: 0;
padding: 8px 0;
}
.apprenant-dropdown-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 20px;
cursor: pointer;
font-family: 'Space Grotesk', sans-serif;
font-size: 16px;
font-weight: 400;
color: #2B2F35;
transition: background-color 0.1s;
}
.apprenant-dropdown-item:hover { background: rgba(43, 47, 53, 0.06); }
.apprenant-item-initials {
display: none;
}
.apprenant-assigned-initials {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: #2B2F35;
color: #F6F5EA;
font-size: 12px;
font-weight: 600;
flex-shrink: 0;
}
.apprenant-dropdown-loading {
padding: 12px 20px;
font-family: 'Space Grotesk', sans-serif;
font-size: 14px;
color: rgba(43, 47, 53, 0.5);
}
.apprenant-create-btn {
display: none;
}
/* Multi-select checkbox in dropdown items */
.apprenant-dropdown-item {
position: relative;
}
.apprenant-dropdown-check {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 16px;
height: 16px;
border: 1px solid #2b2f35;
border-radius: 0;
cursor: pointer;
flex-shrink: 0;
background: transparent;
position: relative;
}
.apprenant-dropdown-check:checked {
background: #2b2f35;
}
.apprenant-dropdown-check:checked::after {
content: '';
position: absolute;
left: 4.5px;
top: 1px;
width: 5px;
height: 10px;
border: solid #F6F5EA;
border-width: 0 1.5px 1.5px 0;
transform: rotate(45deg);
}
/* Single-select eligibility: learners outside the age range / missing a birthdate */
.apprenant-dropdown-item.is-disabled {
cursor: not-allowed;
color: rgba(43, 47, 53, 0.4);
}
.apprenant-dropdown-item.is-disabled:hover { background: transparent; }
.apprenant-dropdown-item.is-disabled .apprenant-dropdown-check {
border-color: rgba(43, 47, 53, 0.3);
cursor: not-allowed;
}
.apprenant-item-reason {
margin-left: auto;
padding-left: 12px;
font-size: 12px;
color: rgba(43, 47, 53, 0.55);
white-space: nowrap;
}
/* Apprenant selected names */
.apprenant-chips {
/* Hidden: selected learner(s) are already shown in the dropdown button label,
so this redundant comma-separated list (incl. "Moi-même") is suppressed. */
display: none;
font-family: 'Space Grotesk', sans-serif;
font-size: 15px;
font-weight: 500;
color: #2B2F35;
line-height: 1.4;
}
/* Price × qty */
.panier-price-qty {
font-size: 13px;
font-weight: 400;
opacity: 0.6;
}
/* Selected count on trigger */
.panier-apprenant-select span.has-selection {
color: #2B2F35;
opacity: 1;
font-weight: 500;
}
.apprenant-assigned.hidden { display: none !important; }
.apprenant-assigned {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
background: #f5f1e8;
border: 1px solid rgba(43, 47, 53, 0.15);
}
.apprenant-assigned-info {
display: flex;
align-items: center;
gap: 12px;
}
.apprenant-assigned-name {
font-family: 'Space Grotesk', sans-serif;
font-size: 15px;
font-weight: 500;
color: #2B2F35;
}
.apprenant-change-btn {
background: none;
border: none;
font-family: 'Space Grotesk', sans-serif;
font-size: 13px;
color: rgba(43, 47, 53, 0.55);
cursor: pointer;
padding: 4px 0;
text-decoration: underline;
transition: color 0.15s;
}
.apprenant-change-btn:hover { color: #2B2F35; }
.apprenant-guest-note {
font-size: 14px;
color: rgba(43, 47, 53, 0.65);
line-height: 1.5;
padding: 8px 0;
margin: 0;
}
/* Missing apprenant error highlight */
.apprenant-error .apprenant-select-btn {
border-color: #E40521;
}
.apprenant-validation-error {
font-family: 'Space Grotesk', sans-serif;
font-size: 13px;
color: #E40521;
text-align: center;
margin-top: 8px;
}
@media (max-width: 600px) {
.apprenant-panel-form-grid { grid-template-columns: 1fr; }
}
/* ══════════════════════════════════════════════════════════════════════
INFORMATIONS PAGE (Step 2) — Figma 4093-9695
══════════════════════════════════════════════════════════════════════ */
/* ── Site-wide toast notifications (success / info / warning) ── */
.cav-toast-stack {
position: fixed;
top: 24px;
right: 24px;
display: flex;
flex-direction: column;
gap: 10px;
z-index: 10000;
pointer-events: none;
max-width: 400px;
width: calc(100% - 48px);
}
.cav-toast {
background: #ffffff;
border-left: 3px solid #2B2F35;
box-shadow: 0 4px 16px rgba(43, 47, 53, 0.12);
padding: 14px 18px 14px 16px;
color: #2B2F35;
font-size: 14px;
line-height: 1.5;
pointer-events: auto;
cursor: pointer;
opacity: 0;
transform: translateX(20px);
transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}
.cav-toast.cav-toast--in {
opacity: 1;
transform: translateX(0);
}
.cav-toast.cav-toast--out {
opacity: 0;
transform: translateX(20px);
}
.cav-toast--success { border-left-color: #0B543A; }
.cav-toast--info { border-left-color: #213A88; }
.cav-toast--warning { border-left-color: #F9631E; }
.cav-toast--error { border-left-color: #E40521; }
.cav-toast strong { font-weight: 600; }
/* ── Pending email badge (shown next to email field while a change is awaiting confirmation) ── */
.email-pending-badge {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 6px;
padding: 4px 10px 4px 8px;
background: #fff;
border: 1px solid rgba(249, 99, 30, 0.4);
color: #2B2F35;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
line-height: 1.2;
}
/* Inline status tag rendered next to the field label (e.g. "Email • En attente"). */
.email-pending-tag {
display: inline-flex;
align-items: center;
gap: 5px;
margin-left: 8px;
padding: 2px 8px;
background: #fff;
border: 1px solid rgba(249, 99, 30, 0.4);
color: #2B2F35;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
line-height: 1.2;
vertical-align: middle;
}
.email-pending-tag::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: #F9631E;
flex-shrink: 0;
}
.email-pending-badge-pending-value {
font-weight: 400;
text-transform: none;
letter-spacing: 0;
color: #888;
margin-left: 4px;
}
.email-pending-cancel {
background: none;
border: none;
color: #E40521;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-left: 8px;
padding: 0;
cursor: pointer;
}
.email-pending-cancel:hover { text-decoration: underline; }
.email-pending-resend {
background: none;
border: none;
color: #213A88;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-left: 8px;
padding: 0;
cursor: pointer;
}
.email-pending-resend:hover { text-decoration: underline; }
.email-pending-resend:disabled { opacity: 0.5; cursor: not-allowed; text-decoration: none; }
/* ── Signup OTP step (6-digit verification grid on /registration/) ── */
.signup-otp-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 12px;
max-width: 460px;
}
.signup-otp-input {
width: 100%;
height: 60px;
text-align: center;
font-family: inherit;
font-size: 24px;
font-weight: 600;
color: #2B2F35;
background: #f5f1e8;
border: 1px solid transparent;
outline: none;
transition: border-color 0.15s ease;
}
.signup-otp-input:focus {
border-color: #213A88;
}
@media (max-width: 480px) {
.signup-otp-grid { gap: 8px; }
.signup-otp-input { height: 52px; font-size: 20px; }
}
/* ── Flash error (e.g. orphan email collision, OTP not verified) ── */
.info-flash-error {
background: #fff3f3;
border-left: 3px solid #E40521;
color: #2B2F35;
padding: 12px 16px;
margin: 0 0 24px;
font-size: 14px;
line-height: 1.5;
}
/* ── Review item cards ── */
.info-items { display: flex; flex-direction: column; gap: 5px; margin-bottom: 40px; }
.info-item-card {
border: 1px solid #e6d5b6;
padding: 6px;
}
.info-item-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 15px;
padding: 14px 20px;
}
.info-item-meta { display: flex; flex-direction: column; gap: 20px; flex: 1; }
.info-item-title {
font-size: 22px;
font-weight: 500;
color: #2B2F35;
line-height: 1.2;
margin: 0;
}
.info-item-price {
font-size: 20px;
font-weight: 500;
color: #2B2F35;
white-space: nowrap;
text-align: right;
}
.info-item-dates {
display: flex;
align-items: center;
gap: 10px;
font-size: 16px;
color: #2B2F35;
}
/* ── Detail rows (cream bg) ── */
.info-item-rows { display: flex; flex-direction: column; gap: 2px; }
.info-item-row {
background: rgba(230, 213, 182, 0.2);
padding: 20px;
display: flex;
flex-direction: column;
gap: 20px;
}
.info-row-label {
font-size: 16px;
font-weight: 600;
color: #2B2F35;
margin: 0;
line-height: 1.2;
}
.info-row-tags {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
font-size: 16px;
color: #2B2F35;
}
.info-tag-sep {
color: rgba(43, 47, 53, 0.3);
font-size: 14px;
}
.info-row-services {
font-size: 16px;
color: #2B2F35;
line-height: 1.2;
}
.info-row-apprenant {
font-size: 16px;
color: #2B2F35;
margin: 0;
}
.info-apprenant-email {
opacity: 0.7;
letter-spacing: -0.32px;
}
/* ── Hébergement inside review card ── */
.info-heberg-header {
display: flex;
align-items: center;
gap: 5px;
}
.info-heberg-type {
font-size: 16px;
color: #2B2F35;
letter-spacing: -0.32px;
margin: 0;
line-height: 1.1;
}
.info-heberg-notes { display: flex; flex-direction: column; gap: 10px; }
.info-heberg-note {
display: flex;
align-items: flex-start;
gap: 12px;
}
.info-heberg-note span {
font-size: 12px;
color: #2B2F35;
opacity: 0.6;
line-height: 1.2;
}
.info-heberg-note svg { flex-shrink: 0; margin-top: 1px; }
/* ── Billing address ── */
.info-billing { margin-top: 28px; }
.info-billing-heading {
font-size: 20px;
font-weight: 500;
letter-spacing: 0.4px;
text-transform: uppercase;
color: #2B2F35;
margin: 0 0 28px;
line-height: 1.1;
}
.info-billing-card {
border: 1px solid #e6d5b6;
padding: 6px;
}
.info-billing-fields { padding: 20px; display: flex; flex-direction: column; gap: 30px; }
.info-billing-row { display: flex; gap: 20px; }
.info-billing-row > .info-billing-field { flex: 1; }
.info-billing-field { display: flex; flex-direction: column; gap: 15px; }
.info-billing-label {
font-size: 16px;
font-weight: 500;
color: #2B2F35;
letter-spacing: -0.32px;
margin: 0;
line-height: 1.2;
}
.info-billing-value {
font-size: 16px;
font-weight: 400;
color: #2B2F35;
letter-spacing: -0.32px;
margin: 0;
padding-bottom: 10px;
border-bottom: 1px solid rgba(43, 47, 53, 0.1);
line-height: 1.2;
}
.info-billing-edit-btn {
display: inline-flex;
align-items: center;
padding: 10px 16px;
background: none;
border: 1px solid #2B2F35;
color: #2B2F35;
font-size: 16px;
cursor: pointer;
margin: 0 20px 20px;
transition: background-color 0.15s;
}
.info-billing-edit-btn:hover { background: rgba(43, 47, 53, 0.05); }
.info-billing-edit-btn.hidden { display: none !important; }
/* ── Billing edit form ── */
.info-billing-form { padding: 20px; display: flex; flex-direction: column; gap: 20px; }
.info-billing-form.hidden { display: none !important; }
.info-billing-input {
width: 100%;
padding: 12px 16px;
background: rgba(246, 245, 234, 0.7);
border: 1px solid rgba(43, 47, 53, 0.15);
font-size: 16px;
color: #2B2F35;
letter-spacing: -0.32px;
outline: none;
box-sizing: border-box;
transition: border-color 0.15s;
}
.info-billing-input:focus { border-color: rgba(43, 47, 53, 0.4); }
.info-billing-actions { display: flex; gap: 12px; }
.info-billing-save-btn {
padding: 10px 24px;
background: #2B2F35;
color: #fff;
border: none;
font-size: 16px;
cursor: pointer;
transition: background-color 0.15s;
}
.info-billing-save-btn:hover { background: #1a1d22; }
.info-billing-save-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.info-billing-cancel-btn {
padding: 10px 24px;
background: none;
border: 1px solid rgba(43, 47, 53, 0.3);
color: #2B2F35;
font-size: 16px;
cursor: pointer;
transition: border-color 0.15s;
}
.info-billing-cancel-btn:hover { border-color: #2B2F35; }
.info-billing-msg {
font-size: 14px;
color: #E40521;
margin: 0;
}
.info-billing-msg.hidden { display: none !important; }
/* ── Back link ── */
.info-back-link {
display: block;
text-align: center;
font-size: 15px;
color: rgba(43, 47, 53, 0.6);
text-decoration: none;
margin-top: 8px;
transition: color 0.15s;
}
.info-back-link:hover { color: #2B2F35; }
/* ── Payment page ── */
.payment-desc {
font-size: 16px;
color: #2B2F35;
margin: 0 0 30px;
line-height: 1.5;
}
.payment-dev-area { margin-bottom: 30px; }
.payment-stripe-area { margin-bottom: 30px; }
.payment-dev-notice {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px 20px;
background: rgba(249, 99, 30, 0.08);
border: 1px solid rgba(249, 99, 30, 0.2);
margin-bottom: 24px;
}
.payment-dev-notice svg { flex-shrink: 0; margin-top: 2px; }
.payment-dev-notice p {
font-size: 14px;
color: #2B2F35;
line-height: 1.5;
margin: 0;
}
/* ── Orphan email verification step ── */
.apprenant-verify-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
padding: 60px 40px 48px;
text-align: center;
}
.apprenant-verify-step.hidden { display: none !important; }
/* Success confirmation after the orphan email code is verified */
.apprenant-verify-success {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
padding: 60px 40px 56px;
text-align: center;
}
.apprenant-verify-success.hidden { display: none !important; }
.apprenant-verify-success-icon {
width: 72px;
height: 72px;
border-radius: 50%;
background: rgba(11, 84, 58, 0.08);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
}
.apprenant-verify-success-title {
font-size: 24px;
font-weight: 600;
color: #2B2F35;
margin: 0 0 10px;
letter-spacing: -0.48px;
}
.apprenant-verify-success-desc {
font-size: 15px;
color: rgba(43, 47, 53, 0.6);
margin: 0;
line-height: 1.6;
max-width: 380px;
}
.apprenant-verify-icon {
width: 72px;
height: 72px;
border-radius: 50%;
background: rgba(11, 84, 58, 0.08);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
}
.apprenant-verify-title {
font-size: 24px;
font-weight: 600;
color: #2B2F35;
margin: 0 0 10px;
letter-spacing: -0.48px;
}
.apprenant-verify-desc {
font-size: 15px;
color: rgba(43, 47, 53, 0.6);
margin: 0 0 32px;
line-height: 1.6;
max-width: 380px;
}
/* OTP digit inputs */
.apprenant-verify-otp {
display: flex;
gap: 10px;
align-items: center;
justify-content: center;
margin-bottom: 8px;
}
.apprenant-verify-digit {
width: 52px;
height: 60px;
background: rgba(246, 245, 234, 0.5);
border: 1.5px solid rgba(43, 47, 53, 0.15);
border-radius: 8px;
font-size: 26px;
font-weight: 600;
text-align: center;
color: #2B2F35;
outline: none;
transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
caret-color: #0B543A;
}
.apprenant-verify-digit:focus {
border-color: #0B543A;
background: rgba(246, 245, 234, 0.8);
box-shadow: 0 0 0 3px rgba(11, 84, 58, 0.1);
}
.apprenant-verify-digit.has-value {
border-color: #0B543A;
background: rgba(246, 245, 234, 0.8);
}
.apprenant-verify-digit.error {
border-color: #E40521;
background: rgba(228, 5, 33, 0.04);
animation: verifyShake 0.4s ease;
}
.apprenant-verify-dash {
width: 12px;
height: 2px;
background: rgba(43, 47, 53, 0.25);
border-radius: 1px;
flex-shrink: 0;
}
/* Verify button */
.apprenant-verify-btn {
width: 100%;
max-width: 380px;
padding: 16px 24px;
margin-top: 24px;
background: #2B2F35;
color: #fff;
border: none;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s, opacity 0.2s;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.apprenant-verify-btn:hover { background: #1a1d22; }
.apprenant-verify-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
background: #2B2F35;
}
.apprenant-verify-btn-loading.hidden { display: none; }
.apprenant-verify-spinner {
animation: verifySpin 1s linear infinite;
}
/* Error message */
.apprenant-verify-error {
font-size: 14px;
color: #E40521;
margin: 0;
min-height: 20px;
line-height: 20px;
}
.apprenant-verify-error:not(.visible) { visibility: hidden; }
/* Resend link */
.apprenant-verify-resend {
font-size: 14px;
color: rgba(43, 47, 53, 0.5);
margin: 16px 0 0;
}
.apprenant-verify-resend-btn {
background: none;
border: none;
color: #0B543A;
font-size: 14px;
font-weight: 600;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
padding: 0;
transition: color 0.15s;
}
.apprenant-verify-resend-btn:hover { color: #083d2b; }
.apprenant-verify-resend-btn:disabled {
color: rgba(43, 47, 53, 0.35);
cursor: default;
text-decoration: none;
}
@keyframes verifyShake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-6px); }
40% { transform: translateX(6px); }
60% { transform: translateX(-4px); }
80% { transform: translateX(4px); }
}
@keyframes verifySpin {
to { transform: rotate(360deg); }
}
/* ── Contact info ── */
.info-contact {
margin-top: 40px;
display: flex;
flex-direction: column;
gap: 8px;
font-size: 14px;
color: #2B2F35;
line-height: 1.2;
}
.info-contact a {
color: #2B2F35;
text-decoration: underline;
}
@media (max-width: 768px) {
.info-billing-row { flex-direction: column; gap: 20px; }
}
/* ══════════════════════════════════════════════════════════════════════
CONFIRMATION PAGE (Step 4) — Figma 4615-51181
══════════════════════════════════════════════════════════════════════ */
.confirm-content {
background: #fff;
padding: 7px;
}
/* ── Success banner ── */
/* Dark beige (cream-200, like the homepage Inscription section) per QA
2026-06-12 — was a green tint. Pending/failed modifiers below override. */
.confirm-banner {
background: #E6D5B6;
padding: 30px;
display: flex;
flex-direction: column;
gap: 45px;
}
/* Pending variant — blue tint while we wait for the Flywire webhook */
.confirm-banner--pending {
background: rgba(33, 58, 136, 0.08);
}
/* Failed/cancelled variant — red tint */
.confirm-banner--failed {
background: rgba(228, 5, 33, 0.08);
}
/* Spinner used inside the pending banner icon */
.confirm-spinner {
animation: cavilamSpin 1s linear infinite;
transform-origin: center;
}
@keyframes cavilamSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.confirm-banner-icon { flex-shrink: 0; }
.confirm-banner-title {
font-size: 28px;
font-weight: 500;
color: #2B2F35;
letter-spacing: 0.56px;
margin: 0;
line-height: 1.2;
}
.confirm-banner-desc {
font-size: 16px;
font-weight: 400;
color: #2B2F35;
letter-spacing: -0.32px;
margin: 0;
line-height: 1.2;
}
/* ── Order detail rows ── */
.confirm-details {
padding: 20px 30px 0;
display: flex;
flex-direction: column;
gap: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #e6d5b6;
}
.confirm-detail-row {
display: flex;
gap: 16px;
align-items: flex-start;
}
.confirm-detail-row svg { flex-shrink: 0; margin-top: 2px; }
.confirm-detail-content { display: flex; flex-direction: column; gap: 10px; }
.confirm-detail-label {
font-size: 16px;
font-weight: 600;
color: #2B2F35;
margin: 0;
line-height: 1.2;
}
.confirm-detail-value {
font-size: 16px;
font-weight: 400;
color: #2B2F35;
margin: 0;
line-height: 1.2;
}
/* ── Items list ── */
.confirm-items {
padding: 20px 30px;
border-bottom: 1px solid #e6d5b6;
display: flex;
flex-direction: column;
gap: 20px;
}
.confirm-items-label {
font-size: 16px;
font-weight: 500;
color: #2B2F35;
letter-spacing: -0.32px;
margin: 0;
}
.confirm-items-list { display: flex; flex-direction: column; gap: 10px; }
.confirm-items-row {
display: flex;
gap: 10px;
align-items: center;
font-size: 16px;
color: #2B2F35;
}
/* ── Contact ── */
.confirm-contact {
padding: 30px;
display: flex;
flex-direction: column;
gap: 8px;
font-size: 14px;
color: #2B2F35;
line-height: 1.2;
}
.confirm-contact a {
color: #2B2F35;
text-decoration: underline;
}
/* ── Receipt note ── */
.confirm-receipt-note {
font-size: 16px;
color: #2B2F35;
opacity: 0.7;
letter-spacing: -0.32px;
line-height: 1.2;
margin: 0;
}
/* ══════════════════════════════════════════════════════════
* PROFILE — Mobile responsive overrides
* ══════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
/* Apprenants read-only grid → single column */
.pf-field-grid {
grid-template-columns: 1fr;
}
/* Apprenants form rows → stack vertically */
.pf-form-row {
flex-direction: column;
}
.pf-form-half {
max-width: 100%;
}
/* Reduce cream panel padding */
.pf-detail-panel {
padding: 16px;
}
/* Delete banner padding */
.pf-delete-banner {
padding: 16px;
}
/* Apprenant name size */
.pf-apprenant-name,
.pf-main-name {
font-size: 20px;
}
/* Section gap */
.pf-tab-content {
gap: 40px;
}
/* Detail actions stack if needed */
.pf-detail-actions {
flex-wrap: wrap;
}
/* Crop modal */
.crop-modal {
width: 95vw;
}
.crop-modal-header {
padding: 16px 20px;
}
.crop-modal-controls {
padding: 12px 20px;
}
.crop-modal-footer {
padding: 14px 20px;
}
/* Profile avatar */
.profile-avatar-wrap {
width: 60px;
height: 60px;
}
.profile-avatar-initial {
font-size: 20px;
}
}
/* ── Formation selectors: shared accessibility ─────────────────
* Native radios are hidden via .sr-only (keeps them focusable).
* Styled label wrappers use :has(:checked) for selection state.
*/
.accom-toggle-btn input.sr-only:focus-visible ~ span,
.accom-type-card input.sr-only:focus-visible ~ .accom-type-name,
.cp-variant-label input.sr-only:focus-visible ~ span,
.juniors-week-label input.sr-only:focus-visible ~ span {
outline: 2px solid #213A88;
outline-offset: 4px;
border-radius: 2px;
}
/* ── Accommodation Oui/Non segmented toggle ──────────────────── */
.accom-toggle-group {
display: inline-flex;
border: 1px solid rgba(43, 47, 53, 0.2);
background: #fff;
padding: 4px;
gap: 4px;
}
.accom-toggle-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 88px;
padding: 10px 22px;
cursor: pointer;
user-select: none;
transition: background-color 0.18s ease, color 0.18s ease;
}
.accom-toggle-btn span {
font-family: 'Grotesk', sans-serif;
font-size: 15px;
font-weight: 500;
color: #2B2F35;
transition: color 0.18s ease;
line-height: 1;
}
.accom-toggle-btn:hover:not(:has(:checked)) {
background: rgba(43, 47, 53, 0.04);
}
.accom-toggle-btn:has(:checked) {
background: #2B2F35;
}
.accom-toggle-btn:has(:checked) span {
color: #fff;
}
/* ── Accommodation type cards (when Oui is selected) ─────────── */
.accom-type-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.accom-type-card {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 16px 14px 18px;
background: #fff;
border: 1px solid rgba(43, 47, 53, 0.18);
cursor: pointer;
transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}
.accom-type-card::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: transparent;
transition: background-color 0.18s ease;
}
.accom-type-card:hover {
border-color: rgba(43, 47, 53, 0.45);
}
.accom-type-card:has(:checked) {
background: #F6F5EA;
border-color: #213A88;
}
.accom-type-card:has(:checked)::before {
background: #213A88;
}
.accom-type-name {
font-family: 'Grotesk', sans-serif;
font-size: 16px;
color: #2B2F35;
font-weight: 400;
}
.accom-type-card:has(:checked) .accom-type-name {
font-weight: 500;
}
.accom-type-price {
font-family: 'Grotesk', sans-serif;
font-size: 14px;
color: #2B2F35;
font-weight: 500;
padding: 4px 10px;
background: rgba(43, 47, 53, 0.06);
white-space: nowrap;
}
.accom-type-card:has(:checked) .accom-type-price {
background: #213A88;
color: #fff;
}
/* ── Segmented controls: CP variants & JUNIORS weeks ─────────── */
/* Match the cream stepper below for visual continuity; blue active */
.cv-segmented {
display: flex;
flex-wrap: wrap;
background: #f5f1e8;
padding: 6px;
gap: 4px;
width: 100%;
}
.cv-segmented-item {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 18px 18px;
min-height: 56px;
cursor: pointer;
background: transparent;
transition: background-color 0.18s ease, color 0.18s ease;
user-select: none;
flex: 1 1 0;
min-width: 0;
}
.cv-segmented-item span {
font-family: 'Grotesk', sans-serif;
font-size: 16px;
color: #2B2F35;
font-weight: 500;
line-height: 1;
white-space: nowrap;
transition: color 0.18s ease;
}
.cv-segmented-item:hover:not(:has(:checked)) {
background: rgba(43, 47, 53, 0.06);
}
.cv-segmented-item:has(:checked) {
background: #e6d5b6;
}
.cv-segmented-item:has(:checked) span {
color: #2B2F35;
font-weight: 600;
}
.cv-segmented-item input.sr-only:focus-visible ~ span {
outline: 2px solid #213A88;
outline-offset: 4px;
border-radius: 2px;
}
.cv-segmented-item.is-disabled {
cursor: not-allowed;
opacity: 0.4;
}
.cv-segmented-item.is-disabled:hover {
background: transparent;
}
/* Stacked variant — column layout (e.g. JUNIORS Formule) */
.cv-segmented--stack {
flex-direction: column;
flex-wrap: nowrap;
}
.cv-segmented--stack .cv-segmented-item {
justify-content: flex-start;
padding: 16px 18px;
min-height: 0;
flex: 0 0 auto;
width: 100%;
}
/* Mobile refinements */
@media (max-width: 639px) {
.accom-toggle-btn {
min-width: 72px;
padding: 9px 18px;
}
.cv-segmented {
display: flex;
width: 100%;
}
.cv-segmented-item {
padding: 10px 12px;
}
.cv-segmented-item span {
font-size: 14px;
}
.accom-type-card {
padding: 12px 14px 12px 16px;
}
.cv-segmented--stack .cv-segmented-item {
padding: 14px 16px;
}
.accom-type-price {
font-size: 13px;
}
}
/* ── Homepage — Inscription section ───────────────────────────────── */
/* Contact form submit feedback message */
.contact-form-message {
margin-top: 8px;
padding: 12px 16px;
font-family: 'Grotesk', sans-serif;
font-size: 15px;
line-height: 1.5;
border: 1px solid transparent;
}
.contact-form-message--success {
color: #0B543A;
background: rgba(11, 84, 58, 0.08);
border-color: rgba(11, 84, 58, 0.35);
}
.contact-form-message--error {
color: #E40521;
background: rgba(228, 5, 33, 0.07);
border-color: rgba(228, 5, 33, 0.35);
}
.inscription-section {
width: 100%;
background: #E6D5B6;
padding: 30px 0;
}
/* Align the inner block to the same box as the news/Actualités .container
(max-width 1432px, 16px side padding, centered) so its left edge lines up
with the articles grid above. */
.inscription-inner {
max-width: 1432px;
margin: 0 auto;
padding-inline: 16px;
display: flex;
flex-direction: column;
gap: 20px;
}
.inscription-label {
font-family: 'Space Grotesk', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 100%;
letter-spacing: 0.02em;
text-transform: uppercase;
color: #2B2F35;
}
.inscription-row {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 32px;
width: 100%;
}
.inscription-header {
font-family: 'Space Grotesk', sans-serif;
font-weight: 500;
font-size: 24px;
line-height: 100%;
letter-spacing: 0;
color: #2B2F35;
max-width: 693px;
margin: 0;
min-width: 0;
}
.inscription-cta {
display: inline-flex;
align-items: center;
gap: 10px;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
font-family: 'Space Grotesk', sans-serif;
font-weight: 500;
font-size: 20px;
line-height: 100%;
letter-spacing: 0;
color: #2B2F35;
flex-shrink: 0;
}
.inscription-cta svg {
transition: transform 0.3s ease;
}
.inscription-cta:hover svg {
transform: translateX(4px);
}
@media (max-width: 767px) {
.inscription-section {
padding: 24px 0;
}
.inscription-inner {
gap: 16px;
}
.inscription-row {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.inscription-label {
font-size: 14px;
}
.inscription-header {
font-size: 20px;
line-height: 110%;
}
.inscription-cta {
font-size: 18px;
}
}
/* ──────────────────────────────────────────────────────────
CAVILAM "culture" accent (#13455f) — homepage Actualités eyebrow + CTA.
Not part of the Tailwind palette, so applied via these classes.
────────────────────────────────────────────────────────── */
.cav-culture-color { color: #13455f; }
.cav-culture-fill { fill: #13455f; }
.cav-culture-bg { background-color: #13455f; }
/* Constrain the educators "Découvrir nos offres…" CTA so the text wraps and the
bottom-aligned arrow sits close to the last line. */
.cav-cta-maxw-409 { max-width: 409px; }
/* Nudge the arrow icon a touch lower so it aligns better with the last text line. */
.cav-cta-maxw-409 .icon-arrow-right { position: relative; top: 6px; }
/* Séjour linguistique hero (pages/language-study-trip.php): the source photo is
taller than the cropped 1400/600 slot, so anchor the cover-crop to the bottom. */
.sejour-hero-img { object-position: bottom; }
/* Career page (pages/career.php): breathing room between the job-offer cards and
the hero above / the footer below (the listing section had no vertical spacing). */
.career-listing { padding-top: 2rem; padding-bottom: 2.5rem; }
@media (min-width: 1024px) {
.career-listing { padding-top: 4rem; padding-bottom: 5rem; }
}
/* "Apprendre à enseigner le français" (pages/learn-teach-french.php) — top padding
on the relocated "Formation à distance" section: 30px on mobile/tablet, 101px on
desktop. Set in CSS (not Tailwind) so the exact px values don't depend on a build. */
.ltf-distance-pt { padding-top: 30px; }
@media (min-width: 1024px) {
.ltf-distance-pt { padding-top: 101px; }
}
/* Profile / account page header CAVILAM logo (per PM): max-width 600px, scaling
naturally by aspect. Scoped to the profile TEMPLATE class, which every language
version (FR/EN/ES) of the profile page shares — so it's language-aware and the
header on all other pages is unchanged. Desktop only.
NOTE: verified NOT the cause of the navbar-load jank (reverting it didn't help). */
@media (min-width: 1024px) {
body.page-template-pagesprofile-php [data-hdr-logo] {
max-width: 600px !important;
}
body.page-template-pagesprofile-php [data-hdr-logo] img {
width: 100% !important;
max-width: 600px !important;
height: auto !important;
}
}
/* ──────────────────────────────────────────────────────────
Partners page — central bubble logo. Was a fixed square box, so wide logos
(e.g. Fondation des Alliances Françaises ~2.6:1) shrank to fit the width and
looked tiny. Use max-width/max-height + object-contain so wide logos use the
width and square logos use the height — both render at a comparable size.
────────────────────────────────────────────────────────── */
.partner-central-img-d,
.partner-central-img-t,
.partner-central-img-m {
width: auto;
height: auto;
object-fit: contain;
}
.partner-central-img-d { max-width: 230px; max-height: 150px; }
.partner-central-img-t { max-width: 180px; max-height: 120px; }
.partner-central-img-m { max-width: 150px; max-height: 95px; }
/* ──────────────────────────────────────────────────────────
FLAM resource (post 4404): force all in-content links to one uniform colour
(CAVILAM blue-700 #213A88). Links previously inherited the orange paragraph
colour (and a few were uncoloured) — this makes them consistent. Scoped to
the post.
────────────────────────────────────────────────────────── */
body.postid-4404 .article-content a,
body.postid-4404 .article-content a * {
color: #213A88 !important;
}
/* ──────────────────────────────────────────────────────────
Formation price card (JUNIORS / fixed-week) — cream block matching stepper
────────────────────────────────────────────────────────── */
.formation-price-card {
display: flex;
flex-direction: column;
gap: 4px;
padding: 20px 24px;
background: #f5f1e8;
}
.formation-price-card-amount {
font-family: 'HK Grotesk', sans-serif;
font-weight: 500;
font-size: 28px;
line-height: 1;
color: #2B2F35;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.formation-price-card-sub {
display: inline-flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px;
font-family: 'HK Grotesk', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.3;
color: #6b7280;
}
.formation-price-card-sub > span:empty {
display: none;
}
.formation-price-card-sep {
color: rgba(43, 47, 53, 0.35);
}
/* ──────────────────────────────────────────────────────────
Formation "Incluant" block — refined content treatment
────────────────────────────────────────────────────────── */
.formation-included {
display: flex;
flex-direction: column;
gap: 14px;
}
.formation-included-title {
font-family: 'HK Grotesk', sans-serif;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #213A88;
margin: 0;
line-height: 1;
}
.formation-included-content {
font-family: 'HK Grotesk', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.55;
color: #2B2F35;
}
.formation-included-content ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.formation-included-content ul li {
position: relative;
padding-left: 22px;
}
.formation-included-content ul li::before {
content: '';
position: absolute;
left: 4px;
top: 0.62em;
width: 6px;
height: 6px;
border-radius: 50%;
background: #E40521;
}
.formation-included-content ul + p,
.formation-included-content p + ul {
margin-top: 4px;
}
/* QA 2026-07-07 (client DLE correction): on DLE fiches the "Incluant" label is
gray instead of blue and the list bullets are DLE green instead of red.
Scoped via .formation-included--dle set only in sections-dle.php. */
.formation-included--dle .formation-included-title {
color: #2B2F35;
}
.formation-included--dle .formation-included-content ul li::before {
background: #0b543a;
}
/* Sub-section headings inside the editor output ("Sans hébergement", "Avec hébergement :") */
/* Paragraphs inside the editor output.
QA 2026-09-07: a paragraph is a sub-heading ("Sans hébergement :") only when it
introduces a list; every other paragraph (notes such as "Pour plus d'informations",
CPF mention) is plain body text, however many of them follow the list. */
.formation-included-content > p {
margin: 10px 0 0;
font-size: 16px;
font-weight: 400;
line-height: 1.55;
}
.formation-included-content > ul + p { margin-top: 18px; }
.formation-included-content > p:has(+ ul) {
margin: 18px 0 10px;
padding-top: 14px;
border-top: 1px solid rgba(43, 47, 53, 0.08);
font-family: 'HK Grotesk', sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #2B2F35;
line-height: 1.2;
}
.formation-included-content > p:first-child:has(+ ul) {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
/* QA 2026-09-08 (PM, Junior camp): "Title" + intro sentence + list.
The title carries the divider + heading style; the sentence before the list is plain text. */
.formation-included-content > p:has(+ p + ul) {
margin: 18px 0 10px;
padding-top: 14px;
border-top: 1px solid rgba(43, 47, 53, 0.08);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
line-height: 1.2;
}
.formation-included-content > p:first-child:has(+ p + ul) { margin-top: 0; padding-top: 0; border-top: 0; }
.formation-included-content > p:has(+ p + ul) + p {
margin: 0 0 8px;
padding-top: 0;
border-top: 0;
font-size: 16px;
font-weight: 400;
letter-spacing: normal;
text-transform: none;
line-height: 1.55;
}
.formation-included-content a {
text-decoration: underline !important;
text-underline-offset: 3px;
transition: color 0.15s;
}
.formation-included-content a:hover { color: #E40521; }
@media (max-width: 639px) {
.formation-price-card {
padding: 16px 18px;
}
.formation-price-card-amount {
font-size: 24px;
}
.formation-price-card-sub {
font-size: 13px;
}
.formation-included-content {
font-size: 15px;
}
.formation-included-content > p {
font-size: 11px;
}
}
/* ── Newsletter modal ─────────────────────────────────────────────── */
.newsletter-modal-overlay {
position: fixed; inset: 0; z-index: 12000;
background: rgba(43, 47, 53, 0.7);
opacity: 0; pointer-events: none;
transition: opacity 0.25s ease;
}
.newsletter-modal-overlay.open { opacity: 1; pointer-events: auto; }
.newsletter-modal {
position: fixed; z-index: 12001;
top: 50%; left: 50%;
transform: translate(-50%, -50%) scale(0.96);
width: 760px; max-width: calc(100vw - 32px);
max-height: calc(100vh - 32px);
overflow-y: auto;
background: #ffffff;
padding: 40px 48px;
box-sizing: border-box;
opacity: 0; pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.newsletter-modal.open {
opacity: 1; pointer-events: auto;
transform: translate(-50%, -50%) scale(1);
}
.newsletter-modal-close {
position: absolute;
top: -44px; right: 0;
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
background: transparent;
border: 1px solid #ffffff;
color: #ffffff;
cursor: pointer;
padding: 0;
}
.newsletter-modal-close:hover { background: rgba(255,255,255,0.1); }
.newsletter-modal-title {
font-family: 'Space Grotesk', sans-serif;
font-weight: 500;
font-size: 28px;
line-height: 120%;
color: #2B2F35;
margin: 0 0 24px;
}
.newsletter-modal-form { display: block; }
.newsletter-modal-panel {
background: #ffffff;
border: 1px solid #2B2F3533;
padding: 30px;
margin-bottom: 20px;
}
.newsletter-modal-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px 20px;
}
.newsletter-modal-field { display: flex; flex-direction: column; }
.newsletter-modal-field-full { grid-column: 1 / -1; }
.newsletter-modal-label {
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 500;
color: #2B2F35;
margin-bottom: 8px;
}
.newsletter-modal-label span[aria-hidden="true"] { margin-left: 2px; }
.newsletter-modal-input {
font-family: 'Space Grotesk', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 120%;
letter-spacing: -0.02em;
color: #2B2F35;
background: #F6F5EAB2;
border: 0;
padding: 14px 16px;
width: 100%;
box-sizing: border-box;
outline: none;
}
.newsletter-modal-input::placeholder {
color: #9a9a9a;
font-family: 'Space Grotesk', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 120%;
letter-spacing: -0.02em;
}
.newsletter-modal-input:focus-visible { outline: 2px solid #2B2F35; outline-offset: -2px; }
.newsletter-modal-select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,), and add breathing room between the language groups. */
.postid-6884 .formation-included-content > p.planning-title,
.postid-7534 .formation-included-content > p:first-of-type,
.postid-8658 .formation-included-content > p:first-of-type {
border-top: 0;
padding-top: 4px;
margin-top: 44px; /* QA 2026-07-08: detach Planning from the Incluant list above */
}
.postid-6884 .formation-included-content > p:not(.planning-title),
.postid-7534 .formation-included-content > p:not(:first-of-type),
.postid-8658 .formation-included-content > p:not(:first-of-type) {
margin-top: 30px;
}
.formation-included-content > p.planning-title + p { margin-top: 10px; padding-top: 0; border-top: 0; }
/* Selected month chip — thin 1px emphasis (was ring-2, too thick). */
.alc-month-btn.alc-selected { border-color: #2B2F35; box-shadow: 0 0 0 0.73px #2B2F35; background-color: rgba(43, 47, 53, 0.05); }
/* ── Master "Cours et crédits" programme (maquette tabbed credits table) ──
Rendered by cavilam_master_programme_html(); M1 → Années paires/impaires
tabs, M2 → single table. Tab toggle in navigation.js initMasterProgramme(). */
.master-prog-title {
font-size: 28px;
line-height: 1.1;
letter-spacing: -0.64px;
font-weight: 500;
color: #2B2F35;
margin: 32px 0 26px;
}
@media (min-width: 1024px) {
.master-prog-title { font-size: 32px; }
}
.master-prog { width: 100%; }
.master-prog-tabs { display: flex; width: 100%; }
.master-prog-tab {
flex: 1 1 0;
min-width: 0;
text-align: center;
padding: 16px 20px;
font-size: 16px;
line-height: 1.4;
font-weight: 400;
color: #2B2F35;
background: rgba(43, 47, 53, 0.1);
border: none;
cursor: pointer;
transition: background-color .15s ease, color .15s ease;
}
@media (min-width: 1024px) { .master-prog-tab { font-size: 18px; padding: 20px; } }
.master-prog-tab.is-active { background: #2B2F35; color: #F6F5EA; }
.master-prog-panel { display: none; border: 1px solid rgba(43, 47, 53, 0.1); }
.master-prog-panel.is-active { display: block; }
.master-prog-row {
padding: 16px 20px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
@media (min-width: 1024px) { .master-prog-row { padding: 20px 40px; } }
.master-prog-row:last-child { border-bottom: none; }
.master-prog-row-main {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
font-size: 16px;
line-height: 1.4;
color: #2B2F35;
}
@media (min-width: 1024px) { .master-prog-row-main { font-size: 18px; gap: 24px; } }
.master-prog-credits { white-space: nowrap; flex-shrink: 0; }
.master-prog-note {
font-size: 13px;
line-height: 1.4;
color: #2B2F35;
margin-top: 8px;
}
@media (min-width: 1024px) { .master-prog-note { font-size: 14px; } }
.master-prog-notes { margin-top: 20px; }
.master-prog-fee-note {
font-size: 13px;
line-height: 1.4;
color: #6b7280;
margin-top: 6px;
}
/* Exam characteristics: vertical space before a sub-heading that follows a list
(e.g. TCF "Test Complet :" after "Épreuves obligatoires :"). */
.exam-char-text ul + b {
display: block;
margin-top: 20px;
}
/* QA 2026-06-24: exam contact / inscription block links (Civic, Ev@lang, etc.) —
the global reset strips link defaults, so surface them as clearly clickable. */
.exam-contact-block a { color: #213A88 !important; text-decoration: underline !important; }
.exam-contact-block a:hover { color: #16285c; }
/* QA 2026-06-24: Instagram swiper (campus). Swiper's base .swiper-slide{width:100%}
overrides our slide width (equal specificity, loaded later) and collapses the
carousel to a single full-width post. Force the intended widths so ~5 posts show. */
.insta-swiper .swiper-slide.insta-slide { width: 200px !important; }
@media (min-width: 1024px) {
.insta-swiper .swiper-slide.insta-slide { width: 262px !important; }
}
/* À-la-carte (QA 2026-06-25): when the "Complet" badge is visible, nudge the
module title down a touch so it clears the badge — small gap between the
tag and the title. Scoped via :has() so non-complet cards are unaffected. */
.alc-module:has(.alc-complet-badge:not(.hidden)) h3 { margin-top: 0.625rem; }
/* QA 2026-06-30: CPF note contact email rendered as a visible link, matching the
Ev@lang contact link (blue, underlined, medium weight). */
.formation-included-cpf a {
color: #213A88;
font-weight: 500;
text-decoration: underline !important;
}
.formation-included-cpf a:hover {
text-decoration: underline;
opacity: 0.85;
}
/* QA 2026-07-08 (client): FPP Incluant — title gray, puces orange. */
.formation-included--fpp .formation-included-title { color: #2B2F35; }
.formation-included--fpp .formation-included-content ul li::before { background: #f9631e; }
/* QA 2026-07-08 (client): master fiches characteristics — 2-col grid so the rule
under « Français » aligns with « Possibilité d'hébergement » (all row borders
align, since grid rows share their height).
QA 2026-08-13 (PM): the per-child explicit placements that used to sit here
forced a column-major arrangement, so the front never read in the BO order.
Removed — the shared row-major auto-flow now applies and the rows still align. */
@media (min-width: 1024px) {
.postid-8563 .exam-characteristics-list,
.postid-8565 .exam-characteristics-list,
.postid-8589 .exam-characteristics-list,
.postid-8583 .exam-characteristics-list,
.postid-8677 .exam-characteristics-list,
.postid-8676 .exam-characteristics-list {
column-count: unset;
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 24px;
}
}
/* QA 2026-07-08 (client): stage d'observation tutoré (FR 6899 / EN 7528 / ES 8668,
8 items) — explicit 4/4 grid so all row rules align (« Observation du… » with its
right-column neighbour, « Possibilité d'hébergement » row included). */
@media (min-width: 1024px) {
.postid-6899 .exam-characteristics-list,
.postid-7528 .exam-characteristics-list,
.postid-8668 .exam-characteristics-list {
column-count: unset;
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 24px;
}
.postid-6899 .exam-characteristics-list > *:nth-child(1) { grid-column: 1; grid-row: 1; }
.postid-6899 .exam-characteristics-list > *:nth-child(2) { grid-column: 1; grid-row: 2; }
.postid-6899 .exam-characteristics-list > *:nth-child(3) { grid-column: 1; grid-row: 3; }
.postid-6899 .exam-characteristics-list > *:nth-child(4) { grid-column: 1; grid-row: 4; }
.postid-6899 .exam-characteristics-list > *:nth-child(5) { grid-column: 2; grid-row: 1; }
.postid-6899 .exam-characteristics-list > *:nth-child(6) { grid-column: 2; grid-row: 2; }
.postid-6899 .exam-characteristics-list > *:nth-child(7) { grid-column: 2; grid-row: 3; }
.postid-6899 .exam-characteristics-list > *:nth-child(8) { grid-column: 2; grid-row: 4; }
.postid-7528 .exam-characteristics-list > *:nth-child(1) { grid-column: 1; grid-row: 1; }
.postid-7528 .exam-characteristics-list > *:nth-child(2) { grid-column: 1; grid-row: 2; }
.postid-7528 .exam-characteristics-list > *:nth-child(3) { grid-column: 1; grid-row: 3; }
.postid-7528 .exam-characteristics-list > *:nth-child(4) { grid-column: 1; grid-row: 4; }
.postid-7528 .exam-characteristics-list > *:nth-child(5) { grid-column: 2; grid-row: 1; }
.postid-7528 .exam-characteristics-list > *:nth-child(6) { grid-column: 2; grid-row: 2; }
.postid-7528 .exam-characteristics-list > *:nth-child(7) { grid-column: 2; grid-row: 3; }
.postid-7528 .exam-characteristics-list > *:nth-child(8) { grid-column: 2; grid-row: 4; }
.postid-8668 .exam-characteristics-list > *:nth-child(1) { grid-column: 1; grid-row: 1; }
.postid-8668 .exam-characteristics-list > *:nth-child(2) { grid-column: 1; grid-row: 2; }
.postid-8668 .exam-characteristics-list > *:nth-child(3) { grid-column: 1; grid-row: 3; }
.postid-8668 .exam-characteristics-list > *:nth-child(4) { grid-column: 1; grid-row: 4; }
.postid-8668 .exam-characteristics-list > *:nth-child(5) { grid-column: 2; grid-row: 1; }
.postid-8668 .exam-characteristics-list > *:nth-child(6) { grid-column: 2; grid-row: 2; }
.postid-8668 .exam-characteristics-list > *:nth-child(7) { grid-column: 2; grid-row: 3; }
.postid-8668 .exam-characteristics-list > *:nth-child(8) { grid-column: 2; grid-row: 4; }
}
/* QA 2026-07-08 (client): perfectionnement + coordinateur fiches — explicit grids so
all characteristic row rules align (perfectionnement ×2: 8 items 4/4; coordinateur:
9 items 5/4 — pairs the two long items and « 46 heures » with « Possibilité d'hébergement »). */
@media (min-width: 1024px) {
.postid-6900 .exam-characteristics-list,
.postid-7531 .exam-characteristics-list,
.postid-8669 .exam-characteristics-list,
.postid-6901 .exam-characteristics-list,
.postid-7527 .exam-characteristics-list,
.postid-8670 .exam-characteristics-list,
.postid-7104 .exam-characteristics-list,
.postid-7495 .exam-characteristics-list,
.postid-8671 .exam-characteristics-list {
column-count: unset;
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 24px;
}
.postid-6900 .exam-characteristics-list > *:nth-child(1) { grid-column: 1; grid-row: 1; }
.postid-6900 .exam-characteristics-list > *:nth-child(2) { grid-column: 1; grid-row: 2; }
.postid-6900 .exam-characteristics-list > *:nth-child(3) { grid-column: 1; grid-row: 3; }
.postid-6900 .exam-characteristics-list > *:nth-child(4) { grid-column: 1; grid-row: 4; }
.postid-6900 .exam-characteristics-list > *:nth-child(5) { grid-column: 2; grid-row: 1; }
.postid-6900 .exam-characteristics-list > *:nth-child(6) { grid-column: 2; grid-row: 2; }
.postid-6900 .exam-characteristics-list > *:nth-child(7) { grid-column: 2; grid-row: 3; }
.postid-6900 .exam-characteristics-list > *:nth-child(8) { grid-column: 2; grid-row: 4; }
.postid-7531 .exam-characteristics-list > *:nth-child(1) { grid-column: 1; grid-row: 1; }
.postid-7531 .exam-characteristics-list > *:nth-child(2) { grid-column: 1; grid-row: 2; }
.postid-7531 .exam-characteristics-list > *:nth-child(3) { grid-column: 1; grid-row: 3; }
.postid-7531 .exam-characteristics-list > *:nth-child(4) { grid-column: 1; grid-row: 4; }
.postid-7531 .exam-characteristics-list > *:nth-child(5) { grid-column: 2; grid-row: 1; }
.postid-7531 .exam-characteristics-list > *:nth-child(6) { grid-column: 2; grid-row: 2; }
.postid-7531 .exam-characteristics-list > *:nth-child(7) { grid-column: 2; grid-row: 3; }
.postid-7531 .exam-characteristics-list > *:nth-child(8) { grid-column: 2; grid-row: 4; }
.postid-8669 .exam-characteristics-list > *:nth-child(1) { grid-column: 1; grid-row: 1; }
.postid-8669 .exam-characteristics-list > *:nth-child(2) { grid-column: 1; grid-row: 2; }
.postid-8669 .exam-characteristics-list > *:nth-child(3) { grid-column: 1; grid-row: 3; }
.postid-8669 .exam-characteristics-list > *:nth-child(4) { grid-column: 1; grid-row: 4; }
.postid-8669 .exam-characteristics-list > *:nth-child(5) { grid-column: 2; grid-row: 1; }
.postid-8669 .exam-characteristics-list > *:nth-child(6) { grid-column: 2; grid-row: 2; }
.postid-8669 .exam-characteristics-list > *:nth-child(7) { grid-column: 2; grid-row: 3; }
.postid-8669 .exam-characteristics-list > *:nth-child(8) { grid-column: 2; grid-row: 4; }
.postid-6901 .exam-characteristics-list > *:nth-child(1) { grid-column: 1; grid-row: 1; }
.postid-6901 .exam-characteristics-list > *:nth-child(2) { grid-column: 1; grid-row: 2; }
.postid-6901 .exam-characteristics-list > *:nth-child(3) { grid-column: 1; grid-row: 3; }
.postid-6901 .exam-characteristics-list > *:nth-child(4) { grid-column: 1; grid-row: 4; }
.postid-6901 .exam-characteristics-list > *:nth-child(5) { grid-column: 2; grid-row: 1; }
.postid-6901 .exam-characteristics-list > *:nth-child(6) { grid-column: 2; grid-row: 2; }
.postid-6901 .exam-characteristics-list > *:nth-child(7) { grid-column: 2; grid-row: 3; }
.postid-6901 .exam-characteristics-list > *:nth-child(8) { grid-column: 2; grid-row: 4; }
.postid-7527 .exam-characteristics-list > *:nth-child(1) { grid-column: 1; grid-row: 1; }
.postid-7527 .exam-characteristics-list > *:nth-child(2) { grid-column: 1; grid-row: 2; }
.postid-7527 .exam-characteristics-list > *:nth-child(3) { grid-column: 1; grid-row: 3; }
.postid-7527 .exam-characteristics-list > *:nth-child(4) { grid-column: 1; grid-row: 4; }
.postid-7527 .exam-characteristics-list > *:nth-child(5) { grid-column: 2; grid-row: 1; }
.postid-7527 .exam-characteristics-list > *:nth-child(6) { grid-column: 2; grid-row: 2; }
.postid-7527 .exam-characteristics-list > *:nth-child(7) { grid-column: 2; grid-row: 3; }
.postid-7527 .exam-characteristics-list > *:nth-child(8) { grid-column: 2; grid-row: 4; }
.postid-8670 .exam-characteristics-list > *:nth-child(1) { grid-column: 1; grid-row: 1; }
.postid-8670 .exam-characteristics-list > *:nth-child(2) { grid-column: 1; grid-row: 2; }
.postid-8670 .exam-characteristics-list > *:nth-child(3) { grid-column: 1; grid-row: 3; }
.postid-8670 .exam-characteristics-list > *:nth-child(4) { grid-column: 1; grid-row: 4; }
.postid-8670 .exam-characteristics-list > *:nth-child(5) { grid-column: 2; grid-row: 1; }
.postid-8670 .exam-characteristics-list > *:nth-child(6) { grid-column: 2; grid-row: 2; }
.postid-8670 .exam-characteristics-list > *:nth-child(7) { grid-column: 2; grid-row: 3; }
.postid-8670 .exam-characteristics-list > *:nth-child(8) { grid-column: 2; grid-row: 4; }
.postid-7104 .exam-characteristics-list > *:nth-child(1) { grid-column: 1; grid-row: 1; }
.postid-7104 .exam-characteristics-list > *:nth-child(2) { grid-column: 1; grid-row: 2; }
.postid-7104 .exam-characteristics-list > *:nth-child(3) { grid-column: 1; grid-row: 3; }
.postid-7104 .exam-characteristics-list > *:nth-child(4) { grid-column: 1; grid-row: 4; }
.postid-7104 .exam-characteristics-list > *:nth-child(5) { grid-column: 1; grid-row: 5; }
.postid-7104 .exam-characteristics-list > *:nth-child(6) { grid-column: 2; grid-row: 1; }
.postid-7104 .exam-characteristics-list > *:nth-child(7) { grid-column: 2; grid-row: 2; }
.postid-7104 .exam-characteristics-list > *:nth-child(8) { grid-column: 2; grid-row: 3; }
.postid-7104 .exam-characteristics-list > *:nth-child(9) { grid-column: 2; grid-row: 4; }
.postid-7495 .exam-characteristics-list > *:nth-child(1) { grid-column: 1; grid-row: 1; }
.postid-7495 .exam-characteristics-list > *:nth-child(2) { grid-column: 1; grid-row: 2; }
.postid-7495 .exam-characteristics-list > *:nth-child(3) { grid-column: 1; grid-row: 3; }
.postid-7495 .exam-characteristics-list > *:nth-child(4) { grid-column: 1; grid-row: 4; }
.postid-7495 .exam-characteristics-list > *:nth-child(5) { grid-column: 1; grid-row: 5; }
.postid-7495 .exam-characteristics-list > *:nth-child(6) { grid-column: 2; grid-row: 1; }
.postid-7495 .exam-characteristics-list > *:nth-child(7) { grid-column: 2; grid-row: 2; }
.postid-7495 .exam-characteristics-list > *:nth-child(8) { grid-column: 2; grid-row: 3; }
.postid-7495 .exam-characteristics-list > *:nth-child(9) { grid-column: 2; grid-row: 4; }
}
/* QA 2026-07-13 — EN/ES twins of the fiches fixed on 2026-07-07/08: the FR posts
got explicit characteristic grids (rules align pairwise) but their translations
kept default column-count flow, so EN fiches showed misaligned rules (client
ticket "Version ENG : toutes les fiches produits").
Family A (9 items, 4 left / 5 right, 4th spans to bottom) — twins of ateliers
lycée/collège/primaire/maternelle + stage intensif + stage de langue jeune:
EN 8578, 7529, 8577, 7533, 7535, 7536 / ES 8652, 8654, 8653, 8657, 8660, 8661.
Family B (8 items, 4/4) — EN 9120, twin of perfectionnement avancé 6900
(re-linked 2026-07-10, missed by the 6900/7531/8669 block). */
@media (min-width: 1024px) {
:is(.postid-8578, .postid-7529, .postid-8577, .postid-7533, .postid-7535, .postid-7536,
.postid-8652, .postid-8654, .postid-8653, .postid-8657, .postid-8660, .postid-8661,
.postid-9120) .exam-characteristics-list {
column-count: unset;
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 24px;
}
/* Family A: 9 items */
:is(.postid-8578, .postid-7529, .postid-8577, .postid-7533, .postid-7535, .postid-7536,
.postid-8652, .postid-8654, .postid-8653, .postid-8657, .postid-8660, .postid-8661) .exam-characteristics-list > *:nth-child(1) { grid-column: 1; grid-row: 1; }
:is(.postid-8578, .postid-7529, .postid-8577, .postid-7533, .postid-7535, .postid-7536,
.postid-8652, .postid-8654, .postid-8653, .postid-8657, .postid-8660, .postid-8661) .exam-characteristics-list > *:nth-child(2) { grid-column: 1; grid-row: 2; }
:is(.postid-8578, .postid-7529, .postid-8577, .postid-7533, .postid-7535, .postid-7536,
.postid-8652, .postid-8654, .postid-8653, .postid-8657, .postid-8660, .postid-8661) .exam-characteristics-list > *:nth-child(3) { grid-column: 1; grid-row: 3; }
:is(.postid-8578, .postid-7529, .postid-8577, .postid-7533, .postid-7535, .postid-7536,
.postid-8652, .postid-8654, .postid-8653, .postid-8657, .postid-8660, .postid-8661) .exam-characteristics-list > *:nth-child(4) { grid-column: 1; grid-row: 4 / span 2; }
:is(.postid-8578, .postid-7529, .postid-8577, .postid-7533, .postid-7535, .postid-7536,
.postid-8652, .postid-8654, .postid-8653, .postid-8657, .postid-8660, .postid-8661) .exam-characteristics-list > *:nth-child(5) { grid-column: 2; grid-row: 1; }
:is(.postid-8578, .postid-7529, .postid-8577, .postid-7533, .postid-7535, .postid-7536,
.postid-8652, .postid-8654, .postid-8653, .postid-8657, .postid-8660, .postid-8661) .exam-characteristics-list > *:nth-child(6) { grid-column: 2; grid-row: 2; }
:is(.postid-8578, .postid-7529, .postid-8577, .postid-7533, .postid-7535, .postid-7536,
.postid-8652, .postid-8654, .postid-8653, .postid-8657, .postid-8660, .postid-8661) .exam-characteristics-list > *:nth-child(7) { grid-column: 2; grid-row: 3; }
:is(.postid-8578, .postid-7529, .postid-8577, .postid-7533, .postid-7535, .postid-7536,
.postid-8652, .postid-8654, .postid-8653, .postid-8657, .postid-8660, .postid-8661) .exam-characteristics-list > *:nth-child(8) { grid-column: 2; grid-row: 4; }
:is(.postid-8578, .postid-7529, .postid-8577, .postid-7533, .postid-7535, .postid-7536,
.postid-8652, .postid-8654, .postid-8653, .postid-8657, .postid-8660, .postid-8661) .exam-characteristics-list > *:nth-child(9) { grid-column: 2; grid-row: 5; }
/* Family B: 8 items 4/4 (mirror of .postid-6900 rules) */
.postid-9120 .exam-characteristics-list > *:nth-child(1) { grid-column: 1; grid-row: 1; }
.postid-9120 .exam-characteristics-list > *:nth-child(2) { grid-column: 1; grid-row: 2; }
.postid-9120 .exam-characteristics-list > *:nth-child(3) { grid-column: 1; grid-row: 3; }
.postid-9120 .exam-characteristics-list > *:nth-child(4) { grid-column: 1; grid-row: 4; }
.postid-9120 .exam-characteristics-list > *:nth-child(5) { grid-column: 2; grid-row: 1; }
.postid-9120 .exam-characteristics-list > *:nth-child(6) { grid-column: 2; grid-row: 2; }
.postid-9120 .exam-characteristics-list > *:nth-child(7) { grid-column: 2; grid-row: 3; }
.postid-9120 .exam-characteristics-list > *:nth-child(8) { grid-column: 2; grid-row: 4; }
}
/* QA 2026-07-13 (client) — module fiche 6913 « Évaluer pour former et motiver » :
wrap the title as "Évaluer pour former / et motiver". At 46px w/ -0.92px tracking
"…former et" measures ≈477px and just fits the 480px column — cap below it. */
@media (min-width: 1024px) {
.postid-6913 .cv-module-detail h1 { max-width: 460px; }
}
/* QA 2026-07-13 — fee sentence of the hébergement help on its own line (see cavilam_get_accommodation_labels). */
.formation-accom-help { white-space: pre-line; }
/* QA 2026-08-13 (PM, ES recette Q3): the 2026-07-16 per-post column-split
overrides for 7493 / 7482 / 8642 were removed — since the row-major grid
change, EN/ES align with FR by simply following the BO order like every
other fiche. */
/* QA 2026-07-23: iOS Safari zooms the viewport when focusing an input whose
font-size is under 16px, then leaves the page panned/zoomed — reported as
"content shifts by itself" on /panier/ mobile. 16px on mobile form controls
prevents the auto-zoom entirely. */
@media (max-width: 767.98px) {
input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="date"],
select,
textarea {
font-size: 16px;
}
}
/* QA 2026-07-23: mobile stepper — the 4 flex:1 quarters are narrower than their
nowrap labels on phones, so "Votre panier" ran into "Informations" with no
space. Smaller type + side padding keeps each label inside its quarter; if a
very narrow screen still can't fit, the bar scrolls instead of overlapping. */
@media (max-width: 767.98px) {
.panier-stepper {
overflow-x: auto;
}
.panier-stepper-item {
font-size: 12px;
letter-spacing: 0;
padding: 12px 6px;
}
}
/* QA 2026-07-24: tunnel mobile — two elements had intrinsic min-widths wider than
the screen, so iOS laid the pages out at 429px (panier: promo input's default
size) / 494px (informations: item-card header with unwrappable dates + price)
and zoomed out, panning/rescaling between steps ("la page bouge"). */
@media (max-width: 767.98px) {
.panier-coupon-input-wrap { min-width: 0; }
.panier-coupon-input { min-width: 0; width: 100%; }
.info-item-header { flex-wrap: wrap; }
.info-item-dates { flex-wrap: wrap; }
}
/* QA 2026-07-24: last rigid row on /panier/ mobile — dates row could not shrink. */
@media (max-width: 767.98px) {
.panier-item-dates { flex-wrap: wrap; }
}
/* QA 2026-07-24: characteristics lists — many per-post rules force a 2-column
grid (column balancing) but had no mobile counterpart, so phones rendered two
squeezed/overflowing columns (FPP "bug pictos") and shortened row rules on
exam pages. On phones, everything falls back to one stacked column. */
@media (max-width: 767.98px) {
.exam-characteristics-list {
display: block !important;
column-count: 1 !important;
column-gap: 0 !important;
}
.exam-characteristics-list > * {
grid-column: auto !important;
grid-row: auto !important;
width: 100% !important;
break-after: auto !important;
}
}
/* QA 2026-07-24: à-la-carte "Complet" badge sat too close to the card edge on phones. */
@media (max-width: 767.98px) {
.alc-complet-badge {
top: 16px !important;
right: 16px !important;
}
}
/* QA 2026-07-27: partner bubble descriptions — BO content sometimes carries inline
font-weight spans (EN pasted rich text), making EN text lighter than FR.
Force the container weight so FR/EN render identically. */
#central-desc span[style], .central-desc-t span[style], .central-desc-m span[style] { font-weight: inherit !important; }
/* QA 2026-07-27: mobile — COMPLET badge (16px inset, ~22px tall) overlapped long card
titles; push the title below the badge on badge-carrying cards only. */
@media (max-width: 767.98px) {
.alc-module:has(.alc-complet-badge:not(.hidden)) h3 { margin-top: 2rem; }
}
/* QA 2026-07-28: mobile — DOB datepicker dropdown (352px, anchored left-0 to its field)
overflowed the viewport inside the signup/apprenant modals. Center it on the field and
cap its width; inline formation calendars keep their own layout (re-override below). */
@media (max-width: 767.98px) {
.custom-datepicker-dropdown {
left: 50% !important;
right: auto !important;
transform: translateX(-50%);
max-width: calc(100vw - 24px);
}
.datepicker-inline .custom-datepicker-dropdown {
left: 0 !important;
transform: none;
max-width: none;
}
}
/* QA 2026-07-28: EN Prestige fiche (7478) — same 4-item left column as its FR/ES
twins (5800/7487/8647): the duration picto joins the left side to balance. */
.postid-7478 .exam-characteristics-list > div:nth-child(4) { break-after: column; }
/* QA 2026-07-28: align the two characteristics columns row-by-row on desktop
(all fiches, all languages — like the FPP FR fiches), so every underline sits
level with its neighbour.
QA 2026-08-14 (PM): flow is COLUMN-major — the BO order reads DOWN the left
column, then down the right (BO 1..9 → 1-5 left, 6-9 right). The 2026-08-13
row-major attempt made every fiche read left-right per row, which the PM
reported as "l'ordre a changé sur toutes les fiches". `--cv-char-rows`
(= ceil(n/2), inline from single-formation.php) caps the rows so the grid
wraps into the second column at the halfway point. */
@media (min-width: 1024px) {
.exam-characteristics-list[style*="--cv-char-rows"] {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(var(--cv-char-rows), auto);
column-gap: 24px;
grid-auto-flow: column;
column-count: auto;
}
}
/* QA 2026-07-28: parental-authorization doc row hidden when the assigned learner
is an adult (requirement applies to minors only — see panier.php/navigation.js). */
.panier-doc-skip { display: none !important; }
/* QA 2026-07-28: exam fiche intro — Tailwind preflight strips
margins, so EN
paragraphs ran together (FR only had a gap thanks to an line in content).
Real paragraph spacing for every language; empty editor paragraphs collapse. */
.exam-hero-desc p:empty { display: none; }
.exam-hero-desc p { line-height: inherit; }
.exam-hero-desc p + p { margin-top: 1.4em; }
/* QA 2026-08-03 (client): Préparation aux études universitaires (EN 7486 / FR 5799 /
ES 8644) — the class-size row must open the RIGHT column instead of trailing the
left one. 9 items: 4 left / 5 right (the generic ceil() split gives 5/4). */
@media (min-width: 1024px) {
.postid-7486 .exam-characteristics-list > div:nth-child(-n+4),
.postid-5799 .exam-characteristics-list > div:nth-child(-n+4),
.postid-8644 .exam-characteristics-list > div:nth-child(-n+4) { grid-column: 1; }
.postid-7486 .exam-characteristics-list > div:nth-child(n+5),
.postid-5799 .exam-characteristics-list > div:nth-child(n+5),
.postid-8644 .exam-characteristics-list > div:nth-child(n+5) { grid-column: 2; }
}
/* QA 2026-08-03 (client): "Incluant" sub-headings (BASIC TEST / FULL TEST…) must be
medium like the FR fiches. FR wraps them in — styled down to 500 — while
EN leaves them plain (600), so the same heading looked bolder in English. Pin the
weight here so the editor using bold (or not) can no longer change it. */
.formation-included-content > p { font-weight: 500; }
.formation-included-content > p strong,
.formation-included-content > p b { font-weight: inherit; }
/* QA 2026-08-11 (PM): séjour linguistique — the immersion sur-titre stays on ONE
line whatever its length, and the row is widened leftward so a long label
(ES "INMERSIÓN LINGÜÍSTICA EN FRANCIA") ends before the description column —
same look as FR ("IMMERSION" beside the paragraph), just with a wider label. */
@media (min-width: 1280px) {
.cv-imm-subtitle { white-space: nowrap; flex-shrink: 0; line-height: 1.35; }
.cv-imm-row { align-items: flex-start; }
/* Long-label variant (template adds .cv-imm-long on the title+label block):
shift the label row left so the one-line label ends before the description
column starts — and shift the TITLE by the same amount so it stays aligned
with the quote icon (its max-width keeps the line wrapping identical). */
.cv-imm-long .cv-imm-row { margin-left: -100px !important; }
/* Row nets out at -221px vs the block edge (Tailwind's relative -121px on the
wrapper + this -100px) — give the title the same offset so its left edge
sits exactly on the quote icon. */
.cv-imm-long h2 { margin-left: -221px; }
/* With a one-line label the description keeps the standard -23px pull-up
(the old 3-line stacked label needed -57px). */
.cv-imm-desc--tall { margin-top: -23px !important; }
}
/* QA 2026-08-05: on the module fiche datebar the month span sits a full flex
gap (gap-2.5 = 10px) after the day-range span, which reads as a double space
("du 24 au 28 août"). Pull it back to a normal word space. */
.cv-module-datebar .cv-module-week-month,
.cv-module-datebar .cv-module-week-label { margin-left: -5px; }
/* QA 2026-08-05: catalogue hero h1 was w-full + md:ml-[50px] -> 50px wider than
the viewport -> horizontal scroll on the whole page (page looked shifted).
Indent with padding instead (border-box keeps it inside w-full). */
@media (min-width: 768px) {
.cv-cat-hero-title { padding-left: 50px; padding-right: 0; }
}
/* ── QA 2026-08-13 (ES recette #16) — DALF C1 ES, "Préparation" heading.
"Maximiza tus posibilidades de éxito" is 35 characters and overruns the
shared max-w-[608px] by a hair, so "éxito" dropped alone onto line 2.
Widen that one title (ES DALF C1 only) so it sets on a single line; the
text itself is untouched. ── */
@media (min-width: 1024px) {
.postid-8700 .cv-exam-prep-title { max-width: 760px; }
}
/* ── PM 2026-08-14 — JUNIORS fiche: fixed 2/4-week choice replaces the free
stepper. The price row is kept; the divider and the whole ±/counter group
(redundant with the Durée radios) are hidden. */
.juniors-stepper--fixed .tarif-stepper-row > div:not(:first-child) { display: none !important; }
/* QA 2026-08-26: apprenant OTP "Vérification…" — spinner + label were stacked; one row. */
.apprenant-verify-btn-loading:not(.hidden) { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; }
.apprenant-verify-btn-loading .apprenant-verify-spinner { flex: none; }
/* QA 2026-09-01: fiche 7486 (Preparation for higher education) — "- scientific studies" subtitle bumped to 18px (PM request). Other fiches keep 14px legal-note size. */
body.postid-7486 .formation-title-legal-note,
body.postid-5799 .formation-title-legal-note { font-size: 18px; }
/* PM 2026-09-04 — "Nous contacter" CTA on contact-only fiches: same full-width
dark button as "Ajouter au panier" (.atc-btn), rendered as a link. */
.atc-btn-contact { text-decoration: none; }
.atc-btn-contact:hover { color: #fff; }
.atc-btn-soon { cursor: default; }
.atc-btn-soon:hover { background-color: #2B2F35; }
/* Links typed inside "Caractéristiques de l'offre" texts (fiche formation) */
.exam-characteristics-list p a {
text-decoration: underline !important;
text-underline-offset: 3px;
transition: color 0.15s;
}
.exam-characteristics-list p a:hover { color: #e40521; }
/* Intro text on fiches: paragraphs typed with blank lines in the BO */
.formation-intro-text p + p { margin-top: 1em; }