/* ==========================================================
   BERNARD V0.4
   Disposition inspirée des moteurs de recherche actuels
   ========================================================== */


@font-face {

    font-family: "Bernard";

    src:
        url("/assets/fonts/Comfortaa-Regular.ttf")
        format("truetype");

    font-weight: 400;

    font-display: swap;

}


@font-face {

    font-family: "Bernard";

    src:
        url("/assets/fonts/Comfortaa-Bold.ttf")
        format("truetype");

    font-weight: 700;

    font-display: swap;

}


:root {

    --violet: #7a34ff;

    --navy: #071c3d;

    --red: #ef302f;

    --lavender: #f1ebff;

    --white: #ffffff;

}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    min-height: 100vh;

    background:
        var(--violet);

    color:
        var(--navy);

    font-family:
        "Bernard",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

}


button,
input {

    font-family: inherit;

}


/* ==========================================================
   CONTENEUR
   ========================================================== */

main {

    width:
        min(1100px, calc(100% - 40px));

    margin:
        0 auto;

}



/* ==========================================================
   ACCUEIL
   ========================================================== */

.home-stage {

    min-height: 540px;

    padding-top: 90px;

    display: flex;

    flex-direction: column;

    align-items: center;

}


/* ----------------------------------------------------------
   LOGO + TITRE
   ---------------------------------------------------------- */

.brand-lockup {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 28px;

}


/* Le logo reste important,
   mais ne domine plus toute la page */

.brand-logo {

    width: 180px;

    height: 180px;

    flex:
        0 0 180px;

    border-radius: 42%;

    overflow: hidden;

    background:
        transparent;

}


.brand-logo img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: contain;

    border-radius: 42%;

}


/* ----------------------------------------------------------
   NOM BERNARD
   ---------------------------------------------------------- */

.brand-copy h1 {

    margin: 0;

    color: white;

    font-size:
        clamp(4rem, 7vw, 6rem);

    line-height: .95;

    letter-spacing:
        -.045em;

    font-weight: 700;

}


.brand-copy p {

    max-width: 470px;

    margin:
        15px 0
        0;

    color:
        rgba(255,255,255,.88);

    font-size: 1rem;

    line-height: 1.45;

}



/* ==========================================================
   GRANDE BARRE
   ========================================================== */

.search-form {

    display: flex;

    align-items: center;

    width: 100%;

    padding: 7px;

    background: white;

    border-radius: 999px;

    box-shadow:
        0 12px 32px
        rgba(7,28,61,.13);

}


.home-search {

    width:
        min(850px, 100%);

    margin-top: 34px;

}


.search-glass {

    position: relative;

    width: 48px;

    height: 58px;

    flex:
        0 0 48px;

}


.search-glass::before {

    content: "";

    position: absolute;

    width: 16px;

    height: 16px;

    left: 14px;

    top: 17px;

    border:
        3px solid #747783;

    border-radius: 50%;

}


.search-glass::after {

    content: "";

    position: absolute;

    width: 10px;

    height: 3px;

    left: 29px;

    top: 33px;

    background:
        #747783;

    border-radius: 99px;

    transform:
        rotate(45deg);

}


.search-form input {

    flex: 1;

    min-width: 0;

    height: 60px;

    padding:
        0 12px;

    border: 0;

    outline: 0;

    background: transparent;

    color:
        var(--navy);

    font-size: 1.05rem;

}


.search-form input::placeholder {

    color:
        #777984;

}


.search-form button {

    height: 58px;

    min-width: 150px;

    padding:
        0 25px;

    border: 0;

    border-radius: 999px;

    background:
        var(--red);

    color:
        white;

    font-size: .96rem;

    font-weight: 700;

    cursor: pointer;

}


.search-form button:hover {

    filter:
        brightness(.95);

}



/* ==========================================================
   RESPIRATION AVANT LES INFOS
   ========================================================== */

.features {

    margin-top: 85px;

    margin-bottom: 80px;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 22px;

}



/* ==========================================================
   CARTES
   ========================================================== */

.feature-card {

    min-width: 0;

    height: 210px;

    padding:
        15px 14px
        18px;

    display: grid;

    grid-template-rows:
        92px
        34px
        1fr;

    align-items: center;

    background:
        rgba(248,245,255,.94);

    border-radius: 24px;

    text-align: center;

    box-shadow:
        0 9px 22px
        rgba(7,28,61,.08);

}


.feature-card img {

    width: 92px;

    height: 92px;

    margin:
        0 auto;

    display: block;

    object-fit: cover;

    border-radius: 26px;

}


.feature-card h2 {

    margin: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    color:
        var(--navy);

    font-size: .98rem;

    line-height: 1.1;

    font-weight: 700;

}


.feature-card p {

    margin: 5px auto 0;

    max-width: 190px;

    color:
        #354056;

    font-size: .78rem;

    line-height: 1.35;

}



/* ==========================================================
   RESULTATS
   ========================================================== */

.results-toolbar {

    display: none;

    min-height: 110px;

    align-items: center;

    gap: 30px;

}


.results-brand {

    display: flex;

    align-items: center;

    gap: 11px;

    color: white;

    text-decoration: none;

}


.results-brand img {

    width: 56px;

    height: 56px;

    object-fit: cover;

    border-radius: 18px;

}


.results-brand strong {

    font-size: 1.45rem;

}


.compact-search {

    flex: 1;

}


.results {

    margin-bottom: 60px;

    padding:
        32px 38px;

    background:
        #f4f0ff;

    border-radius: 28px;

}


.results-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 25px;

    padding-bottom: 23px;

    border-bottom:
        1px solid
        rgba(7,28,61,.12);

}


.results-label {

    display: block;

    margin-bottom: 7px;

    color:
        var(--violet);

    font-size: .72rem;

    font-weight: 700;

    letter-spacing: .15em;

}


.results-header h2 {

    margin: 0;

    font-size:
        clamp(1.6rem, 3vw, 2.15rem);

}


.results-time {

    margin: 0;

    color: #767786;

    font-size: .85rem;

}


.result {

    padding:
        23px 0;

    border-bottom:
        1px solid
        rgba(7,28,61,.11);

}


.result:last-child {
    border-bottom: 0;
}


.result-title {

    margin:
        0 0
        6px;

    font-size: 1.18rem;

}


.result-title a {

    color:
        #5830ba;

    text-decoration: none;

}


.result-title a:hover {
    text-decoration: underline;
}


.result-url {

    margin:
        0 0
        8px;

    color:
        var(--red);

    font-size: .82rem;

    overflow-wrap: anywhere;

}


.result-description {

    max-width: 880px;

    margin: 0;

    color:
        #303848;

    font-size: .94rem;

    line-height: 1.5;

}


.no-results {

    margin: 0;

    padding:
        30px 0;

}



/* Quand on effectue une recherche */

body.results-mode .home-stage,
body.results-mode .features {

    display: none;

}


body.results-mode .results-toolbar {

    display: flex;

}



/* ==========================================================
   FOOTER
   ========================================================== */

footer {

    width:
        min(1100px, calc(100% - 40px));

    min-height: 105px;

    margin:
        0 auto;

    display: grid;

    grid-template-columns:
        1fr auto auto;

    align-items: center;

    gap: 30px;

    border-top:
        1px solid
        rgba(255,255,255,.20);

    color:
        white;

}


.footer-name strong {

    display: block;

    font-size: 1rem;

}


.footer-name span,
.footer-sortie {

    color:
        rgba(255,255,255,.56);

    font-size: .78rem;

}


footer nav {

    display: flex;

    gap: 20px;

}


