:root {
    /* Palette extraite du logo Monketo */
    --couleur-fond: #f7f5ef;
    --couleur-carte: #ffffff;
    --couleur-primaire: #1e3f2c;
    --couleur-primaire-fonce: #16301f;
    --couleur-accent-olive: #89a33c;
    --couleur-accent-orange: #ee6f30;
    --couleur-texte: #26241f;
    --couleur-texte-clair: #6b6a63;
    --couleur-bordure: #e4e1d8;
    --couleur-avertissement-fond: #fdf0e5;
    --couleur-avertissement-texte: #a34c14;
    --couleur-danger: #c0392b;
    --rayon: 10px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    /* overflow-x:hidden evite une barre de defilement horizontale parasite
       a cause du ruban de version (.ruban-version), qui deborde legerement
       du bord droit de la fenetre par design (rotation a 45deg). */
    overflow-x: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* Blanc pur (et non --couleur-fond, legerement teinte) pour que le fond
       du logo Monketo -- desormais transparent -- se fonde parfaitement
       dans la page, sans liseré visible autour. */
    background: #ffffff;
    color: var(--couleur-texte);
    line-height: 1.5;
}

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px 16px 64px;
}

header {
    text-align: center;
    margin-bottom: 24px;
}

.logo-entete {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.logo-entete img {
    width: 100%;
    max-width: 260px;
    height: auto;
}

header h1 {
    margin: 0;
    color: var(--couleur-primaire-fonce);
    font-size: 1.6rem;
}

header h1 .k {
    color: var(--couleur-accent-olive);
}

header h1 .eto {
    color: var(--couleur-accent-orange);
}

.sous-titre {
    color: var(--couleur-texte-clair);
    margin: 2px 0 0;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

/* Ruban diagonal orange affichant le numero de version, fixe en haut a
   droite de la fenetre (meme principe que le classique ruban "corner
   ribbon" -- un seul element rotate a 45deg, positionne pour que sa bande
   traverse le coin). */
.ruban-version {
    position: fixed;
    top: 18px;
    right: -46px;
    z-index: 500;
    width: 170px;
    padding: 4px 0;
    background: var(--couleur-accent-orange);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-align: center;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    transform: rotate(45deg);
    pointer-events: none;
}

@media (max-width: 480px) {
    .ruban-version {
        top: 13px;
        right: -42px;
        width: 150px;
        font-size: 0.62rem;
        padding: 3px 0;
    }
}

/* A partir de la version 1.0 (voir version_est_stable() dans includes/db.php),
   le ruban passe du orange (beta) au vert. */
.ruban-version-stable {
    background: var(--couleur-accent-olive);
}

.copyright-app {
    color: var(--couleur-texte-clair);
    margin: 0;
    font-size: 0.7rem;
    line-height: 1.2;
    font-weight: 700;
    opacity: 0.7;
    text-decoration: none;
}

a.copyright-app:hover {
    text-decoration: underline;
}

/* Bloc de contact de la page "A propos" : logo dj cliquable + texte, centres. */
.bloc-contact-dev {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.bloc-contact-dev p {
    margin: 0;
    color: var(--couleur-texte);
}

.titre-monketo-apropos {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.1;
}

.titre-monketo-apropos .lettre-noire {
    color: var(--couleur-texte);
}

.titre-monketo-apropos .lettre-verte {
    color: var(--couleur-accent-olive);
}

.titre-monketo-apropos .lettre-orange {
    color: var(--couleur-accent-orange);
}

.accroche-apropos {
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--couleur-texte-clair) !important;
}

.bloc-contact-dev .logo-dj {
    display: block;
}

.bloc-contact-dev .logo-dj img {
    width: 100%;
    max-width: 260px;
    height: auto;
}

.whatsapp-app {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
}

.whatsapp-texte {
    display: flex;
    flex-direction: column;
    color: var(--couleur-texte-clair);
    font-size: 0.55rem;
    line-height: 1.3;
    text-align: left;
}

.whatsapp-texte span {
    white-space: nowrap;
}

.whatsapp-texte .mot-orange {
    color: var(--couleur-accent-orange);
}

.whatsapp-texte .mot-vert {
    color: var(--couleur-accent-olive);
}

.whatsapp-texte .mot-vert-gras {
    color: var(--couleur-accent-olive);
    font-weight: 700;
}

.whatsapp-texte a {
    color: #3366cc;
    text-decoration: underline;
    word-break: break-all;
}

.whatsapp-stats {
    display: block;
    margin-top: 3px;
    font-size: 0.5rem;
    color: var(--couleur-texte-clair);
    opacity: 0.7;
    white-space: nowrap;
}

.whatsapp-app img {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
}

.bandeau-lien {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.bouton {
    display: inline-block;
    padding: 10px 20px;
    border-radius: var(--rayon);
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-size: 1rem;
}

.bouton-principal {
    background: var(--couleur-primaire);
    color: #fff;
    width: 100%;
    padding: 14px;
    font-size: 1.05rem;
}

.bouton-principal:hover {
    background: var(--couleur-primaire-fonce);
}

.bouton-secondaire {
    background: var(--couleur-fond);
    color: var(--couleur-primaire-fonce);
    border: 1px solid var(--couleur-bordure);
}

.bouton-secondaire:hover {
    border-color: var(--couleur-primaire);
}

.bouton-danger {
    background: var(--couleur-carte);
    color: #b3261e;
    border: 1px solid #f0c9c5;
}

.bouton-danger:hover {
    background: #fdf0ee;
    border-color: #b3261e;
}

.bouton:disabled,
.bouton.bouton-en-cours {
    opacity: 0.7;
    cursor: not-allowed;
}

.spinner-bouton {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: -3px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-top-color: #fff;
    border-radius: 50%;
    animation: rotation-spinner-bouton 0.7s linear infinite;
}

@keyframes rotation-spinner-bouton {
    to { transform: rotate(360deg); }
}

.container-etroit {
    max-width: 420px;
}

.bandeau-utilisateur {
    display: grid;
    /* auto / 1fr / auto plutot que 1fr / auto / 1fr : sinon, quand la
       colonne centrale (les boutons, qui passent a la ligne) devient large,
       les deux colonnes laterales se retrouvent trop etroites et un texte
       comme "Se deconnecter" est force de passer sur deux lignes au lieu de
       rester sur la meme ligne que l'e-mail. */
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 12px;
    font-size: 0.8rem;
    color: var(--couleur-texte-clair);
    margin-bottom: 16px;
}

.bandeau-gauche {
    justify-self: start;
    text-align: left;
    white-space: nowrap;
}

.bandeau-centre {
    justify-self: center;
    text-align: center;
}

.bandeau-droite {
    justify-self: end;
    white-space: nowrap;
    text-align: right;
}

.bandeau-utilisateur a {
    color: var(--couleur-accent-orange);
    text-decoration: none;
    font-weight: 600;
}

.bandeau-utilisateur a:hover {
    text-decoration: underline;
}

.bandeau-utilisateur .bouton-plan-actuel {
    color: var(--couleur-primaire-fonce);
    font-size: 0.8rem;
    padding: 6px 14px;
}

.bandeau-utilisateur .bouton-plan-actuel:hover {
    text-decoration: none;
}

.bandeau-centre {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.bandeau-utilisateur .bandeau-centre .bouton-secondaire {
    color: var(--couleur-primaire-fonce);
    font-size: 0.8rem;
    padding: 6px 14px;
}

.bandeau-utilisateur .bandeau-centre .bouton-secondaire:hover {
    text-decoration: none;
}

.lien-secondaire {
    text-align: center;
    font-size: 0.85rem;
    color: var(--couleur-texte-clair);
    margin: 16px 0 0;
}

.lien-secondaire a {
    color: var(--couleur-primaire);
    font-weight: 600;
    text-decoration: none;
}

.lien-secondaire a:hover {
    text-decoration: underline;
}

.carte-famille {
    background: var(--couleur-carte);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    padding: 14px 18px;
    margin-bottom: 20px;
}

.carte-famille .case-repas {
    background: none;
    border: none;
    padding: 0;
}

.bascule-plan {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 10px 0;
}

.bascule-plan form {
    margin: 0;
}

.bascule-plan button[disabled] {
    cursor: default;
    opacity: 1;
}

.table-admin {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.ligne-resultat-famille {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--couleur-bordure);
}

.table-admin th, .table-admin td {
    text-align: left;
    padding: 10px 8px;
    border-bottom: 1px solid var(--couleur-bordure);
    vertical-align: middle;
}

.table-admin th {
    color: var(--couleur-texte-clair);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.actions-admin form {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.actions-admin .bouton-mini {
    flex: none;
}

.formulaire-profil {
    background: var(--couleur-carte);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    padding: 24px;
}

.formulaire-profil h2 {
    margin-top: 0;
    color: var(--couleur-primaire-fonce);
}

.ligne-champs {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.cases-repas {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.case-repas {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 400;
    font-size: 0.95rem;
    background: var(--couleur-fond);
    border: 1px solid var(--couleur-bordure);
    border-radius: 20px;
    padding: 8px 14px;
    cursor: pointer;
}

.case-repas input {
    width: auto;
    margin: 0;
}

.jour-repas-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    cursor: pointer;
}

.jour-repas-toggle input {
    width: auto;
    margin: 0;
}

.repas.inactif {
    opacity: 0.45;
}

.repas.inactif .titre-recette {
    text-decoration: line-through;
}

.ligne-champs .champ {
    flex: 1;
    min-width: 200px;
}

.cadre-option {
    background: var(--couleur-fond);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    padding: 14px 16px;
}

.cadre-alcool {
    min-width: 260px;
}

.case-alcool-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    white-space: nowrap;
}

.case-alcool-toggle .texte-avertissement {
    font-size: 0.75em;
}

.case-alcool-toggle input {
    width: auto;
    margin: 0;
}

.champs-alcool {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.champs-alcool[hidden] {
    display: none;
}

.champs-alcool .champ {
    margin-bottom: 0;
}

.cadre-sante {
    width: 100%;
}

.cadre-regime {
    width: 100%;
}

.cadre-personnaliser {
    width: 100%;
}

.grille-sante {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 12px;
}

.groupe-sante {
    flex: 1;
    min-width: 190px;
}

.titre-groupe-sante {
    font-weight: 400;
    color: var(--couleur-accent-orange);
    margin: 0 0 8px;
}

.groupe-sante .ligne-champs {
    gap: 8px;
}

.groupe-sante .champ {
    min-width: 75px;
    margin-bottom: 0;
}

.groupe-sante .champ label {
    font-weight: 400;
    font-size: 0.78rem;
    line-height: 1.15;
    color: var(--couleur-texte);
    margin-bottom: 3px;
}

.groupe-sante input {
    padding: 6px 8px;
    font-size: 0.85rem;
}

.champ {
    margin-bottom: 16px;
}

label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 0.9rem;
}

input, select, textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--couleur-bordure);
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
    background: var(--couleur-fond);
    color: var(--couleur-texte);
}

textarea {
    resize: vertical;
}

.champ-mot-de-passe {
    position: relative;
}

.champ-mot-de-passe input {
    padding-right: 42px;
}

.bouton-oeil {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    width: auto;
    padding: 6px;
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: var(--couleur-texte-clair);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bouton-oeil:hover {
    color: var(--couleur-texte);
}

.bouton-oeil svg {
    display: block;
}

.bouton-oeil .icone-oeil-ferme {
    display: none;
}

.bouton-oeil.oeil-visible .icone-oeil-ouvert {
    display: none;
}

.bouton-oeil.oeil-visible .icone-oeil-ferme {
    display: block;
}

.indicateur-longueur-mdp {
    font-size: 0.78rem;
    color: var(--couleur-texte-clair);
    margin: 6px 0 0;
}

.indicateur-longueur-mdp.longueur-atteinte {
    color: var(--couleur-accent-olive);
    font-weight: 600;
}

.ajout-ingredient {
    margin-top: 0;
}

.formulaire-profil label {
    color: var(--couleur-accent-olive);
    font-weight: 700;
    font-size: 1.15rem;
}

.textarea-ingredients {
    border-radius: 6px 6px 0 0 !important;
    border-bottom: none !important;
    margin-bottom: 0;
}

.dropdown-ingredients {
    position: relative;
}

.dropdown-entete {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--couleur-bordure);
    border-radius: 0 0 6px 6px;
    padding: 8px 10px;
    background: var(--couleur-carte);
}

.dropdown-toggle-ingredients {
    flex: 1;
    text-align: left;
    padding: 4px 0;
    border: none;
    font-size: 0.9rem;
    font-family: inherit;
    background: transparent;
    color: #000;
    font-weight: 700;
    cursor: pointer;
}

.dropdown-entete .bouton-ajouter-ingredient {
    flex-shrink: 0;
}

.dropdown-ingredients .bouton-ajouter-ingredient {
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--couleur-accent-orange);
}

.dropdown-panel-ingredients {
    margin-top: 6px;
}

.note-semaine-courante {
    font-size: 0.8rem;
    font-style: italic;
    color: #666;
    margin: 4px 0 8px;
}

.bouton-afficher-selection {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    margin-bottom: 16px;
    border: 1px solid var(--couleur-bordure);
    border-radius: 6px;
    font-size: 0.9rem;
    font-family: inherit;
    font-weight: 700;
    background: #fff;
    color: #000;
    cursor: pointer;
}

.pagination-ingredients {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 0.8rem;
    color: var(--couleur-texte-clair);
}

.pagination-ingredients button:disabled {
    opacity: 0.4;
    cursor: default;
}

.liste-ingredients-checkbox {
    border: 1px solid var(--couleur-bordure);
    border-radius: 6px;
    background: #fff;
    padding: 6px 10px;
    margin-bottom: 6px;
}

.formulaire-profil .ligne-ingredient-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--couleur-texte);
    cursor: pointer;
    margin-bottom: 0;
}

.ligne-ingredient-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    border: 1px solid var(--couleur-bordure);
    border-radius: 3px;
    background: #fff;
}

