@font-face {
    font-family: Avenir,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    font-style: normal;
    font-weight: 400;

    font-display: swap;
}
a, aside, audio, b, big, blockquote, body, canvas, caption, center, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strong, table, tbody, td, th {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
footer, header, menu, nav, section {
    display: block;
}
ol, ul {
    list-style: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
body {
    color: #000;
    background: #fff;
    font-size: 16px;
    line-height: 1.6em;
    font-weight: 300;
    text-shadow: none;
}

h1, h2, h3, h4, h5, h6 {
    color: #c40018;
    font-style: normal;
    margin: 30px 0 40px;
}
h2 {
    font-size: 40px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, .5);
}
h3 {
    font-size: 24px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, .5);
}
h4 {
    font-size: 18px;
}
h5 {
    font-size: 16px;
}
a:hover {
    text-decoration: none;
}
:focus {
    outline: 0;
}
.row {
    z-index: 9999;
}
.container, .content {
    overflow: hidden;
}
.section {
    margin: 0;
    padding: 50px 0 30px;
}
.heading, .heading-text {
    color: #fff;
}
/* ── Navbar ── */
.navbar-brand {
    padding: 0;
    margin: 0;
    width: 100%;
    display: inline-block;
    box-sizing: border-box;
}
.navbar-brand img {
    vertical-align: middle;
}
#section-about {
    background-image: linear-gradient(to right, #000 0, #c40018 100%);
}

/* ── Menu desktop ── */
.menu {
    background-image: linear-gradient(to right, #000 0, #c40018 100%);
    width: 100%;
    top: 0;
    box-shadow: 0 2px 14px rgba(0,0,0,.4);
    position: sticky;
    z-index: 1000;
}
.logo {
    margin: auto;
}
.menu a {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    font-weight: 400;
    transition: color .15s;
}
.menu-item--active > a {
    color: #fff !important;
    font-weight: 900;
    text-shadow: 0 0 12px rgba(255,255,255,.45);
}
.menu a:focus, .menu a:focus-within {
    outline: 0;
}
.menu>ol {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}
ol {
    list-style: none;
}
.menu>ol>li {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.mySociaMediaButton{ width: 75px; height: 75px; display: inline-block; margin: 10px; }
.mySociaMediaButton:hover{ transform: scale(1.1); }

/* ── Grille réseaux sociaux ── */
.social-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 14px;
    margin-top: 28px;
}
@media (max-width: 1100px) { .social-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px)  { .social-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

.social-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 10px 14px;
    border-radius: 16px;
    background: #fff;
    border: 2px solid transparent;
    text-decoration: none;
    color: #222;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
    position: relative;
    overflow: hidden;
}
/* Fond coloré léger en arrière-plan */
.social-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--sc, #888);
    opacity: .06;
    transition: opacity .2s;
}
.social-btn:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 8px 22px rgba(0,0,0,.15);
    border-color: var(--sc, #888);
    text-decoration: none;
    color: #222;
}
.social-btn:hover::before {
    opacity: .12;
}
.social-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--sc, #888);
    padding: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,.22);
    flex-shrink: 0;
    transition: transform .8s ease;
}
.social-btn:hover .social-icon {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}
.social-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
}
.social-label {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111;
    text-align: center;
    position: relative;
}
.social-sub {
    font-size: 1.0rem;
    color: #777;
    text-align: center;
    line-height: 1.3;
    position: relative;
}
@media (max-width: 600px) {
    .social-sub { display: none; }
    .social-btn { padding: 14px 8px 12px; }
}

