/*
Fichier : annonces_fiche.css
Chemin  : D:\speedclicV2\www\assets\css\annonces_fiche.css
Role    : CE QUI DIFFERE ENTRE LA FICHE VISITEUR ET LA MODALE DE SAISIE. RIEN D'AUTRE.

LA DISPOSITION N'EST PAS ICI, ET C'EST VOULU. Elle vient de annonces_gestion_modale.css,
       servie sur cet ecran depuis le 27/08 : la fiche porte les MEMES classes que la
       modale de remplissage (.pgm-fond, .pgm, .pgm-tete, .pgm-corps, .pgm-gauche,
       .pgm-champ, .pgm-options, .pgm-cases). Ramon : « la disposition est FIXE » — et la
       seule facon qu'elle le reste demain aussi, c'est qu'il n'y en ait qu'une.
       Une premiere version avait sa propre mise en page « inspiree » de la modale : elle
       s'est tassee en haut a gauche des la premiere annonce reelle. « On dirait un
       listing ecrase trouve sous un bureau. »

CE FICHIER NE CONTIENT DONC QUE TROIS CHOSES : les boites de lecture (un champ qu'on ne
       saisit pas), la rangee de photos qui defile au lieu de passer a la ligne, et ses
       deux fleches.
Créé   : 27/08/2026
*/

/* ═══ LE CADRE D'UNE ANNONCE DANS LE FLUX ═══                       (27/08/2026)
   Ramon : « un cadre gris fin entoure la photo et la partie de droite qui le definit ».
   Le meme filet que dans la gestion, et pour la meme raison : il dit ou commence et ou
   finit ce qui se clique. LE PRIX RESTE DEHORS — il se lit, il ne s'ouvre pas. */
