/* =========================================================
   LA PAPETERIE, L'ATELIER
   Catalogue, questionnaire, aperçu, commande, envoi.

   Ce fichier habille l'outil. Les cartes elles-mêmes sont
   dessinées par produits.css, qui ne suit pas le système et
   ne doit pas être touché : ses cotes sont en millimètres.
========================================================= */

/* ---- L'en-tête et la sous-navigation ---- */

.pap-entete { margin-bottom: var(--e6); }

.pap-sousnav {
    display: flex;
    gap: var(--e2);
    flex-wrap: wrap;
    margin-bottom: var(--e6);
}

.pap-sousnav [data-famille] {
    padding: 9px var(--e5);
    border: 1px solid var(--trait);
    border-radius: var(--r-rond);
    background: var(--surface);
    color: var(--encre-2);
    font-size: var(--t-sm);
    transition: border-color var(--duree-courte) var(--courbe),
                background var(--duree-courte) var(--courbe),
                color var(--duree-courte) var(--courbe);
}
.pap-sousnav [data-famille]:hover { border-color: var(--trait-fort); }
.pap-sousnav [data-famille].actif,
.pap-sousnav [data-famille].active {
    background: var(--encre);
    border-color: var(--encre);
    color: var(--surface);
}

/* ---- Le bandeau de création sur mesure ---- */

.pap-commande {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e5);
    flex-wrap: wrap;
    padding: var(--e5) var(--e6);
    margin-bottom: var(--e7);
    border: 1px solid var(--trait);
    border-radius: var(--r-md);
    background: var(--fond-tendre);
}
.pap-commande-texte { font-size: var(--t-base); }
.pap-commande-texte span { display: block; margin-top: var(--e1); color: var(--encre-2); font-size: var(--t-sm); }

/* =========================================================
   LE CATALOGUE
   Cinq modèles, cinq coloris chacun. La vignette montre la
   carte telle qu'elle sera, rien d'autre.
========================================================= */

.pap-vue { display: block; }

.pap-modele {
    padding: var(--e6) 0;
    border-top: 1px solid var(--trait);
}
.pap-modele:first-child { border-top: 0; padding-top: 0; }

.pap-modele-tete {
    display: flex;
    align-items: baseline;
    gap: var(--e3);
    flex-wrap: wrap;
    margin-bottom: var(--e5);
}

.pap-modele-tete h3 { font-family: var(--serif); font-size: var(--t-lg); font-weight: 400; }
.pap-modele-meta { color: var(--encre-3); font-size: var(--t-xs); letter-spacing: var(--chasse-etiquette); text-transform: uppercase; }
.pap-modele-desc { width: 100%; color: var(--encre-2); font-size: var(--t-sm); line-height: var(--interligne-aere); }

.pap-vignettes {
    display: flex;
    gap: var(--e4);
    flex-wrap: wrap;
}

/* Les registres : cinq façons d'écrire le même faire-part.
   Une colonne de cartes, le texte de chacune en aperçu. */
.pap-registres { display: grid; gap: var(--e2); }

.pap-registre {
    padding: var(--e3) var(--e4);
    border: 1px solid var(--trait);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--encre-2);
    font-size: var(--t-sm);
    line-height: var(--interligne);
    text-align: left;
    transition: border-color var(--duree-courte) var(--courbe), background var(--duree-courte) var(--courbe);
}
.pap-registre:hover { border-color: var(--trait-fort); }
.pap-registre.actif, .pap-registre.active { border-color: var(--encre); background: var(--fond-tendre); }

.pap-registre span {
    display: block;
    margin-bottom: var(--e1);
    color: var(--encre-3);
    font-size: var(--t-xs);
    font-weight: 500;
    letter-spacing: var(--chasse-etiquette);
    text-transform: uppercase;
}

.pap-vignette {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--e3);
    padding: var(--e4);
    border: 1px solid transparent;
    border-radius: var(--r-md);
    background: transparent;
    transition: border-color var(--duree) var(--courbe),
                background var(--duree) var(--courbe),
                transform var(--duree) var(--courbe);
}
.pap-vignette:hover {
    border-color: var(--trait);
    background: var(--surface);
    transform: translateY(-3px);
}

/* La vignette choisie porte un liseré, hors de la carte pour ne
   jamais toucher aux cotes du gabarit. */
