/* ==========================================================================
   03 — COMPOSANTS
   Boutons, badges, cartes, champs. Deux styles de bouton, pas sept.
   ========================================================================== */

/* --------------------------------------------------------------------------
   BOUTONS
   Mesuré en rendu réel sur le site : 7 variantes visibles, différant par le
   fond, la taille (12px à 18px), la casse, le rayon (0 / 6px) et le padding.
   Le bouton d'achat est le plus petit de tous — 12px — alors que « COMMANDER »,
   qui ne fait que renvoyer vers la boutique, s'affiche en 18px.
   La hiérarchie est ici remise dans le bon sens.
   -------------------------------------------------------------------------- */

.cp .cp-btn {
  /* structure commune à toutes les variantes */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cp-e-2);
  font-family: var(--cp-font-texte);
  font-size: var(--cp-t-s);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-align: center;
  padding: 0.95em 1.9em;
  min-height: 44px;                 /* cible tactile WCAG 2.2 (2.5.8) */
  border: 1px solid transparent;
  border-radius: var(--cp-r-sm);
  cursor: pointer;
  transition: background-color var(--cp-vite) var(--cp-courbe),
              border-color     var(--cp-vite) var(--cp-courbe),
              color            var(--cp-vite) var(--cp-courbe),
              transform        var(--cp-vite) var(--cp-courbe);
}
.cp .cp-btn:active { transform: translateY(1px); }

/* Variante 1 — action principale. Une seule par écran.
   `--cp-btn-accent`/`--cp-btn-texte` : posées en ligne par le widget Boutons
   quand une couleur ponctuelle est voulue sur CE bouton précis (une
   opération, une famille de produit…) sans toucher au bordeaux de marque
   partout ailleurs. Sans réglage, la valeur de repli s'applique — y compris
   au survol, qui garde sa teinte fixe plutôt que de deviner un assombrissement. */
.cp .cp-btn--principal {
  background: var(--cp-btn-accent, var(--cp-bordeaux));
  border-color: var(--cp-btn-accent, var(--cp-bordeaux));
  color: var(--cp-btn-texte, var(--cp-blanc));
}
.cp .cp-btn--principal:hover {
  background: var(--cp-bordeaux-fonce);
  border-color: var(--cp-bordeaux-fonce);
  color: var(--cp-blanc);
}

/* Variante 2 — action secondaire. Tout le reste. */
.cp .cp-btn--secondaire {
  background: transparent;
  border-color: var(--cp-btn-accent, var(--cp-trait-fort));
  color: var(--cp-btn-texte, var(--cp-encre));
}
.cp .cp-btn--secondaire:hover {
  background: var(--cp-btn-accent, var(--cp-encre));
  border-color: var(--cp-btn-accent, var(--cp-encre));
  color: var(--cp-blanc);
}

/* Sur photographie sombre (l'accueil), la variante principale garde le
   bordeaux ; la secondaire s'inverse pour rester lisible. */
.cp .cp-sur-fond-sombre .cp-btn--secondaire {
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--cp-blanc);
}
.cp .cp-sur-fond-sombre .cp-btn--secondaire:hover {
  background: var(--cp-blanc);
  border-color: var(--cp-blanc);
  color: var(--cp-encre);
}

/* Tailles — deux seulement, en plus de la taille par défaut. */
.cp .cp-btn--grand { font-size: var(--cp-t-m); padding: 1.05em 2.4em; }
.cp .cp-btn--bloc  { display: flex; width: 100%; }

/* État désactivé. Sur le site, il est actuellement en gris #777 sur blanc,
   soit 4.48:1 — juste sous le seuil AA. Corrigé ici. */
.cp .cp-btn[disabled],
.cp .cp-btn.disabled {
  background: var(--cp-gris-voile);
  border-color: var(--cp-trait-fort);
  color: var(--cp-texte-doux);
  cursor: not-allowed;
  transform: none;
}

/* --------------------------------------------------------------------------
   BADGE DE DISTINCTION
   Coco Passion a été distingué six fois entre 2019 et 2025, dont deux
   médailles d'argent au Concours Général Agricole. Aucune fiche produit ne
   le mentionne aujourd'hui. Ce composant existe pour ça.
   -------------------------------------------------------------------------- */

