/**
 * Theme Name: Cc
 * Description: Thème sur mesure pour le site Cc
 * Version: 1.0.0
 * Author: La Quincaillerie
 * Author URI: https://la-quincaillerie.fr
 * Text Domain: qce
 */

/* ============================================
   Formulaire Contact Form 7
   carreauxetcouleurs.fr
   Couleurs : #0374F5 (primaire) · #FFFBE9 (secondaire)
   ============================================ */

/* --- Variables --- */
:root {
  --blue:        #0374F5;
  --blue-dark:   #025ec4;
  --blue-light:  #e6f0ff;
  --cream:       #FFFBE9;
  --cream-border:#e8dfa0;
  --text:        #1a1a1a;
  --text-muted:  #666666;
  --border:      #d8d8d8;
  --radius:      8px;
  --font:        Arial, Helvetica, sans-serif;
  --transition:  0.2s ease;
}

/* --- Wrapper global du formulaire --- */
.wpcf7 {
  max-width: 640px;
  margin: 0 auto;
  font-family: var(--font);
  color: var(--text);
}

/* --- Labels --- */
.wpcf7 label,
.wpcf7 > label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1.4;
}

/* --- Champs texte / tel / email --- */
.wpcf7 .formulaire {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  font-size: 14px;
  font-family: var(--font);
  color: var(--text);
  background: #ffffff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
  margin-bottom: 20px;
}

.wpcf7 .formulaire:hover {
  border-color: #aac4f5;
}

.wpcf7 .formulaire:focus {
  border-color: var(--blue);
  background: var(--cream);
  box-shadow: 0 0 0 3px rgba(3, 116, 245, 0.12);
}

/* Champ invalide (CF7 ajoute .wpcf7-not-valid) */
.wpcf7 .formulaire.wpcf7-not-valid {
  border-color: #e24b4a;
  background: #fff5f5;
}

/* --- Span wrappant chaque champ CF7 --- */
.wpcf7 span.wpcf7-form-control-wrap {
  display: block;
}

/* --- Case à cocher confidentialité --- */
.wpcf7 .accepter-formulaire {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  cursor: pointer;
}

.wpcf7 .accepter-formulaire input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  background: #ffffff;
  cursor: pointer;
  margin-top: 1px;
  transition: border-color var(--transition), background var(--transition);
  position: relative;
}

.wpcf7 .accepter-formulaire input[type="checkbox"]:hover {
  border-color: var(--blue);
}

.wpcf7 .accepter-formulaire input[type="checkbox"]:checked {
  background: var(--blue);
  border-color: var(--blue);
}

.wpcf7 .accepter-formulaire input[type="checkbox"]:checked::after {
  content: '';
  display: block;
  width: 5px;
  height: 9px;
  border: 2px solid #ffffff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translate(2px, -1px);
  position: absolute;
  top: 1px;
  left: 4px;
}