.carte-aide {
    background: var(--couleur-carte);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    padding: 20px;
    margin-bottom: 20px;
    scroll-margin-top: 16px;
}

.carte-aide h3 {
    margin-top: 0;
    color: var(--couleur-accent-olive);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.carte-aide h3.titre-orange {
    color: var(--couleur-accent-orange);
}

.croix-fermer-aide {
    flex-shrink: 0;
    color: var(--couleur-accent-orange);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}

.croix-fermer-aide:hover {
    opacity: 0.75;
}

.mot-monketo {
    font-weight: 700;
}

.bouton-comment-ca-marche {
    color: var(--couleur-accent-olive) !important;
}

.texte-avertissement {
    color: var(--couleur-accent-orange);
    font-weight: 700;
}

.champ-budget {
    display: flex;
    align-items: center;
    gap: 8px;
}

.champ-budget input {
    flex: 0 1 160px;
}

.champ-budget .suffixe-unite {
    font-weight: 700;
    color: var(--couleur-texte-clair);
}

.note-securite {
    color: var(--couleur-danger);
    font-weight: 600;
    font-size: 0.9em;
    margin: 4px 0 16px;
}

.lien-aide-rubrique {
    display: inline-block;
    vertical-align: super;
    font-size: 1.3em;
    line-height: 1;
    margin-left: 4px;
    color: var(--couleur-accent-orange);
    text-decoration: none;
    font-weight: 900;
    cursor: help;
    /* vertical-align n'a pas d'effet sur un enfant flex (cas de
       .ligne-case-aide ci-dessous) : ce transform assure un rendu en
       exposant (au-dessus de la ligne) dans les deux contextes. */
    transform: translateY(-30%);
}

/* Priorite sur ".bandeau-utilisateur a" (plus specifique par defaut) pour
   garder la meme taille/graisse partout, y compris dans le bandeau du haut. */
.bandeau-utilisateur .lien-aide-rubrique {
    color: var(--couleur-accent-orange);
    font-weight: 900;
}

/* Place le ? d'aide hors du <label> (sinon cliquer dessus coche/decoche la
   case, puisque le clic est capte par le label associe). */
.ligne-case-aide {
    display: flex;
    align-items: baseline;
}

.ligne-case-aide .lien-aide-rubrique {
    margin-left: 0.6em;
}

.ligne-nombre-personnes {
    gap: 10px;
    margin-bottom: 16px;
}

.ligne-nombre-personnes label {
    margin-bottom: 0;
    font-weight: 700;
}

.ligne-nombre-personnes select {
    font-family: inherit;
    font-size: 0.95rem;
    padding: 4px 8px;
    border: 1px solid var(--couleur-bordure);
    border-radius: 6px;
}

/* Le bouton "Deja achete" a normalement width:100% + justify-content:
   space-between (texte a gauche, fleche a droite du bloc entier). Dans
   .ligne-case-aide on veut au contraire texte+fleche colles a gauche, avec
   le ? juste apres le texte (en exposant), comme pour "A acheter (n)". */
.ligne-case-aide .entete-achetes {
    width: auto;
    flex: 0 1 auto;
    justify-content: flex-start;
    gap: 8px;
}

.lien-aide-rubrique:hover {
    text-decoration: underline;
}

.monketo-mon {
    color: #000;
}

.monketo-k {
    color: var(--couleur-accent-olive);
}

.monketo-eto {
    color: var(--couleur-accent-orange);
}

.carte-aide p {
    line-height: 1.55;
    margin: 0 0 12px;
    text-align: justify;
}

.carte-aide p:last-child {
    margin-bottom: 0;
}

.carte-objectifs {
    background: var(--couleur-carte);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    padding: 20px;
    margin-bottom: 24px;
}

.carte-objectifs h2 {
    margin-top: 0;
    color: var(--couleur-primaire-fonce);
}

.grille-objectifs {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.grille-objectifs > div {
    display: flex;
    flex-direction: column;
}

.grille-objectifs .valeur {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--couleur-primaire);
}

.grille-objectifs .etiquette {
    font-size: 0.8rem;
    color: var(--couleur-texte-clair);
}

.avertissement {
    background: var(--couleur-avertissement-fond);
    color: var(--couleur-avertissement-texte);
    padding: 12px;
    border-radius: 6px;
    margin-top: 16px;
    font-size: 0.9rem;
}

.note-nutrition {
    font-size: 0.78rem;
    color: var(--couleur-texte-clair);
    margin-top: 12px;
    margin-bottom: 0;
}

.semaine {
    margin-bottom: 32px;
}

.semaine h2 {
    color: var(--couleur-primaire-fonce);
    border-bottom: 2px solid var(--couleur-bordure);
    padding-bottom: 6px;
}

.grille-jours {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}

.carte-jour {
    background: var(--couleur-carte);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    padding: 14px;
}

.carte-jour h3 {
    margin: 0 0 10px;
    font-size: 0.95rem;
    color: var(--couleur-primaire-fonce);
}

.repas {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--couleur-bordure);
}