footer nav a {

    color:
        rgba(255,255,255,.78);

    font-size: .80rem;

    text-decoration: none;

}


.footer-sortie {
    white-space: nowrap;
}



/* ==========================================================
   ACCESSIBILITE
   ========================================================== */

.sr-only {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip:
        rect(0,0,0,0);

    white-space: nowrap;

    border: 0;

}



/* ==========================================================
   TABLETTE
   ========================================================== */

@media (max-width: 850px) {

    .brand-logo {

        width: 145px;

        height: 145px;

        flex-basis: 145px;

    }


    .brand-copy h1 {

        font-size:
            clamp(3.4rem, 10vw, 5rem);

    }


    .features {

        grid-template-columns:
            repeat(2, 1fr);

    }

}



/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 580px) {

    main,
    footer {

        width:
            min(100% - 28px, 1100px);

    }


    .home-stage {

        min-height: auto;

        padding-top: 42px;

    }


    .brand-lockup {

        flex-direction: column;

        gap: 12px;

        text-align: center;

    }


    .brand-logo {

        width: 150px;

        height: 150px;

        flex-basis: 150px;

    }


    .brand-copy h1 {

        font-size: 3.7rem;

    }


    .brand-copy p {

        max-width: 340px;

        margin-left: auto;

        margin-right: auto;

        font-size: .94rem;

    }


    .home-search {

        margin-top: 25px;

    }


    .search-glass {

        display: none;

    }


    .search-form {

        padding: 5px;

        border-radius: 20px;

    }


    .search-form input {

        height: 54px;

        padding:
            0 13px;

        font-size: .92rem;

    }


    .search-form button {

        height: 52px;

        min-width: 104px;

        padding:
            0 13px;

        border-radius: 16px;

        font-size: .82rem;

    }


    .features {

        margin-top: 60px;

        grid-template-columns: 1fr;

        gap: 15px;

    }


    .feature-card {

        width: min(100%, 330px);

        height: 200px;

        margin:
            0 auto;

    }


    .results-toolbar {

        display: none;

        padding:
            18px 0;

    }


    body.results-mode
    .results-toolbar {

        display: block;

    }


    .results-brand {

        margin-bottom: 15px;

    }


    .results {

        padding:
            24px 20px;

        border-radius: 22px;

    }


    .results-header {

        display: block;

    }


    .results-time {

        margin-top: 9px;

    }


    footer {

        grid-template-columns: 1fr;

        gap: 14px;

        padding:
            28px 0;

        text-align: center;

    }


    footer nav {

        justify-content: center;

        flex-wrap: wrap;

    }

}


/* ===== BERNARD TYPO V041 START ===== */


/* ==========================================================
   1. POLICES LOCALES
   ========================================================== */

@font-face {

    font-family: "BernardBricolage";

    src:
        url("/assets/fonts/BricolageGrotesque.ttf")
        format("truetype");

    font-style: normal;

    font-weight: 200 800;

    font-display: swap;

}


@font-face {

    font-family: "BernardAtkinson";

    src:
        url("/assets/fonts/Atkinson-Regular.woff2")
        format("woff2");

    font-style: normal;

    font-weight: 400;

    font-display: swap;

}


@font-face {

    font-family: "BernardAtkinson";

    src:
        url("/assets/fonts/Atkinson-Bold.woff2")
        format("woff2");

    font-style: normal;

    font-weight: 700;

    font-display: swap;

}



/* ==========================================================
   2. INTERFACE = ATKINSON
   Très lisible, sobre, humain.
   ========================================================== */

html,
body,
input,
button,
textarea,
select,
.result-description,
.result-url,
.results-time,
footer,
footer a {

    font-family:
        "BernardAtkinson",
        "DejaVu Sans",
        sans-serif !important;

}



/* ==========================================================
   3. IDENTITE = BRICOLAGE GROTESQUE
   ========================================================== */

.brand-copy h1,
.feature-card h2,
.results-brand strong,
.results-header h2,
.result-title {

    font-family:
        "BernardBricolage",
        "BernardAtkinson",
        "DejaVu Sans",
        sans-serif !important;

}



/* ==========================================================
   4. MARQUE PRINCIPALE
   + environ 12 %
   ========================================================== */

.brand-logo {

    width: 202px !important;

    height: 202px !important;

    flex:
        0 0 202px !important;

    border-radius:
        46% !important;

}


.brand-logo img {

    width: 100% !important;

    height: 100% !important;

    object-fit: contain !important;

    border-radius:
        46% !important;

}


.brand-lockup {

    gap: 31px !important;

}


.brand-copy h1 {

    font-size:
        clamp(
            4.45rem,
            7.4vw,
            6.55rem
        ) !important;

    line-height:
        .92 !important;

    font-weight:
        720 !important;

    letter-spacing:
        -.055em !important;

}



/* ==========================================================
   5. SLOGAN
   Plus lisible et plus propre
   ========================================================== */

.brand-copy p {

    max-width:
        530px !important;

    margin:
        17px 0
        0 !important;

    color:
        rgba(
            255,
            255,
            255,
            .92
        ) !important;

    font-family:
        "BernardAtkinson",
        "DejaVu Sans",
        sans-serif !important;

    font-size:
        1.07rem !important;

    line-height:
        1.42 !important;

    font-weight:
        400 !important;

    letter-spacing:
        .005em !important;

}



/* ==========================================================
   6. BARRE DE RECHERCHE
   Typo d'interface, très lisible
   ========================================================== */

.search-form input {

    font-family:
        "BernardAtkinson",
        "DejaVu Sans",
        sans-serif !important;

    font-size:
        1.08rem !important;

    font-weight:
        400 !important;

}


.search-form button {

    font-family:
        "BernardAtkinson",
        "DejaVu Sans",
        sans-serif !important;

    font-weight:
        700 !important;

}



/* ==========================================================
   7. CARTES
   Dimensions inchangées.
   Elles remontent légèrement.
   ========================================================== */

.features {

    margin-top:
        65px !important;

}



/* Les images ne changent PAS de taille */

.feature-card img {

    width:
        92px !important;

    height:
        92px !important;

    border-radius:
        26px !important;

}



/* Titres plus présents */

.feature-card h2 {

    font-size:
        1.04rem !important;

    line-height:
        1.08 !important;

    font-weight:
        680 !important;

    letter-spacing:
        -.025em !important;

}



/* Descriptions plus lisibles
   sans agrandir les cartes */

.feature-card p {

    max-width:
        198px !important;

    margin:
        6px auto
        0 !important;

    font-family:
        "BernardAtkinson",
        "DejaVu Sans",
        sans-serif !important;

    font-size:
        .84rem !important;

    line-height:
        1.28 !important;

    font-weight:
        400 !important;

}



/* ==========================================================
   8. RESULTATS
   ========================================================== */

.results-brand strong {

    font-weight:
        680 !important;

}


.results-header h2 {

    font-weight:
        680 !important;

}


.result-title {

    font-weight:
        650 !important;

}


.result-description {

    font-size:
        .97rem !important;

    line-height:
        1.52 !important;

}



/* ==========================================================
   9. FOOTER
   ========================================================== */

footer {

    font-family:
        "BernardAtkinson",
        "DejaVu Sans",
        sans-serif !important;

}



/* ==========================================================
   10. MOBILE
   ========================================================== */