.wpcf7 .accepter-formulaire .wpcf7-list-item-label {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* --- Texte RGPD --- */
.wpcf7 .texte-formulaire,
.wpcf7 p.texte-formulaire {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.7;
  background: var(--cream);
  border: 1px solid var(--cream-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 0 0 24px;
}

/* --- Bouton Envoyer --- */
.wpcf7 .bouton-formulaire,
.wpcf7 input.bouton-formulaire[type="submit"] {
  display: inline-block;
  padding: 12px 32px;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font);
  color: #ffffff;
  background: var(--blue);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.wpcf7 .bouton-formulaire:hover,
.wpcf7 input.bouton-formulaire[type="submit"]:hover {
  background: var(--blue-dark);
  box-shadow: 0 4px 14px rgba(3, 116, 245, 0.3);
}

.wpcf7 .bouton-formulaire:active,
.wpcf7 input.bouton-formulaire[type="submit"]:active {
  transform: scale(0.98);
  box-shadow: none;
}

/* Bouton désactivé pendant l'envoi */
.wpcf7 .bouton-formulaire:disabled,
.wpcf7 input.bouton-formulaire[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* --- Messages de réponse CF7 --- */
.wpcf7-response-output {
  margin-top: 16px !important;
  padding: 12px 16px !important;
  border-radius: var(--radius) !important;
  font-size: 14px !important;
  border: 1.5px solid !important;
}

/* Succès */
.wpcf7-mail-sent-ok {
  background: #eaf3de !important;
  border-color: #639922 !important;
  color: #3b6d11 !important;
}

/* Erreur */
.wpcf7-mail-sent-ng,
.wpcf7-aborted {
  background: #fcebeb !important;
  border-color: #e24b4a !important;
  color: #a32d2d !important;
}

/* Validation */
.wpcf7-validation-errors,
.wpcf7-acceptance-missing {
  background: #faeeda !important;
  border-color: #ba7517 !important;
  color: #854f0b !important;
}

/* Message d'erreur inline sous un champ */
.wpcf7-not-valid-tip {
  display: block;
  font-size: 12px;
  color: #a32d2d;
  margin-top: -16px;
  margin-bottom: 16px;
}

/* ============================================
   Formulaire de contact — carreauxetcouleurs.fr
   ============================================ */

:root {
  --blue:        #0374F5;
  --blue-dark:   #025ec4;
  --blue-light:  #e6f0ff;
  --cream:       #FFFBE9;
  --cream-border:#e8dfa0;
  --text:        #1a1a1a;
  --text-muted:  #666666;
  --border:      #d8d8d8;
  --radius:      8px;
  --font:        Arial, Helvetica, sans-serif;
  --ease:        0.2s ease;
}

/* --- Wrapper global --- */
.wpcf7 {
  max-width: 680px;
  margin: 0 auto;
  font-family: var(--font);
  color: var(--text);
}

/* --- Labels --- */
.wpcf7 label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1.4;
}

.cf7-required {
  color: var(--blue);
  margin-left: 2px;
}

/* --- Champ simple (wrapping block) --- */
.cf7-field {
  margin-bottom: 20px;
}

/* --- Ligne 2 colonnes Prénom / Nom --- */
.cf7-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

@media (max-width: 520px) {
  .cf7-row {
    grid-template-columns: 1fr;
  }
}

.cf7-col {
  display: flex;
  flex-direction: column;
}

/* --- Inputs texte / tel / email --- */
.wpcf7 .cf7-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  font-size: 14px;
  font-family: var(--font);
  color: var(--text);
  background: #ffffff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  transition: border-color var(--ease), box-shadow var(--ease), background var(--ease);
}

.wpcf7 .cf7-input:hover {
  border-color: #aac4f5;
}

.wpcf7 .cf7-input:focus {
  border-color: var(--blue);
  background: var(--cream);
  box-shadow: 0 0 0 3px rgba(3, 116, 245, 0.12);
}

.wpcf7 .cf7-input.wpcf7-not-valid {
  border-color: #e24b4a;
  background: #fff5f5;
}

/* --- Select (motif) --- */
.wpcf7 .cf7-select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 11px 36px 11px 14px;
  font-size: 14px;
  font-family: var(--font);
  color: var(--text);
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230374F5' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color var(--ease), box-shadow var(--ease), background-color var(--ease);
}

.wpcf7 .cf7-select:hover {
  border-color: #aac4f5;
}

.wpcf7 .cf7-select:focus {
  border-color: var(--blue);
  background-color: var(--cream);
  box-shadow: 0 0 0 3px rgba(3, 116, 245, 0.12);
}

/* --- Textarea (message) --- */
.wpcf7 .cf7-textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font-size: 14px;
  font-family: var(--font);
  color: var(--text);
  background: #ffffff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  resize: vertical;
  min-height: 140px;
  line-height: 1.6;
  transition: border-color var(--ease), box-shadow var(--ease), background var(--ease);
}

.wpcf7 .cf7-textarea:hover {
  border-color: #aac4f5;
}

.wpcf7 .cf7-textarea:focus {
  border-color: var(--blue);
  background: var(--cream);
  box-shadow: 0 0 0 3px rgba(3, 116, 245, 0.12);
}

.wpcf7 .cf7-textarea.wpcf7-not-valid {
  border-color: #e24b4a;
  background: #fff5f5;
}

/* Compteur de caractères */
.cf7-counter {
  display: block;
  text-align: right;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 5px;
}

/* --- Bloc RGPD --- */
.cf7-rgpd {
  background: var(--cream);
  border: 1px solid var(--cream-border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 24px;
}

.cf7-rgpd-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 10px;
}

/* Checkbox RGPD */
.wpcf7 .cf7-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}

.wpcf7 .cf7-checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  background: #ffffff;
  cursor: pointer;
  margin-top: 1px;
  transition: border-color var(--ease), background var(--ease);
  position: relative;
}

.wpcf7 .cf7-checkbox input[type="checkbox"]:hover {
  border-color: var(--blue);
}

.wpcf7 .cf7-checkbox input[type="checkbox"]:checked {
  background: var(--blue);
  border-color: var(--blue);
}

.wpcf7 .cf7-checkbox input[type="checkbox"]:checked::after {
  content: '';
  display: block;
  width: 5px;
  height: 9px;
  border: 2px solid #ffffff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translate(2px, -1px);
  position: absolute;
  top: 1px;
  left: 4px;
}

.wpcf7 .cf7-checkbox .wpcf7-list-item-label {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}

.wpcf7 .cf7-checkbox .wpcf7-list-item-label a {
  color: var(--blue);
  text-decoration: underline;
}

/* Texte RGPD */
.cf7-rgpd-text {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0;
}

.cf7-rgpd-text a {
  color: var(--blue);
  text-decoration: underline;
}

