/* * Lot Oriane panneau (0.6.77) : la conversation d'Oriane à côté des annonces. Chargée seulement quand * le panneau est activé et la recherche dans la zone de test (complète oriane.css : bulles, boutons, * champ, monogramme). Coins arrondis réservés à Oriane (panneau, bulles, boutons, barre, volet) ; le * reste de la page garde sa charte, carré (filtres, bandeau, élargissements sous la liste). */ .cpn-oriane-cote { position: relative; } .cpn-oriane-cote__liste { min-width: 0; } /* Panneau (bureau) : environ 400 px à droite de la liste, fond #F4F3EF, bordure gauche #E4E2DC. */ .cpn-oriane-panneau { display: none; box-sizing: border-box; flex-direction: column; background: #f4f3ef; border-left: 1px solid #e4e2dc; padding: 20px 20px 16px; color: var(--cpn-couleur-texte, #111); } .cpn-oriane-panneau__poignee { display: none; } html body .cpn-oriane-panneau button.cpn-oriane-panneau__retour { display: none; } .cpn-oriane-panneau__entete { flex: none; display: flex; align-items: center; gap: 12px; padding: 0 0 14px; border-bottom: 1px solid #e4e2dc; } .cpn-oriane-panneau .cpn-oriane-mono { width: 40px; height: 40px; font-size: 22px; } .cpn-oriane-panneau__qui { flex: 1; min-width: 0; } html body .cpn-oriane-panneau__nom { margin: 0; font-family: var(--cpn-police-titres); font-size: 24px; font-weight: 600; line-height: 1.1; color: #111; } html body .cpn-oriane-panneau__mention { margin: 2px 0 0; font-size: 13px; line-height: 1.35; color: #5c5a55; } .cpn-oriane-panneau__en-ligne { color: var(--cpn-couleur-succes, #2e7d4f); } /* « Réduire » : bouton rond avec un tiret. */ html body .cpn-oriane-panneau button.cpn-oriane-panneau__reduire, html body .cpn-oriane-panneau button.cpn-oriane-panneau__reduire:hover, html body .cpn-oriane-panneau button.cpn-oriane-panneau__reduire:focus { -webkit-appearance: none; appearance: none; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 0; margin: 0; padding: 0; border: 1px solid #d9d6ce; border-radius: 50%; background: #fff; box-shadow: none; color: #111; cursor: pointer; transition: none; } .cpn-oriane-panneau__reduire span { display: block; width: 14px; height: 2px; background: currentColor; border-radius: 1px; } html body .cpn-oriane-panneau button.cpn-oriane-panneau__reduire:hover { border-color: #111; } .cpn-oriane-panneau__fil { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 12px; padding: 16px 2px 12px; } /* 0.7.4 : le fil défile, ses éléments ne se tassent jamais (une comparaison à overflow:hidden tombait à 0 px de haut quand la mention IA prenait de la place). */ .cpn-oriane-panneau__fil > * { flex-shrink: 0; } .cpn-oriane-panneau .cpn-oriane-tour__bulle { max-width: 88%; font-size: 14px; } .cpn-oriane-panneau .cpn-oriane-tour--visiteur .cpn-oriane-tour__bulle { max-width: 80%; } /* Ligne grise écrite par le site sous chaque réponse qui change les critères. */ .cpn-oriane-ligne { margin: -4px 0 0; font-size: 13px; line-height: 1.45; color: #5c5a55; } .cpn-oriane-panneau .cpn-oriane-tour__boutons { gap: 8px; } html body .cpn-oriane-panneau .cpn-oriane-bouton { min-height: 46px; } /* Cibles d'au moins 44 px partout (relecture 0.6.77, m3). */ html body .cpn-oriane-panneau .cpn-oriane-bouton:focus-visible { outline: 2px solid #111; outline-offset: 2px; } html body .cpn-oriane-panneau button.cpn-oriane-panneau__voir { display: none; } .cpn-oriane-panneau .cpn-oriane__champ.cpn-oriane-panneau__saisie { flex: none; width: 100%; max-width: none; margin: 8px 0 0; box-shadow: none; } .cpn-oriane-panneau[aria-busy="true"] .cpn-oriane__envoyer { opacity: .6; } .cpn-oriane-voile { display: none; } @media (min-width: 1100px) { /* Point 19 d'Armand (08/10, 0.6.81) : une fenêtre de discussion posée à côté des annonces, pas une colonne : détachée de 16 px du bord droit de l'écran, en haut et en bas, coins arrondis de 16 px, ombre très légère, sans bordure gauche ; fixe à l'écran pendant le défilement de la liste (sticky), seule la conversation défile. La colonne va jusqu'au bord droit de l'écran (marge réglée par le script selon la largeur de la page) ; hauteur et position haute réglées par le script (en-tête du site resté visible, pied de page). */ .cpn-oriane-cote[data-etat="ouvert"] { display: grid; grid-template-columns: minmax(0, 1fr) 416px; column-gap: 32px; align-items: start; margin-right: calc(-1 * var(--cpn-marge-page, 0px)); } /* 0.7.5.2 (essai d'Armand du 10/10) : toute la hauteur de la fenêtre, quelle que soit la position dans la page (fixée à droite, sous l'en-tête resté visible ; hauteur et haut réglés par le script). */ .cpn-oriane-cote[data-etat="ouvert"] .cpn-oriane-panneau { display: flex; position: fixed; z-index: 990; top: 16px; right: 16px; width: 400px; margin: 0; height: calc(100vh - 32px); max-height: none; border: 1px solid #dddad3; border-radius: 16px; box-shadow: 0 10px 30px rgba(17, 17, 17, .12); overflow: hidden; } /* Filet et ombre : point 22 d'Armand (0.6.84), pas de trait noir. */ body.admin-bar .cpn-oriane-cote[data-etat="ouvert"] .cpn-oriane-panneau { top: 48px; height: calc(100vh - 64px); } /* « Revenir en haut » placé à gauche de la fenêtre, jamais sur la zone de saisie. */ html body:has(.cpn-oriane-cote[data-etat="ouvert"]) .cpn-haut { right: 448px; } /* Liste : 4 colonnes panneau fermé (écran 3), 3 colonnes à côté du panneau (écran 1). */ .cpn-oriane-cote .cpn-resultats:not(.cpn-resultats--carte) .cpn-resultats__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cpn-oriane-cote[data-etat="ouvert"] .cpn-resultats:not(.cpn-resultats--carte) .cpn-resultats__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1280px) { .cpn-oriane-cote[data-etat="ferme"] .cpn-resultats:not(.cpn-resultats--carte) .cpn-resultats__grille { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 20px; } .cpn-oriane-cote[data-etat="ouvert"] .cpn-resultats:not(.cpn-resultats--carte) .cpn-resultats__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Ligne des filtres pendant une conversation : critères bordés de noir, le dernier ajouté par Oriane en noir plein. */ .cpn-oriane-cote[data-cpn-oriane-conversation] .cpn-etiquette-filtre { border-color: #111; } .cpn-oriane-cote .cpn-etiquette-filtre.is-oriane-dernier { background: #111; border-color: #111; color: #fff; } html body .cpn-oriane-cote .cpn-etiquette-filtre.is-oriane-dernier a { color: #fff; } /* Bandeau gris sous le titre. */ .cpn-oriane-maj { margin: 0 0 16px; padding: 10px 14px; background: #f4f3ef; color: #3d3c39; font-size: 14px; line-height: 1.45; } /* Rappel des élargissements sous la liste : boutons carrés bordés de noir. */ .cpn-oriane-elargir { margin: 40px 0 0; } html body .cpn-oriane-elargir__titre { margin: 0 0 12px; font-family: var(--cpn-police-texte); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #111; } .cpn-oriane-elargir__boutons { display: flex; flex-wrap: wrap; gap: 8px; } html body button.cpn-oriane-elargir__bouton, html body button.cpn-oriane-elargir__bouton:focus { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 10px 16px; border: 1px solid #111; border-radius: 0; background: #fff; box-shadow: none; color: #111; font-family: var(--cpn-police-texte); font-size: 14px; font-weight: 500; letter-spacing: normal; text-transform: none; text-align: left; white-space: normal; cursor: pointer; transition: none; } html body button.cpn-oriane-elargir__bouton:hover { background: #111; color: #fff; } html body button.cpn-oriane-elargir__bouton:focus-visible { outline: 2px solid #111; outline-offset: 2px; } /* Barre « Affiner » (écran 3) : noire, arrondie, en bas à droite. */ .cpn-oriane-barre { position: fixed; z-index: 95; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom)); box-sizing: border-box; display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px); padding: 10px 8px 10px 12px; background: #111; color: #fff; border-radius: 999px; box-shadow: 0 6px 24px rgba(17, 17, 17, .28); font-family: var(--cpn-police-texte); } .cpn-oriane-barre[hidden] { display: none; } .cpn-oriane-mono.cpn-oriane-mono--blanc { width: 40px; height: 40px; font-size: 22px; background: #fff; color: #111; } .cpn-oriane-mono.cpn-oriane-mono--blanc::after { border-color: #111; } .cpn-oriane-barre__textes { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; } .cpn-oriane-barre__titre { font-size: 15px; font-weight: 600; color: #fff; } .cpn-oriane-barre__sous { font-size: 13px; color: #d9d6ce; } html body .cpn-oriane-barre .cpn-oriane-barre__bouton, html body .cpn-oriane-barre .cpn-oriane-barre__bouton:hover, html body .cpn-oriane-barre .cpn-oriane-barre__bouton:focus, html body .cpn-oriane-barre .cpn-oriane-barre__bouton:visited { -webkit-appearance: none; appearance: none; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; margin: 0 0 0 4px; padding: 10px 20px; border: 0; border-radius: 999px; background: #fff; box-shadow: none; color: #111; font-family: var(--cpn-police-texte); font-size: 14px; font-weight: 600; letter-spacing: normal; text-transform: none; text-decoration: none; cursor: pointer; transition: none; } .cpn-oriane-barre__bouton svg { display: none; } html body .cpn-oriane-barre button.cpn-oriane-barre__fermer, html body .cpn-oriane-barre button.cpn-oriane-barre__fermer:hover, html body .cpn-oriane-barre button.cpn-oriane-barre__fermer:focus { -webkit-appearance: none; appearance: none; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: none; color: #fff; cursor: pointer; transition: none; } html body .cpn-oriane-barre button.cpn-oriane-barre__fermer[hidden] { display: none; } html body .cpn-oriane-barre .cpn-oriane-barre__bouton:focus-visible, html body .cpn-oriane-barre button.cpn-oriane-barre__fermer:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* « Revenir en haut » remonté au-dessus de la barre. */ html.cpn-oriane-barre-visible body .cpn-haut { bottom: calc(96px + env(safe-area-inset-bottom)); } /* Accueil : premier message envoyé sur place, en attente de la réponse. */ .cpn-oriane__champ.is-attente { opacity: .65; } /* Mobile et tablette (écrans 4 et 5) : barre flottante en bas ; la conversation monte en volet. */ @media (max-width: 1099px) { /* Complément d'Armand (12/10, C1) : texte agrandi, la barre grandit en hauteur ; coins arrondis à 30 px (même ovale sur une ligne), le texte n'entre jamais dans un coin. */ .cpn-oriane-barre { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: none; padding: 8px 8px 8px 10px; gap: 10px; border-radius: 30px; } .cpn-oriane-barre__textes { flex: 1; } html body .cpn-oriane-barre .cpn-oriane-barre__bouton, html body .cpn-oriane-barre .cpn-oriane-barre__bouton:hover, html body .cpn-oriane-barre .cpn-oriane-barre__bouton:focus { width: 44px; height: 44px; padding: 0; border-radius: 50%; } .cpn-oriane-barre__mot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .cpn-oriane-barre__bouton svg { display: block; } /* Partie C du lot des bandeaux (retour d'Armand du 12/10, point 3) : texte agrandi, la barre grandit ; « Revenir en haut » et le bas du pied de page restent au-dessus de sa hauteur réelle (--cpn-oriane-reserve, script). */ html.cpn-oriane-barre-visible body .cpn-haut { bottom: max(calc(84px + env(safe-area-inset-bottom)), calc(var(--cpn-oriane-reserve, 0px) + 12px)); } html.cpn-oriane-barre-visible body .cpn-pied--complet .cpn-pied__bas { padding-bottom: max(76px, calc(var(--cpn-oriane-reserve, 0px) + 68px)); } /* 0.7.5.2 (essai d'Armand du 10/10) : Oriane en plein écran, barre « ← Revenir aux annonces » en haut, zone de saisie en bas ; clavier ouvert, l'écran suit la partie visible (script). */ .cpn-oriane-cote[data-etat="ouvert"] .cpn-oriane-panneau { display: flex; position: fixed; z-index: 1001; left: 0; right: 0; top: 0; bottom: auto; height: 100vh; height: 100dvh; border-left: 0; border-radius: 0; padding: 0 16px calc(12px + env(safe-area-inset-bottom)); box-shadow: none; } html body .cpn-oriane-panneau button.cpn-oriane-panneau__retour, html body .cpn-oriane-panneau button.cpn-oriane-panneau__retour:hover, html body .cpn-oriane-panneau button.cpn-oriane-panneau__retour:focus { -webkit-appearance: none; appearance: none; display: flex; flex: none; align-items: center; gap: 8px; width: calc(100% + 32px); min-height: 52px; margin: 0 -16px 10px; padding: calc(4px + env(safe-area-inset-top)) 16px 4px; border: 0; border-bottom: 1px solid #e4e2dc; border-radius: 0; background: #fff; box-shadow: none; color: #111; font-family: var(--cpn-police-texte); font-size: 15px; font-weight: 600; letter-spacing: normal; text-transform: none; text-align: left; cursor: pointer; } html body .cpn-oriane-panneau button.cpn-oriane-panneau__retour:focus-visible { outline: 2px solid #111; outline-offset: -2px; } body.admin-bar .cpn-oriane-cote[data-etat="ouvert"] .cpn-oriane-panneau { top: 32px; height: calc(100dvh - 32px); } /* Administrateur connecté : sous la barre d'administration. */ .cpn-oriane-voile { display: block; position: fixed; z-index: 1000; inset: 0; background: rgba(17, 17, 17, .5); } .cpn-oriane-voile[hidden] { display: none; } html.cpn-oriane-volet-ouvert, html.cpn-oriane-volet-ouvert body { overflow: hidden; } html body .cpn-oriane-panneau button.cpn-oriane-panneau__voir, html body .cpn-oriane-panneau button.cpn-oriane-panneau__voir:hover, html body .cpn-oriane-panneau button.cpn-oriane-panneau__voir:focus { -webkit-appearance: none; appearance: none; display: block; flex: none; width: 100%; min-height: 44px; margin: 4px 0 0; padding: 8px 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: #111; font-family: var(--cpn-police-texte); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-transform: none; letter-spacing: normal; cursor: pointer; } html body .cpn-oriane-panneau .cpn-oriane-bouton { min-height: 46px; } /* Cibles d'au moins 44 px, arrondis de rendu compris. */ .cpn-oriane-panneau__nom { font-size: 22px; } } @media (max-width: 782px) { body.admin-bar .cpn-oriane-cote[data-etat="ouvert"] .cpn-oriane-panneau { top: 46px; height: calc(100dvh - 46px); } } @media (max-width: 767px) { /* La barre flottante ne cache pas le bas de la liste (seulement quand elle est affichée) ; partie C du lot des bandeaux (point 3) : place réservée à la hauteur réelle de la barre, texte agrandi compris. */ html.cpn-oriane-barre-visible .cpn-oriane-cote { padding-bottom: max(72px, calc(var(--cpn-oriane-reserve, 0px) + 12px)); } } /* Cartes de biens étroites (liste à côté du panneau, vue carte) : « Estimez vos mensualités » passe sous le prix au lieu de le chevaucher (relecture 0.6.77, M1). Le lien est placé hors du lien de la carte, en position absolue (portail.css) : le prix lui laisse une ligne en dessous. */ /* Partie C du lot des bandeaux : la règle « sous le prix » vaut désormais pour toutes les cartes (portail.css, carte de 300 px au plus, ou texte agrandi). */ /* Carte plus étroite que le lien (sécurité) : lien retiré plutôt que débordant (relecture 0.6.77, passe 2). */ @container (max-width: 170px) { .cpn-oriane-cote .cpn-carte:has(.cpn-carte__estimer) .cpn-carte__prix::after { display: none; } .cpn-oriane-cote .cpn-carte .cpn-carte__estimer { display: none; } } @media (min-width: 1100px) and (max-width: 1279px) { /* Vue carte à côté du panneau : une colonne de cartes (sinon cartes de 123 à 159 px). */ .cpn-oriane-cote[data-etat="ouvert"] .cpn-recherche .cpn-resultats--carte .cpn-resultats__grille { grid-template-columns: minmax(0, 1fr); } } @media (min-width: 1100px) and (max-width: 1439px) { /* Barre de recherche à côté du panneau : sur deux lignes, « Où » en pleine largeur puis Projet, Type, Budget et Rechercher (comme sur tablette et téléphone) ; aucun libellé coupé (relecture 0.6.77, passe 2). */ .cpn-oriane-cote[data-etat="ouvert"] .cpn-barre-recherche__barre { flex-wrap: wrap; } .cpn-oriane-cote[data-etat="ouvert"] .cpn-barre-recherche__champ { min-height: 60px; } .cpn-oriane-cote[data-etat="ouvert"] .cpn-barre-recherche__champ--ou { flex: 1 1 100%; border-right: 0; border-bottom: 1px solid var(--cpn-couleur-bordure); } html body .cpn-oriane-cote[data-etat="ouvert"] .cpn-barre-recherche__bouton { min-width: 140px; } } @media (min-width: 1100px) and (max-width: 1279px) { /* Liste encore plus étroite : « Rechercher » sur sa propre ligne, comme sur tablette et téléphone. */ .cpn-oriane-cote[data-etat="ouvert"] .cpn-barre-recherche__champ { padding: 0 14px; } .cpn-oriane-cote[data-etat="ouvert"] .cpn-barre-recherche__champ:not(.cpn-barre-recherche__champ--ou) { border-bottom: 1px solid var(--cpn-couleur-bordure); } html body .cpn-oriane-cote[data-etat="ouvert"] .cpn-barre-recherche .cpn-barre-recherche__bouton { flex: 1 1 100%; min-height: 54px; } } /* Bouton de réponse qui reçoit le focus sans clavier : jamais l'air déjà choisi (fond du thème au focus). */ html body .cpn-oriane-panneau .cpn-oriane-bouton:focus:not(:focus-visible), html body button.cpn-oriane-elargir__bouton:focus:not(:focus-visible) { background: #fff; color: #111; } /* Point 23 d'Armand (0.6.84) : invitation dans la page de résultats (ordinateur), sur la ligne du nombre de biens : petit monogramme, texte, bouton « Affiner » bordé de noir, croix de fermeture. Coins droits : elle fait partie de la page (seul le monogramme reste rond). Page de ville : même invitation au-dessus des biens. */ .cpn-oriane-invitation { box-sizing: border-box; display: flex; align-items: center; gap: 12px; margin: 0 auto 0 0; padding: 4px 0 4px 12px; border-left: 1px solid var(--cpn-couleur-filet, #eeece7); color: #111; } .cpn-oriane-invitation[hidden] { display: none; } .cpn-ville__biens .cpn-oriane-invitation, .cpn-ville__tete + .cpn-oriane-invitation { margin: 0 0 24px; padding: 12px 0; border-left: 0; border-top: 1px solid var(--cpn-couleur-filet, #eeece7); border-bottom: 1px solid var(--cpn-couleur-filet, #eeece7); } .cpn-oriane-invitation .cpn-oriane-mono--petit { width: 28px; height: 28px; font-size: 16px; } .cpn-oriane-invitation .cpn-oriane-mono--petit::after { width: 7px; height: 7px; } html body .cpn-oriane-invitation__texte { margin: 0; font-size: 14px; line-height: 1.4; color: #111; } html body .cpn-oriane-invitation a.cpn-oriane-invitation__bouton, html body .cpn-oriane-invitation button.cpn-oriane-invitation__bouton, html body .cpn-oriane-invitation .cpn-oriane-invitation__bouton:hover, html body .cpn-oriane-invitation .cpn-oriane-invitation__bouton:focus, html body .cpn-oriane-invitation .cpn-oriane-invitation__bouton:visited { -webkit-appearance: none; appearance: none; flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin: 0; padding: 0 18px; border: 1px solid #111; border-radius: 0; background: #fff; box-shadow: none; color: #111; font-family: var(--cpn-police-texte); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: none; } html body .cpn-oriane-invitation .cpn-oriane-invitation__bouton:hover { background: #111; color: #fff; } html body .cpn-oriane-invitation button.cpn-oriane-invitation__fermer, html body .cpn-oriane-invitation button.cpn-oriane-invitation__fermer:hover, html body .cpn-oriane-invitation button.cpn-oriane-invitation__fermer:focus { -webkit-appearance: none; appearance: none; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #5c5a55; cursor: pointer; transition: none; } html body .cpn-oriane-invitation .cpn-oriane-invitation__bouton:focus-visible, html body .cpn-oriane-invitation button.cpn-oriane-invitation__fermer:focus-visible { outline: 2px solid #111; outline-offset: 2px; } /* Fenêtre réduite (ordinateur, point 23) : onglet vertical collé au bord droit de l'écran, à la hauteur de la fenêtre ; monogramme, « Oriane », et « 1 question en attente » si une question attend. Élément d'Oriane : coins gauches arrondis, même filet et même ombre que la fenêtre. */ html body button.cpn-oriane-onglet, html body button.cpn-oriane-onglet:hover, html body button.cpn-oriane-onglet:focus { -webkit-appearance: none; appearance: none; position: fixed; z-index: 95; right: 0; top: 96px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 12px; width: 48px; min-height: 44px; margin: 0; padding: 14px 0; border: 1px solid #dddad3; border-right: 0; border-radius: 16px 0 0 16px; background: #f4f3ef; box-shadow: 0 10px 30px rgba(17, 17, 17, .12); color: #111; font-family: var(--cpn-police-texte); text-transform: none; letter-spacing: normal; cursor: pointer; transition: none; } html body button.cpn-oriane-onglet[hidden] { display: none; } html body button.cpn-oriane-onglet:focus-visible { outline: 2px solid #111; outline-offset: -4px; } .cpn-oriane-onglet .cpn-oriane-mono--petit { width: 30px; height: 30px; font-size: 17px; } .cpn-oriane-onglet__nom, .cpn-oriane-onglet__attente { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; } .cpn-oriane-onglet__nom { font-family: var(--cpn-police-titres); font-size: 19px; font-weight: 600; } .cpn-oriane-onglet__attente { font-size: 12px; color: #5c5a55; } .cpn-oriane-onglet__attente[hidden] { display: none; } /* Place de l'invitation réservée dès l'affichage (attribut posé avant le bloc de résultats) : la ligne ne change pas de hauteur quand le script l'insère (relecture 0.6.84, m6). De 1 100 à 1 365 px, l'invitation occupe sa propre ligne sous « N biens » et « Trier par », dans la place réservée ; au-delà, elle tient sur la ligne du nombre. */ @media (min-width: 1100px) { .cpn-oriane-invitation { height: 52px; } .cpn-oriane-cote[data-invitation] .cpn-resultats__outils { position: relative; min-height: 52px; box-sizing: content-box; } } @media (min-width: 1100px) and (max-width: 1365px) { .cpn-oriane-cote[data-invitation] .cpn-resultats__outils { padding-bottom: 84px; } .cpn-oriane-cote .cpn-resultats__outils > .cpn-oriane-invitation { position: absolute; left: 0; right: 0; bottom: 16px; margin: 0; padding-left: 0; border-left: 0; } } @media (max-width: 1099px) { .cpn-oriane-invitation, html body button.cpn-oriane-onglet { display: none; } } /* Troisième essai réel d'Armand (09/10) : peu de biens, montrés dans la conversation du panneau, une carte par ligne. */ .cpn-oriane-panneau .cpn-oriane-tour__apercu { width: 100%; } .cpn-oriane-panneau .cpn-oriane-apercu { grid-template-columns: 1fr; gap: 8px; } .cpn-oriane-panneau .cpn-oriane-apercu__carte a { flex-direction: row; } .cpn-oriane-panneau .cpn-oriane-apercu__photo { width: 38%; flex: none; aspect-ratio: auto; min-height: 88px; align-self: stretch; } /* Point 41 (C5) ; 0.7.5.6 (C14 b d'Armand) : « Nouvelle conversation » et « Mes recherches avec Oriane » dans l'en-tête de tout panneau, mobile comme ordinateur (règles venues de oriane-41.css). */ html body .cpn-oriane-panneau button.cpn-o41-rond, html body .cpn-oriane-panneau button.cpn-o41-rond:hover, html body .cpn-oriane-panneau button.cpn-o41-rond:focus { -webkit-appearance: none; appearance: none; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 0; margin: 0; padding: 0; border: 1px solid #d9d6ce; border-radius: 50%; background: #fff; box-shadow: none; color: #111; cursor: pointer; transition: none; } html body .cpn-oriane-panneau button.cpn-o41-rond:hover, html body .cpn-oriane-panneau button.cpn-o41-rond[aria-expanded="true"] { border-color: #111; } html body .cpn-oriane-panneau button.cpn-o41-rond:focus-visible { outline: 2px solid #111; outline-offset: 2px; } .cpn-o41-historique { flex: none; max-height: 45%; overflow-y: auto; padding: 12px 0; border-bottom: 1px solid #e4e2dc; } .cpn-o41-historique[hidden] { display: none; } html body .cpn-o41-historique__titre { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #5c5a55; } .cpn-o41-historique ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } html body .cpn-o41-historique button.cpn-o41-historique__choix, html body .cpn-o41-historique button.cpn-o41-historique__choix:hover, html body .cpn-o41-historique button.cpn-o41-historique__choix:focus { -webkit-appearance: none; appearance: none; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 44px; margin: 0; padding: 8px 12px; border: 1px solid #e4e2dc; border-radius: 12px; background: #fff; box-shadow: none; color: #111; font-family: var(--cpn-police-texte); font-size: 14px; font-weight: 500; text-align: left; text-transform: none; letter-spacing: normal; white-space: normal; cursor: pointer; } html body .cpn-o41-historique button.cpn-o41-historique__choix:hover { border-color: #111; } .cpn-o41-historique__date { font-size: 12px; font-weight: 400; color: #5c5a55; } html body .cpn-o41-historique__vide { margin: 0; font-size: 13px; color: #5c5a55; } /* Mêmes règles sous des noms neutres, interface du point 41 éteinte (rien du point 41 dans le HTML). */ html body .cpn-oriane-panneau button.cpn-oriane-rond, html body .cpn-oriane-panneau button.cpn-oriane-rond:hover, html body .cpn-oriane-panneau button.cpn-oriane-rond:focus { -webkit-appearance: none; appearance: none; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 0; margin: 0; padding: 0; border: 1px solid #d9d6ce; border-radius: 50%; background: #fff; box-shadow: none; color: #111; cursor: pointer; transition: none; } html body .cpn-oriane-panneau button.cpn-oriane-rond:hover, html body .cpn-oriane-panneau button.cpn-oriane-rond[aria-expanded="true"] { border-color: #111; } html body .cpn-oriane-panneau button.cpn-oriane-rond:focus-visible { outline: 2px solid #111; outline-offset: 2px; } .cpn-oriane-historique { flex: none; max-height: 45%; overflow-y: auto; padding: 12px 0; border-bottom: 1px solid #e4e2dc; } .cpn-oriane-historique[hidden] { display: none; } html body .cpn-oriane-historique__titre { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #5c5a55; } .cpn-oriane-historique ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } html body .cpn-oriane-historique button.cpn-oriane-historique__choix, html body .cpn-oriane-historique button.cpn-oriane-historique__choix:hover, html body .cpn-oriane-historique button.cpn-oriane-historique__choix:focus { -webkit-appearance: none; appearance: none; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 44px; margin: 0; padding: 8px 12px; border: 1px solid #e4e2dc; border-radius: 12px; background: #fff; box-shadow: none; color: #111; font-family: var(--cpn-police-texte); font-size: 14px; font-weight: 500; text-align: left; text-transform: none; letter-spacing: normal; white-space: normal; cursor: pointer; } html body .cpn-oriane-historique button.cpn-oriane-historique__choix:hover { border-color: #111; } .cpn-oriane-historique__date { font-size: 12px; font-weight: 400; color: #5c5a55; } html body .cpn-oriane-historique__vide { margin: 0; font-size: 13px; color: #5c5a55; } @media (max-width: 767px) { /* 0.7.5.7 (point 1 bis d'Armand) : 40 px sur un téléphone (cible tactile suffisante) : à 200 % de texte en 360 px, « Oriane » ne touche plus le « + ». */ html body .cpn-oriane-panneau button.cpn-o41-rond, html body .cpn-oriane-panneau button.cpn-o41-rond:hover, html body .cpn-oriane-panneau button.cpn-o41-rond:focus, html body .cpn-oriane-panneau button.cpn-oriane-rond, html body .cpn-oriane-panneau button.cpn-oriane-rond:hover, html body .cpn-oriane-panneau button.cpn-oriane-rond:focus, html body .cpn-oriane-panneau button.cpn-oriane-panneau__reduire, html body .cpn-oriane-panneau button.cpn-oriane-panneau__reduire:hover, html body .cpn-oriane-panneau button.cpn-oriane-panneau__reduire:focus { width: 40px; height: 40px; } .cpn-oriane-cote:not([data-cpn-o41]) .cpn-oriane-panneau__entete { gap: 8px; } /* 0.7.5.7 (point 1 d'Armand) : « Assistante IA d'… · en ligne » (obligation européenne) sur une ligne entière sous le nom et les boutons, jamais recouvert ni coupé, même avec le texte du téléphone agrandi (Firefox : le « + » le recouvrait). Avec ou sans l'interface du point 41. */ html body .cpn-oriane-cote .cpn-oriane-panneau .cpn-oriane-panneau__entete { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; grid-template-rows: auto auto; column-gap: 8px; row-gap: 8px; align-items: center; } html body .cpn-oriane-cote .cpn-oriane-panneau__entete > .cpn-oriane-mono { grid-column: 1; grid-row: 1; } html body .cpn-oriane-cote .cpn-oriane-panneau__entete .cpn-oriane-panneau__qui { display: contents; } html body .cpn-oriane-cote .cpn-oriane-panneau__entete .cpn-oriane-panneau__nom { grid-column: 2; grid-row: 1; min-width: 0; } html body .cpn-oriane-cote .cpn-oriane-panneau__entete > button { grid-row: 1; } html body .cpn-oriane-cote .cpn-oriane-panneau .cpn-oriane-panneau__entete .cpn-oriane-panneau__mention { grid-column: 1 / -1; grid-row: 2; margin: 0; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; } } /* Partie C du lot des bandeaux (point 6) : témoin de 1 em à côté du champ du volet (taille du texte suivie par le script). */ .cpn-oriane-temoin { position: absolute; width: 1em; height: 1em; overflow: hidden; visibility: hidden; pointer-events: none; } /* 0.7.5.37.1 (essai d'Armand sur Android, 27/10) : téléphone, clavier ouvert pendant la saisie (classe cpn-oriane-clavier, script) : en-tête réduit à une ligne (« O », « Oriane », « Réduire ») ; la mention « Oriane est une IA et peut se tromper » reste sous le champ. */ @media (max-width: 1099px) { /* 0.7.5.38.1 (essai d'Armand sur Android, 28/10) : la page derrière le panneau ne défile pas pendant la saisie. */ html.cpn-oriane-clavier, html.cpn-oriane-clavier body { overflow: hidden; } /* Pendant la saisie, la dernière réponse et ses boutons juste au-dessus du champ : « Voir les biens » revient clavier fermé. */ html.cpn-oriane-clavier body .cpn-oriane-panneau button.cpn-oriane-panneau__voir { display: none; } html.cpn-oriane-clavier body .cpn-oriane-panneau [data-cpn-oriane-fil] { padding-bottom: 4px; } html.cpn-oriane-clavier body .cpn-oriane-panneau button.cpn-oriane-panneau__retour, html.cpn-oriane-clavier body .cpn-oriane-panneau button.cpn-oriane-panneau__retour:hover, html.cpn-oriane-clavier body .cpn-oriane-panneau button.cpn-oriane-panneau__retour:focus { display: none; } html.cpn-oriane-clavier body .cpn-oriane-cote .cpn-oriane-panneau .cpn-oriane-panneau__entete .cpn-oriane-panneau__mention, html.cpn-oriane-clavier body .cpn-oriane-cote .cpn-oriane-panneau .cpn-oriane-panneau__entete > button:not(.cpn-oriane-panneau__reduire) { display: none; } html.cpn-oriane-clavier body .cpn-oriane-cote .cpn-oriane-panneau .cpn-oriane-panneau__entete { row-gap: 0; padding: calc(6px + env(safe-area-inset-top)) 0 6px; } html.cpn-oriane-clavier body .cpn-oriane-cote .cpn-oriane-panneau .cpn-oriane-panneau__nom { font-size: 18px; } html.cpn-oriane-clavier body .cpn-oriane-cote .cpn-oriane-panneau .cpn-oriane-historique { display: none; } }