/* ==========================================================================
   CDM — Harmonisation des pages publiques avec la direction artistique
   du menu : pilules, surfaces translucides, coins adoucis, casse normale.
   Chargée après site.css et apps.css, dont elle remplace volontairement
   certains composants.
   ========================================================================== */

:root {
    --da-rayon: 14px;
    --da-rayon-petit: 10px;
    --da-bord: rgba(255, 255, 255, .14);
    --da-bord-fort: rgba(255, 255, 255, .28);
    --da-surface: rgba(255, 255, 255, .04);
}

/* --------------------------------------------------------------- Boutons */
.btn-light,
.btn-outline-light,
.btn,
.btn-outline {
    border-radius: 999px;
    text-transform: none;
    letter-spacing: .01em;
    font-size: 14px;
    font-weight: 600;
    padding: 13px 26px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-light {
    background: #f5f5f5;
    color: #0a0a0a;
    border: 1px solid #f5f5f5;
}

.btn-light:hover {
    background: transparent;
    color: #f5f5f5;
    box-shadow: none;
}

.btn-outline-light {
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--da-bord);
    color: #f5f5f5;
}

.btn-outline-light:hover {
    background: rgba(255, 255, 255, .14);
    border-color: var(--da-bord-fort);
    color: #f5f5f5;
    box-shadow: none;
}

/* Lien secondaire sous les formules : même casse que le reste */
.btn-demo {
    text-transform: none;
    letter-spacing: .01em;
    font-size: 13px;
    font-weight: 600;
}

/* ------------------------------------------------------------ Pastilles */
.badge {
    border-radius: 999px;
    text-transform: none;
    letter-spacing: .01em;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 16px;
    border-color: var(--da-bord);
    background: rgba(255, 255, 255, .05);
    box-shadow: none;
}

.ref-item,
.trust-item {
    border-radius: 999px;
}

.trust-item {
    text-transform: none;
    letter-spacing: .01em;
    font-size: 13px;
    font-weight: 500;
    color: #b4b4bb;
}

.ref-item {
    border-color: var(--da-bord);
    background: var(--da-surface);
}

/* Le sur-titre de section garde ses capitales : c'est un repère de lecture,
   pas un élément interactif. On l'allège seulement. */
.section-tag { letter-spacing: .14em; }

/* -------------------------------------------------------------- Surfaces */
.apps-platform,
.apps-stack,
.apps-steps,
.appsprice,
.offres-app,
.univers-carte,
.service-card,
.pricing-card,
.faq-item,
.temoignage-card,
.roi-card {
    border-radius: var(--da-rayon);
}

.apps-platform,
.service-card {
    background: var(--da-surface);
    border-color: var(--da-bord);
}

/* Les grilles à séparateurs 1px ne supportent pas les angles arrondis :
   on les remplace par un véritable espacement entre cartes. */
.apps-steps,
.offres-app {
    background: none;
    border: none;
    gap: 12px;
}

.apps-step,
.offre-app {
    background: var(--da-surface);
    border: 1px solid var(--da-bord);
    border-radius: var(--da-rayon);
}

.offre-app.est-mise-en-avant {
    background: rgba(37, 99, 235, .1);
    border-color: rgba(37, 99, 235, .45);
}

/* --------------------------------------------------------- Formulaires */
#contact-form input,
#contact-form textarea,
#contact-form select {
    border-radius: var(--da-rayon-petit);
}

#contact-form button {
    border-radius: 999px;
    text-transform: none;
    letter-spacing: .01em;
    font-size: 14px;
    font-weight: 600;
}

/* ------------------------------------------------------------- Pied de page */
footer {
    text-transform: none;
    letter-spacing: .01em;
    font-size: 13px;
}

/* --------------------------------------- Bandeau de lancement, plus doux */
#launch-banner {
    font-weight: 500;
}

#launch-timer span {
    border-radius: 6px;
}

/* L'avatar du widget de démonstration porte le monogramme CDM, pas un
   pictogramme de robot : la démonstration est signée, elle n'est pas anonyme.
   Le sigle est large et bas — `contain` évite qu'il soit rogné par le cercle. */
.hero-demo-avatar {
    object-fit: contain;
    padding: 9px 7px;
    background: #0a0a0a;
}

/* ═════════════ Aperçu de conversation, en visuel de héros sur /chatbots ═══ */
.assist-apercu {
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--da-bord);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
    max-width: 400px;
    margin-left: auto;
}

.assist-apercu-tete {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: rgba(255, 255, 255, .05);
    border-bottom: 1px solid var(--da-bord);
}

.assist-apercu-tete img {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    object-fit: contain;
    padding: 6px 5px;
    flex-shrink: 0;
}

