/* ==========================================================
   Croque Errant — retouches de charte (v2)
   À charger APRÈS croque.css : ne fait que surcharger.
   1. Menu : liens texte Outfit, soulignés rose, sous-menus carte crème
   2. Suppression du grand cadre ombré
   3. Tirages photo : ombre douce + légère inclinaison
   4. Bouton « Naviguer » au rose Croque
   ========================================================== */

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&display=swap");

:root {
    --ce-rose: #DB1762;
    --ce-rose-fonce: #8E0D3D;
    --ce-creme: #FFFDF7;
    --ce-filet: #D9D1B4;
    --ce-encre: #2A2420;
    --ce-ombre: 0 2px 10px rgba(60, 45, 20, .16);
}

/* ---------- 1. Menu (reste positionné à cheval sur la bannière) ---------- */
nav#nav .navbar-nav { gap: 0 1.6rem; }

nav#nav ul li > a,
nav#nav ul li > a:hover,
nav#nav ul li > a:focus {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0;
    margin-right: 0;
    padding: .2rem 0 !important;
    font-family: "Outfit", system-ui, sans-serif;
    font-size: 1.35rem;
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--ce-encre) !important;
    /* halo couleur papier : reste lisible par-dessus le collage */
    text-shadow: 0 0 4px #F7F4E1, 0 0 8px #F7F4E1, 0 0 12px #F7F4E1;
}
nav#nav ul li > a:hover,
nav#nav ul li > a:focus,
nav#nav ul li > a.show { border-bottom-color: var(--ce-rose) !important; }

nav#nav div.dropdown-menu {
    background: var(--ce-creme);
    border: 1px solid var(--ce-filet);
    border-radius: .75rem;
    box-shadow: var(--ce-ombre);
    padding: .4rem;
}
nav#nav .dropdown-item {
    border-radius: .5rem;
    padding: .4rem .9rem;
    color: var(--ce-encre);
    font-family: "Outfit", system-ui, sans-serif;
    font-size: 1.1rem;
}
nav#nav .dropdown-item:hover,
nav#nav .dropdown-item:focus {
    background: var(--ce-rose);
    color: #fff;
}
/* rubrique courante dans le sous-menu : rose pâle au lieu du bleu Bootstrap */
nav#nav .dropdown-item.active,
nav#nav .dropdown-item:active {
    background: rgba(219, 23, 98, .12);
    color: var(--ce-rose-fonce);
    font-weight: 600;
}
nav#nav .dropdown-item.active:hover,
nav#nav .dropdown-item.active:focus {
    background: var(--ce-rose);
    color: #fff;
}

/* ---------- Menu sur téléphone (sous 576px : menu « hamburger ») ---------- */
@media (max-width: 575.98px) {
    nav#nav { z-index: 20; }

    /* bouton hamburger : cible tactile de 44px */
    nav#nav .navbar-toggler {
        width: 44px;
        height: 44px;
        background: var(--ce-creme);
        border: 1px solid var(--ce-filet);
        border-radius: .6rem;
        box-shadow: var(--ce-ombre);
    }

    /* panneau du menu ouvert : carte crème opaque, lisible sur le contenu */
    #navbarToggler.collapse.show,
    #navbarToggler.collapsing {
        background: var(--ce-creme);
        border: 1px solid var(--ce-filet);
        border-radius: .75rem;
        box-shadow: var(--ce-ombre);
        padding: .3rem 1rem;
        margin-top: .5rem;
    }
    nav#nav .navbar-nav { gap: 0; }
    nav#nav ul li > a,
    nav#nav ul li > a:hover,
    nav#nav ul li > a:focus {
        display: flex;
        align-items: center;
        min-height: 48px;
        padding: .5rem 0 !important;
        font-size: 1.35rem;
        text-shadow: none;
        border-bottom: 1px solid var(--ce-filet) !important;
    }
    nav#nav ul li.last > a:not(.show) { border-bottom: 0 !important; }
    nav#nav ul li > a.show { color: var(--ce-rose) !important; border-bottom-color: var(--ce-filet) !important; }

    /* sous-menu : intégré au panneau, éléments de 44px */
    nav#nav div.dropdown-menu {
        position: static;
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: .2rem 0 .4rem .6rem;
        margin: 0;
    }
    nav#nav .dropdown-item { min-height: 44px; display: flex; align-items: center; font-size: 1.15rem; }

    /* bouton « Naviguer » refermé : pastille compacte, boussole seule */
    #slidediv_container:not(.slidediv-opened) #slidediv-btn {
        width: 38px;
        height: 38px;
        margin-left: -48px;
        margin-top: 4px;
        padding: 4px;
        line-height: 30px;
        border-radius: .6rem;
        overflow: hidden;
        white-space: nowrap;
    }
    #slidediv_container:not(.slidediv-opened) #slidediv-btn span,
    #slidediv_container:not(.slidediv-opened) #slidediv-btn img.doubleFleche { display: none; }
    #slidediv_container:not(.slidediv-opened) #slidediv-btn img.compass { width: 30px; height: 30px; vertical-align: top; }
}