.pap-vignette.choisi .fpt-face,
.pap-vignette.choisi .mnu-face,
.pap-vignette.choisi .mpl-face { outline: 2px solid var(--encre); outline-offset: 5px; }

.pap-vignette-nom {
    color: var(--encre-2);
    font-size: var(--t-xs);
    letter-spacing: 0.02em;
}

/* =========================================================
   L'ATELIER
   Le questionnaire à gauche, la carte à droite, qui suit le
   défilement. C'est le seul écran de l'application où l'on
   voit le résultat pendant qu'on écrit.
========================================================= */

.pap-atelier {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
    gap: var(--e8);
    align-items: start;
}

.pap-champs { display: grid; gap: var(--e5); }

.pap-bloc {
    padding: var(--e5) var(--e6);
    border: 1px solid var(--trait);
    border-radius: var(--r-md);
    background: var(--surface);
}

.pap-bloc h4 { margin-bottom: var(--e2); font-size: var(--t-base); font-weight: 600; }
/* Texte d'aide : gris d'appui, pas gris effacé. Sur un fond blanc,
   --encre-3 tombe sous le seuil de lecture confortable. */
.pap-bloc-aide { margin-bottom: var(--e4); color: var(--encre-2); font-size: var(--t-sm); line-height: var(--interligne); }

.pap-bloc-repliable summary { cursor: pointer; list-style: none; }
.pap-bloc-repliable summary::-webkit-details-marker { display: none; }

.pap-champ { margin-bottom: var(--e4); }
.pap-champ:last-child { margin-bottom: 0; }

.pap-champ label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--e3);
    margin-bottom: var(--e2);
    color: var(--encre-2);
    font-size: var(--t-xs);
    font-weight: 500;
}

.pap-champ-face {
    color: var(--encre-4);
    font-size: var(--t-xs);
    font-weight: 400;
    letter-spacing: var(--chasse-etiquette);
    text-transform: uppercase;
}

.pap-champ.large textarea { min-height: 92px; }
.pap-champ-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }

/* ---- Les coloris ---- */

.pap-coloris { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.pap-pastilles { display: flex; gap: var(--e2); flex-wrap: wrap; }

/* Les pastilles de coloris de l'atelier sont dessinées par le script :
   un bouton, un dégradé à trois bandes qui montre le fond, l'accent et la
   couleur profonde du coloris. */
.pap-coloris [data-coloris-btn] {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--trait);
    border-radius: var(--r-rond);
    overflow: hidden;
    transition: transform var(--duree-courte) var(--courbe),
                border-color var(--duree-courte) var(--courbe),
                box-shadow var(--duree-courte) var(--courbe);
}
.pap-coloris [data-coloris-btn] i { display: block; width: 100%; height: 100%; }
.pap-coloris [data-coloris-btn]:hover { transform: scale(1.08); border-color: var(--trait-fort); }
.pap-coloris [data-coloris-btn].actif {
    border-color: var(--encre);
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--encre);
}
.pap-coloris [data-coloris-btn]:focus-visible {
    outline: 2px solid var(--encre);
    outline-offset: 3px;
}

.pap-pastille {
    position: relative;
    width: 34px;
    height: 34px;
    border: 1px solid var(--trait);
    border-radius: var(--r-rond);
    overflow: hidden;
    transition: transform var(--duree-courte) var(--courbe),
                border-color var(--duree-courte) var(--courbe);
}
.pap-pastille:hover { transform: scale(1.08); }
.pap-pastille.actif, .pap-pastille.active {
    border-color: var(--encre);
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--encre);
}
.pap-pastille span { display: block; height: 33.34%; }

/* ---- Le programme et les tables ---- */

.pap-programme, .pap-tables, .pap-services { display: grid; gap: var(--e2); }

.pap-prog-ligne, .pap-table-ligne, .pap-service {
    display: grid;
    grid-template-columns: 88px 1fr auto;
    align-items: center;
    gap: var(--e2);
}
.pap-table-ligne { grid-template-columns: 1fr 88px; }
.pap-table-nom { font-size: var(--t-sm); }

.pap-prog-moins, .pap-fleche {
    width: 32px;
    height: 32px;
    border: 1px solid var(--trait);
    border-radius: var(--r-rond);
    background: var(--surface);
    color: var(--encre-3);
    transition: color var(--duree-courte) var(--courbe), border-color var(--duree-courte) var(--courbe);
}
.pap-prog-moins:hover { color: var(--rouge); border-color: var(--rouge); }
.pap-fleche:hover { color: var(--encre); border-color: var(--encre); }