/* --- Bouton Envoyer --- */
.wpcf7 .cf7-submit,
.wpcf7 input.cf7-submit[type="submit"] {
  display: inline-block;
  padding: 13px 36px;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font);
  color: #ffffff;
  background: var(--blue);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: background var(--ease), transform var(--ease), box-shadow var(--ease);
}

.wpcf7 .cf7-submit:hover,
.wpcf7 input.cf7-submit[type="submit"]:hover {
  background: var(--blue-dark);
  box-shadow: 0 4px 16px rgba(3, 116, 245, 0.32);
}

.wpcf7 .cf7-submit:active,
.wpcf7 input.cf7-submit[type="submit"]:active {
  transform: scale(0.98);
  box-shadow: none;
}

.wpcf7 .cf7-submit:disabled,
.wpcf7 input.cf7-submit[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* --- Span wrappant les champs CF7 --- */
.wpcf7 span.wpcf7-form-control-wrap {
  display: block;
}

/* --- Erreurs inline --- */
.wpcf7-not-valid-tip {
  display: block;
  font-size: 12px;
  color: #a32d2d;
  margin-top: 4px;
}

/* --- Messages de réponse CF7 --- */
.wpcf7-response-output {
  margin-top: 16px !important;
  padding: 12px 16px !important;
  border-radius: var(--radius) !important;
  font-size: 14px !important;
  border: 1.5px solid !important;
}

.wpcf7-mail-sent-ok {
  background: #eaf3de !important;
  border-color: #639922 !important;
  color: #3b6d11 !important;
}

.wpcf7-mail-sent-ng,
.wpcf7-aborted {
  background: #fcebeb !important;
  border-color: #e24b4a !important;
  color: #a32d2d !important;
}

.wpcf7-validation-errors,
.wpcf7-acceptance-missing {
  background: #faeeda !important;
  border-color: #ba7517 !important;
  color: #854f0b !important;
}

/*
 * Grille + carte du filtre AJAX. Le CSS natif du bloc "qce/loop-actu" est
 * toujours forcé au chargement (functions.php) pour la cohérence globale du
 * site (couleurs, variables), mais la mise en page de la carte est redéfinie
 * ici de façon autonome et scoped à #articles-container : on ne dépend plus
 * de l'héritage du style natif pour l'empilement taxo/titre ni pour la
 * taille de la flèche, ce qui évite tout chevauchement ou débordement.
 */
#articles-container {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

#articles-container li {
    margin: 0;
}

#articles-container .qce-loop-actu {
    position: relative;
    display: flex;
    align-items: flex-end;
    box-sizing: border-box;
    min-height: 320px;
    padding: 24px;
    overflow: hidden;
    color: #fff;
}

#articles-container .qce-loop-actu a {
    display: block;
    width: 100%;
    color: inherit;
    text-decoration: none;
}

/* Pas de position sur .qce-loop-actu a : l'overlay doit se caler sur la carte
   entière (.qce-loop-actu, position:relative), pas sur le <a> qui ne fait que
   la hauteur de son contenu (texte en bas). */
#articles-container .qce-loop-actu .overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 65%);
}

#articles-container .qce-loop-actu .taxo {
    position: relative;
    z-index: 1;
    display: block;
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.3;
}

#articles-container .qce-loop-actu__content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

/* La colonne titre peut rétrécir/passer à la ligne sans jamais pousser la flèche hors de la carte */
#articles-container .qce-loop-actu__content > div:first-child {
    min-width: 0;
}

#articles-container .qce-loop-actu__content h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    color: inherit;
}

/* La flèche garde une taille fixe et ne rétrécit jamais (évite le débordement) */
#articles-container .qce-loop-actu__content > div:last-child {
    flex: 0 0 auto;
}

#articles-container .qce-loop-actu__content svg {
    display: block;
}

#articles-container .qce-loop-actu ellipse {
    transition: fill 0.3s ease;
}

#articles-container .qce-loop-actu:hover ellipse {
    fill: var(--wp--preset--color--bleu, #0374F5);
}

#articles-container .qce-loop-actu:hover path {
    stroke: #fff;
}

@media (max-width: 782px) {
    #articles-container {
        grid-template-columns: 1fr;
    }

    #articles-container .qce-loop-actu {
        min-height: 260px;
        padding: 20px;
    }
}

/* --- Boutons de filtre par catégorie --- */
.article-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 32px 0;
}

.article-filters .filter-btn {
    display: inline-block;
    padding: 10px 24px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #0374F5;
    background: #FFF8D3;
    border: 1.5px solid #FFF8D3;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.article-filters .filter-btn:hover {
    background: #FFF3AD;
    border-color: #0374F5;
}

.article-filters .filter-btn:focus-visible {
    outline: 2px solid #0374F5;
    outline-offset: 2px;
}

.article-filters .filter-btn.active {
    background: #0374F5;
    color: #ffffff;
    border-color: #0374F5;
}

.article-filters .filter-btn.active:hover {
    background: #025ec4;
    border-color: #025ec4;
}