/* Le panneau « Naviguer » ouvert passe au-dessus du menu (et du bouton hamburger) */
#slidediv_container { z-index: 1050; }

/* ---------- Titres d'article : plus grands, police moderne ---------- */
main .artTitre {
    font-family: "Outfit", system-ui, sans-serif;
    font-weight: 600;
    font-size: 2.3rem;
    line-height: 1.1;
    letter-spacing: -.01em;
    margin-bottom: .2em;
}
@media (max-width: 576px) {
    main .artTitre { font-size: 1.8rem; }
}

/* ---------- 2. Zone de contenu : à la place du grand cadre ombré,
   un liseré beige très léger, un voile crème et une ombre à peine visible ---------- */
.pageContent {
    border: 1px solid rgba(217, 209, 180, .45);
    border-radius: 16px;
    background: rgba(255, 253, 247, .25);
    box-shadow: none;
}

/* ---------- 3. Tirages photo : ombre douce + inclinaison ---------- */
/* Le cadre blanc est dessiné par le plugin PhotoSwipe Diaporama sur le <a> */
.pswd-conteneur { --pswd-liseret: 0px; --pswd-papier: #fff; }
.pswd-mosaique a { box-shadow: var(--ce-ombre); }
.pswd-mosaique li { transition: transform .25s ease; }
.pswd-mosaique li:nth-child(4n+1) { transform: rotate(-1.4deg); }
.pswd-mosaique li:nth-child(4n+2) { transform: rotate(.9deg); }
.pswd-mosaique li:nth-child(4n+3) { transform: rotate(-.5deg); }
.pswd-mosaique li:nth-child(4n)   { transform: rotate(1.3deg); }
.pswd-mosaique li:hover { transform: rotate(0) scale(1.03); position: relative; z-index: 2; }

/* ---------- 4. Bouton « Naviguer » au rose Croque ---------- */
#slidediv-btn { background: var(--ce-rose); }

/* Police Outfit dans le bouton et tout son panneau de navigation */
#slidediv_container,
#slidediv_container input,
#slidediv_container button {
    font-family: "Outfit", system-ui, sans-serif;
}
#slidediv-btn { font-weight: 600; letter-spacing: .03em; font-size: 15px; }
#slidediv-content { font-size: 1rem; }
/* En-têtes du panneau (Chemin, Derniers articles…) : bien distincts des lignes */
#slidediv-content > div.titreListe {
    background: #FBE4EA;          /* rose très pâle, opaque (le panneau flotte au-dessus de la page) */
    color: var(--ce-rose-fonce);
    font-weight: 700;
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    text-align: left;
    padding: .65rem 1rem .55rem;
    border-bottom: 3px solid var(--ce-rose);
}
#slidediv-content .itemListe { padding: 8px 6px; }
#slidediv-content .itemListeInfo { font-size: .8rem; }
#slidediv-content .itemListeTitre { font-size: 1.1rem; font-weight: 500; line-height: 1.3; }
#slidediv-content .searchbox-input { font-size: 1rem; }

