/*
 * Recherche et 404 — format « Carnet » (04/10/2026, maquette
 * _migration/maquette_recherche.html). Blocs : fonctions/recherche-carnet.php ;
 * comportements : recherche-carnet.js. Les suggestions de l'en-tête sont dans
 * entete-carnet.css (toutes les pages).
 */

.rch {
    background: var(--hr-papier);
    padding: 22px 0 0;
}
/* Les 64 px au-dessus du pied de page sont sa marge : fond papier, sinon une
   bande blanche du <body> (même règle que les autres gabarits, pied-carnet.css). */
body:has(> main > .rch:last-child) { background: var(--hr-papier); }
.rch__conteneur {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 24px;
}
.rch .hr-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Fil d'Ariane : celui de la fiche (14/1,5, liens soulignés) */
.rch-ariane ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    font: 400 14px/1.5 var(--hr-font-texte);
    color: var(--hr-texte);
}
.rch-ariane li + li::before { content: "›"; margin: 0 8px; color: var(--hr-texte-2); }
.rch-ariane a { color: var(--hr-petrole); text-decoration: underline; }

.rch__titre {
    font: 600 48px/1.08 var(--hr-font-titre);
    color: var(--hr-encre);
    margin: 0 0 34px;
}
.rch__code {
    font: 600 14px/1 var(--hr-font-texte);
    letter-spacing: .12em;
    color: var(--hr-texte-2);
    margin: 0 0 10px;
}
.rch__intro {
    font: 400 16px/1.6 var(--hr-font-texte);
    color: var(--hr-texte);
    margin: 0 0 8px;
}
.rch__intro code {
    font-size: 14px;
    background: #fff;
    border: 1px solid var(--hr-bordure);
    border-radius: 4px;
    padding: 1px 6px;
    overflow-wrap: anywhere;
}
.rch__h2 {
    font: 700 22px/1.3 var(--hr-font-texte);
    color: #333;
    margin: 36px 0 24px;
}
.rch__message,
.rch__compte {
    font: 500 14px/1.4 var(--hr-font-texte);
    color: var(--hr-texte-2);
    margin: 22px 0 12px;
}
.rch__message { font-size: 15px; }

/* Champ de recherche */
.rch-form {
    position: relative;
    display: flex;
    gap: 10px;
    max-width: 640px;
}
.rch-form__champ {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--hr-bordure);
    border-radius: 10px;
    padding: 0 14px;
}
.rch-form__champ:focus-within {
    border-color: var(--hr-petrole);
    box-shadow: 0 0 0 3px rgba(5, 102, 141, .15);
}
.rch-form__champ svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--hr-texte-2); stroke-width: 2; }
.rch-form input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font: 400 16px/1 var(--hr-font-texte);
    padding: 13px 0;
    color: var(--hr-encre);
}
.rch-form button {
    border: 0;
    border-radius: 10px;
    background: var(--hr-petrole);
    color: #fff;
    font: 600 15px/1 var(--hr-font-texte);
    padding: 0 20px;
    cursor: pointer;
}
.rch-form button:hover { background: var(--hr-petrole-fonce); }

