/*
 * Thoc Chef :: Affichage
 * Mise en forme minimale et neutre des shortcodes. Tout est en classes
 * génériques, à surcharger dans le thème ou la feuille du site.
 */

.thoc-bloc { margin: 0 0 2.5rem; }
.thoc-bloc-titre { margin: 0 0 1rem; }
.thoc-sous-titre { margin: 1.5rem 0 .5rem; font-size: 1.05em; }

/* Ligne de pictogrammes */

.thoc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
    font-size: .95em;
}

.thoc-meta li { position: relative; }

.thoc-meta li + li::before {
    content: "";
    position: absolute;
    left: -.65rem;
    top: .2em;
    bottom: .2em;
    border-left: 1px solid currentColor;
    opacity: .3;
}

/* Ingrédients */

.thoc-ingredients,
.thoc-ustensiles,
.thoc-materiel,
.thoc-points-vente,
.thoc-coordonnees,
.thoc-reseaux {
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.thoc-ingredients li,
.thoc-ustensiles li,
.thoc-materiel li,
.thoc-points-vente li,
.thoc-coordonnees li {
    padding: .35rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.thoc-ingredient-quantite { font-weight: 600; }
.thoc-ingredient-mention,
.thoc-pv-jours { opacity: .7; font-size: .9em; }
.thoc-ingredients-groupe { margin: 1.25rem 0 .5rem; font-size: 1em; text-transform: uppercase; letter-spacing: .04em; }

/* Étapes */

.thoc-etapes { margin: 0; padding: 0 0 0 1.5rem; }
.thoc-etape { margin: 0 0 1.75rem; }
.thoc-etape-visuel { margin: 0 0 .75rem; }
.thoc-etape-visuel img { height: auto; max-width: 100%; }
.thoc-etape-texte p:last-child { margin-bottom: 0; }
.thoc-etape-geste { margin: .5rem 0 0; font-size: .95em; }
.thoc-etape-astuce { margin: .5rem 0 0; font-style: italic; opacity: .85; }

/* Cartes de contenus liés */

.thoc-cartes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.thoc-carte a { display: block; text-decoration: none; }
.thoc-carte-visuel { display: block; margin: 0 0 .5rem; }
.thoc-carte-visuel img { display: block; width: 100%; height: auto; }
.thoc-carte-titre { display: block; font-weight: 600; line-height: 1.3; }

/* Étiquettes */

.thoc-etiquettes { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }

.thoc-etiquettes a {
    display: inline-block;
    padding: .2rem .7rem;
    border: 1px solid currentColor;
    border-radius: 2rem;
    font-size: .9em;
    text-decoration: none;
}

/* Calendrier de saisonnalité */

.thoc-calendrier { display: flex; gap: .35rem; margin: 0; padding: 0; list-style: none; }

.thoc-mois {
    flex: 1 1 0;
    padding: .5rem 0;
    text-align: center;
    border-radius: .25rem;
    background: rgba(0, 0, 0, .06);
    font-size: .9em;
}

.thoc-mois abbr { text-decoration: none; border: 0; }
.thoc-mois-actif { background: currentColor; }
.thoc-mois-actif abbr { color: #fff; mix-blend-mode: difference; }
.thoc-calendrier-note { margin: .75rem 0 0; font-size: .9em; opacity: .8; }

/* Vidéo */

.thoc-video { position: relative; }
.thoc-video iframe,
.thoc-video video { width: 100%; aspect-ratio: 16 / 9; height: auto; }

/* Conseil */

.thoc-conseil { margin: 1.5rem 0 0; padding: 1rem 1.25rem; background: rgba(0, 0, 0, .04); border-radius: .25rem; }
.thoc-conseil p:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
    .thoc-cartes { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .thoc-calendrier { flex-wrap: wrap; }
    .thoc-mois { flex-basis: calc(100% / 6 - .35rem); }
}

/* ------------------------------------------------------------------ 0.2.0 */

/* Pastilles — « Nouveau », « C'est de saison » */

.thoc-pastille {
    display: inline-block;
    padding: .15rem .6rem;
    border-radius: 2rem;
    background: currentColor;
    font-size: .8em;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .02em;
    white-space: nowrap;
}

.thoc-pastille + .thoc-pastille { margin-left: .35rem; }

/*
 * Les couleurs passent par des variables : la feuille du site redéfinit
 * --accent et --vert (ou ces deux règles) pour coller à la charte.
 */

.thoc-pastille-nouveau { background: var(--accent, #2b3fd4); color: #fff; }
.thoc-pastille-saison { background: var(--vert, #3f7d3a); color: #fff; }

/* Étoiles */

.thoc-note {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    line-height: 1;
}

.thoc-etoiles {
    position: relative;
    display: inline-block;
    font-size: 1.05em;
    letter-spacing: .1em;
    white-space: nowrap;
}

.thoc-etoiles-fond { color: currentColor; opacity: .25; }

.thoc-etoiles-plein {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    color: var(--accent, #e0a21c);
}

.thoc-note-valeur { font-weight: 600; font-size: .95em; }
.thoc-note-nombre { font-size: .85em; opacity: .7; }
.thoc-note-vide { font-size: .9em; opacity: .7; }

/* Formulaire de notation */

.thoc-notation { margin: 2rem 0; }
.thoc-notation-intro { margin: 0 0 .5rem; font-weight: 600; }

.thoc-notation-etoiles {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: .1rem;
    margin: 0 0 .75rem;
    padding: 0;
    border: 0;
}

.thoc-notation-legende {
    float: left;
    width: 100%;
    margin: 0 0 .35rem;
    padding: 0;
    font-size: .9em;
    opacity: .8;
}

.thoc-notation-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.thoc-notation-etoile {
    cursor: pointer;
    font-size: 1.75rem;
    line-height: 1;
    color: currentColor;
    opacity: .25;
    transition: opacity .12s ease, color .12s ease;
}

.thoc-notation-etoiles:not([disabled]) .thoc-notation-etoile:hover,
.thoc-notation-etoiles:not([disabled]) .thoc-notation-etoile:hover ~ .thoc-notation-etoile,
.thoc-notation-radio:checked + .thoc-notation-etoile,
.thoc-notation-radio:checked + .thoc-notation-etoile ~ .thoc-notation-etoile {
    opacity: 1;
    color: var(--accent, #e0a21c);
}

.thoc-notation-radio:focus-visible + .thoc-notation-etoile {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: .2rem;
}

.thoc-notation-etoiles[disabled] .thoc-notation-etoile { cursor: default; }

.thoc-notation-envoi {
    font: inherit;
    cursor: pointer;
    padding: .5rem 1.1rem;
    border: 1px solid currentColor;
    border-radius: 2rem;
    background: none;
    color: inherit;
}

.thoc-notation-envoi[disabled] { opacity: .5; cursor: default; }

.thoc-notation-message { margin: .75rem 0 0; font-size: .95em; }
.thoc-notation-message:empty { display: none; }
.thoc-notation-message-erreur { color: #b3261e; }
.thoc-notation-moyenne { margin: .5rem 0 0; }

.thoc-lecteur-ecran {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}