.assist-apercu-tete strong {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    color: #f5f5f5;
}

.assist-apercu-tete span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #9a9aa2;
    margin-top: 2px;
}

.assist-apercu-tete i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2563eb;
    flex-shrink: 0;
}

.assist-apercu-fil {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 18px 24px;
}

/* Les bulles reprennent celles de l'accueil : même vocabulaire d'un bout à
   l'autre du site, et rien de nouveau à styler. */
.assist-apercu .osv-bulle { margin: 0; }

@media (max-width: 900px) {
    .assist-apercu { max-width: none; margin: 0; }
}

/* ═══════════════════════ Formules assistant IA — /chatbots ════════════════ */
.forfaits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    align-items: start;
}

.forfait {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--da-surface);
    border: 1px solid var(--da-bord);
    border-radius: var(--da-rayon);
    padding: 30px 28px 26px;
}

.forfait.est-vedette {
    background: linear-gradient(160deg, rgba(37, 99, 235, .13), rgba(255, 255, 255, .02));
    border-color: rgba(37, 99, 235, .5);
}

.forfait-vedette {
    position: absolute;
    top: -11px;
    left: 28px;
    background: #2563eb;
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .01em;
    padding: 4px 14px;
    border-radius: 999px;
}

.forfait h3 {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.01em;
    margin-bottom: 6px;
}

.forfait-pour {
    font-size: 13.5px;
    line-height: 1.6;
    color: #9a9aa2;
    margin-bottom: 22px;
    min-height: 44px;
}

/* Un seul prix, lisible d'un coup d'œil. Le reste se lit après. */
.forfait-prix {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--da-bord);
}

.forfait-prix b {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1;
}

.forfait-prix span { font-size: 15px; color: #9a9aa2; margin-left: 3px; }

.forfait-prix em {
    display: block;
    font-style: normal;
    font-size: 12.5px;
    color: #7c7c85;
    margin-top: 9px;
}

.forfait-promo {
    background: rgba(245, 158, 11, .1);
    border: 1px solid rgba(245, 158, 11, .38);
    border-radius: var(--da-rayon-petit);
    padding: 13px 15px;
    margin-bottom: 22px;
}

.forfait-promo strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #fbbf24;
    margin-bottom: 4px;
}