/* ---- L'aperçu ---- */

.pap-apercu {
    position: sticky;
    top: calc(var(--barre-haute) + var(--e4));
    display: grid;
    gap: var(--e4);
    justify-items: center;
}

.pap-apercu-cadre, .pap-sauve-cadre {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e4);
    justify-items: center;
    width: 100%;
    min-width: 0;
    padding: var(--e7);
    border: 1px solid var(--trait);
    border-radius: var(--r-md);
    background:
        radial-gradient(120% 80% at 50% 0%, var(--surface), var(--fond-creux));
}

.pap-apercu-scene, .pap-sauve-scene { cursor: zoom-in; max-width: 100%; }

.pap-faces { display: flex; align-items: center; gap: var(--e2); }
.pap-faces-nom { min-width: 84px; text-align: center; color: var(--encre-3); font-size: var(--t-xs); letter-spacing: var(--chasse-etiquette); text-transform: uppercase; }

.pap-apercu-note { color: var(--encre-3); font-size: var(--t-xs); text-align: center; }

.pap-actions { display: flex; gap: var(--e3); flex-wrap: wrap; }
.pap-telechargement { color: var(--encre-3); font-size: var(--t-xs); text-align: center; }

/* =========================================================
   LA VUE SAUVEGARDÉE
========================================================= */

.pap-sauve {
    display: grid;
    grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
    gap: var(--e8);
    align-items: start;
}

.pap-sauve-meta { margin-top: var(--e2); color: var(--encre-3); font-size: var(--t-sm); }
.pap-badge-publie { margin-top: var(--e4); }
.pap-sauve-titre { font-family: var(--serif); font-size: var(--t-xl); font-weight: 300; }

.pap-badge-publie {
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
    padding: 4px var(--e3);
    border-radius: var(--r-rond);
    background: var(--vert-fond);
    color: var(--vert);
    font-size: var(--t-xs);
    font-weight: 500;
}

/* Modifier et supprimer partagent une ligne et restent petits :
   ce sont des gestes de correction, pas les actions du jour. Les
   trois autres prennent toute la largeur. */
.pap-sauve-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--e2);
    margin-top: var(--e5);
}
.pap-sauve-actions .pleine { grid-column: 1 / -1; }
.pap-sauve-actions .pap-actions { display: contents; }

/* ---- Le faire-part publié, côté invité ---- */

.pap-publie {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: var(--e6);
    margin: 0 auto var(--e6);
}
.pap-publie-face { filter: drop-shadow(0 18px 40px rgba(23, 21, 18, 0.16)); cursor: pointer; }

/* =========================================================
   LE MOCKUP FLOTTANT
   La carte posée sur un plan de travail, au survol d'une
   vignette du catalogue.
========================================================= */

.pap-mockup-flottant {
    position: fixed;
    z-index: 820;
    pointer-events: none;
    border-radius: var(--r-sm);
    overflow: hidden;
    box-shadow: var(--ombre-3);
    animation: pap-apparait var(--duree) var(--courbe);
}

@keyframes pap-apparait {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.pap-mockup-fond { width: 100%; display: block; }
.pap-mockup-carte { position: absolute; left: 36%; top: 21%; }
.pap-mockup-legende {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: var(--e3);
    background: linear-gradient(0deg, rgba(15, 13, 11, 0.62), transparent);
    color: #fff;
    font-size: var(--t-xs);
    text-align: center;
}

/* =========================================================
   LES FENÊTRES DE LA PAPETERIE
========================================================= */

.pap-modale-boite { width: min(760px, 100%); padding: var(--e8); }
.pap-modale-fermer { position: absolute; top: var(--e4); right: var(--e4); }

.pap-modale-credits {
    position: absolute;
    top: var(--e5);
    right: var(--e10);
    padding: 4px var(--e3);
    border-radius: var(--r-rond);
    background: var(--fond-creux);
    color: var(--encre-2);
    font-size: var(--t-xs);
    font-variant-numeric: tabular-nums;
}
.pap-modale-credits em { font-style: normal; color: var(--encre-4); }

.pap-offres-tete { text-align: center; margin-bottom: var(--e7); }
.pap-offres-tete h3 { font-family: var(--serif); font-size: var(--t-xl); font-weight: 300; }
.pap-offres-tete p { margin-top: var(--e3); color: var(--encre-2); font-size: var(--t-sm); line-height: var(--interligne-aere); }

.pap-offres-grille { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4); }

