/*
 * Renov'2CV — Lots intelligents (planches techniques), affichage public.
 *
 * Note de cascade : le theme habille tous les <button> du site depuis une
 * feuille en ligne dont la liste de selecteurs comporte des entrees plus
 * specifiques que la simple balise. Les composants a base de bouton sont donc
 * prefixes par leur racine (.rn-pt-liste ou .rn-pt-planche) : deux classes
 * suffisent a reprendre la main, sans recourir a !important.
 * -----------------------------------------------------------------------------
 * Meme vocabulaire graphique que les megamenus valides : accent orange,
 * encre bleu nuit, cartes a angles doux, densite tenue.
 */

.rn-pt-liste,
.rn-pt-planche {
    --pt-accent: var(--main-color, #fd604f);
    --pt-ink: var(--main-text-color, #1a1d3e);
    --pt-ink-soft: #5b6079;
    --pt-rule: #e7e9f0;
    --pt-surface: #fff;
    --pt-soft: #f7f8fb;
    --pt-hover: #fff3f0;
    --pt-radius: 10px;

    color: var(--pt-ink);
    font-size: 14px;
    line-height: 1.45;
}

.rn-pt-vide {
    padding: 24px;
    background: var(--pt-soft);
    border-radius: var(--pt-radius);
    color: var(--pt-ink-soft);
    text-align: center;
    margin: 0;
}

/* -------------------------------------------------------------------------
 * Liste
 * ---------------------------------------------------------------------- */

.rn-pt-barre {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.rn-pt-recherche {
    position: relative;
    flex: 1 1 320px;
    max-width: 520px;
}

.rn-pt-liste .rn-pt-champ {
    width: 100%;
    height: 44px;
    padding: 0 38px 0 40px;
    border: 1px solid var(--pt-rule);
    border-radius: 999px;
    background: var(--pt-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6079' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 13px center / 17px;
    font-size: 14px;
    color: var(--pt-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.rn-pt-liste .rn-pt-champ:focus {
    outline: none;
    border-color: var(--pt-accent);
    box-shadow: 0 0 0 3px rgba(253, 96, 79, .14);
}

.rn-pt-liste .rn-pt-effacer {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--pt-ink-soft);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: none;
}

.rn-pt-liste .rn-pt-recherche.is-rempli .rn-pt-effacer { display: block; }
.rn-pt-liste .rn-pt-effacer:hover { background: var(--pt-soft); color: var(--pt-ink); }

.rn-pt-compte {
    margin: 0;
    color: var(--pt-ink-soft);
    font-size: 13px;
    white-space: nowrap;
}

.rn-pt-familles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 18px;
}

/* Les familles sont des boutons sur la liste complete, des liens sur une page
   de famille : meme habillage dans les deux cas. */
.rn-pt-liste a.rn-pt-famille { text-decoration: none; display: inline-block; }

.rn-pt-liste .rn-pt-famille {
    border: 1px solid var(--pt-rule);
    background: var(--pt-surface);
    color: var(--pt-ink);
    border-radius: 999px;
    padding: 6px 13px;
    font-size: 12.5px;
    line-height: 1.3;
    cursor: pointer;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}

.rn-pt-liste .rn-pt-famille:hover { background: var(--pt-hover); border-color: #f6c5bb; }

.rn-pt-liste .rn-pt-famille.is-actif {
    background: var(--pt-accent);
    border-color: var(--pt-accent);
    color: #fff;
}

.rn-pt-liste .rn-pt-famille .rn-pt-n {
    opacity: .6;
    margin-left: 4px;
    font-variant-numeric: tabular-nums;
}

.rn-pt-liste .rn-pt-famille.is-actif .rn-pt-n { opacity: .85; }

.rn-pt-grille {
    display: grid;
    grid-template-columns: repeat(var(--rn-pt-cols, 4), minmax(0, 1fr));
    gap: 14px;
}

.rn-pt-carte {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--pt-rule);
    border-radius: var(--pt-radius);
    overflow: hidden;
    background: var(--pt-surface);
    text-decoration: none;
    color: inherit;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.rn-pt-carte:hover,
.rn-pt-carte:focus-visible {
    border-color: var(--pt-accent);
    box-shadow: 0 10px 24px -14px rgba(26, 29, 62, .35);
    transform: translateY(-2px);
}

.rn-pt-carte:focus-visible { outline: 2px solid var(--pt-accent); outline-offset: 2px; }

.rn-pt-vignette {
    display: block;
    aspect-ratio: 4 / 3;
    background: var(--pt-soft);
    overflow: hidden;
}

.rn-pt-vignette img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    mix-blend-mode: multiply;
}

.rn-pt-sans-image {
    display: block;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(45deg, #eef0f5 0 8px, #f6f7fa 8px 16px);
}

.rn-pt-carte-corps {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rn-pt-titre {
    font-weight: 600;
    font-size: 13.5px;
    line-height: 1.3;
    color: var(--pt-ink);
}

.rn-pt-carte:hover .rn-pt-titre { color: var(--pt-accent); }

.rn-pt-famille-nom,
.rn-pt-meta {
    font-size: 11.5px;
    color: var(--pt-ink-soft);
    line-height: 1.35;
}

.rn-pt-aucun {
    text-align: center;
    padding: 40px 20px;
    color: var(--pt-ink-soft);
}

.rn-pt-aucun span { font-size: 13px; opacity: .8; }

/* -------------------------------------------------------------------------
 * Planche
 * ---------------------------------------------------------------------- */

.rn-pt-fil {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    margin-bottom: 12px;
}

.rn-pt-retour {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--pt-rule);
    border-radius: 999px;
    text-decoration: none;
    color: var(--pt-ink);
    background: var(--pt-surface);
    transition: background-color .14s ease, border-color .14s ease;
}

.rn-pt-retour:hover { background: var(--pt-hover); border-color: var(--pt-accent); color: var(--pt-accent); }
.rn-pt-fil-sep { color: var(--pt-ink-soft); }
.rn-pt-fil-famille { color: var(--pt-ink-soft); text-decoration: none; }
.rn-pt-fil-famille:hover { color: var(--pt-accent); }

.rn-pt-corps {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
    gap: 18px;
    align-items: start;
}

/* --- dessin --- */

.rn-pt-visuel { position: sticky; top: 96px; }

.rn-pt-zoom {
    position: relative;
    margin-inline: auto;
    border: 1px solid var(--pt-rule);
    border-radius: var(--pt-radius);
    background: var(--pt-surface);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    touch-action: none;
    cursor: grab;
}

.rn-pt-zoom.is-drag { cursor: grabbing; }

.rn-pt-scene {
    position: absolute;
    inset: 0;
    transform-origin: 0 0;
    will-change: transform;
}

.rn-pt-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

/* Le theme impose aux boutons une hauteur de 50 px : on la neutralise par des
   bornes hautes et basses, sur un selecteur assez specifique pour passer. */
.rn-pt-planche .rn-pt-zoom .rn-pt-point {
    position: absolute;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    width: auto;
    height: 24px;
    min-height: 24px;
    max-height: 24px;
    padding: 0 6px;
    white-space: nowrap;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--pt-accent);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(26, 29, 62, .35);
    transition: background-color .14s ease, box-shadow .14s ease;
}

.rn-pt-planche .rn-pt-zoom .rn-pt-point:hover,
.rn-pt-planche .rn-pt-zoom .rn-pt-point.is-actif {
    background: var(--pt-ink);
    box-shadow: 0 0 0 4px rgba(253, 96, 79, .3);
}

.rn-pt-planche .rn-pt-zoom .rn-pt-point:focus-visible { outline: 2px solid var(--pt-ink); outline-offset: 2px; }

.rn-pt-outils {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: flex;
    gap: 4px;
    background: rgba(255, 255, 255, .94);
    border: 1px solid var(--pt-rule);
    border-radius: 999px;
    padding: 3px;
    backdrop-filter: blur(4px);
}

.rn-pt-planche .rn-pt-outils button {
    width: 30px;
    height: 30px;
    min-height: 30px;
    max-height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--pt-ink);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .14s ease, color .14s ease;
}

.rn-pt-planche .rn-pt-outils button:hover { background: var(--pt-hover); color: var(--pt-accent); }

.rn-pt-aide {
    position: absolute;
    left: 10px;
    bottom: 14px;
    margin: 0;
    font-size: 11.5px;
    color: var(--pt-ink-soft);
    background: rgba(255, 255, 255, .9);
    padding: 3px 9px;
    border-radius: 999px;
    pointer-events: none;
    transition: opacity .2s ease;
}

.rn-pt-zoom.is-drag .rn-pt-aide,
.rn-pt-zoom.is-zoom .rn-pt-aide { opacity: 0; }

/* --- panneau des reperes --- */

.rn-pt-panneau {
    border: 1px solid var(--pt-rule);
    border-radius: var(--pt-radius);
    background: var(--pt-surface);
    overflow: hidden;
}

.rn-pt-panneau-tete {
    padding: 12px 14px;
    border-bottom: 1px solid var(--pt-rule);
    background: var(--pt-soft);
}

.rn-pt-h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--pt-ink);
}

.rn-pt-resume {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--pt-ink-soft);
}