@media (max-width: 580px) {

    .brand-logo {

        width:
            165px !important;

        height:
            165px !important;

        flex-basis:
            165px !important;

    }


    .brand-copy h1 {

        font-size:
            4rem !important;

    }


    .brand-copy p {

        max-width:
            350px !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;

        font-size:
            1rem !important;

    }


    .features {

        margin-top:
            55px !important;

    }


    .feature-card h2 {

        font-size:
            1.05rem !important;

    }


    .feature-card p {

        font-size:
            .86rem !important;

    }

}


/* ===== BERNARD TYPO V041 END ===== */


/* ===== BERNARD FINETUNE V042 START ===== */


/* ==========================================================
   BERNARD V0.4.2

   On conserve la disposition actuelle :
   MARQUE
   BARRE DE RECHERCHE
   RESPIRATION
   4 CARTES

   On améliore uniquement les proportions.
   ========================================================== */


/* ----------------------------------------------------------
   1. HAUT DE PAGE

   On réduit légèrement la hauteur artificielle de la zone
   pour rapprocher les cartes sans les coller à la recherche.
   ---------------------------------------------------------- */

.home-stage {

    min-height: 490px !important;

    padding-top: 72px !important;

}



/* ----------------------------------------------------------
   2. MARQUE BERNARD

   Le chat + le mot Bernard prennent environ 12 % de présence
   supplémentaire.
   ---------------------------------------------------------- */

.brand-logo {

    width: 226px !important;

    height: 226px !important;

    flex:
        0 0 226px !important;

    border-radius:
        48% !important;

    overflow: hidden !important;

}


.brand-logo img {

    width: 100% !important;

    height: 100% !important;

    object-fit: contain !important;

    border-radius:
        48% !important;

}


.brand-lockup {

    gap: 34px !important;

}



/* ----------------------------------------------------------
   3. TITRE BERNARD

   Bricolage reste l'identité forte.
   ---------------------------------------------------------- */

.brand-copy h1 {

    font-family:
        "BernardBricolage",
        "BernardAtkinson",
        "DejaVu Sans",
        sans-serif !important;

    font-size:
        clamp(
            4.9rem,
            7.8vw,
            6.9rem
        ) !important;

    line-height:
        .91 !important;

    font-weight:
        760 !important;

    letter-spacing:
        -.06em !important;

}



/* ----------------------------------------------------------
   4. SLOGAN

   Plus lisible, plus présent, sans concurrencer Bernard.
   ---------------------------------------------------------- */

.brand-copy p {

    max-width:
        560px !important;

    margin:
        18px 0
        0 !important;

    font-family:
        "BernardAtkinson",
        "DejaVu Sans",
        sans-serif !important;

    font-size:
        1.13rem !important;

    line-height:
        1.42 !important;

    font-weight:
        400 !important;

    color:
        rgba(
            255,
            255,
            255,
            .94
        ) !important;

}



/* ----------------------------------------------------------
   5. BARRE DE RECHERCHE

   On garde sa largeur actuelle.
   Elle est devenue la bonne référence visuelle.
   ---------------------------------------------------------- */

.home-search {

    margin-top:
        30px !important;

}


.search-form input {

    font-family:
        "BernardAtkinson",
        "DejaVu Sans",
        sans-serif !important;

    font-size:
        1.10rem !important;

}


.search-form button {

    font-family:
        "BernardAtkinson",
        "DejaVu Sans",
        sans-serif !important;

    font-weight:
        700 !important;

}



/* ----------------------------------------------------------
   6. ESPACE AVANT LES 4 CARTES

   Avant : trop de vide.
   Maintenant : respiration nette mais maîtrisée.
   ---------------------------------------------------------- */

.features {

    margin-top:
        38px !important;

    margin-bottom:
        72px !important;

}



/* ----------------------------------------------------------
   7. CARTES

   Dimensions extérieures conservées.
   ---------------------------------------------------------- */

.feature-card {

    height:
        210px !important;

    min-height:
        210px !important;

    padding:
        13px 14px
        16px !important;

    grid-template-rows:
        106px
        38px
        1fr !important;

}



/* ----------------------------------------------------------
   8. CHATS DES CARTES

   On les agrandit à l'intérieur sans agrandir la carte.
   ---------------------------------------------------------- */

.feature-card img {

    width:
        106px !important;

    height:
        106px !important;

    margin:
        0 auto !important;

    object-fit:
        cover !important;

    border-radius:
        29px !important;

}



/* ----------------------------------------------------------
   9. TITRES DES CARTES

   Plus faciles à lire.
   ---------------------------------------------------------- */

.feature-card h2 {

    min-height:
        38px !important;

    margin:
        0 !important;

    padding:
        2px 3px !important;

    display: flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    font-family:
        "BernardBricolage",
        "BernardAtkinson",
        "DejaVu Sans",
        sans-serif !important;

    font-size:
        1.08rem !important;

    line-height:
        1.08 !important;

    font-weight:
        690 !important;

    letter-spacing:
        -.025em !important;

}



/* ----------------------------------------------------------
   10. DESCRIPTIONS DES CARTES

   On augmente la lisibilité mais on garde un bloc compact.
   ---------------------------------------------------------- */

.feature-card p {

    width: 100% !important;

    max-width:
        205px !important;

    margin:
        5px auto
        0 !important;

    padding:
        0 2px !important;

    font-family:
        "BernardAtkinson",
        "DejaVu Sans",
        sans-serif !important;

    font-size:
        .86rem !important;

    line-height:
        1.25 !important;

    font-weight:
        400 !important;

    overflow-wrap:
        normal !important;

    word-break:
        normal !important;

}



/* ----------------------------------------------------------
   11. FOOTER

   Toujours secondaire, mais plus fantôme.
   ---------------------------------------------------------- */

footer {

    color:
        rgba(
            255,
            255,
            255,
            .88
        ) !important;

}


.footer-name span,
.footer-sortie {

    color:
        rgba(
            255,
            255,
            255,
            .68
        ) !important;

}


footer nav a {

    color:
        rgba(
            255,
            255,
            255,
            .82
        ) !important;

}



/* ----------------------------------------------------------
   12. TABLETTE
   ---------------------------------------------------------- */

@media (max-width: 850px) {

    .brand-logo {

        width:
            175px !important;

        height:
            175px !important;

        flex-basis:
            175px !important;

    }


    .brand-copy h1 {

        font-size:
            clamp(
                4rem,
                10vw,
                5.5rem
            ) !important;

    }


    .brand-copy p {

        font-size:
            1.05rem !important;

    }

}



/* ----------------------------------------------------------
   13. MOBILE
   ---------------------------------------------------------- */

@media (max-width: 580px) {

    .home-stage {

        padding-top:
            36px !important;

    }


    .brand-logo {

        width:
            175px !important;

        height:
            175px !important;

        flex-basis:
            175px !important;

    }


    .brand-copy h1 {

        font-size:
            4.2rem !important;

    }


    .brand-copy p {

        max-width:
            355px !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;

        font-size:
            1rem !important;

    }


    .features {

        margin-top:
            52px !important;

    }


    .feature-card {

        height:
            215px !important;

    }


    .feature-card img {

        width:
            110px !important;

        height:
            110px !important;

    }


    .feature-card h2 {

        font-size:
            1.10rem !important;

    }


    .feature-card p {

        max-width:
            250px !important;

        font-size:
            .90rem !important;

    }

}


/* ===== BERNARD FINETUNE V042 END ===== */



/* ===== BERNARD CARTES V044 START ===== */


/* ==========================================================
   ON NE TOUCHE PLUS AU HAUT.
   Uniquement respiration + quatre cartes.
   ========================================================== */


/* ----------------------------------------------------------
   ESPACE RECHERCHE -> CARTES

   Ni collé, ni immense trou vide.
   ---------------------------------------------------------- */