.pap-offre {
    display: flex;
    flex-direction: column;
    gap: var(--e3);
    padding: var(--e6);
    border: 1px solid var(--trait);
    border-radius: var(--r-md);
    background: var(--surface);
}

.pap-offre-etiquette {
    align-self: flex-start;
    padding: 3px 9px;
    border-radius: var(--r-rond);
    background: var(--or-voile);
    color: var(--or);
    font-size: var(--t-xs);
    font-weight: 500;
}

.pap-offre h4 { font-family: var(--serif); font-size: var(--t-lg); font-weight: 400; }
.pap-offre-prix { font-family: var(--serif); font-size: var(--t-2xl); font-weight: 300; line-height: 1; }
.pap-offre-promesse { color: var(--encre-2); font-size: var(--t-sm); line-height: var(--interligne-aere); }
.pap-offre-liste { display: grid; gap: var(--e2); margin: 0; padding: 0; list-style: none; }
.pap-offre-liste li { position: relative; padding-left: var(--e5); color: var(--encre-2); font-size: var(--t-sm); }
.pap-offre-liste li::before { content: "·"; position: absolute; left: var(--e2); color: var(--or); }
.pap-offre-delai { color: var(--encre-3); font-size: var(--t-xs); }
.pap-offre .btn { margin-top: auto; }

.pap-offres-mentions { margin-top: var(--e6); color: var(--encre-3); font-size: var(--t-xs); line-height: var(--interligne-aere); }

/* ---- Le questionnaire de demande ---- */

.pap-demande { display: grid; gap: var(--e5); }
.pap-gabarits, .pap-variables { display: flex; gap: var(--e2); flex-wrap: wrap; }

.pap-gabarit, .pap-variable {
    padding: 8px var(--e4);
    border: 1px solid var(--trait);
    border-radius: var(--r-rond);
    background: var(--surface);
    color: var(--encre-2);
    font-size: var(--t-xs);
    transition: border-color var(--duree-courte) var(--courbe), background var(--duree-courte) var(--courbe), color var(--duree-courte) var(--courbe);
}
.pap-gabarit:hover, .pap-variable:hover { border-color: var(--trait-fort); }
.pap-gabarit.actif, .pap-gabarit.active { background: var(--encre); border-color: var(--encre); color: var(--surface); }
.pap-variable { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.pap-photos-choix { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--e2); }

.pap-photo {
    position: relative;
    aspect-ratio: 1;
    border: 2px solid transparent;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--fond-creux);
    transition: border-color var(--duree-courte) var(--courbe);
}
.pap-photo img { width: 100%; height: 100%; object-fit: cover; }
.pap-photo.actif, .pap-photo.active, .pap-photo.choisie { border-color: var(--encre); }

.pap-photos-actions { display: flex; gap: var(--e3); flex-wrap: wrap; align-items: center; margin-top: var(--e3); }
.pap-photos-compte { color: var(--encre-3); font-size: var(--t-xs); }

.pap-demande-erreur {
    padding: var(--e3) var(--e4);
    border-radius: var(--r-sm);
    background: var(--rouge-fond);
    color: var(--rouge);
    font-size: var(--t-sm);
}

.pap-demande-ok {
    margin-top: var(--e5);
    padding: var(--e6);
    border-radius: var(--r-md);
    background: var(--vert-fond);
    color: var(--vert);
}
.pap-demande-ok h4 { margin-bottom: var(--e2); font-size: var(--t-base); }
.pap-demande-ok p { font-size: var(--t-sm); line-height: var(--interligne-aere); }
.pap-demande-ok p + p { margin-top: var(--e3); }

/* =========================================================
   L'ENVOI ET LA COMMANDE
========================================================= */

.pap-forfait {
    display: flex;
    align-items: center;
    gap: var(--e5);
    flex-wrap: wrap;
    padding: var(--e3) var(--e4);
    margin-bottom: var(--e5);
    border-radius: var(--r-sm);
    background: var(--fond-creux);
}
.pap-forfait-titre { color: var(--encre-3); font-size: var(--t-xs); letter-spacing: var(--chasse-etiquette); text-transform: uppercase; }
.pap-forfait-poste { color: var(--encre-2); font-size: var(--t-sm); }
.pap-forfait-poste b { font-weight: 600; color: var(--encre); font-variant-numeric: tabular-nums; }

