/*
 * Hallmark · macrostructure: Narrative Workflow · tone: instrument, factuel · anchor hue: bleu vif 255
 * theme: système verrouillé « L'instrument de verre » (DESIGN.md) · nav: îlot commun · footer: pied commun
 *
 * Présentation commerciale par téléphone : /presentation (public/presentation.php, 03/11/2026).
 * Neuf points numérotés à faire défiler, sommaire fixé (rail sur ordinateur, barre de pastilles
 * sous l'îlot sur téléphone). Refaite le 04/11 : à chaque point un VRAI écran de l'outil (HTML
 * recopié, partiels includes/vues/presentation/), avec repères en lettres et légende. Aucune nouvelle couleur : jetons de
 * base.css seulement, bleu = favorable, rouge = arrêt, toujours doublés d'un mot. Préfixe prs-.
 */

.prs {
    width: min(76rem, 100% - 3rem);
    margin: 0 auto;
    padding-top: 112px;
}
.prs-heros h1, .prs-texte h2 { text-wrap: balance; color: var(--text-1); font-style: normal; }
.prs p { text-wrap: pretty; }
.prs-leger { font-weight: 400; color: var(--text-2); }
.prs-mono {
    margin: 0;
    font-family: var(--font);
    font-size: .8125rem;
    font-weight: 500;
    color: var(--text-3);
}

/* --- En-tête : titre, chapeau, plan des huit points */
.prs-heros { padding: 40px 0 72px; }
.prs-heros h1 {
    max-width: 52rem;
    margin: 22px 0 0;
    font-size: clamp(2.5rem, 5.4vw, 5rem);
    line-height: .98;
    font-weight: 500;
    letter-spacing: -0.03em;
    overflow-wrap: anywhere;
}
.prs-heros-grille {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
    margin-top: 26px;
}
.prs-sans {
    padding: 20px 22px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--verre);
}
.prs-sans ul { margin: 12px 0 0; padding: 0 0 0 18px; display: grid; gap: 6px; }
.prs-sans li { font-size: .9375rem; line-height: 1.45; color: var(--text-2); }
.prs-sans li::marker { color: var(--warning); }
.prs-avec { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--border); font-size: 1.0625rem; font-weight: 500; color: var(--accent-strong); }
.prs-chapeau {
    max-width: 44rem;
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--text-2);
}
/* Accroche du fondateur (04/11/2026) : le récit en blanc, signé, puis ce que l'outil fait au garage. */
.prs-chapeau p { margin: 0 0 16px; }
.prs-chapeau p:last-child { margin-bottom: 0; }
.prs-chapeau strong { color: var(--text-1); font-weight: 500; }
.prs-recit { color: var(--text-1); }
.prs-auteur {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin-bottom: 28px !important;
    font-size: .9375rem;
}
.prs-auteur span { color: var(--text-3); }
.prs-releve { font-size: .9375rem; color: var(--text-3); }
.prs-plan ol {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
}
.prs-plan a {
    display: flex;
    align-items: baseline;
    gap: 12px;
    min-height: 64px;
    padding: 14px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--verre);
    color: var(--text-1);
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    transition: border-color 300ms var(--ressort), background-color 300ms var(--ressort);
}
.prs-plan-court { display: none; }
.prs-plan-num { flex: none; font-size: .8125rem; font-weight: 500; color: var(--accent-strong); }
@media (hover: hover) {
    .prs-plan a:hover { border-color: var(--border-strong); background: rgba(255, 255, 255, .07); }
}
.prs-plan a:focus-visible, .prs-rail a:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }

/* --- Corps : rail fixé à gauche (ordinateur), points à droite */
.prs-corps {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 44px;
    align-items: start;
}
.prs-rail {
    position: sticky;
    top: calc(var(--haut-collant) + 24px);
    /* Premier point du rail à la hauteur du « 01 » (padding du point 56 px, moins le padding du rail). */
    margin-top: 48px;
    padding-top: 8px;
}
.prs-rail ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.prs-rail a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 6px 10px 6px 6px;
    border-radius: var(--radius-pill);
    color: var(--text-3);
    font-size: .875rem;
    line-height: 1.25;
    text-decoration: none;
    transition: color 300ms var(--ressort), background-color 300ms var(--ressort);
}
.prs-rail-num {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    font-size: .8125rem;
    font-weight: 500;
    color: var(--text-2);
    transition: background-color 300ms var(--ressort), border-color 300ms var(--ressort), color 300ms var(--ressort);
}
.prs-rail-titre { white-space: nowrap; }
.prs-rail-court { display: none; }
@media (hover: hover) {
    .prs-rail a:hover { color: var(--text-1); }
}
.prs-rail a[aria-current="true"] { color: var(--text-1); background: rgba(255, 255, 255, .06); }
.prs-rail a[aria-current="true"] .prs-rail-num { background: var(--accent); border-color: var(--accent); color: #fff; }

/* --- Un point : en tête, le texte et la légende des repères ; dessous, le vrai écran */
.prs-points { min-width: 0; }
.prs-point {
    position: relative;
    padding: 56px 0 88px;
    scroll-margin-top: calc(var(--haut-collant) + 8px);
}
.prs-tete {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}
/* Filet numéroté entre les points ; balayé de gauche à droite quand le point entre à l'écran
   (classe posée par presentation.js, jamais sous prefers-reduced-motion). */
.prs-point::before, .prs-bande::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border-strong);
    transform-origin: left center;
}
.prs-anime .prs-point::before { transform: scaleX(0); transition: transform 240ms var(--ressort); }
.prs-anime .prs-point.est-vu::before { transform: scaleX(1); }