.features {

    margin-top: 62px !important;

    margin-bottom: 72px !important;

    max-width: 940px !important;

    margin-left: auto !important;

    margin-right: auto !important;

    display: grid !important;

    grid-template-columns:
        repeat(4, 205px) !important;

    justify-content: center !important;

    align-items: stretch !important;

    gap: 24px !important;

}


/* ----------------------------------------------------------
   CARTES

   Format intermédiaire :
   suffisamment présentes pour être lisibles,
   mais clairement secondaires à la recherche.
   ---------------------------------------------------------- */

.feature-card {

    width: 205px !important;

    height: 220px !important;

    min-height: 220px !important;

    padding:
        14px 14px
        17px !important;

    display: grid !important;

    grid-template-rows:
        104px
        40px
        1fr !important;

    gap: 4px !important;

    align-items: center !important;

    position: static !important;

    overflow: hidden !important;

    background:
        rgba(248, 245, 255, .96) !important;

    border-radius:
        26px !important;

    box-shadow:
        0 10px 24px
        rgba(7, 28, 61, .08) !important;

    text-align: center !important;

}


/* ----------------------------------------------------------
   CHATS

   Plus de position absolue.
   Plus de chat qui flotte hors de la carte.
   ---------------------------------------------------------- */

.feature-card img,
.feature-card > img:first-child {

    position: static !important;

    transform: none !important;

    display: block !important;

    width: 104px !important;

    height: 104px !important;

    margin:
        0 auto !important;

    object-fit:
        cover !important;

    object-position:
        center center !important;

    border-radius:
        27px !important;

    box-shadow:
        none !important;

}


/* Si un wrapper feature-picture existe encore */

.feature-picture {

    position: static !important;

    transform: none !important;

    width: 104px !important;

    height: 104px !important;

    margin:
        0 auto !important;

    overflow: hidden !important;

    border-radius:
        27px !important;

    box-shadow:
        none !important;

}


.feature-picture img {

    width: 104px !important;

    height: 104px !important;

    margin: 0 !important;

    border-radius:
        27px !important;

    object-fit:
        cover !important;

}


/* ----------------------------------------------------------
   TITRES

   Même zone pour les quatre.
   ---------------------------------------------------------- */

.feature-card h2 {

    width: 100% !important;

    min-height: 40px !important;

    max-width: 175px !important;

    margin:
        0 auto !important;

    padding: 0 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    font-family:
        "BernardBricolage",
        "BernardAtkinson",
        "DejaVu Sans",
        sans-serif !important;

    font-size:
        .97rem !important;

    line-height:
        1.08 !important;

    font-weight:
        700 !important;

    letter-spacing:
        -.018em !important;

}


/* ----------------------------------------------------------
   DESCRIPTIONS

   Pas de hauteur forcée qui fait déborder le texte.
   ---------------------------------------------------------- */

.feature-card p {

    width: 100% !important;

    max-width: 176px !important;

    min-height: 0 !important;

    margin:
        2px auto
        0 !important;

    padding: 0 !important;

    font-family:
        "BernardAtkinson",
        "DejaVu Sans",
        sans-serif !important;

    font-size:
        .77rem !important;

    line-height:
        1.27 !important;

    font-weight:
        400 !important;

    color:
        #303445 !important;

    overflow:
        visible !important;

    overflow-wrap:
        normal !important;

    word-break:
        normal !important;

}


/* ----------------------------------------------------------
   TABLETTE
   ---------------------------------------------------------- */

@media (max-width: 900px) {

    .features {

        grid-template-columns:
            repeat(2, 205px) !important;

        gap:
            22px !important;

    }

}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 520px) {

    .features {

        max-width:
            280px !important;

        grid-template-columns:
            1fr !important;

        gap:
            18px !important;

        margin-top:
            48px !important;

    }


    .feature-card {

        width:
            100% !important;

        height:
            215px !important;

    }

}


/* ===== BERNARD CARTES V044 END ===== */


/* ===== BERNARD RESULTS CLEAN V045 START ===== */


/* ==========================================================
   PAGE DE RESULTATS

   IMPORTANT :
   Les quatre cartes appartiennent uniquement à l'accueil.
   Certains anciens patches utilisaient display:grid!important,
   ce qui les faisait réapparaître pendant une recherche.
   ========================================================== */


body.results-mode .home-stage {

    display: none !important;

}


body.results-mode .features {

    display: none !important;

    visibility: hidden !important;

    margin: 0 !important;

    padding: 0 !important;

}


/* Barre compacte + résultats prennent directement leur place */

body.results-mode .results-toolbar {

    display: flex !important;

    padding-top: 42px !important;

    padding-bottom: 22px !important;

}


body.results-mode .results {

    margin-top: 0 !important;

}


/* Mobile */

@media (max-width: 580px) {

    body.results-mode .features {

        display: none !important;

    }


    body.results-mode .results-toolbar {

        display: block !important;

        padding-top: 22px !important;

    }

}


/* ===== BERNARD RESULTS CLEAN V045 END ===== */


/* ===== BERNARD POLISH V046 START ===== */


/* ==========================================================
   BERNARD V0.4.6
   FINITIONS UNIQUEMENT
   Aucun changement de structure.
   ========================================================== */


/* ----------------------------------------------------------
   1. BARRE DE RECHERCHE
   On conserve exactement ses dimensions.
   ---------------------------------------------------------- */

.search-form {
    border:
        1px solid
        rgba(7, 28, 61, .08) !important;

    box-shadow:
        0 10px 28px
        rgba(7, 28, 61, .11) !important;
}


.search-form input {
    color:
        #172039 !important;
}


.search-form input::placeholder {
    color:
        #777a86 !important;

    opacity:
        1 !important;
}


.search-form button {
    font-style:
        normal !important;

    transition:
        transform .15s ease,
        filter .15s ease !important;
}


.search-form button:hover {
    filter:
        brightness(.94) !important;

    transform:
        translateY(-1px);
}


.search-form button:active {
    transform:
        translateY(0);
}


/* Accessibilité clavier */

.search-form:focus-within {
    outline:
        3px solid
        rgba(255, 255, 255, .34);

    outline-offset:
        4px;
}



/* ----------------------------------------------------------
   2. LES 4 CARTES
   Même taille et même disposition.
   On enlève simplement l'effet "gros bloc blanc".
   ---------------------------------------------------------- */

.feature-card {
    background:
        rgba(243, 237, 255, .94) !important;

    border:
        1px solid
        rgba(255, 255, 255, .38) !important;

    box-shadow:
        0 9px 23px
        rgba(23, 12, 73, .075) !important;
}


/* Images : contour légèrement plus propre */

.feature-card img,
.feature-picture,
.feature-picture img {
    border-radius:
        27px !important;
}


/* Titres : un peu plus nets */

.feature-card h2 {
    color:
        #10162d !important;

    font-weight:
        720 !important;
}


/* Descriptions : meilleur contraste */

.feature-card p {
    color:
        #3d4355 !important;

    line-height:
        1.30 !important;
}



/* ----------------------------------------------------------
   3. FOOTER
   Toujours très secondaire, mais réellement lisible.
   ---------------------------------------------------------- */

footer {
    border-top:
        1px solid
        rgba(255, 255, 255, .16) !important;
}


.footer-name strong {
    color:
        rgba(255, 255, 255, .92) !important;
}


.footer-name span,
.footer-sortie {
    color:
        rgba(255, 255, 255, .64) !important;
}


footer nav a {
    color:
        rgba(255, 255, 255, .76) !important;

    transition:
        color .15s ease !important;
}