/* Filtres */
.rch-filtres {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 4px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--hr-bordure);
}
.rch-filtres[hidden] { display: none; }
.rch-filtres__ligne { display: flex; flex-wrap: wrap; gap: 6px; }
.rch-pastille {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--hr-bordure);
    background: #fff;
    border-radius: 999px;
    padding: 6px 12px;
    font: 500 14px/1.2 var(--hr-font-texte);
    color: var(--hr-encre);
    cursor: pointer;
    text-decoration: none;
}
.rch-pastille:hover { border-color: var(--hr-petrole); }
.rch-pastille span { color: var(--hr-texte-2); font-weight: 400; }
.rch-pastille[aria-pressed="true"] { background: var(--hr-petrole); border-color: var(--hr-petrole); color: #fff; }
.rch-pastille[aria-pressed="true"] span { color: #d5e8ef; }
.rch-pastille--pays { font-size: 13px; padding: 4px 10px; }
.rch-destinations { display: flex; flex-wrap: wrap; gap: 8px; }

/* Résultats */
.rch-liste { display: flex; flex-direction: column; }
.rch-res {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    gap: 18px;
    padding: 18px 0;
    border-bottom: 1px solid var(--hr-bordure);
}
.rch-res[hidden] { display: none; }
.rch-res__media {
    display: block;
    aspect-ratio: 3 / 2;
    border-radius: 8px;
    overflow: hidden;
    background: var(--hr-petrole-pale);
}
.rch-res__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rch-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font: 600 34px/1 var(--hr-font-titre);
    color: var(--hr-petrole);
    background: var(--hr-petrole-pale);
}
.rch-res__tete {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 4px;
    font: 600 12px/1.4 var(--hr-font-texte);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--hr-texte-2);
}
.rch-note { flex: none; text-transform: none; letter-spacing: 0; color: var(--hr-petrole); }
/* Ma note : les 5 étoiles sur ordinateur (comme la fiche), « 4,5 ★ » sur mobile */
.rch-note__etoiles { font-size: 15px; letter-spacing: 1px; line-height: 1; }
.rch-note__vide { color: var(--hr-filet-froid); }
.rch-note__demie {
    background: linear-gradient(90deg, var(--hr-petrole) 50%, var(--hr-filet-froid) 50%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.rch-note__court { display: none; }
.rch-res__titre { font: 700 21px/1.25 var(--hr-font-texte); margin: 0 0 12px; }
.rch-res__titre a { color: var(--hr-petrole); text-decoration: none; }
.rch-res__titre a:hover { text-decoration: underline; }
.rch-res__chiffres {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 6px;
    margin: 0 0 10px;
    font: 500 14px/1.4 var(--hr-font-texte);
    color: var(--hr-texte);
}
.rch-niveau { display: inline-flex; gap: 3px; margin-right: 2px; }
.rch-niveau b { width: 9px; height: 9px; border-radius: 2px; background: var(--hr-bordure); }
.rch-niveau b.on { background: var(--hr-petrole); }
.rch-res__extrait { font: 400 15px/1.5 var(--hr-font-texte); color: var(--hr-texte); margin: 0; }
.rch-res__extrait b { color: var(--hr-encre); }
.rch__pied { display: flex; justify-content: center; margin-top: 24px; }
.rch-plus {
    border: 1px solid var(--hr-petrole);
    background: #fff;
    color: var(--hr-petrole);
    border-radius: 8px;
    padding: 11px 20px;
    font: 600 15px/1 var(--hr-font-texte);
    cursor: pointer;
}
.rch-plus[hidden] { display: none; }

/* Sans résultat, « Vouliez-vous dire » */
.rch-avis {
    background: #fff;
    border: 1px solid var(--hr-bordure);
    border-top: 3px solid var(--hr-vert);
    border-radius: 10px;
    padding: 14px 18px;
    margin: 24px 0 8px;
    font: 400 15px/1.55 var(--hr-font-texte);
    color: var(--hr-texte);
}
.rch-avis p { margin: 0; }
.rch-avis p + p { margin-top: 6px; }
.rch-avis a { color: var(--hr-petrole); }
.rch-avis__vouliez { font-size: 17px; }
.rch-avis__vouliez a { font-weight: 700; }

/* 404 : pages proches */
.rch-proches { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rch-proche {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--hr-bordure);
    border-radius: 10px;
    padding: 8px 14px 8px 8px;
    text-decoration: none;
}
.rch-proche:hover { border-color: var(--hr-petrole); }
.rch-proche__media { display: block; width: 72px; aspect-ratio: 3 / 2; border-radius: 6px; overflow: hidden; }
.rch-proche__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rch-proche .rch-icone { font-size: 22px; }
.rch-proche b { display: block; font: 700 17px/1.3 var(--hr-font-texte); color: var(--hr-petrole); }
.rch-proche small { font: 400 13px/1.4 var(--hr-font-texte); color: var(--hr-texte-2); }
.rch__retour { margin: 36px 0 0; font: 500 15px var(--hr-font-texte); }
.rch__retour a { color: var(--hr-petrole); }

@media (max-width: 700px) {
    .rch__conteneur { padding: 0 16px; }
    .rch__titre { font-size: 32px; }
    .rch-form button { padding: 0 14px; }
    .rch-res { grid-template-columns: 104px minmax(0, 1fr); gap: 12px; }
    .rch-res__titre { font-size: 17px; }
    .rch-res__extrait { font-size: 14px; }
    .rch-note__etoiles { display: none; }
    .rch-note__court { display: inline; }
}