.prs-num {
    margin: 0;
    font-size: clamp(3.5rem, 7vw, 6rem);
    line-height: .9;
    font-weight: 400;
    letter-spacing: -0.03em;
    color: var(--text-3);
}
.prs-texte h2 {
    margin: 18px 0 0;
    font-size: clamp(1.875rem, 3.4vw, 2.75rem);
    line-height: 1.05;
    font-weight: 500;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}
.prs-texte > p:not(.prs-num) {
    max-width: 38rem;
    margin: 18px 0 0;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--text-2);
}
.prs-texte a, .prs-signature a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }
.prs-cle {
    padding: 16px 18px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--accent-border);
    background: var(--accent-dim);
}
.prs-cle strong { color: var(--text-1); font-weight: 500; }

/* Légende : « Sur l'écran », un repère numéroté par élément montré */
.prs-lecture { padding-top: 10px; }
.prs-reperes { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.prs-reperes li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 1rem; line-height: 1.5; color: var(--text-2); }
.prs-repere {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    /* Repères en lettres, blancs à coins arrondis (04/11/2026, Charles : « c'est quoi ces bulles
       numérotées ? ») : bleus et chiffrés, ils se confondaient avec les numéros des points. */
    background: var(--text-1);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .14);
    color: #050608;
    font-family: var(--font-sans, inherit);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    text-transform: none;
    font-style: normal;
}
.prs-reperes .prs-repere { margin-top: 1px; }
/* Dans l'écran : posé juste APRÈS le libellé qu'il désigne, comme un appel de note (04/11/2026).
   Avant le libellé, il décalait de 30 px les lignes qui en portent un : bords gauches en escalier. */
.prs-ecran-cadre .prs-repere { width: 22px; height: 22px; margin: 0 0 0 8px; vertical-align: -5px; font-size: .75rem; }
/* Épinglé dans le coin de l'élément désigné (barre de décision, cartes) : le libellé garde sa place. */
.prs-ecran-cadre .prs-cible { position: relative; }
.prs-ecran-cadre .prs-pin { position: absolute; z-index: 3; top: -9px; left: -9px; margin: 0; }
.prs-ecran-cadre .prs-pin-dedans { top: 10px; left: auto; right: 10px; }
/* Barre de décision : ni collante ni rognée dans le cadre ; libellés sur deux lignes au besoin,
   la place de la pastille réservée (sur une ligne, la pastille cachait « Prix final en France »). */
.prs-ecran-cadre .decision-bar { position: static; margin-bottom: 0; }
.prs-ecran-cadre .decision-bar .db-label { white-space: normal; overflow: visible; padding-right: 26px; }
/* Point 4 : prix final (50 %) et médiane (55 %) trop proches, leurs étiquettes se chevauchaient.
   Écran figé : « Vous » part à gauche de son trait, « Médiane » à droite du sien. */
.prs-ecran-cadre .range-marker:not(.median) .range-marker-label { left: -4px; transform: translateX(-100%); }
.prs-ecran-cadre .range-marker.median .range-marker-label { left: 6px; transform: none; }
.prs-evite {
    margin: 22px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--text-1);
}
.prs-evite .prs-mono { display: block; margin-bottom: 6px; color: var(--warning); }
/* Point 2 : ce qu'un assistant généraliste n'a pas (demande de Charles du 04/11). */
.prs-chatgpt {
    margin: 22px 0 0;
    padding: 16px 18px;
    border-radius: var(--radius);
    background: rgba(0, 87, 217, .08);
    border: 1px solid rgba(124, 192, 240, .22);
}
.prs-chatgpt .prs-mono { display: block; margin-bottom: 6px; color: var(--accent-strong); }
.prs-chatgpt p { margin: 0 0 10px; font-size: .9375rem; line-height: 1.5; color: var(--text-1); }
.prs-chatgpt ul { margin: 0; padding: 0 0 0 18px; display: grid; gap: 6px; }
.prs-chatgpt li { font-size: .9375rem; line-height: 1.45; color: var(--text-2); }
.prs-chatgpt li::marker { color: var(--accent-strong); }