footer nav a:hover {
    color:
        #ffffff !important;
}



/* ----------------------------------------------------------
   4. PAGE RESULTATS
   Aucun changement fonctionnel.
   Simple finition visuelle.
   ---------------------------------------------------------- */

.results {
    background:
        rgba(247, 244, 252, .97) !important;

    border:
        1px solid
        rgba(255, 255, 255, .42) !important;

    box-shadow:
        0 14px 32px
        rgba(17, 10, 55, .10) !important;
}


.results-header {
    border-bottom:
        1px solid
        rgba(7, 28, 61, .10) !important;
}


.results-header h2 {
    color:
        #12182d !important;
}


.result {
    border-bottom:
        1px solid
        rgba(7, 28, 61, .09) !important;
}


.result-title a {
    color:
        #43229a !important;
}


.result-title a:hover {
    text-decoration:
        underline !important;

    text-underline-offset:
        3px;
}


.result-url {
    color:
        #b62430 !important;
}


.result-description {
    color:
        #343b4c !important;

    line-height:
        1.52 !important;
}



/* ----------------------------------------------------------
   5. FOCUS CLAVIER GENERAL
   ---------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline:
        3px solid
        rgba(255, 255, 255, .75) !important;

    outline-offset:
        3px !important;
}



/* ----------------------------------------------------------
   6. PAS D'ANIMATION POUR CEUX QUI N'EN VEULENT PAS
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        transition:
            none !important;
    }

}


/* ===== BERNARD POLISH V046 END ===== */


/* ===== BERNARD DESKTOP FINAL V047 START ===== */


/* ==========================================================
   BERNARD V0.4.7
   DERNIER POLISH DESKTOP

   NE MODIFIE PAS :
   - logo
   - titre Bernard
   - barre de recherche
   - bouton
   - taille des cartes
   - emplacement des cartes
   ========================================================== */


/* ----------------------------------------------------------
   1. SLOGAN PRINCIPAL
   Un peu plus présent et lisible.
   ---------------------------------------------------------- */

.brand-copy p {

    font-size:
        1.08rem !important;

    line-height:
        1.42 !important;

    color:
        rgba(255, 255, 255, .96) !important;

    font-weight:
        400 !important;

}


/* ----------------------------------------------------------
   2. DESCRIPTIONS DES 4 CARTES
   + environ 5 % de lisibilité.
   ---------------------------------------------------------- */

.feature-card p {

    font-size:
        .81rem !important;

    line-height:
        1.31 !important;

    color:
        #34394b !important;

}


/* Les titres restent bien visibles sans grossir les cartes */

.feature-card h2 {

    color:
        #10162d !important;

    font-weight:
        720 !important;

}


/* ----------------------------------------------------------
   3. FOOTER
   Plus lisible, mais toujours secondaire.
   ---------------------------------------------------------- */

.footer-name strong {

    color:
        rgba(255,255,255,.96) !important;

}


.footer-name span {

    color:
        rgba(255,255,255,.74) !important;

}


footer nav a {

    color:
        rgba(255,255,255,.80) !important;

}


.footer-sortie {

    color:
        rgba(255,255,255,.70) !important;

}


/* Petit renfort de lisibilité au survol */

footer nav a:hover {

    color:
        #ffffff !important;

}


/* ===== BERNARD DESKTOP FINAL V047 END ===== */


/* ===== BERNARD THEME V050 START ===== */


/* ==========================================================
   BERNARD V0.5
   MODE JOUR / NUIT

   Le mode JOUR conserve exactement le design validé.
   ========================================================== */


/* ----------------------------------------------------------
   1. INTERRUPTEUR
   ---------------------------------------------------------- */

.theme-switch-row {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin-top: 16px;

    min-height: 28px;

}


.theme-symbol {

    font-family:
        "BernardAtkinson",
        "DejaVu Sans",
        sans-serif;

    font-size: 14px;

    line-height: 1;

    user-select: none;

}


.theme-switch {

    position: relative;

    display: block;

    width: 48px;

    min-width: 48px;

    height: 25px;

    min-height: 25px;

    padding: 0 !important;

    margin: 0 !important;

    border: 1px solid
        rgba(255,255,255,.55) !important;

    border-radius: 999px !important;

    background:
        rgba(255,255,255,.24) !important;

    box-shadow:
        inset 0 1px 4px
        rgba(7,28,61,.12) !important;

    cursor: pointer;

    appearance: none;

    transition:
        background .22s ease,
        border-color .22s ease,
        box-shadow .22s ease !important;

}


.theme-switch-knob {

    position: absolute;

    top: 3px;

    left: 3px;

    width: 17px;

    height: 17px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 2px 6px
        rgba(7,28,61,.30);

    transition:
        transform .22s ease,
        background .22s ease,
        box-shadow .22s ease;

}


.theme-switch:hover {

    transform: none !important;

    filter: none !important;

    background:
        rgba(255,255,255,.34) !important;

}


.theme-switch:focus-visible {

    outline:
        3px solid
        rgba(255,255,255,.65) !important;

    outline-offset: 3px;

}



/* ==========================================================
   2. MODE NUIT : FOND
   ========================================================== */

body.dark-mode {

    background:
        linear-gradient(
            180deg,
            #2b2c33 0%,
            #222329 55%,
            #1c1d22 100%
        ) !important;

    color:
        #f5f5f7 !important;

}



/* ==========================================================
   3. MODE NUIT : TITRE BERNARD
   ========================================================== */

body.dark-mode .brand-copy h1 {

    color:
        #ffe27a !important;

    text-shadow:
        0 0 7px rgba(255,226,122,.30),
        0 0 16px rgba(255,226,122,.17),
        0 0 28px rgba(255,226,122,.08) !important;

}



/* Slogan */

body.dark-mode .brand-copy p {

    color:
        rgba(255,255,255,.90) !important;

}



/* ==========================================================
   4. INTERRUPTEUR EN MODE NUIT
   ========================================================== */

body.dark-mode .theme-switch {

    background:
        rgba(255,226,122,.18) !important;

    border-color:
        rgba(255,226,122,.55) !important;

    box-shadow:
        inset 0 1px 4px rgba(0,0,0,.35),
        0 0 9px rgba(255,226,122,.09) !important;

}


body.dark-mode .theme-switch-knob {

    transform:
        translateX(23px);

    background:
        #ffe27a;

    box-shadow:
        0 0 8px rgba(255,226,122,.35);

}



/* ==========================================================
   5. BARRE DE RECHERCHE

   Elle reste claire en mode nuit :
   repère visuel principal du moteur.
   ========================================================== */

body.dark-mode .search-form {

    background:
        #f4f4f2 !important;

    border-color:
        rgba(255,255,255,.10) !important;

    box-shadow:
        0 11px 30px rgba(0,0,0,.22) !important;

}


body.dark-mode .search-form input {

    color:
        #202126 !important;

}


body.dark-mode .search-form input::placeholder {

    color:
        #6e7078 !important;

}


body.dark-mode .search-glass::before {

    border-color:
        #62646c !important;

}


body.dark-mode .search-glass::after {

    background:
        #62646c !important;

}



/* Le rouge Bernard reste identique */

body.dark-mode .search-form button {

    background:
        #ef302f !important;

    color:
        #ffffff !important;

}



/* ==========================================================
   6. LES QUATRE CARTES EN MODE NUIT
   ========================================================== */

body.dark-mode .feature-card {

    background:
        rgba(48,49,57,.96) !important;

    border:
        1px solid
        rgba(255,255,255,.08) !important;

    box-shadow:
        0 10px 28px
        rgba(0,0,0,.20) !important;

}