/* ==========================================================
   6. Pages rubrique (Carnets de route, Photos…) et page de recherche
   ========================================================== */

/* Bandeau « Les articles de … » : plus de bloc bleu, un titre souligné d'un filet rose */
:is(.page_rubrique, .page_recherche) h1.titreRA {
    background: transparent;
    color: var(--ce-encre);
    font-family: "Outfit", system-ui, sans-serif;
    font-size: 1.35rem;
    font-weight: 600;
    text-align: left;
    padding: .2em 0 .35em;
    margin: 0 1rem .4rem;
    border-radius: 0;
    border-bottom: 2px solid var(--ce-rose);
}
@media (max-width: 576px) {
    :is(.page_rubrique, .page_recherche) h1.titreRA { font-size: 1.15rem; margin: 0 .6rem .4rem; }
}

/* Pagination : pastilles rondes, page courante en rose Croque */
:is(.page_rubrique, .page_recherche) .pagination { display: block; font-family: "Outfit", system-ui, sans-serif; margin: .9rem 0 .4rem; }
:is(.page_rubrique, .page_recherche) .pagination-items { display: flex; flex-wrap: nowrap; width: auto; max-width: none; gap: .3rem; margin: 0; padding: 0 0 0 1rem; overflow-x: auto; }
:is(.page_rubrique, .page_recherche) .pagination-item { width: auto; float: none; }
:is(.page_rubrique, .page_recherche) .pagination-item-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    height: 2.1rem;
    padding: 0 .5rem;
    border-radius: 999px;
    font-size: 1rem;
    color: var(--ce-encre);
}
:is(.page_rubrique, .page_recherche) a.pagination-item-label { background: transparent; }
:is(.page_rubrique, .page_recherche) a.pagination-item-label:hover { background: rgba(219, 23, 98, .1); color: var(--ce-rose); }
:is(.page_rubrique, .page_recherche) .pagination .on .pagination-item-label.on {
    background: var(--ce-rose);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    padding: 0 .5rem;
}
:is(.page_rubrique, .page_recherche) .pagination-item.prev .pagination-item-label,
:is(.page_rubrique, .page_recherche) .pagination-item.next .pagination-item-label { font-size: 1rem; }
:is(.page_rubrique, .page_recherche) .pagination-item.disabled .pagination-item-label { color: #b5ab97; background: transparent; }

/* Chaque article de la liste */
:is(.page_rubrique, .page_recherche) .itemRA { padding: 1.4rem 1rem 1.2rem; transition: background-color .2s; }

:is(.page_rubrique, .page_recherche) .RAtitre {
    font-family: "Outfit", system-ui, sans-serif;
    font-size: 1.65rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.01em;
    margin-bottom: .2rem;
}
:is(.page_rubrique, .page_recherche) .RAtitre a,
:is(.page_rubrique, .page_recherche) .RAtitre a:visited { color: var(--ce-encre) !important; }
:is(.page_rubrique, .page_recherche) .RAtitre a:hover,
:is(.page_rubrique, .page_recherche) .RAtitre a:focus { color: var(--ce-rose) !important; }

:is(.page_rubrique, .page_recherche) .RAsoustitre { font-size: .85rem; color: #5a4f45; }

/* Chapeau : un peu plus grand, aligné à gauche (évite les grands blancs) */
:is(.page_rubrique, .page_recherche) .RAintro {
    font-size: .98rem;
    line-height: 1.6;
    text-align: left;
    color: #3a322c;
    margin: .8rem 0 .9rem;
}
:is(.page_rubrique, .page_recherche) main #articles li.itemRA { text-align: left !important; }

:is(.page_rubrique, .page_recherche) .RAcredits { font-size: .82rem; color: #6B5F55; }

/* « Lire la suite » : pilule rose, comme le bouton Naviguer */
:is(.page_rubrique, .page_recherche) .btnLireSuite,
:is(.page_rubrique, .page_recherche) .btnLireSuite:visited {
    width: auto;
    height: auto;
    margin-top: -.3rem;
    padding: .45rem 1.2rem;
    line-height: 1.3;
    background: var(--ce-rose);
    color: #fff !important;
    border-radius: 999px;
    box-shadow: var(--ce-ombre);
    font-family: "Outfit", system-ui, sans-serif;
    font-size: .95rem;
    font-weight: 600;
    transition: background-color .2s, transform .2s;
}
:is(.page_rubrique, .page_recherche) .btnLireSuite:hover,
:is(.page_rubrique, .page_recherche) .btnLireSuite:focus {
    background: var(--ce-rose-fonce) !important;
    color: #fff !important;
    transform: translateX(2px);
}

@media (max-width: 576px) {
    :is(.page_rubrique, .page_recherche) .RAtitre { font-size: 1.35rem; }
    :is(.page_rubrique, .page_recherche) .itemRA { padding: 1.1rem .6rem 1rem; }
    :is(.page_rubrique, .page_recherche) .pagination-item-label { min-width: 2.4rem; height: 2.4rem; }
}

/* ---------- 7. Recherche sans résultat : le rouge passe au rose Croque ---------- */
.rechercheVide-titre strong { color: var(--ce-rose); }

.rechercheVide-form button { background: var(--ce-rose); }
.rechercheVide-form button:hover,
.rechercheVide-form button:focus-visible { background: var(--ce-rose-fonce); }

#articles .rechercheVide-derniers a,
#articles .rechercheVide-derniers a:link,
#articles .rechercheVide-derniers a:visited { color: var(--ce-rose) !important; }
#articles .rechercheVide-derniers a:hover,
#articles .rechercheVide-derniers a:focus,
#articles .rechercheVide-derniers a:active {
    color: #fff !important;
    background: var(--ce-rose) !important;
}

/* le petit visage de la loupe */
.rechercheVide-picto path { stroke: var(--ce-rose); }
.rechercheVide-picto circle[r="2.2"] { fill: var(--ce-rose); }

/* ==========================================================
   8. Fiches recettes (articles du secteur Recettes)
   Repérées par leurs blocs #caseHG / #caseHD / #caseBG / #caseBD
   ========================================================== */

/* Mise en page en deux colonnes (flexbox) au lieu des flottants.
   Le chapeau est du texte brut dans .contenu : en flexbox il garde toute la largeur. */
.contenu:has(#caseBG) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.6rem 2.2rem;
    margin-top: .5rem;
}
.contenu:where(:has(#caseBG)) > * { flex: 1 1 100%; }
.contenu:where(:has(#caseBG)) > br,
.contenu:where(:has(#caseBG)) > .clearfix,
.contenu:where(:has(#caseBG)) > p:empty,
.contenu:where(:has(#caseBG)) > p:not(:has(:not(br))),  /* paragraphe vide fait de <br> */
.contenu:where(:has(#caseBG)) > div:empty { display: none; }
#caseHG, #caseHD, #caseBG, #caseBD { float: none; width: auto; }
#caseHG { flex: 0 0 calc(42% - 1.1rem); align-self: center; }
#caseHD { flex: 1 1 calc(58% - 1.1rem); }
#caseBG { flex: 0 0 calc(40% - 1.1rem); }
#caseBD { flex: 1 1 calc(60% - 1.1rem); }

/* Infos pratiques : personnes + temps en pastilles */
#caseHG {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    font-family: "Outfit", system-ui, sans-serif;
}
#caseHG > span {
    align-self: flex-start;
    background: var(--ce-rose);
    color: #fff;
    font-weight: 600;
    font-size: 1.05rem;
    padding: .35rem 1rem;
    border-radius: 999px;
}
#caseHG > div:empty { display: none; }
#caseHG p { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
#caseHG p br { display: none; }
#caseHG p span {
    background: var(--ce-creme);
    border: 1px solid var(--ce-filet);
    border-radius: 999px;
    padding: .3rem .9rem;
    font-size: .95rem;
    color: var(--ce-encre);
}

/* Photo du plat */
#caseHD img { border-radius: 14px; }

/* Ingrédients : carte crème qui reste visible pendant qu'on lit la préparation */
#caseBG {
    position: sticky;
    top: 1rem;
    background: var(--ce-creme);
    border: 1px solid var(--ce-filet);
    border-radius: 14px;
    box-shadow: var(--ce-ombre);
    padding: 1.2rem 1.4rem 1rem;
}
#caseBG::before,
#caseBD::before {
    display: block;
    font-family: "Outfit", system-ui, sans-serif;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--ce-encre);
    padding-bottom: .3rem;
    margin-bottom: .8rem;
    border-bottom: 2px solid var(--ce-rose);
}
#caseBG::before { content: "Ingrédients"; }
/* même retrait en haut que la carte Ingrédients (padding + bordure) :
   les deux titres tombent sur la même ligne */
#caseBD { padding-top: calc(1.2rem + 1px); }
#caseBD::before { content: "Préparation"; }

#caseBG p {
    font-family: "Outfit", system-ui, sans-serif;
    font-weight: 600;
    margin: .9rem 0 .3rem;
}
.page_article #caseBG ul,
.page_recette .pageContent #caseBG ul { list-style: none; padding-left: 0; margin: 0; }
#caseBG li {
    position: relative;
    padding: .28rem 0 .28rem 1.1rem;
    border-bottom: 1px dashed #e6dfc8;
    line-height: 1.4;
    text-align: left !important;
}
#caseBG li:last-child { border-bottom: 0; }
#caseBG li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .85em;
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--ce-rose);
}

/* Préparation : étapes numérotées en pastilles */
#caseBD .gras.centre {
    text-align: left;
    font-family: "Outfit", system-ui, sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--ce-rose-fonce);
    margin: 1.2rem 0 .6rem;
}
#caseBD > .gras.centre:first-child { margin-top: 0; }
.noItemRecette {
    float: left;
    width: 2rem;
    height: 2rem;
    margin: 0 .9rem .6rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ce-rose);
    color: #fff;
    font-family: "Outfit", system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 600;
}
.itemRecette {
    float: none;
    width: auto;
    overflow: hidden;
    text-align: left;
    line-height: 1.6;
    padding-top: .15rem;
    margin-bottom: .9rem;
}

/* Photos en bas de recette : tirages encadrés et inclinés, comme le portfolio */
.contenu:has(#caseBG) .photogrid { gap: 1.2rem; padding-top: 1rem; }
.contenu:has(#caseBG) .photogrid .spip_documents { margin: 0; }
.contenu:has(#caseBG) .photogrid img {
    background: #fff;
    padding: 8px;
    box-shadow: var(--ce-ombre);
    transition: transform .25s ease;
}
.contenu:has(#caseBG) .photogrid > :nth-child(4n+1) img { transform: rotate(-1.4deg); }
.contenu:has(#caseBG) .photogrid > :nth-child(4n+2) img { transform: rotate(.9deg); }
.contenu:has(#caseBG) .photogrid > :nth-child(4n+3) img { transform: rotate(-.5deg); }
.contenu:has(#caseBG) .photogrid > :nth-child(4n)   img { transform: rotate(1.3deg); }
.contenu:has(#caseBG) .photogrid a:hover img { transform: rotate(0) scale(1.03); }

/* Téléphone : tout en une colonne, ingrédients non collants */
@media (max-width: 767.98px) {
    #caseHG, #caseHD, #caseBG, #caseBD { flex: 1 1 100%; }
    #caseBG { position: static; }
}

/* ---------- 5. Remontée vers le haut sans démarrage lent ----------
   Bootstrap 5 met « scroll-behavior: smooth » sur :root ; il se cumule
   avec l'animation jQuery des ancres douces du Couteau Suisse. */
:root { scroll-behavior: auto !important; }