/* --- Les écrans : HTML réel de l'outil, inerte, dans un cadre sobre (aucune fausse fenêtre).
   Tous les cadres prennent la largeur de la colonne (bords alignés d'un point à l'autre) ; un écran
   plus étroit (bloc de fiche, message) est centré dedans par le padding : --prs-contenu fixe sa
   largeur, le pourcentage du padding se rapporte à la largeur de la figure. */
.prs-ecran { --prs-pad: 24px; --prs-contenu: 100%; margin: 36px 0 0; }
.prs-ecran + .prs-ecran { margin-top: 28px; }
.prs-ecran-fiche, .prs-ecran-collage { --prs-contenu: 49rem; }
.prs-ecran-message { --prs-contenu: 33rem; }
.prs-ecran-cadre {
    position: relative;
    padding: var(--prs-pad) max(var(--prs-pad), calc((100% - var(--prs-contenu)) / 2));
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, .015);
    pointer-events: none;
    user-select: none;
}
.prs-ecran-cadre #ingest-search .ingest-row textarea { field-sizing: content; flex: 1 1 0%; width: 100%; min-width: 0; resize: none; overflow: hidden; min-height: 0; }
/* La colonne de la grille prenait la largeur minimale du champ d'adresse d'image : 4 px de trop à 320 px. */
.prs-ecran-cadre .collage-images { grid-template-columns: minmax(0, 1fr); }
.prs-ecran figcaption {
    margin: 12px 0 0;
    font-family: var(--font);
    font-size: .8125rem;
    color: var(--text-3);
}
.prs-ecran-cadre > :first-child { margin-top: 0; }
.prs-ecran-cadre > :last-child { margin-bottom: 0; }
.prs-ecran-cadre .listing-header { margin-bottom: 20px; }
.prs-ecran-cadre .search-resume { margin-bottom: 18px; }
.prs-ecran-cadre .results-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 236px), 1fr)); }
.prs-ecran-cadre .modal-content { max-width: none; max-height: none; overflow: visible; animation: none; }
.prs-ecran-cadre .modal-content textarea { resize: none; overflow: hidden; field-sizing: content; }
.prs-ecran-cadre .modal-content .section-note { text-align: left; }
.prs-ecran-cadre .alert-card { margin-bottom: 20px; }
/* Point 9 : dans les favoris, la note est hors du corps de la carte ; le prix poussé en bas
   (margin-top: auto, utile dans la recherche) tombait à trois hauteurs. Calé sous les caractéristiques. */
.prs-ecran-cadre #favorites-grid .card-prices { margin-top: 0; }
.prs-ecran-cadre .alerte-pepites { margin: 0; }