.pap-envoi-choix { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4); }

.pap-voie {
    display: flex;
    flex-direction: column;
    gap: var(--e2);
    padding: var(--e5);
    border: 1px solid var(--trait);
    border-radius: var(--r-md);
    background: var(--surface);
    text-align: left;
    transition: border-color var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe), transform var(--duree) var(--courbe);
}
.pap-voie:hover { border-color: var(--trait-fort); box-shadow: var(--ombre-1); transform: translateY(-2px); }
.pap-voie.actif, .pap-voie.active { border-color: var(--encre); box-shadow: 0 0 0 1px var(--encre) inset; }

.pap-voie-titre { font-family: var(--serif); font-size: var(--t-lg); font-weight: 400; }
.pap-voie-texte { color: var(--encre-2); font-size: var(--t-sm); line-height: var(--interligne-aere); }
.pap-voie-note { margin-top: var(--e2); color: var(--or); font-size: var(--t-xs); font-weight: 500; }

/* Revenir en arrière est une action, pas une note de bas de page :
   un chevron, un cadre léger, une cible confortable au doigt. */
.pap-retour {
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
    min-height: 34px;
    margin-bottom: var(--e5);
    padding: 0 var(--e4) 0 var(--e3);
    border: 1px solid var(--trait);
    border-radius: var(--r-rond);
    color: var(--encre-2);
    font-size: var(--t-sm);
    background: var(--surface);
    transition: border-color var(--duree-courte) var(--courbe), color var(--duree-courte) var(--courbe);
}
.pap-retour::before {
    content: "";
    width: 7px;
    height: 7px;
    border-left: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
}
.pap-retour:hover { border-color: var(--trait-fort); color: var(--encre); }

.pap-envoi-email, .pap-envoi-postal { display: grid; gap: var(--e5); }

.pap-apercu-invite { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e3); }
.pap-apercu-invite label { font-size: var(--t-xs); color: var(--encre-3); white-space: nowrap; }
.pap-apercu-invite select { max-width: 280px; }

.pap-apercu-message {
    padding: var(--e5);
    border: 1px solid var(--trait);
    border-radius: var(--r-sm);
    background: var(--fond);
    color: var(--encre-2);
    font-size: var(--t-sm);
    line-height: var(--interligne-aere);
    white-space: pre-wrap;
}

.pap-blocage {
    padding: var(--e5);
    border-radius: var(--r-sm);
    background: var(--ambre-fond);
    color: var(--ambre);
}
.pap-blocage h5 { margin-bottom: var(--e2); font-size: var(--t-sm); }
.pap-blocage p { font-size: var(--t-sm); line-height: var(--interligne); }
.pap-blocage .btn { margin-top: var(--e3); }

.pap-compteur {
    position: absolute;
    top: var(--e5);
    right: var(--e10);
    color: var(--encre-2);
    font-size: var(--t-xs);
    font-variant-numeric: tabular-nums;
}

/* ---- La commande d'impression ---- */

.pap-commande-foyers {
    display: flex;
    align-items: baseline;
    gap: var(--e3) var(--e4);
    flex-wrap: wrap;
    padding: var(--e4) var(--e5);
    border: 1px solid var(--trait);
    border-radius: var(--r-sm);
    background: var(--surface);
}
.pap-commande-nombre { font-family: var(--serif); font-size: var(--t-2xl); font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; }
.pap-commande-mot { color: var(--encre-2); font-size: var(--t-sm); }
.pap-commande-palier {
    margin-left: auto;
    padding: 4px var(--e3);
    border-radius: var(--r-rond);
    background: var(--fond-creux);
    color: var(--encre-3);
    font-size: var(--t-xs);
    letter-spacing: var(--chasse-etiquette);
    text-transform: uppercase;
}

.pap-commande-formules { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }
.pap-formule.actif { border-color: var(--encre); box-shadow: 0 0 0 1px var(--encre) inset; }

.pap-recap {
    padding: var(--e5);
    border: 1px solid var(--trait);
    border-left: 2px solid var(--or);
    border-radius: var(--r-sm);
    background: var(--surface);
}
.pap-recap-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e4); color: var(--encre-2); font-size: var(--t-sm); }
.pap-recap-ligne b { font-family: var(--serif); font-size: var(--t-xl); font-weight: 300; color: var(--encre); font-variant-numeric: tabular-nums; }
.pap-recap-note { margin-top: var(--e3); color: var(--encre-3); font-size: var(--t-xs); line-height: var(--interligne); }

