/* ==========================================================================
   CDM — Offre principale : développement d'applications web & mobiles
   Visuel du hero, section #applications, bloc tarifaire applications.
   ========================================================================== */

/* Le rail latéral réduit la largeur utile : les très grands titres, calibrés
   en vw sur la fenêtre entière, débordaient sur trop de lignes. */
@media (min-width: 900px) {
    .hero h1 { font-size: clamp(38px, 4.6vw, 62px); }
    .hero { padding: 92px 40px 88px; }
}

/* ------------------------------------------------- Visuel du hero (maquette) */
.hero-visual {
    margin-top: 56px;
    position: relative;
    display: flex;
    justify-content: center;
    perspective: 1200px;
}

@media (min-width: 960px) {
    .hero-visual { margin-top: 0; }
}

.mock-browser {
    width: 100%;
    max-width: 460px;
    background: #14151c;
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
    overflow: hidden;
}

.mock-browser-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    background: #1d1e29;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.mock-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    flex-shrink: 0;
}

.mock-url {
    flex: 1;
    margin-left: 6px;
    height: 20px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .07);
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-size: 10px;
    color: #8e8e96;
    letter-spacing: .02em;
    overflow: hidden;
    white-space: nowrap;
}

.mock-body {
    display: grid;
    grid-template-columns: 68px 1fr;
    min-height: 250px;
}

.mock-side {
    border-right: 1px solid rgba(255, 255, 255, .08);
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.mock-side i {
    display: block;
    height: 7px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .13);
}

.mock-side i.on { background: #2563eb; }
.mock-side i:nth-child(2) { width: 70%; }
.mock-side i:nth-child(3) { width: 85%; }
.mock-side i:nth-child(4) { width: 60%; }
.mock-side i:nth-child(5) { width: 78%; }

.mock-main { padding: 16px 16px 20px; }

.mock-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.mock-kpi {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    padding: 9px 8px;
}

.mock-kpi b {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: #f5f5f5;
    line-height: 1.2;
}

.mock-kpi span {
    display: block;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #7e7e88;
    margin-top: 3px;
}

.mock-chart {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    height: 92px;
    padding-top: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.mock-chart i {
    flex: 1;
    background: linear-gradient(180deg, #2563eb, rgba(37, 99, 235, .25));
    transform-origin: bottom;
    animation: mock-bar-grow .9s cubic-bezier(.4, 0, .2, 1) both;
}

.mock-chart i:nth-child(1) { height: 38%; animation-delay: .05s; }
.mock-chart i:nth-child(2) { height: 62%; animation-delay: .12s; }
.mock-chart i:nth-child(3) { height: 47%; animation-delay: .19s; }
.mock-chart i:nth-child(4) { height: 81%; animation-delay: .26s; }
.mock-chart i:nth-child(5) { height: 55%; animation-delay: .33s; }
.mock-chart i:nth-child(6) { height: 96%; animation-delay: .4s; }

@keyframes mock-bar-grow {
    from { transform: scaleY(0); opacity: 0; }
    to   { transform: scaleY(1); opacity: 1; }
}

/* Téléphone superposé */
.mock-phone {
    position: absolute;
    right: -6px;
    bottom: -34px;
    width: 124px;
    background: #0f1017;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 18px;
    padding: 8px 7px 6px;
    box-shadow: 0 24px 50px rgba(0, 0, 0, .6);
}

.mock-phone-notch {
    width: 34px;
    height: 4px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .22);
    margin: 0 auto 8px;
}

.mock-phone-screen {
    background: #14151c;
    border-radius: 11px;
    padding: 9px 8px 6px;
}

.mock-phone-screen > i {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .14);
    margin-bottom: 6px;
}

.mock-phone-screen > i:first-child { width: 58%; background: rgba(255, 255, 255, .3); }
.mock-phone-screen > i:nth-child(3) { width: 74%; }
.mock-phone-screen > i:nth-child(4) { width: 46%; }

.mock-phone-card {
    background: rgba(37, 99, 235, .18);
    border: 1px solid rgba(37, 99, 235, .45);
    border-radius: 6px;
    height: 26px;
    margin: 8px 0;
}

.mock-phone-tabs {
    display: flex;
    justify-content: space-around;
    gap: 5px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding-top: 7px;
    margin-top: 8px;
}

.mock-phone-tabs i {
    width: 12px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .16);
}