body.dark-mode .feature-card h2 {

    color:
        #ffe27a !important;

}


body.dark-mode .feature-card p {

    color:
        rgba(255,255,255,.82) !important;

}



/* ==========================================================
   7. FOOTER MODE NUIT
   ========================================================== */

body.dark-mode footer {

    border-top-color:
        rgba(255,255,255,.12) !important;

}


body.dark-mode .footer-name strong {

    color:
        #ffe27a !important;

}


body.dark-mode .footer-name span,
body.dark-mode .footer-sortie {

    color:
        rgba(255,255,255,.60) !important;

}


body.dark-mode footer nav a {

    color:
        rgba(255,255,255,.74) !important;

}


body.dark-mode footer nav a:hover {

    color:
        #ffe27a !important;

}



/* ==========================================================
   8. PAGE RESULTATS EN MODE NUIT
   ========================================================== */

body.dark-mode .results {

    background:
        rgba(43,44,51,.97) !important;

    border-color:
        rgba(255,255,255,.08) !important;

    box-shadow:
        0 14px 34px
        rgba(0,0,0,.24) !important;

}


body.dark-mode .results-header {

    border-bottom-color:
        rgba(255,255,255,.10) !important;

}


body.dark-mode .results-label {

    color:
        #ffe27a !important;

}


body.dark-mode .results-header h2 {

    color:
        #f7f7f8 !important;

}


body.dark-mode .results-time {

    color:
        rgba(255,255,255,.57) !important;

}


body.dark-mode .result {

    border-bottom-color:
        rgba(255,255,255,.08) !important;

}


body.dark-mode .result-title a {

    color:
        #d4c1ff !important;

}


body.dark-mode .result-title a:hover {

    color:
        #ffe27a !important;

}


body.dark-mode .result-url {

    color:
        #ff7d7c !important;

}


body.dark-mode .result-description {

    color:
        rgba(255,255,255,.82) !important;

}



/* ==========================================================
   9. PETIT BERNARD DE LA PAGE RESULTATS
   ========================================================== */

body.dark-mode .results-brand {

    color:
        #ffe27a !important;

}



/* ==========================================================
   10. ANIMATION DOUCE DU CHANGEMENT DE THEME
   ========================================================== */

body,
.feature-card,
.results,
footer,
.brand-copy h1,
.brand-copy p {

    transition:
        background-color .22s ease,
        background .22s ease,
        color .22s ease,
        border-color .22s ease,
        box-shadow .22s ease,
        text-shadow .22s ease;

}



/* ==========================================================
   11. MOBILE / TABLETTE

   Le switch reste discret.
   On finalisera le responsive séparément.
   ========================================================== */

@media (max-width: 580px) {

    .theme-switch-row {

        margin-top:
            13px;

    }

}



/* ==========================================================
   12. ACCESSIBILITE
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .theme-switch,
    .theme-switch-knob,
    body,
    .feature-card,
    .results {

        transition:
            none !important;

    }

}


/* ===== BERNARD THEME V050 END ===== */


/* ===== BERNARD INFO PAGES V051 START ===== */


/* ==========================================================
   FOOTER FINAL
   ========================================================== */

.bernard-footer {

    width: 100%;

}


.bernard-footer nav {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 22px;

}


.bernard-footer nav a {

    text-decoration: none;

}


.footer-sortie {

    display: inline-flex !important;

    align-items: center;

    justify-content: flex-end;

    gap: 5px;

    color: #ef302f !important;

    text-decoration: none !important;

    white-space: nowrap;

}


.footer-sortie strong {

    color: #ef302f !important;

    font-family:
        "BernardBricolage",
        "BernardAtkinson",
        sans-serif;

    font-weight: 760;

}


.footer-sortie span {

    color: #ef302f !important;

}


.lasortie-mini-logo {

    display: inline-flex;

    align-items: center;

    margin-left: 3px;

    padding: 3px 7px;

    border:
        1px solid
        rgba(239,48,47,.55);

    border-radius: 999px;

    font-family:
        "BernardAtkinson",
        "DejaVu Sans",
        sans-serif;

    font-size: .68rem;

    line-height: 1;

    font-weight: 700;

    letter-spacing: .01em;

    color: #ef302f !important;

}


.footer-sortie:hover,
.footer-sortie:hover strong,
.footer-sortie:hover span {

    color: #ff5a58 !important;

}



/* ==========================================================
   PAGES À PROPOS / CONFIDENTIALITÉ / MENTIONS
   ========================================================== */

html.pre-dark body.info-page {

    background: #222329;

}


body.info-page {

    min-height: 100vh;

    margin: 0;

    background: #7a34ff;

    color: #172039;

    font-family:
        "BernardAtkinson",
        "DejaVu Sans",
        sans-serif;

}


.info-shell {

    width:
        min(
            calc(100% - 40px),
            980px
        );

    min-height: 100vh;

    margin: 0 auto;

    padding:
        34px 0
        28px;

    display: flex;

    flex-direction: column;

}


.info-topbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 28px;

}


.info-brand {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    color: #ffffff;

    text-decoration: none;

}


.info-brand img {

    width: 58px;

    height: 58px;

    object-fit: contain;

}


.info-brand strong {

    font-family:
        "BernardBricolage",
        "BernardAtkinson",
        sans-serif;

    font-size: 1.65rem;

    font-weight: 760;

}


.info-theme {

    display: flex;

    align-items: center;

    gap: 9px;

}


.info-card {

    width: 100%;

    padding:
        clamp(28px, 5vw, 56px);

    background:
        rgba(246,241,255,.97);

    border:
        1px solid
        rgba(255,255,255,.42);

    border-radius: 32px;

    box-shadow:
        0 18px 48px
        rgba(28,10,84,.13);

}


.info-kicker {

    margin-bottom: 10px;

    color: #7a34ff;

    font-size: .78rem;

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: .14em;

}


.info-card h1 {

    margin:
        0 0
        36px;

    color: #11172b;

    font-family:
        "BernardBricolage",
        "BernardAtkinson",
        sans-serif;

    font-size:
        clamp(
            2.9rem,
            7vw,
            5rem
        );

    line-height: .96;

    font-weight: 760;

    letter-spacing: -.045em;

}


.info-card section {

    max-width: 740px;

    margin:
        0 0
        34px;

}


.info-card h2 {

    margin:
        0 0
        11px;

    color: #171d32;

    font-family:
        "BernardBricolage",
        "BernardAtkinson",
        sans-serif;

    font-size: 1.35rem;

    line-height: 1.1;

    font-weight: 720;

}


.info-card p {

    margin:
        0 0
        13px;

    color: #3b4152;

    font-size: 1rem;

    line-height: 1.62;

}


.info-card a {

    color: #5d25d6;

    text-underline-offset: 3px;

}


.info-card code {

    padding:
        2px 5px;

    background:
        rgba(122,52,255,.09);

    border-radius: 6px;

}


.info-back {

    margin-top: 40px;

    padding-top: 23px;

    border-top:
        1px solid
        rgba(23,32,57,.10);

}


.info-back a {

    font-weight: 700;

    text-decoration: none;

}


.legal-list {

    margin: 0;

}


.legal-list > div {

    display: grid;

    grid-template-columns:
        145px 1fr;

    gap: 18px;

    padding:
        13px 0;

    border-bottom:
        1px solid
        rgba(23,32,57,.08);

}


.legal-list dt {

    font-weight: 700;

    color: #171d32;

}


.legal-list dd {

    margin: 0;

    color: #3b4152;

    line-height: 1.5;

}