.cp .cp-medaille {
  display: inline-flex;
  align-items: center;
  gap: var(--cp-e-2);
  background: var(--cp-or-voile);
  color: var(--cp-or);
  font-family: var(--cp-font-texte);
  font-size: var(--cp-t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.42em 0.85em;
  border-radius: var(--cp-r-pill);
  border: 1px solid color-mix(in srgb, var(--cp-or) 22%, transparent);
  white-space: nowrap;
}
.cp .cp-medaille svg { width: 13px; height: 13px; flex: none; }

/* Posé sur la photo, en haut à gauche de la carte produit.
   Plus grande que la version en ligne de texte, et volontairement : sur une
   photographie, une pastille de onze pixels se lit comme une mention légale.
   Six distinctions en six ans sont l'argument le plus fort du catalogue —
   elles doivent se voir avant le prix, pas après. Le picto passe donc de 13 à
   17 px, le texte à 13 px, et l'ombre portée décolle la pastille de la
   photographie au lieu de s'y fondre. */
.cp .cp-medaille--sur-photo {
  position: absolute;
  top: var(--cp-e-3);
  left: var(--cp-e-3);
  z-index: 2;
  gap: 0.46em;
  padding: 0.5em 0.86em;
  font-size: 0.8125rem;
  background: var(--cp-blanc);
  border-color: color-mix(in srgb, var(--cp-or) 40%, transparent);
  box-shadow: var(--cp-ombre-2);
}
.cp .cp-medaille--sur-photo svg { width: 17px; height: 17px; stroke-width: 2; }

/* --------------------------------------------------------------------------
   CARTE PRODUIT
   Le nom, le prix et le bouton sont aujourd'hui trois blocs centrés de même
   poids visuel, et le bouton bordeaux est répété 45 fois sur la grille — il
   sature la page et ne guide plus rien. Ici, la photographie porte la carte,
   l'action n'apparaît qu'au survol sur grand écran, et reste toujours
   présente au tactile.
   -------------------------------------------------------------------------- */

.cp .cp-carte {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--cp-blanc);
  border: 1px solid var(--cp-trait);
  border-radius: var(--cp-r-md);
  overflow: hidden;
  transition: border-color var(--cp-lent) var(--cp-courbe),
              box-shadow   var(--cp-lent) var(--cp-courbe),
              transform    var(--cp-lent) var(--cp-courbe);
}
.cp .cp-carte:hover,
.cp .cp-carte:focus-within {
  border-color: color-mix(in srgb, var(--cp-bordeaux) 30%, transparent);
  box-shadow: var(--cp-ombre-3);
  transform: translateY(-3px);
}

.cp .cp-carte__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--cp-gris-voile);
}
.cp .cp-carte__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 620ms var(--cp-courbe);
}
.cp .cp-carte:hover .cp-carte__media img { transform: scale(1.045); }

.cp .cp-carte__corps {
  display: flex;
  flex-direction: column;
  gap: var(--cp-e-2);
  padding: var(--cp-e-5);
  flex: 1;
}

.cp .cp-carte__famille {
  font-size: var(--cp-t-xs);
  letter-spacing: var(--cp-ls-surtitre);
  text-transform: uppercase;
  color: var(--cp-texte-doux);
}

.cp .cp-carte__titre {
  font-family: var(--cp-font-titre);
  font-size: 1.22rem;
  font-weight: 600;   /* Cormorant en 400 s'efface a cette taille */
  line-height: 1.24;
  color: var(--cp-encre);
  margin: 0;
}
/* Le lien couvre toute la carte : la zone cliquable n'est pas réduite au
   seul titre, sans pour autant imbriquer des liens les uns dans les autres. */
.cp .cp-carte__titre a { text-decoration: none; color: inherit; }
.cp .cp-carte__titre a::after { content: ""; position: absolute; inset: 0; z-index: 1; }