.mock-phone-tabs i.on { background: #2563eb; }

/* Variante « conversation » du téléphone : accueil uniquement, pour ne pas
   dupliquer visuellement le mock-phone générique de la page /applications. */
.mock-phone-chat { padding: 10px 8px; display: flex; flex-direction: column; gap: 7px; }

.mock-chat-bubble {
    height: 14px;
    max-width: 78%;
    border-radius: 8px;
    background: rgba(255, 255, 255, .13);
}

.mock-chat-bubble.bot { align-self: flex-start; width: 68%; border-bottom-left-radius: 3px; }
.mock-chat-bubble.user { align-self: flex-end; width: 52%; background: rgba(37, 99, 235, .38); border: 1px solid rgba(37, 99, 235, .55); border-bottom-right-radius: 3px; }
.mock-chat-bubble.short { width: 42%; }

@media (max-width: 520px) {
    .mock-phone { width: 96px; right: 2px; bottom: -26px; }
    .mock-body { min-height: 210px; }
}

@media (prefers-reduced-motion: reduce) {
    .mock-chart i { animation: none; }
}

/* ------------------------------------------------- Section #applications */
.apps-platforms {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 48px;
}

@media (min-width: 820px) {
    .apps-platforms { grid-template-columns: 1fr 1fr; }
}

.apps-platform {
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .14);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color .2s ease, transform .2s ease;
}

.apps-platform:hover {
    border-color: rgba(37, 99, 235, .6);
    transform: translateY(-3px);
}

.apps-platform-head {
    display: flex;
    align-items: center;
    gap: 13px;
}

.apps-platform-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, .2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.apps-platform-icon svg {
    width: 21px;
    height: 21px;
    stroke: #f5f5f5;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.apps-platform h3 {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.25;
}

.apps-platform > p {
    font-size: 14px;
    color: #b4b4bb;
    line-height: 1.7;
}

.apps-platform ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 2px;
}

.apps-platform li {
    font-size: 13px;
    color: #9a9aa2;
    padding-left: 18px;
    position: relative;
    line-height: 1.6;
}

.apps-platform li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: #2563eb;
    font-weight: 700;
}

.apps-stack {
    border: 1px solid rgba(255, 255, 255, .12);
    padding: 24px 26px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-bottom: 40px;
}

.apps-stack-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #8e8e96;
    margin-right: 4px;
}

.apps-stack span.chip {
    font-size: 12px;
    font-weight: 600;
    color: #d0d0d6;
    border: 1px solid rgba(255, 255, 255, .16);
    padding: 5px 12px;
}

/* Étapes du projet */
.apps-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .16);
}

@media (min-width: 700px) {
    .apps-steps { grid-template-columns: repeat(5, 1fr); }
}

.apps-step {
    background: #0f1016;
    padding: 24px 20px;
}

.apps-step-num {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    color: #2563eb;
    margin-bottom: 10px;
}

.apps-step h4 {
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 7px;
}

.apps-step p {
    font-size: 12.5px;
    color: #8e8e96;
    line-height: 1.65;
}

/* --------------------------------------------- Bloc tarifaire applications */
.appsprice {
    border: 1px solid rgba(255, 255, 255, .2);
    background: linear-gradient(160deg, rgba(37, 99, 235, .12), rgba(255, 255, 255, .02));
    padding: 36px 32px;
    margin-bottom: 56px;
}

.appsprice-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px;
}

.appsprice-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #f5f5f5;
    border: 1px solid rgba(37, 99, 235, .8);
    background: rgba(37, 99, 235, .25);
    padding: 4px 11px;
    margin-bottom: 14px;
}