/* ==========================================================
   MODE NUIT DES PAGES
   ========================================================== */

body.info-page.dark-mode {

    background:
        linear-gradient(
            180deg,
            #2b2c33 0%,
            #222329 55%,
            #1c1d22 100%
        ) !important;

    color: #f5f5f7;

}


body.info-page.dark-mode .info-brand {

    color: #ffe27a;

}


body.info-page.dark-mode .info-card {

    background:
        rgba(43,44,51,.97);

    border-color:
        rgba(255,255,255,.08);

    box-shadow:
        0 18px 48px
        rgba(0,0,0,.24);

}


body.info-page.dark-mode .info-kicker {

    color: #ffe27a;

}


body.info-page.dark-mode .info-card h1,
body.info-page.dark-mode .info-card h2 {

    color: #ffe27a;

}


body.info-page.dark-mode .info-card p,
body.info-page.dark-mode .legal-list dd {

    color:
        rgba(255,255,255,.82);

}


body.info-page.dark-mode .legal-list dt {

    color:
        rgba(255,255,255,.96);

}


body.info-page.dark-mode .legal-list > div {

    border-bottom-color:
        rgba(255,255,255,.08);

}


body.info-page.dark-mode .info-card a {

    color: #d7c5ff;

}


body.info-page.dark-mode .info-card code {

    color: #ffe27a;

    background:
        rgba(255,226,122,.08);

}


body.info-page.dark-mode .info-back {

    border-top-color:
        rgba(255,255,255,.10);

}



/* La Sortie reste rouge en jour ET en nuit */

body.dark-mode .footer-sortie,
body.dark-mode .footer-sortie strong,
body.dark-mode .footer-sortie span,
body.dark-mode .lasortie-mini-logo {

    color: #ff5a58 !important;

}



/* ==========================================================
   RESPONSIVE MINIMAL POUR CES PAGES
   Le vrai travail mobile Bernard viendra ensuite.
   ========================================================== */

@media (max-width: 650px) {

    .info-shell {

        width:
            min(
                calc(100% - 24px),
                980px
            );

        padding-top: 20px;

    }


    .info-topbar {

        margin-bottom: 18px;

    }


    .info-brand img {

        width: 48px;

        height: 48px;

    }


    .info-brand strong {

        font-size: 1.4rem;

    }


    .info-card {

        padding:
            27px 22px;

        border-radius:
            24px;

    }


    .info-card h1 {

        margin-bottom: 30px;

    }


    .legal-list > div {

        grid-template-columns: 1fr;

        gap: 5px;

    }


    .bernard-footer {

        text-align: center;

    }


    .bernard-footer nav {

        gap:
            13px
            18px;

    }


    .footer-sortie {

        justify-content: center;

    }

}


/* ===== BERNARD INFO PAGES V051 END ===== */


/* ===== LA SORTIE LOGO V052 START ===== */


/* ==========================================================
   SIGNATURE LA SORTIE
   ========================================================== */

.footer-sortie {

    display: inline-flex !important;

    align-items: center !important;

    gap: 7px !important;

    color: #ef302f !important;

    text-decoration: none !important;

}


.footer-sortie > span,
.footer-sortie > strong {

    color: #ef302f !important;

}


.footer-sortie strong {

    font-weight: 760 !important;

}


.lasortie-logo {

    display: block;

    width: 30px;

    height: 30px;

    margin-left: 3px;

    object-fit: contain;

    flex: 0 0 30px;

    border-radius: 50%;

    transition:
        transform .18s ease,
        filter .18s ease;

}


.footer-sortie:hover .lasortie-logo {

    transform: rotate(-3deg) scale(1.06);

}


/* Le rouge reste identique en mode nuit */

body.dark-mode .footer-sortie,
body.dark-mode .footer-sortie > span,
body.dark-mode .footer-sortie > strong {

    color: #ff5a58 !important;

}


/* Mobile */

@media (max-width: 650px) {

    .lasortie-logo {

        width: 28px;

        height: 28px;

        flex-basis: 28px;

    }

}


/* ===== LA SORTIE LOGO V052 END ===== */


/* ===== BERNARD FOOTER V053 START ===== */


/* ==========================================================
   FOOTER BERNARD
   Plus d'air sur les côtés.
   Alignement propre dans la largeur utile du site.
   ========================================================== */

.bernard-footer {

    width:
        min(
            calc(100% - 72px),
            1120px
        ) !important;

    margin:
        58px auto
        0 !important;

    padding:
        25px 0
        34px !important;

    box-sizing:
        border-box !important;

    display:
        grid !important;

    grid-template-columns:
        1fr auto auto !important;

    align-items:
        end !important;

    column-gap:
        30px !important;

    row-gap:
        14px !important;

}


/* Bloc Bernard à gauche */

.bernard-footer .footer-name {

    justify-self:
        start !important;

    text-align:
        left !important;

}


/* Liens centraux */

.bernard-footer nav {

    justify-self:
        center !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        22px !important;

    white-space:
        nowrap !important;

}


/* Signature La Sortie à droite */

.bernard-footer .footer-sortie {

    justify-self:
        end !important;

    margin:
        0 !important;

    white-space:
        nowrap !important;

}


/* Logo La Sortie : toujours bien décollé du bord */

.bernard-footer .lasortie-logo {

    margin-left:
        5px !important;

}


/* ==========================================================
   ECRANS DESKTOP PLUS ETROITS
   Pas encore le vrai travail mobile.
   ========================================================== */

@media (max-width: 1050px) {

    .bernard-footer {

        width:
            calc(100% - 48px) !important;

        grid-template-columns:
            1fr auto !important;

    }


    .bernard-footer nav {

        grid-column:
            1 / -1;

        grid-row:
            1;

        justify-self:
            center !important;

        margin-bottom:
            8px !important;

    }


    .bernard-footer .footer-name {

        grid-column:
            1;

        grid-row:
            2;

    }


    .bernard-footer .footer-sortie {

        grid-column:
            2;

        grid-row:
            2;

    }

}


/* ===== BERNARD FOOTER V053 END ===== */


/* ===== BERNARD FOOTER V054 START ===== */


/* ==========================================================
   FOOTER BERNARD V0.5.4

   3 vraies zones symétriques :
   gauche  = 1fr
   centre  = auto
   droite  = 1fr

   Résultat :
   - navigation réellement centrée
   - gauche/droite symétriques
   - alignement vertical propre
   ========================================================== */

.bernard-footer {

    width:
        min(
            calc(100% - 80px),
            1120px
        ) !important;

    margin:
        58px auto 0 !important;

    padding:
        26px 0 34px !important;

    display:
        grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr) !important;

    align-items:
        center !important;

    column-gap:
        32px !important;

    box-sizing:
        border-box !important;

}


/* ----------------------------------------------------------
   GAUCHE
   ---------------------------------------------------------- */

.bernard-footer .footer-name {

    grid-column:
        1 !important;

    justify-self:
        start !important;

    align-self:
        center !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    justify-content:
        center !important;

    margin:
        0 !important;

    padding:
        0 !important;

    line-height:
        1.15 !important;

}


.bernard-footer .footer-name strong {

    margin:
        0 !important;

    line-height:
        1.1 !important;

}


.bernard-footer .footer-name span {

    margin-top:
        4px !important;

    line-height:
        1.1 !important;

}


/* ----------------------------------------------------------
   CENTRE
   ---------------------------------------------------------- */

.bernard-footer nav {

    grid-column:
        2 !important;

    justify-self:
        center !important;

    align-self:
        center !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        24px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    white-space:
        nowrap !important;

    line-height:
        1 !important;

}


