/*
 * 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; }
.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; }
.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) {
	.cpn-oriane-cote[data-etat="ouvert"] { display: grid; grid-template-columns: minmax(0, 1fr) 400px; column-gap: 40px; align-items: start; margin-right: calc(-1 * var(--cpn-marge-page, 0px)); }
	.cpn-oriane-cote[data-etat="ouvert"] .cpn-oriane-panneau { display: flex; position: sticky; top: 0; height: 100vh; max-height: 100vh; }
	body.admin-bar .cpn-oriane-cote[data-etat="ouvert"] .cpn-oriane-panneau { top: 32px; height: calc(100vh - 32px); }
	/* 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) {
	.cpn-oriane-barre { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: none; padding: 8px 8px 8px 10px; }
	.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; }
	html.cpn-oriane-barre-visible body .cpn-haut { bottom: calc(84px + env(safe-area-inset-bottom)); }
	.cpn-oriane-cote[data-etat="ouvert"] .cpn-oriane-panneau { display: flex; position: fixed; z-index: 1001; left: 0; right: 0; bottom: 0; height: 75vh; height: 75dvh; border-left: 0; border-radius: 20px 20px 0 0; padding: 6px 16px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px rgba(17, 17, 17, .2); }
	.cpn-oriane-panneau__poignee { display: block; flex: none; width: 40px; height: 4px; margin: 4px auto 10px; border-radius: 2px; background: #c9c6bd; }
	.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: 767px) {
	/* La barre flottante ne cache pas le bas de la page (seulement quand elle est affichée). */
	html.cpn-oriane-barre-visible .cpn-oriane-cote { padding-bottom: 72px; }
}

/* 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. */
.cpn-oriane-cote .cpn-carte { container-type: inline-size; }
@container (max-width: 300px) {
	.cpn-oriane-cote .cpn-carte:has(.cpn-carte__estimer) .cpn-carte__prix { padding-right: 0; line-height: 25px; margin-bottom: 25px; }
	.cpn-oriane-cote .cpn-carte .cpn-carte__estimer { left: 0; right: auto; top: calc(var(--cpn-carte-h) + 10px + 25px); }
}
/* 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 { margin-bottom: 0; }
	.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; }