.appsprice h3 {
    font-size: clamp(22px, 3.4vw, 30px);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
    margin-bottom: 10px;
}

.appsprice-lead {
    font-size: 14.5px;
    color: #b4b4bb;
    line-height: 1.7;
    max-width: 540px;
}

.appsprice-from {
    text-align: right;
    flex-shrink: 0;
}

.appsprice-from-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #8e8e96;
}

.appsprice-from-value {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
    margin-top: 4px;
}

.appsprice-from-sub {
    font-size: 12px;
    color: #8e8e96;
    margin-top: 4px;
}

.appsprice-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 28px;
}

@media (min-width: 760px) {
    .appsprice-grid { grid-template-columns: repeat(3, 1fr); }
    .appsprice-from { text-align: right; }
}

.appsprice-item {
    border: 1px solid rgba(255, 255, 255, .13);
    background: rgba(0, 0, 0, .25);
    padding: 20px 18px;
}

.appsprice-item h4 {
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 6px;
}

.appsprice-item .range {
    font-size: 17px;
    font-weight: 800;
    color: #f5f5f5;
    margin-bottom: 8px;
}

.appsprice-item p {
    font-size: 12.5px;
    color: #8e8e96;
    line-height: 1.65;
}

.appsprice-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.appsprice-note {
    font-size: 12px;
    color: #8e8e96;
    margin-top: 16px;
    line-height: 1.6;
}

/* ────────── Accueil : l'offre secondaire, volontairement plus discrète ──── */
.offre-secondaire {
    border-top: 1px solid rgba(255, 255, 255, .12);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .02);
}

.offre-secondaire-grille {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
}

@media (min-width: 900px) {
    .offre-secondaire-grille { grid-template-columns: 1.05fr .95fr; gap: 64px; }
}

/* En deux colonnes, le texte est aligné à gauche : les titres de section
   étant centrés par défaut, il faut les rétablir explicitement. */
@media (min-width: 900px) {
    .offre-secondaire-grille > div:first-child,
    .offre-secondaire .section-tag,
    .offre-secondaire .section-title,
    .offre-secondaire .section-subtitle {
        text-align: left;
        margin-left: 0;
        margin-right: 0;
    }
}

.offre-secondaire .section-title { font-size: clamp(22px, 3.2vw, 32px); }

.offre-secondaire-liste {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 28px;
}

.offre-secondaire-liste li {
    font-size: 14px;
    color: #b4b4bb;
    line-height: 1.6;
    padding-left: 20px;
    position: relative;
}

.offre-secondaire-liste li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #2563eb;
    font-weight: 700;
}

/* Aperçu de conversation, purement illustratif */
.offre-secondaire-visuel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #14151c;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 16px;
    padding: 22px 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

.osv-bulle {
    font-size: 13.5px;
    line-height: 1.55;
    padding: 11px 15px;
    border-radius: 14px;
    max-width: 86%;
}

.osv-bot {
    align-self: flex-start;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #eaeaef;
    border-bottom-left-radius: 5px;
}

.osv-user {
    align-self: flex-end;
    background: rgba(37, 99, 235, .3);
    border: 1px solid rgba(37, 99, 235, .55);
    color: #f5f5f5;
    border-bottom-right-radius: 5px;
}