.titre-votes {
    font-size: 1rem;
    margin: 24px 0 12px;
}

.titre-votes-aime {
    color: var(--couleur-accent-olive);
}

.titre-votes-deteste {
    color: var(--couleur-accent-orange);
}

.grille-favoris {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 12px;
}

.carte-favori {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--couleur-carte);
    border: 1px solid var(--couleur-bordure);
    border-left: 4px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    padding: 10px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease;
}

.carte-favori:hover {
    border-color: var(--couleur-primaire);
}

.carte-favori-aime {
    border-left-color: var(--couleur-accent-olive);
}

.carte-favori-deteste {
    border-left-color: var(--couleur-accent-orange);
}

.ligne-info-recette {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.votes-mini {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.votes-mini[hidden] {
    display: none;
}

.votes-mini-pour,
.votes-mini-contre {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 0.75rem;
    font-weight: 600;
}

.votes-mini-pour {
    color: var(--couleur-accent-olive);
}

.votes-mini-contre {
    color: var(--couleur-accent-orange);
}

.votes-mini-pour svg,
.votes-mini-contre svg {
    width: 13px;
    height: 13px;
    fill: currentColor;
}

.panneau-changement {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px dashed var(--couleur-bordure);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.select-avec-icone {
    position: relative;
    display: flex;
}

.select-avec-icone[hidden] {
    display: none;
}

.select-avec-icone .icone-select {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--couleur-texte-clair);
    font-size: 0.75rem;
}

/* Menu deroulant "maison" (remplace <select> natif : sur macOS, Chrome et
   Safari delegue le rendu des options a l'OS, qui ignore le CSS de couleur
   par option -- impossible d'y afficher le vert/orange des votes). */
.select-perso {
    width: 100%;
    padding: 8px 28px 8px 10px;
    font-size: 0.8rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    background: var(--couleur-carte);
    cursor: pointer;
    position: relative;
}

.select-perso.desactive {
    cursor: default;
    opacity: 0.7;
}

.select-perso-texte {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.select-perso-liste {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin: 4px 0 0;
    max-height: 220px;
    overflow-y: auto;
    background: var(--couleur-carte);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 20;
    list-style: none;
    padding: 4px 0;
}

.select-perso-liste[hidden] {
    display: none;
}

.select-perso-liste li {
    padding: 6px 10px;
    font-size: 0.8rem;
    cursor: pointer;
}

.select-perso-liste li:hover,
.select-perso-liste li.survol {
    background: var(--couleur-fond);
}

.select-perso-liste li.option-desactivee {
    color: var(--couleur-texte-clair);
    cursor: default;
}

.actions-changement {
    display: flex;
    gap: 8px;
}

.bouton-mini {
    flex: 1;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid var(--couleur-bordure);
    background: var(--couleur-carte);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.bouton-action-changement[data-etat="valider"] {
    background: var(--couleur-primaire);
    border-color: var(--couleur-primaire);
    color: #fff;
}

.bouton-action-changement[data-etat="valider"]:hover {
    background: var(--couleur-primaire-fonce);
}

.bouton-annuler-changement:hover {
    border-color: var(--couleur-primaire);
}

.repas:last-of-type {
    border-bottom: none;
}

.type-repas {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--couleur-accent-olive);
    font-weight: 700;
}

.photo-recette {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 6px;
    margin: 4px 0;
    background: var(--couleur-fond);
}

.titre-recette {
    font-size: 0.88rem;
    font-weight: 600;
}

.calories-recette {
    font-size: 0.8rem;
    color: var(--couleur-texte-clair);
}

.total-jour {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--couleur-accent-orange);
    text-align: right;
}

.repas-manquant {
    color: var(--couleur-texte-clair);
    font-size: 0.85rem;
    font-style: italic;
}

.filtre-semaines {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    justify-content: center;
}

.lien-filtre {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid var(--couleur-bordure);
    text-decoration: none;
    color: var(--couleur-texte);
    font-size: 0.85rem;
    background: var(--couleur-carte);
}

.lien-filtre.actif {
    background: var(--couleur-accent-olive);
    border-color: var(--couleur-accent-olive);
    color: #fff;
}

.selection-courses {
    margin-bottom: 20px;
}

.bloc-semaine-courses {
    background: var(--couleur-carte);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    padding: 14px 16px;
    margin-bottom: 12px;
}

.entete-semaine-courses {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.entete-semaine-courses h3 {
    margin: 0;
    color: var(--couleur-primaire-fonce);
    font-size: 1rem;
}

.actions-semaine {
    display: flex;
    gap: 10px;
}

.lien-action {
    background: none;
    border: none;
    color: var(--couleur-accent-olive);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

.grille-jours-courses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
}

.jour-courses {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    background: var(--couleur-fond);
    border-radius: 6px;
}

.nom-jour-courses {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--couleur-primaire-fonce);
    margin-bottom: 2px;
}

.case-selection-repas {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    cursor: pointer;
}

.case-selection-repas input {
    width: auto;
    margin: 0;
}

.case-selection-repas.desactive-au-plan {
    color: var(--couleur-texte-clair);
    cursor: default;
}

.note-desactive {
    font-size: 0.7rem;
    font-style: italic;
}

.liste-courses {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--couleur-carte);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    overflow: hidden;
}

.liste-courses li {
    display: flex;
    justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid var(--couleur-bordure);
}

.liste-courses li:last-child {
    border-bottom: none;
}

.nom-ingredient {
    text-transform: capitalize;
}

.quantite-ingredient {
    color: var(--couleur-texte-clair);
    font-weight: 600;
    white-space: nowrap;
    margin-left: 12px;
}

.colonne-droite-item {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.lien-leclerc-item {
    font-size: 0.7rem;
    font-weight: 600;
    color: #fff;
    background: #0057b8;
    padding: 2px 8px;
    border-radius: 10px;
    text-decoration: none;
    white-space: nowrap;
}

.lien-leclerc-item:hover {
    opacity: 0.85;
}

.lien-carrefour-item {
    font-size: 0.7rem;
    font-weight: 600;
    color: #fff;
    background: #004e9f;
    padding: 2px 8px;
    border-radius: 10px;
    text-decoration: none;
    white-space: nowrap;
}

.lien-carrefour-item:hover {
    opacity: 0.85;
}

.lien-auchan-item {
    font-size: 0.7rem;
    font-weight: 600;
    color: #fff;
    background: #e2001a;
    padding: 2px 8px;
    border-radius: 10px;
    text-decoration: none;
    white-space: nowrap;
}

.lien-auchan-item:hover {
    opacity: 0.85;
}

.bloc-leclerc-drive {
    margin: 10px 0 16px;
    font-size: 0.85rem;
}

.details-leclerc-drive summary {
    cursor: pointer;
    color: #c0392b;
    font-weight: 600;
}


.form-leclerc-drive {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--couleur-carte);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    max-width: 420px;
}

.form-leclerc-drive label {
    font-size: 0.8rem;
    font-weight: 600;
}

.form-leclerc-drive input[type="text"] {
    width: 100%;
}

.aide-leclerc-drive {
    color: var(--couleur-texte-clair);
    font-size: 0.78rem;
    margin: 0;
}

.actions-form-leclerc {
    display: flex;
    align-items: center;
    gap: 14px;
}

.note-leclerc-actif {
    color: var(--couleur-texte-clair);
    font-size: 0.8rem;
    margin: 0;
}

.erreur-leclerc {
    color: #b3261e;
    font-size: 0.8rem;
    margin: 0 0 6px;
}

.bloc-producteur-local {
    margin: 10px 0 16px;
    font-size: 0.85rem;
}

.details-producteur-local summary {
    cursor: pointer;
    color: #2e7d32;
    font-weight: 600;
}

.form-producteur-local {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--couleur-carte);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    max-width: 420px;
}