@media (min-width:45rem) {
.menu>ol {
    justify-content: flex-start;  /* tout le monde aligné à gauche : logo puis menus */
    align-items: stretch;
    gap: 0.4rem;                  /* petit écart entre chaque item */
}
.menu>ol>li {
    flex: 0 1 auto;               /* chaque item fait la taille de son contenu */
}
.menu>ol>li:first-child {
    margin-right: 2.5rem;         /* air entre le logo et le premier menu */
}
/* Top-level nav links */
.menu>ol>li>a {
    display: block;
    padding: 1.6rem 0.6rem;       /* était 1.6rem 0.8rem : un peu plus compact */
    font-size: clamp(1.1rem, 1.3vw, 1.4rem);
    font-weight: 500;
    letter-spacing: .03em;
    text-align: center;
    width: 100%;
    color: rgba(255,255,255,.85);
    position: relative;
    transition: color 200ms;
}
/* Hover : fond blanc translucide (effet verre) */
.menu>ol>li>a::before {
    content: '';
    position: absolute;
    inset: 6px 4px;
    background: rgba(255,255,255,0);
    border-radius: 8px;
    transition: background 200ms ease;
    z-index: 0;
    pointer-events: none;
}
.menu>ol>li:hover>a::before,
.menu>ol>li:focus-within>a::before,
.menu>ol>li:focus>a::before {
    background: rgba(255,255,255,.18);
}
.menu>ol>li>a {
    position: relative;
    z-index: 1;
}
.menu>ol>li:hover>a,
.menu>ol>li:focus-within>a,
.menu>ol>li:focus>a {
    color: #fff;
}
/* Dropdown */
.menu>ol>li>ol {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 190px;
    background: rgba(10,0,0,.58);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 2px solid rgba(255,255,255,.35);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
    visibility: hidden;
    opacity: 0;
    transition: opacity 180ms ease, visibility 180ms;
    padding: 6px 0;
    list-style: none;
    margin: 0;
}
.menu>ol>li:hover>ol,
.menu>ol>li:focus-within>ol,
.menu>ol>li:focus>ol {
    visibility: visible;
    opacity: 1;
}
.menu>ol>li>ol>li {
    margin: 0;
    transform: none;
}
.menu>ol>li>ol>li>a {
    display: block;
    padding: 9px 18px;
    font-size: 1.25rem;
    color: rgba(255,255,255,.8);
    text-align: left;
    white-space: nowrap;
    transition: background 150ms, color 150ms, padding-left 150ms;
    border-left: 3px solid transparent;
}
.menu>ol>li>ol>li>a:hover,
.menu>ol>li>ol>li>a:focus,
.menu>ol>li>ol>li>a:focus-within {
    background: rgba(255,255,255,.1);
    color: #fff;
    border-left-color: rgba(255,255,255,.6);
    padding-left: 22px;
}
}