/* ------------------------------------- Bandeau de bascule vers les chatbots */
.section-switch {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

.section-switch-inner {
    border-top: 1px solid rgba(255, 255, 255, .14);
    padding-top: 44px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}

.section-switch-tag {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #8e8e96;
    margin-bottom: 12px;
}

.section-switch h2 {
    font-size: clamp(24px, 4vw, 38px);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    max-width: 620px;
}

.section-switch p {
    font-size: 14.5px;
    color: #9a9aa2;
    line-height: 1.7;
    max-width: 520px;
    margin-top: 12px;
}

.chatbots-lead {
    padding: 72px 0 8px;
}

/* Le configurateur de chatbot, déplacé du hero vers la section chatbots */
.chatbot-demo-holder {
    max-width: 560px;
    margin: 0 auto;
    padding: 0 24px;
}

.chatbot-demo-holder .hero-demo {
    margin-top: 40px;
}

/* ─────────── Les 3 offres d'accompagnement après la livraison ─────────── */
.offres-app {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    margin-bottom: 56px;
}

@media (min-width: 820px) {
    .offres-app { grid-template-columns: repeat(3, 1fr); }
}

.offre-app {
    background: #0f1016;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
}

.offre-app.est-mise-en-avant { background: #14161f; }

.offre-app-badge {
    align-self: flex-start;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #f5f5f5;
    border: 1px solid rgba(37, 99, 235, .8);
    background: rgba(37, 99, 235, .25);
    padding: 3px 9px;
    margin-bottom: 12px;
}

.offre-app h4 {
    font-size: 19px;
    font-weight: 800;
    margin-bottom: 6px;
}

.offre-app-prix {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.02em;
    margin-bottom: 4px;
}

.offre-app-prix span {
    font-size: 13px;
    font-weight: 500;
    color: #8e8e96;
}

.offre-app-sous {
    font-size: 12.5px;
    color: #8e8e96;
    margin-bottom: 18px;
    line-height: 1.5;
}

.offre-app ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 22px;
    flex: 1;
}

.offre-app li {
    font-size: 13px;
    color: #b4b4bb;
    line-height: 1.55;
    padding-left: 18px;
    position: relative;
}

.offre-app li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #2563eb;
    font-weight: 700;
}

.offre-app li.absent { color: #6f7079; }
.offre-app li.absent::before { content: "—"; color: #4a4a52; }

.offre-app-suivi {
    font-size: 12px;
    color: #8e8e96;
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding-top: 14px;
    line-height: 1.55;
}

.offre-app-suivi strong { color: #f5f5f5; }

/* Renvoi vers l'offre applications depuis la page tarifs chatbot */
.apps-crosslink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    text-decoration: none;
    color: inherit;
    border: 1px solid rgba(37, 99, 235, .55);
    background: linear-gradient(140deg, rgba(37, 99, 235, .16), rgba(255, 255, 255, .02));
    padding: 22px 26px;
    margin-bottom: 32px;
    transition: border-color .2s ease, transform .2s ease;
}

.apps-crosslink:hover {
    border-color: #2563eb;
    transform: translateY(-2px);
}

.apps-crosslink-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #f5f5f5;
    border: 1px solid rgba(37, 99, 235, .8);
    background: rgba(37, 99, 235, .25);
    padding: 3px 9px;
    margin-bottom: 10px;
}

.apps-crosslink strong {
    display: block;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.35;
    color: #f5f5f5;
}

.apps-crosslink-sub {
    display: block;
    font-size: 13px;
    color: #9a9aa2;
    margin-top: 5px;
    line-height: 1.6;
}

.apps-crosslink-arrow {
    font-size: 22px;
    color: #2563eb;
    flex-shrink: 0;
}

/* Titre intermédiaire dans la section tarifs */
.pricing-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 8px 0 26px;
}

.pricing-divider h3 {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #f5f5f5;
    white-space: nowrap;
}

.pricing-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, .14);
}

/* ═════════════ /applications — contenu propre à la page ══════════════════ */

.apps-focus {
    font-size: 15.5px;
    line-height: 1.75;
    color: #b4b4bb;
    max-width: 720px;
    margin: 0 0 34px;
}

.apps-focus strong { color: #f5f5f5; font-weight: 700; }

/* ── D'où vient le prix ── */
.prix-facteurs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    margin-bottom: 34px;
}

.prix-facteur {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 14px;
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
}

.prix-facteur-num {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    color: #60a5fa;
    margin-bottom: 12px;
}

.prix-facteur h3 {
    font-size: 16.5px;
    font-weight: 800;
    letter-spacing: -.01em;
    margin-bottom: 9px;
}

.prix-facteur p {
    font-size: 13.5px;
    line-height: 1.65;
    color: #9a9aa2;
    flex: 1;
}