.form-producteur-local label {
    font-size: 0.8rem;
    font-weight: 600;
}

.form-producteur-local input[type="text"],
.form-producteur-local select {
    width: 100%;
}

.aide-producteur-local {
    color: var(--couleur-texte-clair);
    font-size: 0.78rem;
    margin: 0;
}

.actions-form-producteur-local {
    display: flex;
    align-items: center;
    gap: 14px;
}

.note-producteur-local-actif {
    color: var(--couleur-texte-clair);
    font-size: 0.8rem;
    margin: 0;
}

.erreur-producteur-local {
    color: #b3261e;
    font-size: 0.8rem;
    margin: 0 0 6px;
}

.lien-inscription-producteur {
    margin: 6px 0 0;
    font-size: 0.78rem;
}

.bloc-producteurs-monketo {
    margin: 10px 0 16px;
}

.bloc-producteurs-monketo h3 {
    font-size: 0.9rem;
    margin: 0 0 8px;
    color: #2e7d32;
}

.liste-producteurs-monketo {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.carte-producteur-monketo {
    padding: 10px 12px;
    background: var(--couleur-carte);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    max-width: 420px;
    font-size: 0.85rem;
}

.nom-producteur-monketo {
    margin: 0 0 4px;
    font-weight: 600;
}

.distance-producteur-monketo {
    font-weight: 400;
    color: var(--couleur-texte-clair);
    font-size: 0.78rem;
}

.ingredients-producteur-monketo {
    margin: 0 0 4px;
    font-size: 0.8rem;
}

.description-producteur-monketo {
    margin: 0 0 6px;
    font-size: 0.78rem;
    color: var(--couleur-texte-clair);
}

.contact-producteur-monketo {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    font-size: 0.78rem;
}

.liste-vide {
    justify-content: center;
    color: var(--couleur-texte-clair);
    font-style: italic;
}

.item-course {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s;
}

.item-course:hover {
    background: var(--couleur-fond);
}

.item-course:active {
    background: #ece8dc;
}

.section-achetes {
    margin-top: 16px;
}

.entete-achetes {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    padding: 10px 4px;
    font-size: 1.1rem;
    color: var(--couleur-accent-orange);
    cursor: pointer;
    font-weight: 700;
}

.titre-a-acheter {
    color: var(--couleur-accent-olive);
    font-weight: 700;
    font-size: 1.1rem;
    margin: 16px 0 8px;
}

.fleche-achetes {
    display: inline-block;
    transition: transform 0.2s;
}

.fleche-achetes.ouverte {
    transform: rotate(180deg);
}

.liste-achetes {
    margin-top: 6px;
}

.liste-achetes.repliee {
    display: none;
}

.liste-achetes .item-course {
    opacity: 0.55;
}

.liste-achetes .nom-ingredient {
    text-decoration: line-through;
}

@media (max-width: 480px) {
    .grille-jours {
        grid-template-columns: 1fr 1fr;
    }
}

.lien-recette {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-decoration: none;
    color: inherit;
}

.lien-recette:hover .titre-recette {
    text-decoration: underline;
}

.lien-recette .photo-recette {
    cursor: pointer;
}

.fiche-recette {
    position: relative;
    background: var(--couleur-carte);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    padding: 20px;
}

.aide-fiche-recette {
    position: absolute;
    top: 12px;
    right: 16px;
}

.fiche-image {
    width: 100%;
    max-width: 360px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--rayon);
    display: block;
    margin: 0 auto 16px;
    background: var(--couleur-fond);
}