/* ---- La confirmation ---- */

.pap-confirmation {
    position: fixed;
    inset: 0;
    z-index: 980;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--e6);
    background: rgba(23, 21, 18, 0.42);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.pap-confirmation-boite {
    width: min(420px, 100%);
    padding: var(--e7);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--ombre-3);
    text-align: center;
    animation: fenetre-entree var(--duree) var(--courbe);
}
.pap-confirmation-boite h4 { font-family: var(--serif); font-size: var(--t-lg); font-weight: 400; }
.pap-confirmation-boite p { margin-top: var(--e3); color: var(--encre-2); font-size: var(--t-sm); line-height: var(--interligne-aere); }
.pap-confirmation-actions { display: flex; gap: var(--e3); justify-content: center; margin-top: var(--e6); }

.pap-planche { display: grid; gap: var(--e3); }

/* =========================================================
   LA CARTE EN VOLUME
   Le papier se penche et se retourne. Les faces viennent du
   moteur d'impression : le rendu ne peut pas diverger.
========================================================= */

.fp3d-voile { z-index: 1000; background: rgba(12, 10, 9, 0.88); }
.fp3d-scene { perspective: 1600px; perspective-origin: 50% 45%; text-align: center; }

/* Deux boîtes, deux mouvements, deux durées.
   L'inclinaison suit la souris et doit être instantanée ; le demi-tour
   dure huit dixièmes de seconde. Sur un seul élément, chaque mouvement
   de souris relançait la transition du demi-tour vers une cible
   légèrement différente : le retournement n'arrivait jamais au bout,
   et c'est exactement l'accroc qu'on voyait. */
.fp3d-inclinaison {
    --fp3d-x: 0deg;
    --fp3d-y: 0deg;
    transform-style: preserve-3d;
    transform: rotateX(var(--fp3d-x)) rotateY(var(--fp3d-y));
    transition: transform 180ms linear;
    will-change: transform;
}

.fp3d-carte {
    --fp3d-tour: 0deg;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateY(var(--fp3d-tour));
    /* 0.8s : la même valeur que DUREE_TOUR dans papeterie.js. */
    transition: transform 0.8s var(--courbe-douce);
    will-change: transform;
    cursor: pointer;
}

/* Pendant le demi-tour, l'inclinaison revient à plat d'un mouvement
   franc : le papier se redresse pour se retourner, comme à la main. */
.fp3d-tourne .fp3d-inclinaison {
    --fp3d-x: 0deg;
    --fp3d-y: 0deg;
    transition: transform 0.35s var(--courbe-douce);
}

@media (prefers-reduced-motion: reduce) {
    .fp3d-inclinaison { transition: none; }
    .fp3d-carte { transition: transform 0.2s linear; }
}

.fp3d-face { backface-visibility: hidden; filter: drop-shadow(0 34px 64px rgba(0, 0, 0, 0.5)); }
.fp3d-verso { position: absolute; inset: 0; transform: rotateY(180deg); }

.fp3d-tranche {
    position: absolute;
    inset: 0;
    transform: translateZ(-0.6px);
    background: rgba(0, 0, 0, 0.14);
    border-radius: 2px;
    pointer-events: none;
}

.fp3d-aide {
    margin-top: var(--e6);
    color: rgba(255, 255, 255, 0.68);
    font-size: var(--t-xs);
    letter-spacing: 0.04em;
}

.fp3d-fermer {
    position: absolute;
    top: var(--e5);
    right: var(--e5);
    width: 40px;
    height: 40px;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}