/* Bande « Comment l'outil calcule » (sans numéro, hors sommaire) */
.prs-bande { position: relative; padding: 48px 0 56px; }
.prs-bande ul {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.prs-bande li { font-size: .9375rem; line-height: 1.55; color: var(--text-2); }
.prs-bande strong { display: block; margin-bottom: 4px; font-size: 1rem; font-weight: 500; color: var(--text-1); }

/* --- L'offre */
.prs-point-offre {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
    gap: 48px;
    align-items: start;
    padding-bottom: 72px;
}
.prs-inclus { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; max-width: 38rem; }
.prs-inclus li { position: relative; padding-left: 22px; font-size: 1rem; line-height: 1.55; color: var(--text-2); }
.prs-inclus li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-strong);
}
.prs-visuel { min-width: 0; padding-top: 10px; }
.prs-plaque {
    padding: 22px 22px 20px;
    border-radius: var(--radius);
    background: var(--bg-1);
    box-shadow: var(--coeur-lueur), var(--coque);
}
/* margin 7 px : l'anneau du double cadre (7 px hors de la plaque) s'arrête au bord de la colonne. */
.prs-offre { margin: 7px; border-radius: var(--radius-lg); padding: 26px; }
.prs-prix { margin: 10px 0 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.prs-prix strong { font-size: clamp(2.5rem, 4vw, 3.25rem); line-height: .9; font-weight: 500; letter-spacing: -0.02em; color: var(--text-1); }
.prs-prix span { font-size: 1rem; color: var(--text-2); }
.prs-prix-sub { margin: 10px 0 0; font-size: .875rem; color: var(--text-3); }
.prs-appel { margin-top: 24px; }
.prs-appel .btn-primary { white-space: nowrap; }
.prs-appel-note { margin: 12px 0 0; font-size: .875rem; color: var(--text-3); }

.prs-signature {
    margin: 0 0 72px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
    font-size: .875rem;
    line-height: 1.6;
    color: var(--text-3);
}

/* --- Tablette : plus de rail ; la barre de pastilles prend sa place sous l'îlot */
@media (max-width: 1099px) {
    .prs-plan ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .prs-corps { display: block; }
    .prs-rail {
        position: sticky;
        top: var(--haut-collant);
        z-index: 20;
        margin: 0 -8px 8px;
        padding: 8px;
        border-radius: var(--radius-pill);
        background: var(--bg-2);
        border: 1px solid var(--border);
    }
    .prs-rail ol {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }
    .prs-rail ol::-webkit-scrollbar { display: none; }
    .prs-rail li { flex: none; }
    .prs-rail a { gap: 8px; padding: 4px 12px 4px 4px; white-space: nowrap; }
    .prs-rail-titre { display: none; }
    .prs-rail-court { display: inline; }
    .prs-point { scroll-margin-top: calc(var(--haut-collant) + 72px); }
    .prs-tete { gap: 36px; }
    .prs-point-offre { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: 36px; }
}
@media (max-width: 899px) {
    .prs-heros-grille { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .prs-tete { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .prs-lecture { padding-top: 0; }
    .prs-bande ul { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* --- Téléphone : une colonne */
@media (max-width: 767px) {
    .prs { width: min(76rem, 100% - 32px); padding-top: 92px; }
    .prs-heros { padding: 24px 0 40px; }
    .prs-chapeau { font-size: 1.0625rem; }
    .prs-plan ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 28px; }
    .prs-plan a { min-height: 52px; padding: 12px 14px; font-size: .9375rem; align-items: center; }
    .prs-plan-titre { display: none; }
    .prs-plan-court { display: inline; white-space: nowrap; }
    .prs-point { padding: 40px 0 56px; }
    .prs-point-offre { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .prs-num { font-size: 3rem; }
    .prs-texte > p:not(.prs-num) { font-size: 1rem; }
    .prs-reperes li { font-size: .9375rem; }
    /* Sélecteur du régime : l'option la plus longue (« Régime de la marge (déduit) ») élargissait la page à 320 px. */
    .prs-ecran-cadre .pro-regime { flex-wrap: wrap; max-width: 100%; }
    .prs-ecran-cadre .pro-regime select { min-width: 0; max-width: 100%; }
    /* Point 1 : la carte sans repère sort au téléphone (trois cartes empilées, 1 300 px à faire défiler). */
    .prs-ecran-cadre .prs-hors-tel { display: none; }
    .prs-sans { padding: 18px 16px; }
    .prs-ecran { margin-top: 24px; }
    .prs-ecran { --prs-pad: 10px; }
    .prs-ecran-cadre { border-radius: var(--radius); }
    .prs-plaque { padding: 18px 16px 16px; }
    .prs-offre { padding: 20px 16px 18px; }
    .prs-appel .btn-primary { width: 100%; justify-content: space-between; }
}
@media (max-width: 359px) {
    .prs-plan ol { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .prs-plan a, .prs-rail a, .prs-rail-num { transition: none; }
    .prs-anime .prs-point::before { transform: none; transition: none; }
}
/* Les écrans recopiés ne rejouent aucune animation du site. */
.prs-ecran-cadre *, .prs-ecran-cadre *::before, .prs-ecran-cadre *::after { animation: none !important; }

/* Point 5 (04/11/2026) : carte « Comparer avec une annonce concurrente ». landing.css, qui
   habille la boîte de collage, n'est pas chargé ici : champ et bouton posés à la main. */
.prs-ecran-cadre .conc-box .ingest-row { display: flex; gap: 10px; align-items: stretch; }
.prs-ecran-cadre .conc-box > label { display: block; margin-bottom: 8px; }
.prs-ecran-cadre .conc-box textarea { flex: 1 1 0%; min-width: 0; min-height: 52px; padding: 12px 14px; resize: none; background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-1); font-family: var(--font); font-size: .875rem; line-height: 1.45; }
.prs-ecran-cadre .conc-box .btn-primary { flex: 0 0 auto; }
@media (max-width: 560px) { .prs-ecran-cadre .conc-box .ingest-row { flex-direction: column; } }
/* Point 6 : la feuille client, capture d'écran (dossier.css ne peut pas être chargé ici). */
.prs-ecran-feuille img { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; border-radius: 14px; box-shadow: 0 1.5rem 3rem -1.5rem rgba(0, 0, 0, .6); }