.rn-pt-sep { opacity: .5; }

.rn-pt-reperes {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: min(calc(100vh - 240px), 720px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #d8dae6 transparent;
}

.rn-pt-repere {
    border-bottom: 1px solid var(--pt-rule);
    padding: 8px 12px 10px;
    scroll-margin-top: 8px;
    transition: background-color .18s ease;
}

.rn-pt-repere:last-child { border-bottom: 0; }
.rn-pt-repere.is-actif { background: var(--pt-hover); }

.rn-pt-repere-tete {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.rn-pt-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--pt-ink);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
    flex: 0 0 auto;
}

.rn-pt-repere.is-actif .rn-pt-badge { background: var(--pt-accent); }

.rn-pt-repere-txt {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pt-ink);
}

.rn-pt-non-commercialise {
    margin: 0;
    font-size: 12.5px;
    color: var(--pt-ink-soft);
    font-style: italic;
}

/* --- produits --- */

.rn-pt-produits { display: flex; flex-direction: column; gap: 6px; }

.rn-pt-produit {
    display: flex;
    gap: 9px;
    padding: 7px;
    border: 1px solid var(--pt-rule);
    border-radius: 8px;
    background: var(--pt-surface);
}

.rn-pt-produit.is-rupture { background: #fbfbfd; }
.rn-pt-produit.is-retire { background: #fbfbfd; border-style: dashed; }

.rn-pt-produit-vignette {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--pt-soft);
}

.rn-pt-produit-vignette img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.rn-pt-produit-corps {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rn-pt-produit-nom {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--pt-ink);
    text-decoration: none;
}

.rn-pt-produit-nom:hover { color: var(--pt-accent); }

.rn-pt-produit-note {
    margin: 0;
    font-size: 11.5px;
    color: var(--pt-ink-soft);
}

.rn-pt-produit-ligne {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 11.5px;
}

.rn-pt-ref {
    color: var(--pt-ink-soft);
    font-variant-numeric: tabular-nums;
}

.rn-pt-dispo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    border-radius: 999px;
    font-weight: 600;
}