/* ── Mobile header bar ── */
.logomobile {
    display: none;
    position: absolute;
    background-image: linear-gradient(to right, #000 0, #c40018 100%);
    width: 100%;
    height: 70px;
    margin: auto;
    top: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.ordionly {
    display: block;
}
.mobileonly {
    display: none;
}

/* ── Mobile menu ── */
@media (max-width:45rem) {
.ordionly {
    display: none;
}
.mobileonly {
    display: block;
}
.navbar-brand {
    height: auto;
    min-height: 40vh;
    position: relative;
}
.menu {
    background: #111;
    position: static;
}
.menu a {
    font-size: 1.45rem;
    padding: 1.1rem .5rem;
    color: rgba(255,255,255,.9);
}
.menu>ol {
    flex-direction: column;
}
.menu>ol>li {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.menu>ol>li>a {
    padding: 1.2rem 1.6rem;
    font-size: 1.45rem;
    font-weight: 500;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/* Arrow for items with submenus */
.menu>ol>li>a:nth-last-child(2)::after {
    content: '›';
    font-size: 1.8rem;
    color: #c40018;
    transition: transform 250ms;
    display: inline-block;
}
.menu>ol>li:focus-within>a::after,
.menu>ol>li:hover>a::after {
    transform: rotate(90deg);
}
/* Sub-menu accordion mobile */
.menu>ol>li>ol {
    background: rgba(255,255,255,.04);
    overflow: hidden;
    max-height: 0;
    transition: max-height 300ms ease;
    list-style: none;
    padding: 0;
    border-left: 3px solid #c40018;
    margin-left: 16px;
}
.menu>ol>li:focus-within>ol,
.menu>ol>li:hover>ol {
    max-height: 20rem;
}
.menu>ol>li>ol>li a {
    display: block;
    font-size: 1.3rem;
    padding: .9rem 1.6rem;
    color: rgba(255,255,255,.75);
    text-align: left;
}
h2 {
    font-size: 24px;
}
h3 {
    font-size: 18px;
}
}

/* ═══════════════════════════════════════════
   FOOTER — panneaux fixes desktop
   ═══════════════════════════════════════════ */

/* Base commune aux deux panneaux */
.fp-left,
.fp-right {
    position: fixed;
    bottom: 0;
    z-index: 900;
    color: #fff;
}

/* Panneau gauche — identité + légal */
.fp-left {
    left: 0;
    background: linear-gradient(to top right, rgba(0,0,0,.97) 0%, rgba(160,0,20,.93) 100%);
    border-top: 2px solid #c40018;
    border-right: 1px solid rgba(255,255,255,.1);
    border-radius: 0 8px 0 0;
    padding: 12px 20px 10px;
    max-width: 300px;
}

/* Panneau droit — documents */
.fp-right {
    right: 0;
    background: linear-gradient(to top left, rgba(0,0,0,.97) 0%, rgba(160,0,20,.93) 100%);
    border-top: 2px solid #c40018;
    border-left: 1px solid rgba(255,255,255,.1);
    border-radius: 8px 0 0 0;
    padding: 12px 20px 10px;
    max-width: 290px;
}

/* Logo dans le panneau */
.fp-logo {
    display: block;
    max-height: 32px;
    width: auto;
    opacity: .9;
    margin-bottom: 7px;
}

/* Baseline */
.fp-baseline {
    font-size: .76rem;
    color: rgba(255,255,255,.5);
    line-height: 1.4;
    margin: 0 0 6px;
}

/* Coordonnées */
.fp-coords {
    font-size: .82rem;
    margin: 0 0 9px;
}
.fp-coords a {
    color: rgba(255,255,255,.8) !important;
    text-decoration: none !important;
}
.fp-coords a:hover { color: #fff !important; }
.fp-coords .fa { opacity: .6; margin-right: 3px; font-size: .8rem; }

/* Séparateur + infos légales */
.fp-bar {
    border-top: 1px solid rgba(255,255,255,.15);
    padding-top: 7px;
    margin-top: 2px;
}
.fp-copy {
    font-size: .74rem;
    color: rgba(255,255,255,.45);
    display: block;
    margin-bottom: 2px;
}
.fp-reg {
    font-size: .68rem;
    color: rgba(255,255,255,.3);
}

/* Titre Documents */
.fp-heading {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(255,255,255,.45);
    margin: 0 0 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255,255,255,.15);
}

/* Liste des liens documents */
.fp-docs {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.fp-doc {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(255,255,255,.72) !important;
    font-size: .82rem;
    text-decoration: none !important;
    white-space: nowrap;
    transition: color .15s;
}
.fp-doc:hover { color: #fff !important; }
.fp-doc .fa {
    font-size: .85rem;
    color: rgba(255,255,255,.38) !important;
    flex-shrink: 0;
}

/* Panneaux fixes désactivés sur tous les écrans — footer unifié */
.fp-left,
.fp-right { display: none !important; }

/* Langswitch — même position desktop et mobile */
@media (min-width: 768px) {
    .langswitch { bottom: 20px; }
}

/* ═══════════════════════════════════════════
   FOOTER — site-footer (mobile statique)
   ═══════════════════════════════════════════ */
.site-footer {
    background: #111;
    color: #fff;
    margin: 0;
}

/* Corps principal — dégradé original noir → rouge */
.site-footer__body {
    background-image: linear-gradient(to right, #000 0, #c40018 100%);
    padding: 28px 0 24px;
    border-top: none;
}
.sf-row-compact {
    display: flex;
    align-items: center;
}

/* Colonnes */
.sf-col {
    padding-top: 0;
    padding-bottom: 0;
}

/* Logo */
.sf-logo {
    display: block;
    max-height: 40px;
    width: auto;
    margin-bottom: 10px;
    opacity: .92;
}

/* Baseline */
.sf-baseline {
    font-size: 1.2rem;
    color: rgba(255,255,255,.65);
    line-height: 1.5;
    margin-bottom: 8px;
}

/* Coordonnées en ligne — spécificité haute pour battre Bootstrap */
#footer .sf-coords {
    font-size: 1.2rem;
    color: rgba(255,255,255,.7);
    margin: 0;
}
#footer .sf-coords a {
    color: rgba(255,255,255,.85) !important;
    text-decoration: none !important;
}
#footer .sf-coords a:hover { color: #fff !important; }
#footer .sf-coords .fa { font-size: 1.1rem; margin-right: 4px; opacity: .7; }

/* Titre colonne Documents */
.sf-heading {
    font-size: 1.0rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(255,255,255,.5);
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,.2);
}

/* Grille documents — tous les liens au même style, spécificité haute */
.sf-docs-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
}
#footer .sf-doc-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,.75) !important;
    font-size: 1.2rem;
    font-style: normal !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: color .18s;
}
#footer .sf-doc-item:hover { color: #fff !important; text-decoration: none !important; }
#footer .sf-doc-item .fa {
    font-size: 1.1rem;
    color: rgba(255,255,255,.45) !important;
    flex-shrink: 0;
}

/* ── Barre de bas de page ── même dégradé mais plus sombre */
.site-footer__bar {
    background-image: linear-gradient(to right, #000 0, #6a000d 100%);
    padding: 10px 0;
    border-top: 1px solid rgba(255,255,255,.1);
}
.sf-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.sf-bar-copy {
    font-size: 1.05rem;
    color: rgba(255,255,255,.45);
    margin: 0;
    line-height: 1.4;
}
.sf-bar-reg {
    font-size: 1.0rem;
    color: rgba(255,255,255,.3);
}

/* Sélecteur de langue dans la barre */
.sf-langswitch {
    position: static !important;
    background: transparent !important;
    opacity: 1 !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sf-langswitch a img {
    opacity: .55;
    transition: opacity .2s;
    width: 20px;
    height: auto;
    display: block;
}
.sf-langswitch a:hover img { opacity: 1; }

/* Responsive footer */
@media (max-width: 767px) {
    .sf-row-compact { display: block; }
    .sf-col { padding-bottom: 18px; }
    .sf-docs-grid { gap: 8px 10px; }
    .site-footer__body { padding: 22px 0 16px; }
    .sf-bar-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
    .sf-bar-reg { display: none; }
}

/* Utilitaires conservés */
.portfolio-item .portfolio-desc { background: #99ceff; }
.bgcolor-whitesmoke { background-color: #f5f5f5; }
.text-bold { font-weight: 700; }
.txt30 { font-size: 30px; }
.margin-top50 { margin-top: 50px; }
.docslinks a { color: rgba(255,255,255,.3); line-height: 20px; }
.docslinks a:hover { color: rgba(255,255,255,.9); }
@media (min-width:959px) and (max-width:1199px) {
    #ui-datepicker-div {
    top: 200px;
    margin-left: -180px;
}
}
.langswitch {
    position: fixed;
    bottom: 10px;
    left: 0;
    background: #333;
    color: #fff; /* texte « FR / EN / JP … » blanc — auparavant
                    forcé via style="color:white" sur 14 pages PHP */
    opacity: .7;
    -moz-border-radius-topright: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-bottomright: 20px;
    -webkit-border-bottom-right-radius: 20px;
    width: 50px;
    padding: 8px 5px 5px;
    height: 38px;
    z-index: 9999;
    white-space: nowrap;
}
/* Hover : déploie les 7 drapeaux (fr/en/ja/ty/de/it/es).
   7 × (30px image + 5px margin + 5px padding) = 280px + 10px padding conteneur ≈ 290px,
   on prend 340px pour avoir de l'air et pas couper le dernier drapeau. */
.langswitch:hover {
    width: 340px;
    opacity: 1;
    transition: .3s;
}
.flagactif, .langswitch:hover .flaginactif {
    display: inline-block;
}
.langswitch img {
    display: inline-block;
    margin: 0 5px 0 0;
    padding: 0 5px 0 0;
    height: 20px;
    width: auto;
}
.flaginactif {
    display: none;
}
.progressbar {
    line-height: 50px;
    height: 50px;
    display: block;
    vertical-align: middle;
    text-align: center;
    margin-bottom: 0;
    padding-bottom: 0;
    background-image: linear-gradient(to right, #000 0, #c40018 100%);
    white-space: nowrap;
}
.progressbar-brand {
    padding: 0;
    display: table-cell;
    vertical-align: middle;
}
.progressbar-brand img {
    vertical-align: middle;
    height: 50px;
}
.progressbar li {
    height: 55px;
    line-height: 55px;
    color: #8f070b;
    display: inline-block;
    margin: 0 0 5px 5px;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
}
.stepactif {
    display: inline;
    color: #fff;
    border-bottom: 2px solid #fff;
    margin: 0 20px;
    white-space: nowrap;
}
.stepinactif {
    display: inline;
    color: #8f070b;
    border-bottom: 2px solid #8f070b;
    margin: 0 20px;
    white-space: nowrap;
}
.pointilles {
    display: inline-block;
    white-space: nowrap;
    font-weight: 900;
    margin-top: -15px;
    font-size: 30px;
    vertical-align: middle;
    text-align: center;
    color: #8f070b;
}
@media (max-width:900px) {
    .car-selector {
    margin: 0;
    padding: 0;
}
.stepactif, .stepinactif {
    font-size: 6px;
    margin: 0 5px;
    font-weight: 200;
}
.amobile, .pointilles {
    display: none;
}
}
.firstsection {
    padding-top: 50px;
}

.lds-ring {
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid #e00202;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #e00202 transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.lds-roller div:nth-child(8) {
  animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
  top: 56px;
  left: 12px;
}
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ============================================================
   NOUVELLES SECTIONS — index.php restructuré
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   HERO UNIFIÉ — .page-hero
   Style commun pour la 1ʳᵉ section de toutes les pages SAUF index.php
   (qui a son propre .hero-headline + Formbox de réservation).
   Fond : dégradé vertical rouge → burgundy, qui démarre à #c40018
   (= la couleur où la navbar termine à droite) et fonce en descendant.
   Ça enchaîne visuellement avec la navbar au lieu de former un bloc
   rouge uni qui jure. Typographie inspirée de .elec-hero.
   ══════════════════════════════════════════════════════════════ */
.page-hero {
    background: linear-gradient(180deg, #c40018 0%, #4a0008 100%);
    /* Générosité volontaire en haut : le titre doit respirer nettement
       sous la navbar (sticky, ~60 px). Bas un peu moindre mais assez pour
       éloigner le titre du changement de couleur de la section suivante. */
    padding: 100px 0 72px;
    color: #fff;
    margin-top: 0;
    margin-bottom: 0;
    /* Navbar sticky (~60px) : compense pour les ancres (#presentation, etc.)
       afin que le titre ne soit pas caché derrière la navbar après un scroll. */
    scroll-margin-top: 80px;
}
/* Même compensation pour toutes les sections cibles d'ancre du site */
section[id] {
    scroll-margin-top: 80px;
}
.page-hero .heading {
    color: #fff;
    font-size: 3rem;
    font-weight: 700;
    text-shadow: 0 2px 6px rgba(0,0,0,.30);
    margin: 0 0 14px;
    line-height: 1.2;
}
.page-hero p.heading-text,
.page-hero .heading-text {
    color: rgba(255,255,255,.92);
    font-size: 1.6rem;
    line-height: 1.5;
    max-width: 760px;
    margin: 0 0 8px;
}
/* Variantes utilisées par entreprise.php (slogans, badges) */
.page-hero__line {
    color: rgba(255,255,255,.88);
    font-size: 1.4rem;
    line-height: 1.5;
    margin: 0 0 8px;
}
.page-hero__line--italic  { font-style: italic; color: rgba(255,255,255,.78); }
.page-hero__line--dim     { color: rgba(255,255,255,.7); margin-bottom: 18px; }
.page-hero__badges {
    margin: 6px 0 10px;
}
.page-hero__badge {
    display: inline-block;
    background: rgba(255,255,255,.18);
    border-radius: 20px;
    padding: 4px 14px;
    font-size: 1.35rem;
    color: rgba(255,255,255,.95);
    margin-bottom: 6px;
}
.page-hero__badge--gold {
    background: rgba(255,215,0,.25);
    border: 1px solid rgba(255,215,0,.5);
    font-weight: 700;
    color: #ffe066;
}
@media (max-width: 767px) {
    .page-hero { padding: 70px 0 52px; }
    .page-hero .heading { font-size: 2.2rem; }
    .page-hero p.heading-text,
    .page-hero .heading-text { font-size: 1.4rem; }
    .page-hero__line { font-size: 1.25rem; }
}

/* ── Hero headline ── */
/* On veut que la Formbox ne bouge pas : on utilise un margin-bottom négatif
   sur .hero-headline pour annuler l'augmentation du padding-top.
   Hauteur "visible" totale consommée avant la Formbox :
     padding-top + h1 margin-bottom + padding-bottom + margin-bottom
   = 64 + 4 + 0 + (-12) = 56 px (= ancien 36 + 10 + 10). */
.hero-headline {
    text-align: center;
    padding: 64px 16px 0;         /* était 36px 16px 10px — titre descendu de ~28 px au total */
    margin-bottom: -12px;         /* compense pour ne pas pousser la Formbox */
}
.hero-title {
    font-size: 2.6rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,.45);
    margin: 0 0 4px;              /* était 0 0 10 — gap réduit mais lisible avec le sous-titre */
    line-height: 1.2;
}
.hero-subtitle {
    font-size: 1.5rem;
    color: rgba(255,255,255,.92);
    text-shadow: 0 1px 4px rgba(0,0,0,.35);
    margin: 0;
}
@media (max-width: 767px) {
    .hero-title   { font-size: 2.2rem; }
    .hero-subtitle { font-size: 1.3rem; }
}

/* ── Section titres centrés ── */
.section-title-center {
    text-align: center;
    font-size: 2.8rem;
    font-weight: 700;
    margin: 0 0 10px;        /* top 0 : neutralise la marge des h globaux */
    color: #222;
    text-shadow: none;       /* neutralise le text-shadow des h globaux */
}
.section-subtitle-center {
    text-align: center;
    color: #666;
    font-size: 1.5rem;
    margin-bottom: 32px;
}

/* ── Différenciants ── */
#section-differenciants {
    background: #fff;
    padding: 52px 0 44px;
}
.differenciants-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
}
@media (max-width: 1024px) {
    .differenciants-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .differenciants-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
.differenciant-item {
    text-align: center;
    padding: 24px 16px;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
    background: #fafafa;
    transition: box-shadow .2s, transform .2s;
}
.differenciant-item:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
    transform: translateY(-3px);
}
.differenciant-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
    color: #c40018;
}
.differenciant-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #222;
    margin: 0 0 8px;
    text-shadow: none;       /* neutralise le text-shadow des h globaux */
}
.differenciant-text {
    font-size: 1.2rem;
    color: #666;
    line-height: 1.55;
    margin: 0;
}

/* ── Aperçu véhicules ── */
#section-vehicules {
    padding: 52px 0;
}
.vehicules-preview-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
@media (max-width: 900px) {
    .vehicules-preview-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .vehicules-preview-grid { grid-template-columns: 1fr; }
}
.veh-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e8e8e8;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: box-shadow .2s, transform .2s;
}
.veh-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    transform: translateY(-3px);
}
.veh-card img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    display: block;
}
.veh-card-highlight {
    border-color: #c40018;
}
.veh-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #c40018;
    color: #fff;
    font-size: 1.0rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.veh-card-body {
    padding: 16px 18px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.veh-card-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #222;
    margin: 0 0 6px;
    text-shadow: none;       /* neutralise le text-shadow des h globaux */
}
.veh-card-desc {
    font-size: 1.3rem;
    color: #666;
    line-height: 1.5;
    flex: 1;
    margin: 0 0 14px;
}
.veh-card-btn {
    display: inline-block;
    background: #c40018;
    color: #fff;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 1.2rem;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: background .2s;
}
.veh-card-btn:hover { background: #a0001a; color: #fff; text-decoration: none; }

.btn-all-vehicles {
    display: inline-block;
    background: transparent;
    border: 2px solid #c40018;
    color: #c40018;
    border-radius: 6px;
    padding: 12px 28px;
    font-size: 1.4rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s, color .2s;
}
.btn-all-vehicles:hover {
    background: #c40018;
    color: #fff;
    text-decoration: none;
}
.tarifs-footnote {
    text-align: center;
    color: #999;
    font-style: italic;
    font-size: 1.15rem;
    margin-top: 10px;
}

/* ── À propos ── */
.btn-link-more {
    display: inline-block;
    margin-top: 14px;
    font-weight: 600;
    color: #c40018;
    text-decoration: none;
    font-size: 1.4rem;
}
.btn-link-more:hover { text-decoration: underline; color: #a0001a; }
/* Sur fond sombre (section-about de l'index) → blanc */
#section-about .btn-link-more { color: #fff; }
#section-about .btn-link-more:hover { color: rgba(255,255,255,.75); text-decoration: underline; }

/* ── Partenaires ── */
.section-partenaires { padding: 44px 0; }
.partenaires-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
    margin-top: 24px;
}
.partenaires-row a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    background: #fff;
    border-radius: 14px;
    padding: 18px 28px;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    border: 1px solid #ececec;
    transition: transform .2s, box-shadow .2s;
    min-width: 160px;
}
.partenaires-row a:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,.14);
    text-decoration: none;
}
.partenaires-row img {
    max-height: 70px;
    max-width: 200px;
    object-fit: contain;
}
.partner-text-link {
    font-size: 1.25rem;
    color: #555;
    font-weight: 600;
    text-align: center;
}