.fp3d-fermer:hover { background: rgba(255, 255, 255, 0.14); color: #fff; border-color: rgba(255,255,255,0.5); }

/* =========================================================
   TÉLÉPHONE
========================================================= */

@media (max-width: 1200px) {
    /* minmax(0, 1fr) et non 1fr : une carte dessinée en millimètres ne doit
       jamais pouvoir élargir sa colonne, sinon la page part de travers. */
    .pap-atelier, .pap-sauve { grid-template-columns: minmax(0, 1fr); gap: var(--e6); }
    .pap-apercu { position: static; }
}

/* ---------------------------------------------------------------
   L'ATELIER SUR TÉLÉPHONE : UNE BARRE D'APERÇU QUI SUIT
   Le formulaire fait plusieurs écrans de haut. Si l'aperçu reste en
   bas, on écrit sans jamais voir la carte. Il devient donc une barre
   collée sous le menu : la carte en réduction, la face, les coloris
   et l'enregistrement, toujours à portée de pouce.
--------------------------------------------------------------- */

@media (max-width: 900px) {
    .pap-atelier {
        display: flex;
        flex-direction: column;
        gap: var(--e6);
    }

    /* Le cadre s'efface : ses enfants deviennent les cases de la barre,
       sans quoi le bouton d'enregistrement resterait hors de la grille. */
    .pap-apercu .pap-apercu-cadre { display: contents; }

    .pap-apercu {
        order: -1;
        position: sticky;
        top: var(--hauteur-topbar, var(--barre-haute));
        z-index: 60;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        justify-items: stretch;
        gap: var(--e2) var(--e4);
        margin: 0 calc(var(--e5) * -1);
        padding: var(--e3) var(--e5);
        background: var(--surface-barre);
        backdrop-filter: saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        border-bottom: 1px solid var(--trait);
    }

    /* La carte en réduction : un toucher l'ouvre en grand. */
    .pap-apercu .pap-apercu-scene {
        grid-column: 1;
        grid-row: 1 / span 2;
        width: 62px;
        justify-self: start;
    }

    .pap-apercu .pap-faces { grid-column: 2; grid-row: 1; justify-content: flex-start; }
    .pap-apercu .pap-faces-nom { min-width: 0; }

    .pap-apercu .pap-coloris {
        grid-column: 2 / -1;
        grid-row: 2;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .pap-apercu .pap-coloris::-webkit-scrollbar { display: none; }
    .pap-apercu .pap-pastilles { flex-wrap: nowrap; }
    .pap-apercu .pap-pastille,
    .pap-apercu .pap-coloris [data-coloris-btn] { flex: 0 0 auto; width: 28px; height: 28px; }

    .pap-apercu .pap-apercu-note { display: none; }

    .pap-apercu .pap-actions { grid-column: 3; grid-row: 1; margin: 0; justify-self: end; }
    .pap-apercu .pap-actions .btn {
        width: auto;
        min-height: 36px;
        padding: 0 var(--e4);
        font-size: var(--t-xs);
        white-space: nowrap;
    }
    /* « Sauvegarder » suffit : la barre n'a pas la largeur du reste. */
    .pap-apercu .pap-actions .btn .mot-secondaire { display: none; }
}

@media (max-width: 640px) {
    .pap-sousnav { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; margin: 0 calc(var(--e5) * -1) var(--e5); padding: 0 var(--e5); }
    .pap-sousnav::-webkit-scrollbar { display: none; }
    .pap-sousnav [data-famille] { flex: 0 0 auto; }

    .pap-commande { flex-direction: column; align-items: flex-start; padding: var(--e5); }
    .pap-commande .btn { width: 100%; }

    .pap-vignettes, .pap-registres { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--e5) * -1); padding: 0 var(--e5) var(--e2); }
    .pap-vignettes::-webkit-scrollbar, .pap-registres::-webkit-scrollbar { display: none; }
    .pap-vignette { flex: 0 0 auto; }

    .pap-bloc { padding: var(--e4); }
    .pap-champ-duo { grid-template-columns: 1fr; }
    .pap-apercu-cadre, .pap-sauve-cadre { padding: var(--e5); }
    .pap-modale-boite { padding: var(--e6) var(--e5) var(--e7); }
    .pap-modale-credits, .pap-compteur { position: static; display: inline-block; margin-bottom: var(--e4); }

    /* Le forfait passe en liste : un poste par ligne, l'étiquette au-dessus,
       plutôt qu'une file qui se casse n'importe où. */
    .pap-forfait { display: grid; gap: var(--e2); }
    .pap-forfait-titre { margin-bottom: var(--e1); }
    .pap-forfait-poste { display: flex; justify-content: space-between; gap: var(--e3); }

    .pap-offres-grille, .pap-envoi-choix, .pap-commande-formules { grid-template-columns: 1fr; }
    .pap-sauve-actions .pap-actions { grid-template-columns: 1fr; }
    .pap-actions .btn { width: 100%; }
    .pap-confirmation-actions { flex-direction: column; }
    .pap-confirmation-actions .btn { width: 100%; }

    .pap-publie { gap: var(--e4); }
    .pap-mockup-flottant { display: none; }
}