.forfait-promo span { font-size: 12.5px; line-height: 1.6; color: #cfcfd6; }

.forfait-points {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.forfait-points li {
    position: relative;
    padding-left: 24px;
    font-size: 13.5px;
    line-height: 1.6;
    color: #cfcfd6;
}

.forfait-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 13px;
    height: 7px;
    border-left: 2px solid #60a5fa;
    border-bottom: 2px solid #60a5fa;
    transform: rotate(-45deg);
}

/* Le détail existe, mais on ne l'impose pas : il est à un clic. */
.forfait-plus { margin-bottom: 22px; }

.forfait-plus summary {
    font-size: 13px;
    font-weight: 600;
    color: #9a9aa2;
    cursor: pointer;
    padding: 8px 0;
    list-style: none;
}

.forfait-plus summary::-webkit-details-marker { display: none; }
.forfait-plus summary::before { content: "+ "; color: #60a5fa; }
.forfait-plus[open] summary::before { content: "– "; }
.forfait-plus summary:hover { color: #f5f5f5; }

.forfait-plus ul {
    list-style: none;
    margin: 6px 0 0;
    padding: 0 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.forfait-plus li { font-size: 13px; line-height: 1.6; color: #9a9aa2; }

.forfait-bas {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-top: 20px;
    border-top: 1px solid var(--da-bord);
}

.forfait-bas > a:first-child { width: 100%; justify-content: center; }

.forfait-demo { font-size: 13px; color: #60a5fa; text-decoration: none; }
.forfait-demo:hover { text-decoration: underline; }

.forfait-delai { font-size: 12px; color: #7c7c85; }

.forfaits-note {
    font-size: 13px;
    line-height: 1.65;
    color: #9a9aa2;
    text-align: center;
    margin: 28px auto 0;
    max-width: 620px;
}

.forfaits-note code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    color: #cfe0ff;
    background: rgba(37, 99, 235, .16);
    border: 1px solid rgba(37, 99, 235, .4);
    border-radius: 6px;
    padding: 2px 7px;
}

/* ── Comparatif détaillé, replié par défaut ── */
.comparatif { margin-top: 34px; }

.comparatif > summary {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 auto;
    padding: 11px 22px;
    border: 1px solid var(--da-bord);
    border-radius: 999px;
    background: var(--da-surface);
    font-size: 13.5px;
    font-weight: 600;
    color: #cfcfd6;
    cursor: pointer;
    list-style: none;
    width: fit-content;
}

.comparatif > summary::-webkit-details-marker { display: none; }
.comparatif > summary::after { content: "↓"; color: #7c7c85; }
.comparatif[open] > summary::after { content: "↑"; }
.comparatif > summary:hover { border-color: var(--da-bord-fort); color: #f5f5f5; }

.comparatif .compare-wrap { margin-top: 22px; }

/* ═══════════════ Le constat : deux colonnes, deux cartes distinctes ═══════ */
.pain-grid {
    background: none;
    border: none;
    gap: 14px;
}

.pain-col {
    border-radius: var(--da-rayon);
    border: 1px solid var(--da-bord);
    background: var(--da-surface);
    padding: 30px 28px;
}

/* La colonne « avec » doit se distinguer sans crier : une teinte, pas un cadre
   coloré sur toute la hauteur. */
.pain-col.pain-with {
    background: linear-gradient(160deg, rgba(37, 99, 235, .12), rgba(255, 255, 255, .02));
    border-color: rgba(37, 99, 235, .4);
}

.pain-col h3 {
    font-size: 17px;
    font-weight: 800;
    /* La DA du site est en casse normale : les capitales des anciens titres de
       colonne crient sans rien ajouter. */
    text-transform: none;
    letter-spacing: -.01em;
    margin-bottom: 18px;
}

.pain-col ul { display: flex; flex-direction: column; gap: 12px; }

.pain-col li {
    font-size: 13.5px;
    line-height: 1.6;
    color: #cfcfd6;
}

.pain-icon {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
}

.pain-without .pain-icon { background: rgba(248, 113, 113, .16); color: #fca5a5; }
.pain-with .pain-icon { background: rgba(37, 99, 235, .25); color: #93c5fd; }

/* ══════════════════════════ Méthode : quatre étapes ══════════════════════ */
.process-grid {
    background: none;
    border: none;
    gap: 14px;
}

.process-step {
    background: var(--da-surface);
    border: 1px solid var(--da-bord);
    border-radius: var(--da-rayon);
    padding: 28px 22px;
    transition: border-color .15s ease;
}

.process-step:hover { border-color: var(--da-bord-fort); }

.process-num {
    border-radius: 999px;
    border-color: var(--da-bord);
    background: rgba(255, 255, 255, .06);
}

.process-step h3 {
    font-size: 16px;
    font-weight: 800;
    text-transform: none;
    letter-spacing: -.01em;
}

.process-cta {
    border-radius: 999px;
    text-transform: none;
    letter-spacing: .01em;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 18px;
}

/* ═══════════════════════════════ Les 60 secteurs ═════════════════════════ */
.secteurs-grid { gap: 9px; }

.secteur-card {
    border-radius: 999px;
    border-color: var(--da-bord);
    background: var(--da-surface);
    padding: 11px 17px;
    font-weight: 500;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.secteur-card:hover {
    border-color: rgba(37, 99, 235, .55);
    background: rgba(37, 99, 235, .12);
    transform: translateY(-1px);
}

/* ═════════════════════ Comparatif détaillé des formules ══════════════════ */
.compare-wrap {
    border-radius: var(--da-rayon);
    border-color: var(--da-bord);
    background: var(--da-surface);
    /* Le flou coûte cher au défilement pour un tableau, et fait de l'élément le
       bloc conteneur de tout enfant en position fixe. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.compare-table { background: none; }

.compare-table th {
    text-transform: none;
    letter-spacing: .01em;
    font-size: 13.5px;
    font-weight: 700;
    background: rgba(255, 255, 255, .04);
}

.compare-table td { font-size: 13.5px; }
.compare-table tr:hover td { background: rgba(255, 255, 255, .03); }
.compare-yes { color: #60a5fa; }
.compare-no { color: #6f7079; }

.compare-model-sub { color: #7c7c85; }

/* ═══════════════════════════════════ Le blog ═════════════════════════════ */
.blog-grid { gap: 14px; }

.blog-card {
    border-radius: var(--da-rayon);
    border-color: var(--da-bord);
    background: var(--da-surface);
    padding: 26px 24px;
}

.blog-card:hover {
    border-color: rgba(37, 99, 235, .5);
    background: rgba(37, 99, 235, .07);
    transform: translateY(-2px);
}

.blog-card-tag {
    display: inline-block;
    border-radius: 999px;
    border: 1px solid var(--da-bord);
    background: rgba(255, 255, 255, .05);
    color: #9a9aa2;
    text-transform: none;
    letter-spacing: .01em;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    margin-bottom: 14px;
}

.blog-card h2 {
    font-size: 17px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -.01em;
}

.blog-card-meta {
    font-size: 12.5px;
    color: #7c7c85;
    text-transform: none;
    letter-spacing: .01em;
}

.blog-listing-header { margin-bottom: 34px; }

#blog-search {
    border-radius: 999px;
    border-color: var(--da-bord);
    background-color: rgba(255, 255, 255, .04);
    padding: 13px 20px 13px 46px;
}

#blog-search:focus { border-color: rgba(37, 99, 235, .8); }

.breadcrumb { text-transform: none; letter-spacing: .01em; }

/* ═══════════════════════ Démos : onglets et cartes ═══════════════════════ */

/* Les onglets de formule reprennent le vocabulaire du menu : un rail de
   pilules, pas une barre segmentée à séparateurs. */
.plan-tabs {
    gap: 4px;
    background: none;
    border: none;
    padding: 4px;
    max-width: 420px;
}

.plan-tabs button {
    border-radius: 999px;
    background: none;
    border: 1px solid transparent;
    color: #9a9aa2;
    text-transform: none;
    letter-spacing: .01em;
    font-size: 13.5px;
    font-weight: 600;
    padding: 10px 16px;
}

.plan-tabs button:hover {
    background: rgba(255, 255, 255, .06);
    color: #f5f5f5;
}

.plan-tabs button.active {
    background: rgba(255, 255, 255, .1);
    border-color: var(--da-bord);
    color: #f5f5f5;
}

.demo-card {
    background: var(--da-surface);
    border: 1px solid var(--da-bord);
    border-radius: var(--da-rayon);
    /* Les coins arrondis ne rognent l'image et la bannière que si le conteneur
       masque ce qui dépasse. */
    overflow: hidden;
    transition: border-color .2s ease, transform .2s ease;
}

.demo-card:hover {
    border-color: rgba(37, 99, 235, .55);
    transform: translateY(-2px);
    box-shadow: none;
}

.demo-photo-wrap { border-bottom-color: var(--da-bord); }

.demo-banner {
    background: rgba(255, 255, 255, .04);
    border-bottom: 1px solid var(--da-bord);
}

.demo-logo {
    border-radius: var(--da-rayon-petit);
    border-color: var(--da-bord);
    letter-spacing: .02em;
}

.demo-num {
    text-transform: none;
    letter-spacing: .01em;
    font-size: 11.5px;
    font-weight: 600;
    opacity: .6;
}

.demo-name {
    font-size: 15.5px;
    font-weight: 700;
    /* Un nom d'entreprise s'écrit comme il se prononce, pas en capitales. */
    text-transform: none;
    letter-spacing: -.01em;
}

.demo-link {
    border-radius: 999px;
    text-transform: none;
    letter-spacing: .01em;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 22px;
}

.demo-link-live {
    display: block;
    text-align: center;
    text-decoration: none;
    border-radius: 999px;
    border: 1px solid #d8d8dd;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--text-muted, #7c7c85);
    padding: 10px 20px;
    transition: border-color .15s, color .15s;
}
.demo-link-live:hover { border-color: var(--text, #1a1a1f); color: var(--text, #1a1a1f); }

.demo-credit {
    text-transform: none;
    letter-spacing: .01em;
    font-size: 12px;
    font-weight: 500;
    color: #7c7c85;
}

.demo-credit img { border-radius: 4px; }

.demo-chat-bubble {
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.55;
}

/* ═══════════════════════ Une seule couleur d'accent ══════════════════════ */
/* Le vert servait d'accent secondaire un peu partout : pastilles de
   disponibilité, coches, colonnes positives. Le site n'a qu'un accent, le bleu.
   Le rouge reste, mais uniquement là où il signale un manque. */
.status-dot,
.hero-demo-status-dot {
    background: #60a5fa;
    box-shadow: 0 0 0 0 rgba(96, 165, 250, .55);
}

@keyframes status-pulse-bleu {
    0% { box-shadow: 0 0 0 0 rgba(96, 165, 250, .55); }
    70% { box-shadow: 0 0 0 7px rgba(96, 165, 250, 0); }
    100% { box-shadow: 0 0 0 0 rgba(96, 165, 250, 0); }
}

.status-dot { animation: status-pulse-bleu 2s infinite; }

/* Fin d'article de blog : la conclusion mène aussi à l'offre applicative, sans
   effacer l'appel à l'action de l'assistant qui a amené le lecteur ici. */
.article-cta-suite {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--da-bord);
    font-size: 14px;
    line-height: 1.7;
    color: #9a9aa2;
}

.article-cta-suite strong { color: #f5f5f5; }

.article-cta-suite a {
    display: inline-block;
    margin-top: 8px;
    font-weight: 600;
    color: #60a5fa;
    text-decoration: none;
}

.article-cta-suite a:hover { text-decoration: underline; }