.prix-facteur-poids {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: 14px;
    font-weight: 700;
    color: #cfe0ff;
}

/* ── L'exemple chiffré ── */
.prix-exemple {
    background: linear-gradient(160deg, rgba(37, 99, 235, .14), rgba(255, 255, 255, .02));
    border: 1px solid rgba(37, 99, 235, .45);
    border-radius: 16px;
    padding: 30px 32px;
}

.prix-exemple-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #60a5fa;
    margin-bottom: 8px;
}

.prix-exemple-tete h3 {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.015em;
    margin-bottom: 22px;
}

.prix-exemple-lignes { list-style: none; margin: 0; padding: 0; }

.prix-exemple-lignes li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    font-size: 14px;
    color: #b4b4bb;
}

.prix-exemple-lignes b { color: #f5f5f5; font-weight: 700; white-space: nowrap; }

.prix-exemple-total {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    margin-top: 22px;
}

.prix-exemple-total div {
    background: rgba(0, 0, 0, .28);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    padding: 15px 18px;
}

.prix-exemple-total span {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .11em;
    color: #7c7c85;
    margin-bottom: 6px;
}

.prix-exemple-total b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }

.prix-exemple-note {
    font-size: 13px;
    line-height: 1.65;
    color: #9a9aa2;
    margin-top: 20px;
    max-width: 620px;
}

/* ── Le comparatif ── */
/* Un tableau plutôt que des cartes parallèles : la colonne CDM se lit ligne
   par ligne face aux trois autres, et gagne visiblement plus qu'en prose.
   Les autres options restent décrites honnêtement (« bon choix si ») — un
   comparatif malhonnête se retourne contre celui qui l'écrit. */
.compar-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .14);
}

.compar-table {
    border-collapse: collapse;
    width: 100%;
    min-width: 780px;
}

.compar-table th, .compar-table td {
    padding: 16px 20px;
    text-align: left;
    vertical-align: top;
    font-size: 13.5px;
    line-height: 1.65;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    min-width: 190px;
}

.compar-table thead th {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.01em;
    padding-top: 20px;
    padding-bottom: 14px;
    background: rgba(255, 255, 255, .03);
}