/* ── Grille flotte complète (mini-cartes) ── */
.flotte-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    margin-top: 10px;
}
@media (max-width: 1200px) { .flotte-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 1000px) { .flotte-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px)  { .flotte-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } }
@media (max-width: 480px)  { .flotte-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } }

/* ── Mini-cartes style VW ── */
.mini-card {
    display: block;
    position: relative;
    background: #f5f5f3;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    aspect-ratio: 1 / 1;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
    transition: transform .2s ease, box-shadow .2s ease;
}
.mini-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(0,0,0,.16);
    text-decoration: none;
    color: inherit;
}
/* Bloc coloré pleine largeur */
.mini-card-color-block {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60%;
    padding: 10px 11px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 5px;
    border-radius: 10px 10px 0 0;
}
/* Catégorie — blanc avec ombre pour lisibilité */
.mini-card-model {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    text-shadow: 0 1px 6px rgba(0,0,0,.6), 0 0 2px rgba(0,0,0,.4);
    /* Coupe proprement si le nom est très long sur petite carte */
    overflow-wrap: anywhere;
}
/* Badge électrique — coin haut droit de la vignette */
.mini-card-badge-elec {
    position: absolute;
    top: 7px;
    right: 8px;
    z-index: 4;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
/* Photo du véhicule — flotte entre le bloc couleur et le footer */
.mini-card-vehicle-img {
    position: absolute;
    bottom: 18%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: auto;
    object-fit: contain;
    z-index: 4;
    pointer-events: none;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,.32));
}
/* Bandeau blanc prix en bas */
.mini-card-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 22%;
    background: rgba(255,255,255,.96);
    border-top: 1px solid rgba(0,0,0,.06);
    padding: 0 11px;
    display: flex;
    align-items: center;
    z-index: 3;
}
/* Prix : stack "à partir de" au-dessus du montant pour rester lisible
   dans des cartes étroites (mobile) sans dépasser. */
