/* ==========================================================================
   TUILES — le même habillage partout
   Solutions et anneaux (accueil), « À quoi sert votre dashboard ? » et
   Formules (dashboard), formulaire et réservation (contact).
   Surfaces pleines #111F34, grands arrondis, pas de verre dépoli, pas de
   halo, pas de projecteur qui suit la souris, pas d'inclinaison.
   Chargé après style.css : à spécificité égale, ces règles l'emportent.
   ========================================================================== */
:root {
    --tuile: #111F34;
    --tuile-creuse: #0B1629;
    --tuile-trait: rgba(255, 255, 255, 0.07);
    --texte-doux: #8E9BB0;
}

/* Les effets hérités (projecteur, reflets) vivent dans ::before / ::after. */
.uc-card::before, .uc-card::after,
.feature-card::before, .feature-card::after,
.benefit-ring-card::before, .benefit-ring-card::after,
.contact-booking-card::before, .contact-booking-card::after { display: none; }

/* Bouton principal façon Apple : blanc, plein, sans lueur ni pulsation. */
.dash-features .btn-primary,
.plans-cta-btns .btn-primary,
.contact-form .btn-primary,
.contact-booking-btn {
    background: #FFFFFF;
    color: #0B1829;
    border: 0;
    border-radius: 999px;
    padding: 14px 28px;
    font-weight: 700;
    box-shadow: none;
    animation: none;
    transition: background 0.2s ease, transform 0.2s ease;
}
.dash-features .btn-primary::before, .dash-features .btn-primary::after,
.plans-cta-btns .btn-primary::before, .plans-cta-btns .btn-primary::after,
.contact-form .btn-primary::before, .contact-form .btn-primary::after { display: none; }
.dash-features .btn-primary:hover,
.plans-cta-btns .btn-primary:hover,
.contact-form .btn-primary:hover,
.contact-booking-btn:hover { background: #E8EEF7; transform: translateY(-1px); box-shadow: none; opacity: 1; }
.plans-cta-btns .btn-secondary {
    background: var(--tuile);
    color: #F5F7FA;
    border: 0;
    border-radius: 999px;
    padding: 14px 28px;
    font-weight: 600;
}
.plans-cta-btns .btn-secondary:hover { background: #18294A; color: #FFFFFF; }

/* ---------------------------------------------------------------- SOLUTIONS
   Grandes tuiles photo pleine hauteur, texte posé sur l'image : la photo
   occupe toute la tuile, un dégradé en bas rend le texte lisible. */
.uc-cards-grid { gap: 14px; }
.uc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 520px;
    border: 0;
    border-radius: 28px;
    overflow: hidden;
    background: #0B1629;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none;
    isolation: isolate;
}
.uc-card:hover { transform: none; box-shadow: none; border: 0; }
.uc-card .uc-card-image {
    position: absolute;
    inset: 0;
    height: auto;
    z-index: 0;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.uc-card:hover .uc-card-image { transform: scale(1.05); }
.uc-card .uc-card-image::after {
    display: block;
    background: linear-gradient(180deg,
        rgba(5, 10, 20, 0) 30%,
        rgba(5, 10, 20, 0.55) 55%,
        rgba(5, 10, 20, 0.94) 100%);
}
.uc-card .uc-card-body { position: relative; z-index: 1; padding: 30px 30px 32px; }
/* Le badge en pastille devient une accroche, en casse de phrase. */
.uc-card-badge {
    display: block;
    padding: 0;
    margin-bottom: 8px;
    background: none;
    border: 0;
    border-radius: 0;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0;
    color: #BFDBFE;
}
.uc-card-body h3 { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.04em; margin-bottom: 10px; color: #FFFFFF; }
.uc-card-body p { font-size: 1rem; line-height: 1.5; color: rgba(255, 255, 255, 0.82); margin-bottom: 20px; }
.uc-card-link {
    align-self: flex-start;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #FFFFFF;
    font-size: 0.92rem;
    font-weight: 600;
    transition: background 0.2s ease;
}
.uc-card:hover .uc-card-link { background: #FFFFFF; color: #0B1829; gap: 8px; }
@media (max-width: 900px) { .uc-card { height: 460px; } }

/* ---------------------------------------------------------------- ANNEAUX */
.benefits-grid { gap: 14px; }
.benefit-ring-card {
    background: var(--tuile);
    border-radius: 28px;
    padding: 40px 26px 34px;
    border: 0;
    box-shadow: none;
}
.benefit-ring-card:hover { transform: none; }
.benefit-ring-card .ring-visual { margin-bottom: 26px; }
.benefit-ring-card h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; color: #F5F7FA; }
.benefit-ring-card p { font-size: 0.95rem; color: var(--texte-doux); }

/* ---------------------------------------------------------------- DASHBOARD : À QUOI IL SERT */
.dash-feature-grid { gap: 14px; }
.dash-feature-grid .feature-card {
    background: var(--tuile);
    border: 0;
    border-radius: 28px;
    padding: 32px 30px 34px;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.dash-feature-grid .feature-card:hover { transform: none; border: 0; box-shadow: none; }
/* L'icône sort de son carré : un symbole seul, dans la couleur d'accent. */
.dash-feature-grid .feature-card-icon {
    width: auto;
    height: auto;
    justify-content: flex-start;
    background: none;
    border: 0;
    margin-bottom: 22px;
    color: var(--accent);
}
.dash-feature-grid .feature-card-icon svg { width: 30px; height: 30px; }
.dash-feature-grid .feature-card:hover .feature-card-icon { transform: none; background: none; }
.dash-feature-grid .feature-card h3 { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; margin-bottom: 10px; }
.dash-feature-grid .feature-card p { font-size: 0.98rem; line-height: 1.55; color: var(--texte-doux); }

/* ---------------------------------------------------------------- FORMULES */
.plans-table-wrap {
    background: var(--tuile);
    border: 0;
    border-radius: 28px;
    padding: 8px 10px;
}
.plans-table { background: transparent; }
.plans-table th, .plans-table td {
    padding: 17px 20px;
    font-size: 14.5px;
    border-bottom: 1px solid var(--tuile-trait);
}
.plans-table thead th {
    background: transparent;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #F5F7FA;
    padding-top: 24px;
    padding-bottom: 22px;
}
.plans-table thead th:first-child { font-size: 0.95rem; font-weight: 500; color: var(--texte-doux); }
/* La colonne mise en avant se lit d'un bout à l'autre, sans cadre. */
.plans-table th.popular,
.plans-table tbody td:nth-child(4) { background: rgba(255, 255, 255, 0.035); }
.plans-table th.popular { color: #FFFFFF; border-radius: 16px 16px 0 0; }
.plans-table tbody tr:last-child td:nth-child(4) { border-radius: 0 0 16px 16px; }
.pop-tag {
    display: block;
    width: max-content;
    margin: 6px auto 0;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(96, 165, 250, 0.16);
    color: #93C5FD;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
}
.plans-table .yes { color: #34D399; font-weight: 600; }
.plans-table .no { color: var(--texte-doux); opacity: 0.5; }
.plans-table tbody tr:last-child td { border-bottom: 0; }
.plans-table .price-row td { background: transparent; color: #93C5FD; font-weight: 600; }
.plans-table .price-row td:nth-child(4) { background: rgba(255, 255, 255, 0.035); }

/* ---------------------------------------------------------------- CONTACT */
.contact-form {
    background: var(--tuile);
    border: 0;
    border-radius: 28px;
    padding: 40px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}
.form-group label { color: #AEB9C9; font-weight: 500; }
.form-group input, .form-group select, .form-group textarea {
    background: var(--tuile-creuse);
    border: 1px solid var(--tuile-trait);
    border-radius: 12px;
    padding: 14px 16px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: #3B82F6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18);
}
.form-group input::placeholder, .form-group textarea::placeholder { color: #5E6D83; }

.contact-booking-card {
    border: 0;
    border-radius: 28px;
    padding: 36px 34px;
    background:
        radial-gradient(70% 100% at 85% 20%, rgba(59, 130, 246, 0.32) 0%, transparent 70%),
        linear-gradient(135deg, #14295A 0%, #0B1629 100%);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.contact-booking-card:hover { transform: none; box-shadow: none; border: 0; }
.contact-booking-icon { background: rgba(255, 255, 255, 0.1); box-shadow: none; border: 0; color: #FFFFFF; }
.contact-booking-tag {
    background: none;
    border: 0;
    padding: 0;
    letter-spacing: 0;
    font-size: 0.85rem;
    color: #6EE7B7;
}
.contact-booking-title { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.035em; line-height: 1.15; }
.contact-booking-desc { color: rgba(234, 240, 248, 0.72); font-size: 0.98rem; }
.contact-booking-btn { display: inline-flex; align-items: center; gap: 8px; }
.contact-booking-btn svg { color: #0B1829; }

@media (max-width: 620px) {
    .uc-card, .benefit-ring-card, .dash-feature-grid .feature-card,
    .plans-table-wrap, .contact-form, .contact-booking-card { border-radius: 24px; }
    .contact-form { padding: 28px 22px; }
}

/* ---------------------------------------------------------------- SOLUTIONS : cartes qui bougent
   La carte s'incline vers le curseur, la photo glisse en sens inverse
   (profondeur) et un reflet suit la souris. Valeurs posées par
   js/sections.js (--rx, --ry, --px, --py, --gx, --gy). */
.uc-cards-grid { perspective: 1200px; }
.uc-cards-grid .uc-card {
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.7s ease;
    will-change: transform;
}
.uc-cards-grid .uc-card.suit { transition: transform 0.12s linear, box-shadow 0.4s ease; }
.uc-cards-grid .uc-card:hover {
    --lift: -8px;
    box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.8);
}
.uc-cards-grid .uc-card .uc-card-image {
    transform: scale(1.1) translate(var(--px, 0px), var(--py, 0px));
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.uc-cards-grid .uc-card.suit .uc-card-image { transition: transform 0.15s linear; }
.uc-cards-grid .uc-card:hover .uc-card-image { transform: scale(1.14) translate(var(--px, 0px), var(--py, 0px)); }
/* Reflet */
.uc-cards-grid .uc-card::after {
    display: block;
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, 0.16), transparent 55%);
    opacity: 0;
    transition: opacity 0.5s ease;
}
.uc-cards-grid .uc-card:hover::after { opacity: 1; }
.uc-cards-grid .uc-card .uc-card-body { transform: translateZ(40px); }

@media (hover: none), (prefers-reduced-motion: reduce) {
    .uc-cards-grid .uc-card { transform: none; }
    .uc-cards-grid .uc-card .uc-card-image { transform: none; }
    .uc-cards-grid .uc-card::after { display: none; }
}

/* ---------------------------------------------------------------- TABLEAU DE BORD (accueil) */
.dashc-capture { margin: 8px auto 40px; max-width: 980px; }
.dashc-capture img {
    display: block; width: 100%; height: auto; border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 30px 80px rgba(2, 8, 23, 0.6), 0 0 0 1px rgba(59, 130, 246, 0.08);
}
.dashc-capture figcaption { margin-top: 14px; text-align: center; font-size: 0.9rem; color: var(--texte-doux); }
.dashc-taches {
    list-style: none; margin: 0 auto; padding: 0; max-width: 1080px;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
}
.dashc-tache {
    background: var(--tuile); border-radius: 20px; padding: 22px 20px;
    display: flex; flex-direction: column; gap: 14px;
}
.dashc-icone {
    width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(59, 130, 246, 0.12); color: #93C5FD;
}
.dashc-icone svg { width: 20px; height: 20px; }
.dashc-tache h3 { font-size: 1rem; font-weight: 700; margin: 0 0 6px; color: #F1F5F9; letter-spacing: -0.01em; }
.dashc-tache p { font-size: 0.88rem; line-height: 1.55; margin: 0; color: var(--texte-doux); }
.dashc-note { margin: 28px auto 0; text-align: center; font-weight: 600; color: #BFDBFE; }
@media (max-width: 1000px) { .dashc-taches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .dashc-taches { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- ACCUEIL : fenêtre produit en perspective */
.prod-scene { position: relative; max-width: 1180px; margin: 8px auto 56px; perspective: 2200px; }
.prod-halo { position: absolute; inset: -8% 6% 22%; border-radius: 50%; background: radial-gradient(circle at 50% 40%, rgba(59,130,246,0.5), rgba(37,99,235,0.16) 45%, transparent 70%); filter: blur(40px); }
.prod-fenetre {
    position: relative; z-index: 1; border-radius: 22px; overflow: hidden; background: #0B1629;
    border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 60px 140px rgba(0,0,0,0.6), 0 0 0 1px rgba(59,130,246,0.12);
    transform: rotateX(var(--rx, 20deg)) scale(var(--sc, 0.93)); transform-origin: 50% 0%; will-change: transform;
}
.prod-barre { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #0E1A2E; border-bottom: 1px solid rgba(255,255,255,0.06); }
.prod-barre i { width: 11px; height: 11px; border-radius: 50%; background: #2A3A55; }
.prod-barre span { margin: 0 auto; font-size: 12px; color: #8E9BB0; padding: 4px 16px; border-radius: 8px; background: rgba(255,255,255,0.04); }
.prod-fenetre img { display: block; width: 100%; height: auto; }
.prod-fondu { position: absolute; left: 0; right: 0; bottom: -2px; height: 28%; z-index: 2; background: linear-gradient(transparent, var(--bg-0, #0B1829)); pointer-events: none; }
.prod-pastille {
    position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 16px;
    background: rgba(17,31,52,0.74); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 20px 50px rgba(0,0,0,0.45); animation: prodFlotte 6s ease-in-out infinite;
}
.prod-pastille b { display: block; font-size: 14px; font-weight: 700; color: #F1F5F9; }
.prod-pastille small { font-size: 12.5px; color: #8E9BB0; }
.prod-rond { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: rgba(59,130,246,0.18); color: #93C5FD; flex: none; }
.prod-rond svg { width: 18px; height: 18px; }
.prod-p1 { top: 18%; left: -3%; }
.prod-p2 { top: 42%; right: -4%; animation-delay: -2s; }
.prod-p3 { bottom: 24%; left: 6%; animation-delay: -4s; }
@keyframes prodFlotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (max-width: 900px) { .prod-pastille { display: none; } .prod-scene { perspective: none; } .prod-fenetre { transform: none; } }
@media (prefers-reduced-motion: reduce) { .prod-pastille { animation: none; } }

/* bandeau de confiance sous le titre : icônes fines, pas de points verts */
.scene-preuves.preuves-sobres { gap: 10px 22px; }
.scene-preuves.preuves-sobres li { gap: 7px; font-size: 13px; color: #94A3B8; letter-spacing: 0.01em; }
.scene-preuves.preuves-sobres li::before { display: none; }

.scene-preuves.preuves-sobres svg { width: 15px; height: 15px; color: #93C5FD; flex: none; }
@media (max-width: 600px) { .scene-preuves.preuves-sobres li + li { margin-left: 0; padding-left: 0; border-left: 0; } .scene-preuves.preuves-sobres { gap: 8px 16px; } }
/* Écran d'ordinateur : les trois garanties sur une seule ligne (sur téléphone, elles passent à la ligne) */
@media (min-width: 1100px) {
    .scene-preuves.preuves-sobres { flex-wrap: nowrap; gap: 10px 14px; width: max-content; }
    .scene-preuves.preuves-sobres li { white-space: nowrap; }
    .scene-preuves.preuves-sobres .info-bulle { white-space: normal; }
}

/* ---------------------------------------------------------------- PAGE DASHBOARD : visite guidée (carrousel horizontal) */
.visite { margin-bottom: 96px; }
.visite-tete { text-align: center; max-width: 760px; margin: 0 auto 36px; }
.visite-tete p { color: #8E9BB0; }
.visite-heure { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; color: #93C5FD; margin-bottom: 14px; }
.defile { max-width: 1240px; margin: 0 auto; }
.defile-fenetre { overflow: hidden; border-radius: 28px; touch-action: pan-y; }
.defile-piste { display: flex; transition: transform 0.9s cubic-bezier(0.65, 0, 0.2, 1); will-change: transform; }
.defile-diapo {
    flex: 0 0 100%; display: grid; grid-template-columns: 1.55fr 1fr; gap: 48px; align-items: center;
    padding: 28px; background: var(--tuile, #111F34); border-radius: 28px;
}
.defile-ecran { border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
.defile-ecran img { display: block; width: 100%; height: auto; max-height: 58vh; object-fit: cover; object-position: top left; }
.defile-texte { padding-right: 12px; opacity: 0; transform: translateX(24px); transition: opacity 0.6s ease 0.35s, transform 0.6s ease 0.35s; }
.defile-diapo.actif .defile-texte { opacity: 1; transform: none; }
.defile-texte h3 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); font-weight: 800; line-height: 1.06; letter-spacing: -0.045em; margin: 0 0 14px; color: #F1F5F9; }
.defile-texte p { font-size: 1.02rem; line-height: 1.65; color: rgba(226,232,240,0.72); margin: 0; }
.defile-commandes { display: flex; align-items: center; gap: 16px; margin: 22px auto 0; max-width: 560px; }
.defile-fleche {
    flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: #F1F5F9; transition: background 0.2s;
}
.defile-fleche:hover { background: rgba(59,130,246,0.3); }
.defile-fleche svg { width: 18px; height: 18px; }
.defile-barres { flex: 1; display: flex; gap: 8px; }
.defile-barres button { flex: 1; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; }
.defile-barres i { position: relative; display: block; width: 100%; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.12); overflow: hidden; }
.defile-barres i::after { content: ""; position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: #3B82F6; }
.defile-barres button.fait i::after { transform: scaleX(1); }
.defile-barres button.actif i::after { animation: defileTemps 6s linear forwards; }
.defile.en-pause .defile-barres button.actif i::after,
.defile.hors-ecran .defile-barres button.actif i::after { animation-play-state: paused; }
.defile.sans-auto .defile-barres button.actif i::after { animation: none; }
.defile.sans-auto .defile-barres button.actif i::after { transform: scaleX(1); }
@keyframes defileTemps { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 900px) {
    .defile-diapo { grid-template-columns: 1fr; gap: 22px; padding: 18px; }
    .defile-ecran img { max-height: 40vh; }
    .defile-texte { padding: 0 4px 6px; }
}

/* ---------------------------------------------------------------- PAGE CONTACT : agenda au centre, formulaire en dessous */
.cdemo { padding-top: 150px; }
.cdemo-conteneur { max-width: 1100px; }
/* Un seul titre, centré ; les 3 étapes sur une ligne ; l'agenda juste dessous */
.cdemo-gauche { text-align: center; max-width: 920px; margin: 0 auto 44px; }
.cdemo-tag { display: block; font-size: 0.9rem; font-weight: 600; color: #93C5FD; margin-bottom: 16px; }
.cdemo-titre { font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 800; line-height: 1; letter-spacing: -0.055em; margin: 0 0 18px; color: #F8FAFC; }
.cdemo-titre em { color: #BFDBFE; }
.cdemo-intro { font-size: 1.08rem; line-height: 1.65; color: rgba(226, 232, 240, 0.72); margin: 0 auto 36px; max-width: 600px; }
.cdemo-droite { max-width: 900px; margin: 0 auto; }
.cdemo-sous-agenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin-top: 16px; font-size: 0.9rem; color: #8E9BB0; }
.cdemo-sous-agenda p { margin: 0; }
.cdemo-ecrire-lien a { color: #F1F5F9; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; border-bottom: 1px solid rgba(147, 197, 253, 0.4); }
.cdemo-ecrire-lien a:hover { border-bottom-color: #93C5FD; }
.cdemo-ecrire-lien svg { width: 14px; height: 14px; }
@media (max-width: 900px) { .cdemo { padding-top: 120px; } }
@media (max-width: 700px) {
    .cdemo-etapes { grid-template-columns: 1fr; gap: 22px; }
    .cdemo-etapes::before, .cdemo-etapes::after { top: 26px; bottom: 26px; left: 25px; right: auto; width: 2px; height: auto; }
    .cdemo-etapes::after { transform-origin: top; animation-name: cdemoTraceV; }
    .cdemo-etapes li { display: grid; grid-template-columns: 52px 1fr; gap: 16px; text-align: left; padding: 0; align-items: center; }
    .cdemo-noeud { width: 52px; height: 52px; border-radius: 16px; margin: 0; }
    .cdemo-noeud svg { width: 23px; height: 23px; }
    .cdemo-etapes p { margin: 0; max-width: none; }
    .cdemo-titre em { display: block; }
    .cdemo-ecrire-lien { display: none; }
}
.cdemo-panneau {
    padding: 18px; border-radius: 28px; background: var(--tuile, #111F34);
    border: 1px solid rgba(255, 255, 255, 0.07); box-shadow: 0 40px 100px rgba(2, 8, 23, 0.5);
}
.cdemo-agenda { position: relative; min-height: 580px; border-radius: 18px; overflow: hidden; }
.cdemo-cal { position: relative; z-index: 1; width: 100%; min-height: 580px; }
.cdemo-attente { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; color: #8E9BB0; font-size: 0.9rem; transition: opacity 0.3s; }
.cdemo-attente span { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(147, 197, 253, 0.2); border-top-color: #3B82F6; animation: cdemoTourne 0.9s linear infinite; }
.cdemo-agenda.pret .cdemo-attente { opacity: 0; pointer-events: none; }
.cdemo-agenda.echec .cdemo-attente span { display: none; }
@keyframes cdemoTourne { to { transform: rotate(360deg); } }
.cdemo-secours { margin: 0; }
.cdemo-secours a { color: #93C5FD; font-weight: 600; }

/* Téléphone : carte + bouton qui ouvre l'agenda Cal.com en plein écran (l'agenda intégré s'y empile mal) */
.cdemo-mobile { display: none; }
@media (max-width: 859px) {
    .cdemo-agenda { display: none; }
    .cdemo-panneau { padding: 30px 22px; }
    .cdemo-mobile { display: flex; flex-direction: column; align-items: center; text-align: center; }
    .cdemo-mobile-icone {
        width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; margin-bottom: 18px;
        color: #BFDBFE; background: linear-gradient(160deg, rgba(59, 130, 246, 0.35), rgba(59, 130, 246, 0.08));
        border: 1px solid rgba(147, 197, 253, 0.25);
    }
    .cdemo-mobile-icone svg { width: 30px; height: 30px; }
    .cdemo-mobile h3 { margin: 0 0 8px; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.035em; color: #F1F5F9; }
    .cdemo-mobile p { margin: 0 0 22px; color: rgba(226, 232, 240, 0.72); font-size: 0.98rem; line-height: 1.6; max-width: 320px; }
    .cdemo-mobile-bouton { width: 100%; justify-content: center; padding: 16px 20px; }
}

/* « Vous préférez nous écrire ? » : grand bloc sous l'agenda, texte à gauche, formulaire à droite */
.cecrire {
    margin-top: 110px; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 48px; align-items: start;
    padding: 44px; border-radius: 28px; background: var(--tuile, #111F34); border: 1px solid rgba(255, 255, 255, 0.07);
}
.cecrire-titre { font-size: clamp(1.9rem, 3.2vw, 2.6rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.045em; margin: 0 0 14px; color: #F1F5F9; }
.cecrire-sous { color: rgba(226, 232, 240, 0.72); font-size: 1rem; line-height: 1.6; margin: 0 0 28px; }
.cecrire .contact-info { padding: 0; display: grid; gap: 18px; }
.cecrire .contact-info-item { margin: 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.cecrire .contact-info-item h3 { font-size: 0.85rem; margin-bottom: 4px; }
.cecrire .contact-info-item p { font-size: 0.98rem; }
.cecrire .contact-form { background: none; border: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.cecrire .form-group { margin: 0; }
.cecrire .form-group:has(textarea) { grid-column: 1 / -1; }
.cecrire .form-group input, .cecrire .form-group select, .cecrire .form-group textarea { padding: 15px 16px; background: rgba(6, 13, 28, 0.55); border-radius: 12px; }
.cecrire .form-group textarea { min-height: 150px; }
.cecrire .form-group select:has(option[value=""]:checked) { color: rgba(148, 163, 184, 0.75); }
.cecrire .contact-form .btn { grid-column: 1 / -1; justify-self: start; padding: 15px 34px; }
@media (max-width: 900px) {
    .cdemo-panneau { padding: 10px; border-radius: 22px; }
    .cdemo-agenda, .cdemo-cal { min-height: 620px; }
    .cecrire { grid-template-columns: 1fr; gap: 28px; padding: 26px 20px; margin-top: 56px; }
    .cecrire .contact-info { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .cecrire .contact-form { grid-template-columns: 1fr; }
    .cecrire .contact-form .btn { justify-self: stretch; }
    .cecrire .contact-info { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- CORRECTIFS RESPONSIVE */
/* La règle de base de .features-grid (3 colonnes) est déclarée APRÈS ses media queries dans style.css :
   elle les écrasait, et les cartes de la page Dashboard débordaient sur téléphone. */
@media (max-width: 1024px) { .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) { .features-grid { grid-template-columns: minmax(0, 1fr); } }
/* Les halos décoratifs du fond ne doivent jamais créer de défilement horizontal. */
html, body { overflow-x: clip; }

/* ---------------------------------------------------------------- PAGE DASHBOARD : grille bento */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; text-align: left; margin: 0 0 8px; }
.bento-tuile {
    position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 26px;
    background: linear-gradient(180deg, #12223B, #0E1B30); border: 1px solid rgba(255, 255, 255, 0.07);
    transition: border-color 0.35s, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.bento-tuile:hover { border-color: rgba(147, 197, 253, 0.22); }
.bento-large { grid-column: span 2; }
.bento-bandeau { grid-column: 1 / -1; flex-direction: row; align-items: center; }
.bento-visuel {
    position: relative; flex: 1; min-height: 230px; padding: 26px 26px 6px; display: flex; align-items: flex-end; justify-content: center;
    background: radial-gradient(80% 90% at 50% 0%, rgba(59, 130, 246, 0.16), transparent 70%);
    -webkit-mask-image: linear-gradient(180deg, #000 90%, transparent); mask-image: linear-gradient(180deg, #000 90%, transparent);
}
.bento-texte { padding: 20px 26px 26px; }
.bento-texte h3 { margin: 0 0 8px; font-size: 1.2rem; font-weight: 800; letter-spacing: -0.03em; color: #F8FAFC; line-height: 1.2; }
.bento-texte p { margin: 0; font-size: 0.94rem; line-height: 1.6; color: #8E9BB0; max-width: 520px; }

/* éléments communs des mini-interfaces */
.mini-av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 0.72rem; font-weight: 700; color: #DBEAFE; background: linear-gradient(160deg, #2D5BA8, #1A3666); }
.mini-av-grand { width: 46px; height: 46px; font-size: 0.9rem; }
.mini-puce { font-style: normal; font-size: 0.7rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.mini-ambre { background: rgba(245, 158, 11, 0.15); color: #FBBF24; }
.mini-vert { background: rgba(52, 211, 153, 0.15); color: #34D399; }
.mini-rouge { background: rgba(248, 113, 113, 0.15); color: #F87171; }
.bento-visuel b { color: #F1F5F9; font-weight: 600; }

/* 1. appels */
.mini-appels { width: 100%; max-width: 640px; display: grid; gap: 10px; }
.mini-appel { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: rgba(6, 13, 28, 0.55); border: 1px solid rgba(255, 255, 255, 0.06); }
.mini-ouvert { background: rgba(23, 45, 84, 0.7); border-color: rgba(147, 197, 253, 0.25); box-shadow: 0 18px 40px rgba(2, 8, 23, 0.4); }
.mini-appel-corps { flex: 1; min-width: 0; }
.mini-ligne { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; }
.mini-heure { color: #64748B; font-size: 0.78rem; margin-right: auto; font-variant-numeric: tabular-nums; }
.mini-motif { margin: 3px 0 0; font-size: 0.82rem; color: #8E9BB0; }
.mini-resume { margin: 8px 0 0; font-size: 0.85rem; line-height: 1.5; color: #CBD5E1; }
.mini-resume span { display: inline-block; margin-right: 6px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #93C5FD; }

/* 2. agenda */
.mini-agenda { width: 100%; max-width: 300px; display: grid; gap: 8px; }
.mini-agenda-tete { display: flex; justify-content: space-between; align-items: baseline; padding: 0 2px 4px; font-size: 0.85rem; }
.mini-agenda-tete span { color: #64748B; font-size: 0.78rem; }
.mini-creneau { display: grid; grid-template-columns: 46px 1fr; gap: 10px; align-items: center; }
.mini-creneau > span { font-size: 0.78rem; color: #64748B; font-variant-numeric: tabular-nums; }
.mini-creneau > div { padding: 10px 12px; border-radius: 12px; background: rgba(6, 13, 28, 0.55); border-left: 3px solid #334A6E; font-size: 0.85rem; }
.mini-creneau small { display: block; color: #8E9BB0; font-size: 0.75rem; margin-top: 2px; }
.mini-ia > div { background: rgba(37, 99, 235, 0.18); border-left-color: #3B82F6; }
.mini-ia small { color: #93C5FD; }

/* 3. WhatsApp */
.mini-wa { width: 100%; max-width: 300px; display: flex; flex-direction: column; gap: 8px; }
.mini-bulle { margin: 0; max-width: 85%; padding: 9px 13px; border-radius: 16px; font-size: 0.84rem; line-height: 1.4; }
.mini-patient { align-self: flex-start; background: rgba(255, 255, 255, 0.08); color: #E2E8F0; border-bottom-left-radius: 5px; }
.mini-auto { align-self: flex-end; background: #1F8F5F; color: #F0FDF4; border-bottom-right-radius: 5px; }
.mini-wa-note { align-self: flex-end; font-size: 0.72rem; color: #34D399; }

/* 4. statistiques */
.mini-stats { width: 100%; max-width: 300px; }
.mini-stats-tete { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.85rem; margin-bottom: 14px; }
.mini-stats-tete span { color: #8E9BB0; }
.mini-stats-tete b { font-size: 0.78rem; color: #93C5FD; font-weight: 600; }
.mini-barres { height: 120px; display: flex; align-items: flex-end; gap: 10px; }
.mini-barres i { flex: 1; height: var(--h); border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, #60A5FA, #1D4ED8); opacity: 0.9; transform-origin: bottom; }
.mini-barres i:nth-child(4) { background: linear-gradient(180deg, #BFDBFE, #3B82F6); box-shadow: 0 0 24px rgba(96, 165, 250, 0.45); }
.mini-jours { display: flex; gap: 10px; margin-top: 8px; }
.mini-jours span { flex: 1; text-align: center; font-size: 0.72rem; color: #64748B; }
.bento-tuile .mini-barres i { transform: scaleY(0.08); transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.bento-tuile.visible .mini-barres i { transform: none; }
.bento-tuile.visible .mini-barres i:nth-child(2) { transition-delay: 0.08s; }
.bento-tuile.visible .mini-barres i:nth-child(3) { transition-delay: 0.16s; }
.bento-tuile.visible .mini-barres i:nth-child(4) { transition-delay: 0.24s; }
.bento-tuile.visible .mini-barres i:nth-child(5) { transition-delay: 0.32s; }
.bento-tuile.visible .mini-barres i:nth-child(6) { transition-delay: 0.4s; }
.bento-tuile.visible .mini-barres i:nth-child(7) { transition-delay: 0.48s; }

/* 5. fiche patient */
.mini-patient-fiche { width: 100%; max-width: 300px; padding: 18px; border-radius: 18px; background: rgba(6, 13, 28, 0.55); border: 1px solid rgba(255, 255, 255, 0.07); }
.mini-patient-tete { display: flex; gap: 12px; align-items: center; font-size: 0.92rem; }
.mini-patient-tete small { display: block; color: #8E9BB0; font-size: 0.76rem; margin-top: 2px; }
.mini-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0; }
.mini-chips span { font-size: 0.74rem; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: #CBD5E1; }
.mini-prochain { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(37, 99, 235, 0.16); font-size: 0.8rem; }
.mini-prochain span { color: #93C5FD; }

/* 6. sécurité (bandeau) */
.bento-bandeau .bento-visuel { flex: none; width: 240px; min-height: 0; padding: 26px; align-items: center; -webkit-mask-image: none; mask-image: none; background: radial-gradient(60% 70% at 50% 50%, rgba(59, 130, 246, 0.28), transparent 70%); }
.bento-bandeau .bento-texte { padding: 26px 30px 26px 0; }
.bento-bandeau h3 { font-size: 1.35rem; }
.mini-bouclier { width: 96px; height: 96px; border-radius: 28px; display: grid; place-items: center; color: #DBEAFE; background: linear-gradient(160deg, #1D3A6B, #0F1F38); border: 1px solid rgba(147, 197, 253, 0.3); box-shadow: 0 0 0 10px rgba(59, 130, 246, 0.06), 0 20px 50px rgba(37, 99, 235, 0.35); }
.mini-bouclier svg { width: 44px; height: 44px; }

/* bandeau final */
.dash-fin { padding-top: 40px; }
.dash-fin-carte {
    position: relative; overflow: hidden; text-align: center; padding: 72px 32px; border-radius: 32px;
    background: radial-gradient(70% 120% at 50% 0%, rgba(59, 130, 246, 0.35), transparent 70%), linear-gradient(180deg, #13284A, #0D1A2E);
    border: 1px solid rgba(147, 197, 253, 0.16);
}
.dash-fin-carte h2 { margin: 0 0 14px; font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 800; letter-spacing: -0.05em; line-height: 1.02; color: #F8FAFC; }
.dash-fin-carte h2 em { color: #BFDBFE; }
.dash-fin-carte p { margin: 0 auto 30px; max-width: 560px; color: rgba(226, 232, 240, 0.75); font-size: 1.05rem; line-height: 1.6; }
.dash-fin-boutons { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }


/* largeur commune de la grille et du bandeau final, titre de section à l'échelle du site */
.dash-features-center { max-width: 1120px; }
.dash-features-center > h2 { font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 800; letter-spacing: -0.05em; line-height: 1.05; margin: 0 0 40px; }
.dash-fin-carte { max-width: 1120px; margin: 0 auto; }
@media (max-width: 1000px) {
    .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bento-large { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
    .bento { grid-template-columns: 1fr; }
    .bento-bandeau { flex-direction: column; align-items: stretch; }
    .bento-bandeau .bento-visuel { width: auto; padding-bottom: 0; }
    .bento-bandeau .bento-texte { padding: 20px 26px 26px; }
    .bento-visuel { min-height: 0; padding: 22px 18px 0; }
    .mini-heure { display: none; }
    .dash-fin-carte { padding: 52px 22px; }
}
@media (prefers-reduced-motion: reduce) { .bento-tuile .mini-barres i { transform: none; transition: none; } }

/* ---------------------------------------------------------------- PAGE CONTACT : agenda (sans cadre) et formulaire côte à côte */
.cdemo-conteneur { max-width: 1300px; }
.cdemo-gauche { margin-bottom: 40px; }
.cdemo-intro { margin-bottom: 0; }
/* L'agenda Cal.com fait 720 px mais a besoin d'un cadre d'au moins 768 px pour garder le mois et les créneaux
   côte à côte : la colonne fait 720 px et le cadre déborde de 26 px de chaque côté (marge invisible de Cal.com).
   Le calendrier visible et le formulaire sont ainsi exactement centrés sous le titre. */
.cdemo-cote { display: grid; grid-template-columns: 720px minmax(360px, 440px); justify-content: center; gap: 40px; align-items: start; }
.cdemo-cote .cdemo-agenda { margin: 0 -26px; }
/* Le calendrier visible (sans la mention Cal.com ni la ligne de secours en dessous) est centré en hauteur face au formulaire */
.cdemo-cote .cdemo-droite { max-width: none; margin: 128px 0 0; align-self: center; }
.cdemo-panneau { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.cdemo-sous-agenda { justify-content: center; }
/* Une fois l'agenda chargé, le cadre prend la hauteur réelle de Cal.com : la place réservée pendant le
   chargement (580 px) laissait un grand vide entre la mention Cal.com et « L'agenda ne s'affiche pas ? ». */
.cdemo-agenda.pret, .cdemo-agenda.pret .cdemo-cal { min-height: 0; }
.cdemo-panneau:has(.cdemo-agenda.pret) + .cdemo-sous-agenda { margin-top: 2px; }
/* Anti-spam Cloudflare Turnstile : sur toute la largeur du formulaire, place réservée pour éviter un saut */
.contact-form .cf-turnstile { grid-column: 1 / -1; min-height: 65px; }
.contact-form .turnstile-alerte { grid-column: 1 / -1; margin: -4px 0 0; font-size: 0.85rem; color: #FCA5A5; }
.cdemo-cote .cecrire { margin: 0; display: block; padding: 30px 28px; border-radius: 24px; }
.cdemo-cote .cecrire-titre { font-size: 1.75rem; margin-bottom: 8px; }
.cdemo-cote .cecrire-sous { font-size: 0.93rem; margin-bottom: 22px; }
.cdemo-cote .cecrire .contact-form { grid-template-columns: 1fr; gap: 14px; }
.cdemo-cote .cecrire .form-group input, .cdemo-cote .cecrire .form-group select, .cdemo-cote .cecrire .form-group textarea { padding: 13px 14px; }
.cdemo-cote .cecrire .form-group textarea { min-height: 96px; }
.cdemo-cote .cecrire .contact-form .btn { justify-self: stretch; }
.cdemo-cote .cecrire .contact-info { margin-top: 22px; grid-template-columns: 1fr; gap: 12px; }
.cdemo-cote .cecrire-titre em { white-space: nowrap; }
.cdemo-cote .cecrire .contact-info-item { padding-top: 14px; }
.cdemo-cote .cecrire .contact-info-item p { font-size: 0.9rem; }
@media (max-width: 1219px) {
    .cdemo-cote { grid-template-columns: 1fr; gap: 56px; }
    .cdemo-cote .cdemo-agenda { margin: 0; }
    .cdemo-cote .cdemo-droite { max-width: 880px; width: 100%; margin: 0 auto; align-self: auto; }
    .cdemo-cote .cecrire { max-width: 760px; width: 100%; margin: 0 auto; }
    .cdemo-cote .cecrire .contact-form, .cdemo-cote .cecrire .contact-info { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 859px) {
    .cdemo-mobile { padding: 30px 22px; border-radius: 22px; background: var(--tuile, #111F34); border: 1px solid rgba(255, 255, 255, 0.07); }
}
@media (max-width: 560px) {
    .cdemo-cote .cecrire .contact-form, .cdemo-cote .cecrire .contact-info { grid-template-columns: 1fr; }
    .cdemo-cote .cecrire { padding: 24px 20px; }
}

/* Contact, écran large : formulaire à la hauteur de l'agenda (490 px), les deux alignés en haut et en bas */
@media (min-width: 1220px) {
    .cdemo-cote { align-items: start; }
    .cdemo-cote .cdemo-droite { margin: 0; align-self: start; }
    .cdemo-cote .cecrire { min-height: 490px; box-sizing: border-box; padding: 24px 26px; display: flex; flex-direction: column; gap: 0; margin-top: 5px; }  /* même ligne de départ que le cadre Cal.com */
    .cdemo-cote .cecrire-titre { font-size: 1.5rem; margin: 0 0 16px; }
    .cdemo-cote .cecrire-sous { display: none; }
    .cdemo-cote .cecrire .contact-form { grid-template-columns: 1fr 1fr; gap: 12px; }
    .cdemo-cote .cecrire .form-group:has(textarea) { grid-column: 1 / -1; }
    .cdemo-cote .cecrire .form-group label { font-size: 0.8rem; margin-bottom: 6px; }
    .cdemo-cote .cecrire .form-group input, .cdemo-cote .cecrire .form-group select, .cdemo-cote .cecrire .form-group textarea { padding: 11px 13px; font-size: 0.92rem; }
    .cdemo-cote .cecrire .form-group textarea { min-height: 84px; height: 84px; }
    .cdemo-cote .cecrire .contact-form .btn { grid-column: 1 / -1; padding-top: 12px; padding-bottom: 12px; }
    .cdemo-cote .cecrire .contact-info { margin-top: auto; padding-top: 14px; display: grid; grid-template-columns: 1fr; gap: 4px; }
    .cdemo-cote .cecrire .contact-info-item { padding: 0; border: 0; display: flex; gap: 6px; align-items: baseline; }
    .cdemo-cote .cecrire .contact-info-item h3 { margin: 0; font-size: 0.8rem; white-space: nowrap; }
    .cdemo-cote .cecrire .contact-info-item h3::after { content: " :"; }
    .cdemo-cote .cecrire .contact-info-item p { margin: 0; font-size: 0.82rem; }
}