.bernard-footer nav a {

    display:
        inline-flex !important;

    align-items:
        center !important;

    margin:
        0 !important;

    line-height:
        1 !important;

}


/* ----------------------------------------------------------
   DROITE
   ---------------------------------------------------------- */

.bernard-footer .footer-sortie {

    grid-column:
        3 !important;

    justify-self:
        end !important;

    align-self:
        center !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        flex-end !important;

    gap:
        8px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    line-height:
        1 !important;

    white-space:
        nowrap !important;

}


.bernard-footer .lasortie-logo {

    display:
        block !important;

    width:
        28px !important;

    height:
        28px !important;

    margin:
        0 0 0 4px !important;

    flex:
        0 0 28px !important;

}


/* ----------------------------------------------------------
   DESKTOP INTERMEDIAIRE
   ---------------------------------------------------------- */

@media (max-width: 1050px) {

    .bernard-footer {

        width:
            calc(100% - 48px) !important;

        column-gap:
            20px !important;

    }


    .bernard-footer nav {

        gap:
            16px !important;

    }

}


/* ===== BERNARD FOOTER V054 END ===== */



/* ===== BERNARD HOME V060 START ===== */


/* ==========================================================
   NAVIGATION MINIMALE

   Un code familier :
   À propos à gauche
   Mail à droite
   ========================================================== */

.bernard-topbar {

    position:
        absolute;

    z-index:
        50;

    top:
        0;

    left:
        0;

    width:
        100%;

    box-sizing:
        border-box;

    padding:
        25px 32px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    pointer-events:
        none;

}


.bernard-topbar-link {

    pointer-events:
        auto;

    color:
        rgba(255,255,255,.92);

    font-size:
        .92rem;

    font-weight:
        500;

    text-decoration:
        none;

    text-underline-offset:
        4px;

    transition:
        opacity .18s ease,
        color .18s ease;

}


.bernard-topbar-link:hover {

    color:
        #ffffff;

    text-decoration:
        underline;

}


body.dark-mode .bernard-topbar-link {

    color:
        rgba(255,255,255,.88);

}


body.dark-mode .bernard-topbar-link:hover {

    color:
        #ffdc69;

}


/* La page résultats possède déjà sa propre navigation visuelle. */

body.results-mode .bernard-topbar {

    display:
        none;

}


/* ==========================================================
   RESPIRATION

   Le moteur doit être l'action principale.
   ========================================================== */

.features {

    margin-top:
        120px !important;

}


/* ==========================================================
   BARRE DE RECHERCHE

   Très calme au repos.
   Identité Bernard au focus.
   ========================================================== */

.home-search .search-form {

    border:
        1px solid
        rgba(255,255,255,.22);

    box-shadow:
        0 10px 28px
        rgba(7,28,61,.11);

    transition:
        box-shadow .20s ease,
        transform .20s ease,
        border-color .20s ease;

}


.home-search .search-form:focus-within {

    transform:
        translateY(-1px);

    border-color:
        rgba(255,255,255,.70);

    box-shadow:
        0 0 0 3px
        rgba(255,255,255,.22),
        0 14px 34px
        rgba(7,28,61,.16);

}


body.dark-mode
.home-search
.search-form {

    border-color:
        rgba(255,255,255,.10);

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.20);

}


body.dark-mode
.home-search
.search-form:focus-within {

    border-color:
        rgba(255,220,105,.52);

    box-shadow:
        0 0 0 3px
        rgba(255,220,105,.16),
        0 14px 35px
        rgba(0,0,0,.28);

}


/* ==========================================================
   PAGE TECHNIQUES

   Petites améliorations de lisibilité sans créer
   un nouveau design parallèle.
   ========================================================== */

.info-card section + section {

    margin-top:
        34px;

}


.info-card section h2 {

    margin-bottom:
        10px;

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 650px) {

    .bernard-topbar {

        padding:
            18px 18px;

    }


    .bernard-topbar-link {

        font-size:
            .88rem;

    }


    .features {

        margin-top:
            82px !important;

    }

}


/* ===== BERNARD HOME V060 END ===== */


/* ===== BERNARD UI V061 START ===== */


/* ==========================================================
   HEADER
   Un peu plus présent, sans devenir une barre de navigation.
   ========================================================== */

.bernard-topbar-link {

    font-size:
        1.05rem !important;

    font-weight:
        560 !important;

    line-height:
        1.25 !important;

}


/* ==========================================================
   COMPTEUR INDEX LOCAL
   ========================================================== */

.bernard-index-status {

    margin-top:
        18px;

    min-height:
        22px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        7px;

    color:
        rgba(255,255,255,.78);

    font-size:
        .91rem;

    font-weight:
        500;

    line-height:
        1.35;

    letter-spacing:
        .005em;

}


.bernard-index-status strong {

    color:
        rgba(255,255,255,.98);

    font-weight:
        720;

    font-variant-numeric:
        tabular-nums;

}


.bernard-index-dot {

    width:
        7px;

    height:
        7px;

    flex:
        0 0 7px;

    border-radius:
        50%;

    background:
        currentColor;

    opacity:
        .45;

    transition:
        opacity .2s ease;

}


.bernard-index-status.is-live
.bernard-index-dot {

    opacity:
        1;

}


.bernard-index-separator {

    opacity:
        .55;

}


.bernard-yacy-network {

    opacity:
        .88;

}


/*
Le compteur prend maintenant un peu de place :
on réduit le margin des cartes afin de conserver
pratiquement la même géographie verticale qu'en V060.
*/

.features {

    margin-top:
        82px !important;

}


/* Le compteur n'a pas à suivre dans l'affichage résultats. */

body.results-mode
.bernard-index-status {

    display:
        none;

}


/* ==========================================================
   MODE NUIT
   ========================================================== */

body.dark-mode
.bernard-index-status {

    color:
        rgba(255,220,105,.78);

}


body.dark-mode
.bernard-index-status strong {

    color:
        #ffdc69;

}


/* ==========================================================
   FOOTER
   ========================================================== */

.bernard-footer
.footer-name strong {

    font-size:
        1.02rem !important;

    font-weight:
        720 !important;

}


.bernard-footer
.footer-name span {

    font-size:
        .84rem !important;

    line-height:
        1.25 !important;

}


.bernard-footer
nav a {

    font-size:
        .94rem !important;

    font-weight:
        520 !important;

}


.bernard-footer
.footer-sortie {

    font-size:
        .88rem !important;

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 650px) {

    .bernard-topbar-link {

        font-size:
            .96rem !important;

    }


    .bernard-index-status {

        margin-top:
            16px;

        padding:
            0 14px;

        gap:
            5px;

        font-size:
            .80rem;

    }


    .bernard-index-separator {

        margin:
            0 1px;

    }


    .features {

        margin-top:
            48px !important;

    }


    .bernard-footer
    nav a {

        font-size:
            .88rem !important;

    }


    .bernard-footer
    .footer-sortie {

        font-size:
            .82rem !important;

    }

}


/* ===== BERNARD UI V061 END ===== */


/* ===== BERNARD PAGINATION V1 START ===== */

.bernard-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.45rem;
    margin: 1.8rem auto 0;
    padding: 0 0 1rem;
}

.bernard-pagination button {
    min-width: 2.35rem;
    min-height: 2.35rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.bernard-pagination button[aria-current="page"] {
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.bernard-pagination button:disabled {
    opacity: 0.38;
    cursor: default;
}

.bernard-pagination button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ===== BERNARD PAGINATION V1 END ===== */