.compar-table td { color: #9a9aa2; }

.compar-table td:first-child, .compar-table th:first-child {
    font-weight: 700;
    color: #f5f5f5;
    position: sticky;
    left: 0;
    background: #0f1016;
    min-width: 180px;
}

.compar-table tbody tr:last-child td { border-bottom: none; }

.compar-table .prix { font-weight: 700; color: #cfe0ff; }

/* La colonne « moi » : fond dégradé bleu, texte plein, en-tête soulignée. */
.compar-table .est-cdm {
    background: linear-gradient(160deg, rgba(37, 99, 235, .16), rgba(255, 255, 255, .02));
    color: #f5f5f5;
    font-weight: 600;
}

.compar-table thead th.est-cdm {
    color: #fff;
    border-bottom: 2px solid #2563eb;
}

.compar-table .compar-quand td { color: #b4b4bb; }
.compar-table .compar-quand td.est-cdm { color: #cfe0ff; }
.compar-table .compar-quand strong { color: #f5f5f5; }

/* ── Les garanties ── */
.garanties {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}

.garantie {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 14px;
    padding: 26px 24px;
    transition: border-color .15s ease;
}

.garantie:hover { border-color: rgba(37, 99, 235, .5); }

.garantie h3 {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -.01em;
    margin-bottom: 10px;
}

.garantie p { font-size: 13.5px; line-height: 1.7; color: #9a9aa2; }

@media (max-width: 640px) {
    .prix-exemple { padding: 24px 20px; }
    .prix-exemple-lignes li { font-size: 13px; }
}

/* ── Les trois atouts, avant la comparaison ────────────────────────────── */
.atouts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 14px;
    margin-bottom: 34px;
}

.atout {
    background: linear-gradient(160deg, rgba(37, 99, 235, .13), rgba(255, 255, 255, .02));
    border: 1px solid rgba(37, 99, 235, .42);
    border-radius: 14px;
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
}

.atout-num {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .13em;
    color: #60a5fa;
    margin-bottom: 10px;
}

.atout h3 {
    font-size: 17px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -.01em;
    margin-bottom: 10px;
}

.atout p {
    font-size: 13.5px;
    line-height: 1.7;
    color: #b4b4bb;
    flex: 1;
}

.atout a {
    display: inline-block;
    margin-top: 16px;
    font-size: 13.5px;
    font-weight: 600;
    color: #60a5fa;
    text-decoration: none;
}

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

/* Le « pour qui » des trois formats, distingué de la description. */
.appsprice-item p em { font-style: normal; color: #cfe0ff; }

/* Deux formats plutôt que trois : deux colonnes larges se lisent mieux que
   trois étroites avec une case vide. */
@media (min-width: 860px) {
    .appsprice-grid.est-double { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------- Page /demos — cadre iPhone */
.demos-galerie {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 56px;
    margin: 48px 0 16px;
}

.demo-piece {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: 380px;
}

.iphone-frame {
    /* Toute la géométrie découle de cette seule variable — l'écran épouse
       le contenu mis à l'échelle au pixel près (voir .iphone-frame-ecran),
       donc changer l'échelle ici suffit à redimensionner tout le cadre
       proprement, y compris dans les media queries plus bas. */
    --pf-echelle: 0.7939;
    width: calc(393px * var(--pf-echelle) + 28px);
    background: #0a0a0a;
    border-radius: 60px;
    padding: 14px;
    position: relative;
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, .1),
        0 40px 80px -20px rgba(0, 0, 0, .7),
        0 10px 30px rgba(0, 0, 0, .5);
}

.iphone-frame-ecran {
    /* Taille exacte du contenu mis à l'échelle, pas un pourcentage du cadre :
       un cadre calé sur aspect-ratio 393/852 puis amputé du padding ne
       retombe pas pile sur ce ratio, ce qui laissait un bandeau noir en haut
       ou en bas selon l'ancrage. Ici l'écran épouse le contenu au pixel
       près, rempli bord à bord comme un vrai téléphone. */
    width: calc(393px * var(--pf-echelle));
    height: calc(852px * var(--pf-echelle));
    border-radius: 46px;
    overflow: hidden;
    position: relative;
    background: #000;
}

.iphone-frame-scaler {
    width: 393px;
    height: 852px;
    transform: scale(var(--pf-echelle));
    transform-origin: top left;
}

.iphone-frame-scaler iframe {
    width: 393px;
    height: 852px;
    border: 0;
    display: block;
}

/* Sur mobile, le cadre pleine taille (340px) laisse à peine de marge sur un
   écran ~390px et son bas (avec la barre d'onglets de l'appli) tombe dans la
   zone couverte par la barre de navigation fixe du site. On le réduit pour
   qu'il tienne clairement au-dessus, avec de la marge des deux côtés. */
@media (max-width: 560px) {
    .iphone-frame { --pf-echelle: 0.62; }
}

.iphone-frame-ecran img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.iphone-frame-ile {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 34%;
    height: 22px;
    background: #000;
    border-radius: 99px;
    z-index: 2;
}

.iphone-frame-bouton {
    position: absolute;
    right: -2px;
    width: 3px;
    background: rgba(255, 255, 255, .12);
    border-radius: 2px;
}
.iphone-frame-bouton.volume-haut { top: 108px; height: 34px; right: auto; left: -2px; }
.iphone-frame-bouton.volume-bas { top: 152px; height: 34px; right: auto; left: -2px; }
.iphone-frame-bouton.alim { top: 130px; height: 56px; }

.demo-legende { text-align: center; }
.demo-legende-tag { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: #8e8e96; margin-bottom: 6px; }
.demo-legende h3 { font-size: 17px; font-weight: 800; margin-bottom: 6px; }
.demo-legende p { font-size: 13px; color: #9a9a9a; line-height: 1.6; }