.pa-ann-bloc {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 6px;
    border: 1px solid #dfe5eb;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
}
.pa-ann-bloc:hover { border-color: #1c5fbe; }
.pa-ann-bloc:focus-visible { outline: 2px solid #1c5fbe; outline-offset: 1px; }

/* ═══ LE MARQUEUR DE NIVEAU, SUR LE FLUX PUBLIC ═══                (01/09/2026)
   Meme place que dans la gestion — coin bas-droit du cadre — et pour la meme raison :
   pose sur la photo, chaque annonce lui donnerait un fond different et l'etoile se
   noierait dans certaines. Au coin, le fond est toujours le meme, donc il se lit
   toujours. IL NE SE CLIQUE PAS : le cadre entier ouvre la fiche. */
.pa-ann-bloc { position: relative; }
.pa-niv-marque {
    position: absolute;
    right: 0;
    bottom: 0;
    display: block;
    line-height: 0;
    pointer-events: none;
}
.pa-niv-marque img {
    width: auto;
    /* 18 px ET NON 26 (01/09/2026). Ramon : « tu peux reduire de 30% la taille des
       images top10 et Premium ? ca semble un peu agressif sur ecran ». 26 x 0,7 = 18,2.
       IL A RAISON SUR LA CAUSE : ces deux images sont pleines — fond noir, aplat jaune —
       la ou tout le reste de la ligne est du texte fin sur blanc. A 26 px elles ne
       signalaient plus l'annonce, elles la dominaient. Un marqueur se voit sans prendre
       la parole. */
    height: 18px;
    display: block;
}

/* ═══ UN CHAMP QU'ON NE SAISIT PAS ═══
   Meme gabarit, meme place, meme hauteur que le champ de la modale — sinon les deux
   ecrans ne se superposent plus. Ce qui change : il ne se survole pas, il ne prend pas
   le focus, et son fond dit qu'il se lit. UNE HAUTEUR MINIMALE, parce qu'une reference
   vide ne doit pas faire remonter les trois lignes suivantes. */
.paf-lu {
    margin: 0;
    min-height: 30px;
    background: #f7f9fc;
    color: #1b2733;
    white-space: pre-line;
    overflow-wrap: anywhere;
}
/* LA DESIGNATION GARDE LA HAUTEUR DE SON CADRE, comme le textarea de la modale : une
   annonce de trois mots et une annonce de six cents signes doivent occuper la meme
   boite, sinon la fiche saute d'une annonce a l'autre. */
.paf-lu-long { min-height: 150px; }
.paf-prix { text-align: right; font-weight: 700; color: #c62c20;
            font-variant-numeric: tabular-nums; }
/* LE LIEU ET LA DATE ACCOMPAGNENT LE PRIX : trois faits qu'on regarde avant de lire la
   designation — combien, ou, depuis quand. Ils ne sont PAS un champ, ils n'en ont donc
   ni le cadre ni la graisse. */
.paf-lieu { margin: 10px 0 0; color: #96a0aa; font-size: 12px; }
/* LA GRANDE IMAGE SE CLIQUE : elle ouvre le diaporama, comme ses vignettes. */
.paf-grande { cursor: pointer; }

/* ═══ LES PHOTOS : UNE SEULE RANGEE, ET ELLE DEFILE ═══             (27/08/2026)
   Ramon : « les photos sont alignees en bas (si 10, il faut un ascenseur horizontal) ».
   C'est la SEULE difference avec la modale, qui les fait passer a la ligne. Les cases
   gardent la classe .pgm-case : meme taille, meme cadrage, meme cadre plein quand elles
   portent une image. */
/* LA SPECIFICITE EST DELIBEREE : .pgm-cases pose flex-wrap:wrap, et les deux feuilles
   se chargent dans un ordre que la fiche ne commande pas. Deux classes valent mieux
   qu'un pari sur l'ordre des <link> — mesure du 27/08, la rangee passait a la ligne. */
.paf-bande { position: relative; }
.pgm-cases.paf-rangee {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-behavior: smooth;
}
.paf-rangee .pgm-case { cursor: pointer; }

/* Les deux fleches sont dessinees en CSS, jamais ecrites : un glyphe se dessine
   autrement selon la police du visiteur — c'est ce qui avait rendu la poubelle
   fantomatique le 13/08. Memes formes que celles du diaporama. */
.paf-fl {
    position: absolute;
    top: 50%;
    width: 30px; height: 30px;
    margin-top: -18px;
    border: 1px solid #dfe5eb;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    cursor: pointer;
    z-index: 2;
}
.paf-fl:hover { border-color: #1c5fbe; }
.paf-fl[hidden] { display: none !important; }
.paf-fl::before {
    content: "";
    position: absolute;
    top: 9px;
    width: 10px; height: 10px;
    border-top: 2px solid #3d4a57;
    border-left: 2px solid #3d4a57;
}
.paf-fl-g { left: -6px; }
.paf-fl-d { right: -6px; }
.paf-fl-g::before { left: 11px; transform: rotate(-45deg); }
.paf-fl-d::before { right: 11px; transform: rotate(135deg); }

/* LA FICHE PORTE LE DIAPORAMA : celui-ci se pose DANS une boite et ne survole pas la
   page — c'est ce que suppose diaporama.css, la feuille partagee avec l'annuaire. Il
   couvre la fiche ENTIERE, vignettes comprises : elles sont en bas, hors du corps, et
   les laisser depasser sous la grande image serait un diaporama a moitie ouvert. */
.paf-fond .pgm { position: relative; }

.paf-fond[hidden] { display: none !important; }


/* ═══ LE PANIER DE FAVORIS ═══                                      (27/08/2026)
   Ramon : « en haut a droite il te faut une icone Favori, pour que l'usager en
   consultation puisse remplir son Panier de Favoris ».
   L'ICONE VIENT DE LA BIBLIOTHEQUE, elle n'est pas dessinee ici : c'est celle que Ramon
   a choisie, le coeur rouge des Images Diverses. Le CSS ne fait que dire son ETAT.
   GRIS TANT QU'IL N'EST PAS POSE, ROUGE ENSUITE. Le meme fichier sert aux deux : un
   coeur eteint en niveaux de gris et rendu discret, le meme rendu a plein quand le
   signet est pose. Deux images auraient demande deux depots et un jour l'une des deux
   aurait manque — c'est exactement ce qui est arrive aux cinq logos de categories. */
.paf-fav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    padding: 0;
    border: 1px solid #dfe5eb;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
}
.paf-fav:hover { border-color: #c62c20; }
.paf-fav:focus-visible { outline: 2px solid #1c5fbe; outline-offset: 1px; }
.paf-fav-img {
    width: 20px; height: 20px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .45;
    transition: filter .12s, opacity .12s;
}
.paf-fav:hover .paf-fav-img { opacity: .75; }
.paf-fav-pose .paf-fav-img,
.paf-fav-pose:hover .paf-fav-img { filter: none; opacity: 1; }
.paf-fav-pose { border-color: #c62c20; background: #fdf3f2; }

/* ═══ LE SIGNALEMENT ═══                                            (27/08/2026)
   Ramon : « je pensais mettre a cote l'icone DANGER - Signalement, au cas ou une annonce
   ne respecterait pas la legalite de diffusion ».

   MEME GABARIT QUE LE FAVORI, ET C'EST VOLONTAIRE : les deux boutons sont cote a cote,
   deux tailles differentes se verraient au premier coup d'oeil et donneraient a l'un
   plus de poids qu'a l'autre. Ce sont deux gestes egaux : garder, ou alerter.

   GRIS AU REPOS, ORANGE UNE FOIS POSE — et pas rouge : le rouge est la couleur du
   favori juste a cote, et deux boutons rouges voisins ne se distinguent plus. L'orange
   dit l'avertissement sans crier.

   IL NE SE DEPOSE PAS. Il n'y a donc pas d'etat « survol quand pose » : une fois
   signale, le bouton ne promet plus rien au doigt qui passe dessus. */
.paf-sig {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    padding: 0;
    border: 1px solid #dfe5eb;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
}
.paf-sig:hover { border-color: #d18309; }
.paf-sig:focus-visible { outline: 2px solid #1c5fbe; outline-offset: 1px; }
.paf-sig-img {
    width: 20px; height: 20px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .45;
    transition: filter .12s, opacity .12s;
}
.paf-sig:hover .paf-sig-img { opacity: .75; }
.paf-sig-pose .paf-sig-img { filter: none; opacity: 1; }
.paf-sig-pose { border-color: #d18309; background: #fdf6ea; cursor: default; }

/* ═══ « JE CONTACTE L'ANNONCEUR » ═══                                (27/08/2026)
   Ramon : « DEVANT l'icone du coeur, un bouton Bleu — sauf si c'est une annonce du
   connecte ».

   BLEU, ET LE SEUL BLEU PLEIN DE LA BARRE. Le coeur et le panneau DANGER sont deux
   carres blancs bordes de gris : le bouton de contact est le seul a porter une couleur
   de fond, parce que c'est le seul des trois qui est une ACTION attendue. Les deux
   autres sont des gestes de reserve.

   MEME HAUTEUR QUE LES DEUX ICONES (32 px). Trois objets sur une meme rangee, dont un
   plus haut, et la rangee ne se lit plus comme une rangee.

   DESACTIVE POUR L'INSTANT, PAS SEULEMENT INERTE. Le canal de messagerie n'existe pas
   encore ; Ramon a choisi de poser la disposition d'abord. Un bouton qu'on peut cliquer
   et qui ne repond pas est une panne — un bouton grise est une promesse, et le curseur
   le dit avant meme le clic. */
.paf-contact {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 14px;
    border: 1px solid #1c5fbe;
    border-radius: 4px;
    background: #1c5fbe;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.paf-contact:hover { background: #17529f; border-color: #17529f; }
.paf-contact:focus-visible { outline: 2px solid #0d2f5e; outline-offset: 1px; }
.paf-contact:disabled { background: #9fb6d4; border-color: #9fb6d4; cursor: not-allowed; }
/* [hidden] DANS UN CONTENEUR FLEX NE SUFFIT PAS : display:flex bat display:none du
   HTML. La lecon est deja payee ailleurs dans ce chantier ; elle vaut ici aussi. */
.paf-contact[hidden] { display: none !important; }

/* ═══ LA BOITE DE CONFIRMATION DU SIGNALEMENT ═══                    (27/08/2026)
   Ramon : « il vaut mieux une petite modale demandant confirmation ».

   ELLE RECOUVRE LE PANNEAU, PAS LA PAGE. Le voile est en position:absolute dans .pgm —
   la fiche reste visible dessous, floutee par le voile, et on n'a qu'UNE chose a
   refermer pour revenir a l'annonce. Un voile sur toute la page en aurait fait deux.

   PETITE, ET AU MILIEU. Elle ne demande qu'une chose ; l'etirer sur la largeur du
   panneau lui donnerait l'air d'un formulaire.

   LE OUI PORTE LA COULEUR, LE NON RESTE GRIS — mais le non est a DROITE, la ou tombe la
   main quand on veut sortir. Un signalement se confirme volontairement ; on ne met pas
   le geste irreversible sous le doigt qui hesite. */
/* LE PANNEAU DEVIENT LE REPERE DU VOILE, ET SEULEMENT CELUI DE LA FICHE : .pgm est
   partage avec la modale de saisie, qui a ses propres boites posees dedans. Un
   position:relative pose sur .pgm tout court aurait deplace les leurs. */
.paf-fond .pgm { position: relative; }

.paf-conf {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(27, 39, 51, .45);
}
.paf-conf[hidden] { display: none !important; }
.paf-conf-boite {
    max-width: 420px;
    margin: 0 16px;
    padding: 18px 20px 14px;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
}
.paf-conf-mot {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.45;
    color: #1b2733;
}
.paf-conf-btns { display: flex; gap: 8px; justify-content: flex-end; }

/* ═══ LES MOTIFS A COCHER ═══                                       (27/08/2026)
   UNE LIGNE PAR MOTIF, PLEINE LARGEUR, et la case colle a son texte : la zone cliquable
   est le <label> entier, pas le carre de douze pixels. On signale une horreur avec le
   pouce, sur un telephone, et rater la case trois fois de suite decourage.

   ELLE DEFILE PLUTOT QUE DE GRANDIR. Neuf motifs plus un champ libre, sur un ecran
   d'appoint, feraient sortir les boutons du panneau — et le bouton qu'on ne voit pas
   n'existe pas. La liste garde donc une hauteur maximale et defile a l'interieur ;
   « Confirmer » reste toujours a sa place, en bas a droite.

   LE REFUS SE VOIT SANS CRIER : la question passe en rouge sombre a l'endroit ou elle
   etait, elle ne s'ajoute pas dessous. Un message qui s'ajoute pousse la liste vers le
   bas, et le visiteur perd la ligne qu'il etait en train de lire. */
.paf-conf-motifs {
    max-height: 46vh;
    overflow-y: auto;
    margin: 0 0 14px;
    padding: 2px 2px 2px 0;
}
.paf-conf-motifs[hidden] { display: none !important; }
.paf-conf-m {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 4px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.35;
    color: #2b3540;
    cursor: pointer;
}
.paf-conf-m:hover { background: #f2f6fb; }
.paf-conf-case { margin: 2px 0 0; flex: 0 0 auto; cursor: pointer; }
.paf-conf-prec {
    width: 100%;
    margin-top: 6px;
    padding: 6px 8px;
    border: 1px solid #cfd6dd;
    border-radius: 4px;
    font: inherit;
    font-size: 13px;
    resize: vertical;
}
.paf-conf-prec[hidden] { display: none !important; }
.paf-conf-mot-refus { color: #c62c20; font-weight: 700; }


/* ═══ LES CARACTERISTIQUES DANS LA ZONE « OPTIONS » ═══             (02/09/2026)
   DEUX COLONNES DANS UNE COLONNE ETROITE : le libelle a gauche, la valeur a droite et
   en gras — c'est ainsi qu'on lit une fiche technique, et c'est ce qui permet de
   parcourir les valeurs a la verticale sans lire les libelles.
   LE LIBELLE PEUT REVENIR A LA LIGNE, la valeur non : « 125 m² » coupe en deux ne veut
   plus rien dire. */
/* LA BOITE NE S'ELARGIT PAS POUR SON CONTENU.                     (02/09/2026)
   MESURE A L'ECRAN, SUR LA PEUGEOT 3008 : « Equipements : Sellerie cuir, Ecran tactile,
   Regulateur de vitesse, Sieges chauffants » en `nowrap` a pousse la zone des options
   bien au-dela de ses 260 px — la colonne de gauche s'est ecrasee et le prix s'est
   casse en quatre lignes (« 18 90 0,0 0 »). Un flex item ne rétrécit pas sous sa
   largeur MINIMALE de contenu tant qu'on ne lui a pas dit `min-width: 0`.
   DONC : la boite peut rétrécir, et la valeur revient a la ligne au lieu de pousser. */
/* ELLE EST UNE COLONNE, ET SES ECHELLES TOMBENT AU FOND.          (02/09/2026)
   Ramon, sur sa maquette Photoshop : « mettre DPE et GES EN BAS du cadre des options ».
   MESURE A L'ECRAN sur le Studio 45 m2 (ID 21) : la liste s'arrete a mi-hauteur et les
   deux echelles se collaient dessous, laissant un grand vide sous elles. Une colonne
   flex + `margin-top: auto` sur le bloc des echelles les pousse contre le bas du cadre,
   quelle que soit la longueur de la liste — c'est ce qu'il a dessine. */
#paf-options { min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
/* LA LISTE DEFILE DANS SA COLONNE, LES ECHELLES NE BOUGENT PLUS.  (02/09/2026)
   MESURE A L'ECRAN, en gonflant la Villa de Pessac a trente caracteristiques : la boite
   fait 667 px de haut, son contenu 860, et `overflow: visible` laissait l'echelle se
   dessiner 130 px SOUS le cadre, par-dessus la barre des photos. Le defaut existait
   avant les echelles — c'est la liste qui debordait — mais il ne se voyait pas.
   DONC : la boite ne deborde plus, c'est la LISTE qui defile (min-height:0, sinon un
   flex item refuse de retrecir sous son contenu), et le bloc des echelles garde sa
   place au pied du cadre, toujours visible. C'est la maquette de Ramon, meme quand
   l'annonce porte trente lignes. */
.paf-attrs { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
.paf-echelles { flex: 0 0 auto; }
.paf-attrs { margin: 0; font-size: 12px; line-height: 1.45; min-width: 0; }
.paf-attr {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 3px 0;
    border-bottom: 1px dotted #e3e8ee;
}
.paf-attr:last-child { border-bottom: 0; }
.paf-attr dt { margin: 0; color: #56616c; }
.paf-attr dd {
    margin: 0;
    color: #1b2733;
    font-weight: 600;
    text-align: right;
    /* PAS DE `nowrap` : une valeur de liste multiple en porte quatre, et une ligne qui
       refuse de se couper elargit tout ce qui la contient. */
    overflow-wrap: anywhere;
}


/* ═══ LES DEUX ECHELLES, AU PIED DE LA COLONNE ═══                 (02/09/2026)
   Ramon : « la classification du boncoin est meilleure que la notre car elle montre une
   echelle ». Sept cases, la sienne pleine et plus large — on lit la lettre ET sa place.
   ELLES SONT EN BAS, comme sur sa maquette : ce sont des reperes, pas des
   caracteristiques, et elles ne doivent pas couper la lecture de la liste. */
.paf-echelles { margin-top: auto; padding-top: 14px; }
.paf-ech { margin-top: 8px; }
.paf-ech-mot { display: block; font-size: 11px; color: #56616c; margin-bottom: 3px; }
.paf-ech-barre { display: flex; gap: 2px; align-items: stretch; }
.paf-l {
    flex: 1 1 0;
    min-width: 0;
    padding: 2px 0;
    border-radius: 2px;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    color: #2b3640;
    opacity: .45;
}
/* CELLE DE L'ANNONCE SORT DU RANG : plus large, pleine, et elle seule est nette. */
.paf-l.paf-on { flex: 0 0 26px; padding: 4px 0; font-size: 13px; opacity: 1; color: #fff; }

/* LA PALETTE DES DEUX ECHELLES A DEMENAGE.                        (02/09/2026)
   Elle vit maintenant dans annonces_gestion_modale.css, LA SEULE FEUILLE SERVIE SUR LES
   DEUX ECRANS — la fiche du visiteur la charge deja pour ses classes .pgm-*. Ramon veut
   pouvoir CLIQUER la reglette a la saisie : les deux ecrans dessinent donc les memes
   quatorze couleurs, et quatorze couleurs ecrites a deux endroits finissent par
   differer (regle 19). Rien n'est perdu, rien n'est en double : elle est ailleurs. */

/* ═══ LA BARRE DES OPTIONS VISUELLES ═══                           (02/09/2026)
   Ramon : « une gamme d'options visuelles avec texte au survol [...] dans l'esprit de
   Speedclic en visuel ». Une rangee qui DEFILE plutot que de passer a la ligne : la
   fiche ne doit pas changer de hauteur selon le nombre d'options.
   LE MOT SOUS L'ICONE, en petit : on reconnait l'image, on verifie avec le mot. */
.paf-barre {
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
    padding: 8px 16px;
    overflow-x: auto;
    border-top: 1px solid #eef2f6;
}
.paf-barre[hidden] { display: none !important; }
.paf-opt {
    flex: 0 0 auto;
    /* RAMON : « tu peux elargir en verticale si besoin pour que les icones soient
       comprehensibles ». MESURE A L'ECRAN sur le Studio 45 m2 : a 34 px, le garde-corps
       du balcon se lisait, mais de justesse. 42 px et une legende de 10 px : on
       reconnait le dessin sans lire le mot, ce qui est tout l'objet de la barre. */
    width: 72px;
    margin: 0;
    padding: 4px 2px;
    border: 1px solid #e3e8ee;
    border-radius: 6px;
    background: #fff;
    text-align: center;
    cursor: default;
}
.paf-opt img { display: block; width: 42px; height: 42px; margin: 0 auto; }
.paf-opt figcaption {
    margin-top: 2px;
    font-size: 10px;
    line-height: 1.2;
    color: #56616c;
    overflow-wrap: anywhere;
}
.paf-opt:hover { border-color: #1c5fbe; background: #f7faff; }

/* === FIN DU FICHIER : D:\speedclicV2\www\assets\css\annonces_fiche.css === */

/* ═══ LA SECONDE FACE DE LA FICHE : ÉCRIRE À L'ANNONCEUR ═══        (28/08/2026)
   Elle reprend la grille de la fiche — mêmes classes, mêmes largeurs — et n'ajoute que
   ce que la maquette de Ramon ajoute : le prix proposé à droite du message, les trois
   choix de visibilité, le bouton d'envoi à gauche, et l'avertissement en bas.
   LE BOUTON DE CONTACT S'ALLUME QUAND SA FACE EST OUVERTE : bleu plein, comme sur sa
   maquette. C'est le seul repère qui dise sur quelle face on se trouve. */
.paf-contact-actif { background: #1c5fbe !important; border-color: #1c5fbe !important; color: #fff !important; }

/* [hidden] NE SUFFIT PAS QUAND UNE RÈGLE POSE display : c'est écrit trois fois dans
   cette feuille, et je l'ai quand même oublié le 28/08 sur ces deux blocs. La seconde
   face porte .pgm-corps (display:flex) et le remerciement pose display:flex lui-même :
   sans ces deux lignes, l'un s'affichait sous la fiche et l'autre par-dessus, sans le
   moindre clic. */
.paf-contact-vue[hidden] { display: none !important; }
.paf-merci-fond[hidden] { display: none !important; }

.paf-c-l2 { display: flex; gap: 14px; align-items: flex-start; margin-top: 8px; }
.paf-c-msg { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.paf-c-texte {
    min-height: 118px;
    resize: vertical;
    font: inherit;
    font-size: 12.5px;
    line-height: 1.5;
}
.paf-c-offre { flex: 0 0 190px; display: flex; flex-direction: column; gap: 6px; }
.paf-c-prixp { text-align: right; font-variant-numeric: tabular-nums; }

.paf-c-l3 { display: flex; gap: 14px; margin-top: 10px; }
.paf-c-l3 .pgm-champ { flex: 1 1 0; min-width: 0; }

/* LES TROIS CHOIX DE VISIBILITÉ. Ils sont serrés, comme sur la maquette : ce sont trois
   variantes d'une même décision, pas trois réglages indépendants. */
.paf-c-voir { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.paf-c-case { display: flex; align-items: baseline; gap: 7px; font-size: 12.5px; cursor: pointer; }
.paf-c-case input { flex: 0 0 auto; }

.paf-c-btns { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.paf-c-mot { color: #c0362c; font-size: 12px; }

/* L'AVERTISSEMENT. Noir quand le réseau a vérifié, rouge quand il ne l'a pas fait —
   c'est le ton de Ramon, et le rouge n'est pas décoratif : il dit qu'on ne garantit rien. */
.paf-c-avis {
    display: flex;
    gap: 10px;
    align-items: baseline;
    margin-top: 12px;
    padding: 8px 10px;
    border-top: 1px solid #eef2f6;
    font-size: 12px;
    line-height: 1.4;
}
.paf-c-avis-t { flex: 0 0 auto; font-weight: 700; color: #1d2b36; }
.paf-c-avis-p { color: #1d2b36; }
.paf-c-avis-rouge .paf-c-avis-t,
.paf-c-avis-rouge .paf-c-avis-p { color: #c0362c; }

/* ═══ LE REMERCIEMENT ═══
   Une petite boîte, seule au milieu : la fiche est partie, il n'y a plus rien à lire
   derrière elle. */
.paf-merci-fond:not([hidden]) { display: flex; align-items: center; justify-content: center; }
.paf-merci {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 380px;
    padding: 22px 26px;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
    text-align: center;
}
.paf-merci-txt { margin: 0; color: #1d2b36; font-size: 14px; line-height: 1.5; }
/* === FIN DE L'AJOUT DU 28/08/2026 === */