/* ==========================================================================
   02 — BASE
   Typographie et éléments HTML nus. Aucune classe de composant ici.
   ========================================================================== */

/* Le site affiche aujourd'hui trois familles (Lato, Roboto, Open Sans) et
   charge Lato en dix-huit graisses. On repart de deux familles, quatre
   graisses au total. */

/* OceanWP pose `html { font-size: 62.5% }` dans son reset, une vieille
   convention qui fait valoir 1 rem pour 10 px afin d'ecrire 1.4rem au lieu
   de 14px. Tout le systeme de mesures livre ici est en rem sur une base de
   16 px : sans cette ligne, les 140 valeurs du theme rendent a 62,5 % de
   leur taille -- titres, textes, espacements, la page entiere en modele
   reduit. On remet donc la racine a la valeur du navigateur.

   Ce que cela deplace du cote d'OceanWP est mesure et negligeable : son
   feuille de style n'emploie le rem que 22 fois, toutes dans les grilles
   d'articles de blog et les gouttieres `.oceanwp-row` (0,625 rem passe de
   6 a 10 px). Aucune de ces regles ne touche la boutique ni l'accueil. */
html { font-size: 100%; }

html { -webkit-text-size-adjust: 100%; }

body.cp {
  background: var(--cp-fond);
  color: var(--cp-texte);
  font-family: var(--cp-font-texte);
  font-size: var(--cp-t-m);
  line-height: var(--cp-lh-texte);
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* --- Titres ------------------------------------------------------------ */

.cp h1, .cp h2, .cp h3, .cp h4,
.cp .entry-title,
.cp .woocommerce-loop-product__title,
.cp .product_title {
  font-family: var(--cp-font-titre);
  color: var(--cp-encre);
  /* 600 et non 400 : Cormorant Garamond est une Garamond de labeur, dessinee
     fine. En 400 a la taille d'un titre, ses deliees disparaissent sur le
     creme et le titre parait delave. 600 lui rend le poids qu'un titre
     demande sans jamais le rendre gras. */
  font-weight: 600;
  line-height: var(--cp-lh-titre);
  letter-spacing: var(--cp-ls-display);
  text-wrap: balance;               /* évite le mot orphelin en fin de titre */
  margin: 0 0 var(--cp-e-4);
}

.cp h1 { font-size: var(--cp-t-xxl); }
.cp h2 { font-size: var(--cp-t-xl); }
.cp h3 { font-size: var(--cp-t-l); }
.cp h4 { font-size: var(--cp-t-m); font-family: var(--cp-font-texte); font-weight: 600; }

/* Surtitre : la petite ligne capitale au-dessus d'un titre.
   Le site l'utilise déjà (« L'ATELIER DE HAUTE CONFITURE »), sans style défini.

   `--teinte` : posée par l'onglet Style du widget Surtitre (et par celui du
   Hero, sur la même propriété) quand une couleur autre que le bordeaux de
   marque est voulue. Sans réglage, la valeur de repli s'applique. */
.cp .cp-surtitre {
  font-family: var(--cp-font-texte);
  font-size: var(--cp-t-xs);
  font-weight: 500;
  letter-spacing: var(--cp-ls-surtitre);
  text-transform: uppercase;
  color: var(--teinte, var(--cp-bordeaux));
  margin: 0 0 var(--cp-e-3);
}
.cp .cp-surtitre--centre { justify-content: center; }

/* --- Coupure des paragraphes justifies depuis le contenu ----------------
   Le thème justifie a huit endroits, et chacun de ces huit-la porte deja
   `hyphens: auto` dans sa propre regle. Mais vingt-neuf paragraphes sont
   justifies par un attribut `style` ECRIT DANS LE CONTENU (un heritage de
   collage depuis Word), et ceux-la n'heritaient d'aucune coupure.

   C'est exactement la que le defaut se voit le plus depuis le passage a Jost
   (9 septembre 2026) : ses chasses sont tres regulieres et elle n'a aucune
   ligature de secours, si bien qu'une ligne justifiee sans coupure etire ses
   blancs jusqu'a ouvrir des rivieres verticales — d'autant plus sur mobile,
   ou ces blocs tombent a 330px, soit une quarantaine de signes.

   Le selecteur vise l'attribut, pas la valeur calculee : c'est le seul moyen
   d'atteindre ces blocs-la sans toucher au texte en drapeau. Et il n'a besoin
   d'aucun `!important` — le contenu impose `text-align`, pas `hyphens`.

   Retirer ces vingt-neuf attributs du contenu resterait plus propre, et
   rendrait cette regle inutile. C'est une correction editoriale, a valider. */
body.cp [style*="justify"] { hyphens: auto; }

/* --- Texte courant ----------------------------------------------------- */

.cp p { margin: 0 0 var(--cp-e-4); max-width: var(--cp-largeur-txt); }
.cp p:last-child { margin-bottom: 0; }

.cp .cp-chapo {
  font-size: var(--cp-t-l);
  line-height: 1.5;
  color: var(--cp-texte-doux);
}

/* --- Liens ------------------------------------------------------------- */
/* Le site utilise aujourd'hui le bleu #13aff0 d'Elementor au survol des liens.
   On revient à la couleur de marque. */

.cp a {
  color: var(--cp-bordeaux);
  text-decoration-color: color-mix(in srgb, var(--cp-bordeaux) 35%, transparent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--cp-vite) var(--cp-courbe),
              text-decoration-color var(--cp-vite) var(--cp-courbe);
}
.cp a:hover {
  color: var(--cp-bordeaux-fonce);
  text-decoration-color: currentColor;
}

/* --- Focus clavier ------------------------------------------------------
   L'audit relève un indicateur de focus absent. Il est rétabli ici, visible
   sur fond clair comme sur fond bordeaux. :focus-visible n'affiche l'anneau
   qu'à la navigation clavier, jamais au clic souris. */

.cp :focus-visible {
  outline: 2px solid var(--cp-bordeaux);
  outline-offset: 3px;
  border-radius: var(--cp-r-sm);
}
.cp .cp-sur-fond-sombre :focus-visible,
.cp [class*="bordeaux"] :focus-visible { outline-color: var(--cp-blanc); }

/* Lien d'évitement : premier élément focusable de la page. */
.cp .cp-skip {
  position: absolute; left: -9999px;
  background: var(--cp-encre); color: var(--cp-blanc);
  padding: var(--cp-e-3) var(--cp-e-5);
  z-index: 999;
}
.cp .cp-skip:focus { left: var(--cp-e-4); top: var(--cp-e-4); }

/* --- Médias -------------------------------------------------------------
   aspect-ratio + object-fit garantissent que l'emplacement de l'image est
   réservé avant son chargement : c'est ce qui supprime le saut de mise en
   page relevé sur 11 des 29 images de l'accueil. */

.cp img, .cp video { max-width: 100%; height: auto; display: block; }
.cp .cp-media { aspect-ratio: 1 / 1; overflow: hidden; background: var(--cp-gris-voile); }
.cp .cp-media > img { width: 100%; height: 100%; object-fit: cover; }

/* --- Utilitaire lecteur d'écran ---------------------------------------- */
.cp .cp-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}