.cp .cp-carte__prix {
  margin-top: auto;
  padding-top: var(--cp-e-3);
  font-size: var(--cp-t-m);
  font-weight: 600;
  color: var(--cp-encre);
  font-variant-numeric: tabular-nums;   /* les prix s'alignent en colonne */
}
/* Les mots de liaison d'une fourchette — « de … à … ». Ils sont posés par le
   widget Produits de l'accueil et par `woocommerce_format_price_range` dans
   `cocopassion-eshop.php` : une seule règle pour les cartes de la boutique,
   la fiche produit et l'accueil.

   La taille est en `em`, pas en `rem` : le même mot accompagne un prix de
   17 px sur une carte et de 28 px sur une fiche, et il doit garder le même
   rapport à lui — un « de » de taille fixe redevient dominant dès que le prix
   grandit. Trois écarts se cumulent (graisse 400 contre 600, 0,72 em, encre
   douce) pour que l'œil aille au chiffre sans que les mots disparaissent. */
.cp .cp-de {
  font-weight: 400;
  font-size: 0.72em;
  color: var(--cp-texte-doux);
  letter-spacing: 0.01em;
  font-variant-numeric: normal;
}

.cp .cp-carte__action { position: relative; z-index: 2; margin-top: var(--cp-e-4); }

@media (hover: hover) and (min-width: 861px) {
  .cp .cp-carte__action {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity   var(--cp-lent) var(--cp-courbe),
                transform var(--cp-lent) var(--cp-courbe);
  }
  .cp .cp-carte:hover .cp-carte__action,
  .cp .cp-carte:focus-within .cp-carte__action { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   GRILLE
   -------------------------------------------------------------------------- */
.cp .cp-grille {
  display: grid;
  gap: var(--cp-e-5);
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}

/* --------------------------------------------------------------------------
   CHAMPS DE FORMULAIRE
   -------------------------------------------------------------------------- */
.cp input[type="text"],
.cp input[type="email"],
.cp input[type="tel"],
.cp input[type="search"],
.cp input[type="number"],
.cp select,
.cp textarea {
  width: 100%;
  font-family: var(--cp-font-texte);
  font-size: var(--cp-t-m);          /* 16px minimum : évite le zoom iOS */
  color: var(--cp-encre);
  background: var(--cp-blanc);
  border: 1px solid var(--cp-trait-fort);
  border-radius: var(--cp-r-sm);
  padding: 0.8em 0.95em;
  min-height: 44px;
  transition: border-color var(--cp-vite) var(--cp-courbe),
              box-shadow   var(--cp-vite) var(--cp-courbe);
}
.cp input:focus,
.cp select:focus,
.cp textarea:focus {
  border-color: var(--cp-bordeaux);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-bordeaux) 15%, transparent);
  outline: none;
}
.cp label {
  display: block;
  font-size: var(--cp-t-s);
  font-weight: 500;
  color: var(--cp-texte);
  margin-bottom: var(--cp-e-2);
}

/* --------------------------------------------------------------------------
   SECTIONS
   -------------------------------------------------------------------------- */
.cp .cp-section { padding-block: clamp(3rem, 7vw, var(--cp-e-9)); }
.cp .cp-section--sable { background: var(--cp-gris-voile); }
.cp .cp-contenu {
  width: min(var(--cp-largeur), 100% - var(--cp-gouttiere) * 2);
  margin-inline: auto;
}

.cp .cp-titre-section { text-align: center; margin-bottom: var(--cp-e-7); }
.cp .cp-titre-section p { margin-inline: auto; }

/* --------------------------------------------------------------------------
   POINTE — mise en valeur d'un mot dans un titre

   Deplacee ici depuis 09-accueil.css le 3 septembre 2026 : le hero est devenu
   un composant Elementor utilisable sur n'importe quelle page, et sa pointe
   ne pouvait plus dependre d'une feuille chargee sur la seule page d'accueil.

   Le 9 septembre 2026, la pointe change de police en meme temps que les
   titres. Elle etait en Fraunces, avec ses axes SOFT et WONK reclames
   explicitement ; sous une Cormorant Garamond, ce melange de deux serifs
   dans un meme titre se voyait comme une faute de frappe. Cormorant a une
   VRAIE italique, cursive et inclinee, qui distingue le mot aussi nettement
   sans changer de voix — et sans telecharger une famille de plus.
   -------------------------------------------------------------------------- */
.cp em.cp-pointe {
  font-family: var(--cp-font-accent);
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0;
}