.rn-pt-dispo.is-ok { background: #e8f6ee; color: #1c7a45; }
.rn-pt-dispo.is-ko { background: #fdeceb; color: #b23a2f; }

.rn-pt-produit-pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.rn-pt-prix {
    font-size: 13px;
    font-weight: 700;
    color: var(--pt-ink);
}

.rn-pt-prix del { font-weight: 400; opacity: .55; font-size: 11.5px; margin-right: 4px; }
.rn-pt-prix ins { text-decoration: none; color: var(--pt-accent); }

.rn-pt-achat { display: inline-flex; align-items: center; gap: 5px; }

.rn-pt-planche .rn-pt-qte {
    width: 52px;
    height: 30px;
    padding: 0 4px 0 7px;
    border: 1px solid var(--pt-rule);
    border-radius: 6px;
    font-size: 12.5px;
    text-align: center;
    color: var(--pt-ink);
}

.rn-pt-planche .rn-pt-qte:focus { outline: none; border-color: var(--pt-accent); }

.rn-pt-planche .rn-pt-btn {
    border: 0;
    height: auto;
    min-height: 0;
    border-radius: 6px;
    background: var(--pt-accent);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    padding: 8px 13px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: background-color .14s ease, opacity .14s ease;
}

.rn-pt-planche .rn-pt-btn:hover { background: #e8503f; color: #fff; }
.rn-pt-planche .rn-pt-btn:focus-visible { outline: 2px solid var(--pt-ink); outline-offset: 2px; }
.rn-pt-planche .rn-pt-btn[disabled] { opacity: .6; cursor: default; }

.rn-pt-planche .rn-pt-btn.is-ok { background: #1c7a45; }

.rn-pt-planche .rn-pt-btn-lien {
    background: transparent;
    color: var(--pt-ink);
    border: 1px solid var(--pt-rule);
}

.rn-pt-planche .rn-pt-btn-lien:hover { background: var(--pt-hover); border-color: var(--pt-accent); color: var(--pt-accent); }

/* --- renvoi depuis la fiche produit --- */

.rn-pt-renvoi {
    margin: 24px 0;
    padding: 14px 16px;
    border: 1px solid #e7e9f0;
    border-radius: 10px;
    background: #f7f8fb;
}

.rn-pt-renvoi h3 { margin: 0 0 6px; font-size: 14px; font-weight: 700; }
.rn-pt-renvoi ul { margin: 0; padding-left: 18px; }
.rn-pt-renvoi li { font-size: 13px; margin-bottom: 2px; }

/* -------------------------------------------------------------------------
 * Tablette et mobile
 * ---------------------------------------------------------------------- */

@media (max-width: 1200px) {
    .rn-pt-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {

    .rn-pt-corps { grid-template-columns: minmax(0, 1fr); }

    /* Le dessin cesse d'etre colle en haut : sur une colonne unique il
       masquerait la liste des reperes. */
    .rn-pt-visuel { position: static; }

    .rn-pt-reperes { max-height: none; overflow: visible; }
}

/* Sous 900 px la fiche passe sous le dessin : le cadre reprend toute la
   largeur, la borne en hauteur n a plus lieu d etre. */
@media (max-width: 900px) {
    .rn-pt-planche .rn-pt-zoom { width: 100% !important; }
}

@media (max-width: 820px) {
    .rn-pt-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rn-pt-zoom { aspect-ratio: 1 / 1; }
}

@media (max-width: 560px) {

    .rn-pt-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .rn-pt-carte-corps { padding: 8px 9px 10px; }
    .rn-pt-titre { font-size: 12.5px; }

    .rn-pt-barre { gap: 8px; }
    .rn-pt-compte { width: 100%; }

    /* Cibles tactiles */
    .rn-pt-liste .rn-pt-famille { padding: 8px 13px; font-size: 13px; }
    .rn-pt-planche .rn-pt-outils button { width: 36px; height: 36px; min-height: 36px; max-height: 36px; }
    .rn-pt-planche .rn-pt-zoom .rn-pt-point { min-width: 28px; height: 28px; min-height: 28px; max-height: 28px; font-size: 12px; }
    .rn-pt-planche .rn-pt-qte { width: 56px; height: 36px; }
    .rn-pt-planche .rn-pt-btn { padding: 10px 15px; min-height: 40px; }

    /* La mention d'aide occupe toute la largeur sur un telephone et vient
       recouvrir les commandes de zoom. Le pincement se decouvre seul. */
    .rn-pt-aide { display: none; }

    .rn-pt-produit-vignette { flex-basis: 46px; width: 46px; height: 46px; }
    .rn-pt-produit-pied { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .rn-pt-carte,
    .rn-pt-scene,
    .rn-pt-repere,
    .rn-pt-point { transition: none !important; }
}

/* -------------------------------------------------------------------------
 * Gabarit d'une famille
 * ---------------------------------------------------------------------- */

.rn-pt-page { padding: 28px 0 48px; }

.rn-pt-conteneur {
    max-width: 1604px;
    margin: 0 auto;
    padding: 0 20px;
}

.rn-pt-h1 {
    margin: 0 0 6px;
    font-size: 26px;
    line-height: 1.2;
    color: var(--main-text-color, #1a1d3e);
}

.rn-pt-intro {
    margin: 0 0 18px;
    color: #5b6079;
    font-size: 14px;
    max-width: 70ch;
}