/* ItalPassion Essais Communauté — front */

/* Le site passe le texte en blanc en mode sombre (html.dark body). Toutes les
   cartes ci-dessous ont un fond blanc : on fige leur couleur de texte, sinon
   titres et paragraphes deviennent blanc sur blanc. */
.itec-scorecard,
.itec-notes,
.itec-encadre,
.itec-citation,
.itec-notice,
.itec-confirmation { color: #121924; }

/* Liens des blocs ajoutés : même rendu que les liens du contenu des articles
   (règle .entry-content a du thème, que ces blocs ne reçoivent pas). */
.itec-summary a,
.itec-notes a,
.itec-voiture-link a {
    color: inherit;
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--secondary);
    text-underline-offset: .25em;
}
.itec-summary a:hover,
.itec-notes a:hover,
.itec-voiture-link a:hover { color: var(--secondary); }

/* En-tête d'un essai : mention communauté + note globale */
.itec-summary { margin: 1rem 0 1.5rem; }
.itec-summary__byline { margin: 0 0 0.8rem; font-size: 0.95em; }
.itec-scorecard {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1.2rem;
    background: #fff;
    border-left: 4px solid #a41006;
    border-radius: 8px;
    padding: 1rem 1.4rem;
    box-shadow: 0 2px 6px rgba(18,25,36,0.08);
}
.itec-scorecard__globale { display: flex; align-items: baseline; gap: 0.4rem; }
.itec-scorecard__globale-valeur { font-size: 2.4em; font-weight: 900; color: #a41006; line-height: 1; }
.itec-scorecard__globale-label { color: #666; }
.itec-scorecard__caption { margin: 0; font-size: 0.92em; color: #444; }

/* Détail de la notation (fin d'article) */
.itec-notes,
.itec-encadre {
    background: #fff;
    border-radius: 8px;
    padding: 1.2rem 1.6rem;
    margin: 1.5rem 0;
    box-shadow: 0 2px 6px rgba(18,25,36,0.08);
}
.itec-notes { border-left: 4px solid #a41006; }
.itec-notes h2,
.itec-encadre h2 {
    margin-top: 0;
    font-size: 1.2em;
    color: inherit;
    border-bottom: 2px solid #a41006;
    padding-bottom: 0.4rem;
}
.itec-notes__axes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.itec-notes__axe {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) 2fr auto;
    align-items: center;
    gap: 0.8rem;
    margin: 0;
    font-size: 0.92em;
}
.itec-notes__bar { display: block; height: 8px; background: #e7e7e7; border-radius: 4px; overflow: hidden; }
.itec-notes__bar span { display: block; height: 100%; background: #a41006; }
.itec-notes__note { color: #444; white-space: nowrap; }
.itec-notes__total { margin: 1rem 0 0; text-align: right; }
@media (max-width: 600px) {
    .itec-notes__axe { grid-template-columns: 1fr; gap: 0.3rem; }
    .itec-notes__total { text-align: left; }
}

/* Encadrés techniques */
.itec-encadre ul { margin: 0; padding-left: 1.2rem; }
.itec-encadre p { margin: 0 0 0.6rem; }
.itec-encadre p:last-child { margin-bottom: 0; }

/* Citations */
.itec-citation {
    border-left: 4px solid #a41006;
    background: #fff;
    margin: 1rem 0;
    padding: 1rem 1.4rem;
    font-style: italic;
    border-radius: 0 8px 8px 0;
}

.itec-voiture-link { margin: 1.5rem 0; font-weight: 600; }

/* ==========================================================================
   Archives de la catégorie Essais (et sous-catégories) : cartes
   --------------------------------------------------------------------------
   Le thème met la photo à 80 % d'opacité avec un masque en dégradé qui la
   fait disparaître vers le bas, sous le titre : la voiture est à moitié
   cachée. Ici : photo entière et nette en haut, texte dessous, badges en
   coin. Tout est limité à body.itec-essais-archive (classe ajoutée par
   ITEC_Templates) : les autres archives du site ne changent pas.
   Sélecteurs volontairement plus spécifiques que ceux du thème
   (.generate-columns, .featured-column…) pour les surcharger sans !important.
   ========================================================================== */

/* Grille responsive : 1 colonne mobile, 2 tablette, 3 desktop.
   La carte "à la une" (marquée par le thème) occupe 2 colonnes. */
body.itec-essais-archive .generate-columns-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 1.5rem;
}
body.itec-essais-archive .generate-columns-container > :not(article) { grid-column: 1 / -1; } /* titre + sous-catégories */
body.itec-essais-archive .generate-columns-container > article {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    float: none;
    flex: none;
}
@media (min-width: 700px) {
    body.itec-essais-archive .generate-columns-container > article.featured-column { grid-column: span 2; }
}

/* Carte */
body.itec-essais-archive .generate-columns-container > article .inside-article {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    aspect-ratio: auto;
    width: auto;
    min-height: 0;
    height: 100%;
    padding: 0;
    overflow: hidden;
    border-radius: 14px;
    background: var(--darkest, #121924);
    color: var(--lightest, #fff);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 6px 20px rgba(18, 25, 36, 0.18);
    transition: transform 0.25s, box-shadow 0.25s;
}
body.itec-essais-archive .generate-columns-container > article .inside-article:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(18, 25, 36, 0.28);
}
body.itec-essais-archive .generate-columns-container > article .inside-article:focus-within {
    outline: 2px solid var(--secondary, #8fa64d);
    outline-offset: 2px;
}

/* Photo : entière, nette, sans voile. Elle absorbe la hauteur restante quand
   la carte voisine est plus haute (pas de vide dans la carte). */
body.itec-essais-archive .generate-columns-container > article .post-image {
    position: relative;
    inset: auto;
    margin: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    flex: 1 0 auto;
}
body.itec-essais-archive .generate-columns-container > article .post-image img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    -webkit-mask-image: none;
    mask-image: none;
    transition: transform 0.5s;
}
body.itec-essais-archive .generate-columns-container > article .inside-article:hover .post-image img { transform: scale(1.04); }
@media (min-width: 700px) {
    body.itec-essais-archive .generate-columns-container > article.featured-column .post-image { aspect-ratio: 2 / 1; }
}

/* Texte sous la photo */
body.itec-essais-archive .generate-columns-container > article .entry-header {
    flex: none;
    position: static;
    z-index: auto;
    margin: 0;
    width: auto;
    padding: 1rem 1.2rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
body.itec-essais-archive .generate-columns-container > article .entry-title {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (min-width: 700px) {
    body.itec-essais-archive .generate-columns-container > article.featured-column .entry-title { font-size: 1.5rem; }
}
/* Toute la carte est cliquable (le lien du titre s'étend sur la carte) */
body.itec-essais-archive .generate-columns-container > article .entry-title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
}
body.itec-essais-archive .generate-columns-container > article .entry-meta { font-size: 0.82rem; opacity: 0.75; }

/* Badges en coin de photo (archive-meta.php) : type d'auteur + note.
   Fond sombre translucide : lisible sur n'importe quelle photo. */
.itec-archive-meta {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    right: 0.75rem;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    pointer-events: none;
    font-size: 0.8rem;
    color: #fff;
}
.itec-archive-meta__badge,
.itec-archive-meta__note {
    background: rgba(18, 25, 36, 0.82);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.itec-archive-meta__badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 20px; font-weight: 600; }
.itec-archive-meta__badge--communaute { background: #a41006; border-color: #a41006; }
.itec-archive-meta__note { margin-left: auto; padding: 0.2rem 0.65rem; border-radius: 10px; font-weight: 800; font-size: 0.95rem; }

@media (prefers-reduced-motion: reduce) {
    body.itec-essais-archive .generate-columns-container > article .inside-article,
    body.itec-essais-archive .generate-columns-container > article .post-image img { transition: none; }
    body.itec-essais-archive .generate-columns-container > article .inside-article:hover { transform: none; }
    body.itec-essais-archive .generate-columns-container > article .inside-article:hover .post-image img { transform: none; }
}

/* Formulaire de soumission */
.itec-fields-wrapper .acf-tab-wrap { margin-bottom: 1rem; }
.itec-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.itec-photo-limit {
    display: inline-block;
    font-size: 1.15em;
    font-weight: 700;
    color: #a41006 !important;
}

/* Le site passe le texte en blanc en mode sombre (html.dark body), ce qui
   rend illisible l'UI d'ACF qui garde ses propres fonds clairs (onglets,
   boutons, textes d'aide). On fige ces zones en clair quel que soit le thème. */
#essai-form .acf-tab-group li a { color: #333 !important; }
#essai-form .acf-tab-group li.active a { color: #000 !important; }
#essai-form input[type="text"],
#essai-form input[type="email"],
#essai-form input[type="number"],
#essai-form textarea,
#essai-form select { color: #121924 !important; background: #fff !important; }

/* Statut d'envoi sous chaque photo (photo-upload.js). Carte claire : lisible
   en mode clair comme en mode sombre. */
.itec-up-status {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: 0.6rem;
    padding: 0.6rem 0.8rem;
    background: #fff;
    color: #121924;
    border-left: 4px solid #888;
    border-radius: 6px;
    font-size: 0.92em;
}
.itec-up-status .itec-up-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.itec-up-status .itec-up-body { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.itec-up-status progress { width: 100%; max-width: 260px; height: 8px; }
.itec-up--ok { border-left-color: #2e7d32; }
.itec-up--ok .itec-up-text { color: #2e7d32; font-weight: 700; }
.itec-up--error { border-left-color: #a41006; }
.itec-up--error .itec-up-text { color: #a41006; font-weight: 700; }

/* Le bouton d'envoi est unique et rendu par ACF après tous les champs, donc
   après n'importe quel onglet vu qu'ACF ne fait qu'afficher/masquer les
   onglets en JS sans déplacer le bouton. On ne le montre que sur l'onglet
   Validation (vérifié en direct sur data-key="field_itec_tab_validation"). */
#essai-form .acf-form-submit { display: none; }
#essai-form:has(.acf-tab-group li.active a[data-key="field_itec_tab_validation"]) .acf-form-submit { display: block; }
.itec-notice, .itec-confirmation {
    background: #fff;
    border-left: 4px solid #a41006;
    border-radius: 8px;
    padding: 1.2rem 1.6rem;
}
.itec-confirmation strong { display: block; color: #121924; margin-bottom: 0.3rem; }