.mini-card-price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
    color: #555;
    width: 100%;
    min-width: 0;
}
.mini-card-price-from {
    font-size: .78rem;
    color: #8a8a8a;
    font-weight: 400;
    letter-spacing: .1px;
    white-space: nowrap;
}
.mini-card-price strong {
    font-size: 1.1rem;
    font-weight: 800;
    color: #c40018;
    white-space: nowrap;
}
/* Anciens éléments — masqués */
.mini-card-overlay,
.mini-card-cat,
.mini-card-info,
.mini-card-poster { display: none; }

/* ── Responsive mini-cards ─────────────────────────────────────
   Desktop OK — on réduit juste les paddings et fontes à mesure que
   la carte rétrécit pour éviter que le texte déborde sur mobile. */
@media (max-width: 767px) {
    .mini-card-color-block { padding: 8px 9px; gap: 3px; }
    .mini-card-footer      { padding: 0 9px; height: 24%; }
    .mini-card-model       { font-size: .95rem; }
    .mini-card-price-from  { font-size: .7rem; }
    .mini-card-price strong{ font-size: .95rem; }
    .mini-card-badge-elec  { top: 6px; right: 6px; }
    .mini-card-badge-elec img { width: 9px; height: 15px; }
}
@media (max-width: 480px) {
    .mini-card              { border-radius: 8px; }
    .mini-card-color-block  { padding: 7px 8px; border-radius: 8px 8px 0 0; }
    .mini-card-footer       { padding: 0 8px; height: 26%; }
    .mini-card-model        { font-size: .85rem; line-height: 1.15; }
    .mini-card-price-from   { font-size: .62rem; }
    .mini-card-price strong { font-size: .85rem; }
    .mini-card-vehicle-img  { width: 94%; bottom: 22%; }
}
@media (max-width: 360px) {
    .mini-card-model        { font-size: .78rem; }
    .mini-card-price-from   { font-size: .58rem; }
    .mini-card-price strong { font-size: .78rem; }
    .mini-card-footer       { padding: 0 6px; height: 28%; }
}