.bloc-photo-votes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 16px;
}

.bloc-photo-votes .fiche-image {
    margin: 0;
}

.votes-recette {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}

.bouton-vote {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: var(--couleur-carte);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bouton-vote:hover {
    border-color: currentColor;
}

.icone-vote {
    display: block;
    line-height: 1;
}

.icone-vote svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
    display: block;
}

.bouton-vote-haut {
    color: var(--couleur-accent-olive);
}

.bouton-vote-haut.actif {
    background: var(--couleur-accent-olive);
    border-color: var(--couleur-accent-olive);
    color: #fff;
}

.bouton-vote-bas {
    color: var(--couleur-accent-orange);
}

.bouton-vote-bas.actif {
    background: var(--couleur-accent-orange);
    border-color: var(--couleur-accent-orange);
    color: #fff;
}

@media (max-width: 480px) {
    .bloc-photo-votes {
        flex-direction: column;
    }

    .votes-recette {
        flex-direction: row;
    }
}

.fiche-recette h2 {
    color: var(--couleur-primaire-fonce);
    text-align: center;
    margin: 0 0 8px;
}

.fiche-meta {
    display: flex;
    gap: 16px;
    justify-content: center;
    color: var(--couleur-texte-clair);
    font-size: 0.85rem;
    margin-bottom: 20px;
}

.bloc-ingredients, .bloc-instructions {
    margin-top: 20px;
}

.bloc-ingredients h3, .bloc-instructions h3 {
    color: var(--couleur-primaire-fonce);
    font-size: 1.05rem;
    border-bottom: 2px solid var(--couleur-bordure);
    padding-bottom: 6px;
}

.liste-ingredients-fiche {
    list-style: none;
    margin: 0;
    padding: 0;
}

.liste-ingredients-fiche li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--couleur-bordure);
}

.liste-ingredients-fiche li:last-child {
    border-bottom: none;
}

.liste-ingredients-fiche .nom-ingredient {
    flex: 0 0 50%;
    max-width: 50%;
    text-align: left;
}

.liste-ingredients-fiche .colonne-quantite {
    flex: 0 0 50%;
    max-width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.liste-ingredients-fiche .quantite {
    color: var(--couleur-accent-orange);
    font-weight: 600;
}

.liste-ingredients-fiche .grammage {
    color: var(--couleur-texte-clair);
    font-size: 0.78rem;
}

.bloc-instructions p {
    white-space: pre-line;
    line-height: 1.7;
}

.instructions-manquantes {
    color: var(--couleur-texte-clair);
    font-style: italic;
}