/* ── Page Maintenance ── */
.maint-hero {
    min-height: calc(100vh - 220px);
    background: linear-gradient(135deg, #1a1a1a 0%, #3a000a 100%);
    padding: 60px 0;
    display: flex;
    align-items: center;
}
.maint-card {
    background: #fff;
    border-radius: 16px;
    border-top: 5px solid #c40018;
    box-shadow: 0 4px 30px rgba(0,0,0,.08);
    padding: 48px 40px 40px;
    text-align: center;
}
.maint-icon {
    font-size: 4.8rem;
    color: #c40018;
    margin-bottom: 20px;
}
.maint-title {
    font-size: 2.8rem;
    font-weight: 700;
    color: #222;
    margin: 0 0 20px;
}
.maint-time {
    font-size: 1.6rem;
    color: #333;
    margin-bottom: 6px;
}
.maint-text {
    font-size: 1.4rem;
    color: #777;
    margin-bottom: 0;
}
.maint-sep {
    border-color: #e8e8e8;
    margin: 24px 0;
}
.maint-btn {
    display: inline-block;
    margin-top: 28px;
    padding: 12px 32px;
    background: #c40018;
    color: #fff;
    border-radius: 6px;
    font-size: 1.5rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s;
}
.maint-btn:hover {
    background: #a00014;
    color: #fff;
    text-decoration: none;
}
.maint-contact {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
.maint-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border: 1.5px solid #e8e8e8;
    border-radius: 6px;
    color: #444;
    font-size: 1.4rem;
    text-decoration: none;
    transition: border-color .2s, color .2s;
}
.maint-contact-link:hover {
    border-color: #c40018;
    color: #c40018;
    text-decoration: none;
}
@media (max-width: 767px) {
    .maint-card { padding: 32px 20px 28px; }
    .maint-title { font-size: 2.2rem; }
}

/* Accessibility utility */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}