/*
Theme Name: Captain Turtle
Theme URI: https://www.captainturtle.fr
Description: Thème enfant de Blocksy pour captainturtle.fr. La base graphique héritée de Gillion
             (accent #7DB05C, Montserrat pour les titres, Open Sans pour le texte) est portée par
             le personnaliseur de Blocksy, pas par ce fichier : on ne trouve ici que ce que le
             personnaliseur ne sait pas exprimer.
Author: e-labo
Author URI: https://www.e-labo.biz
Template: blocksy
Version: 1.0.0
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: captainturtle
*/

/* ===========================================================================
   TYPOGRAPHIE — valeurs relevées sur la PRODUCTION
   ===========================================================================

   Toutes les valeurs ci-dessous proviennent des styles *calculés* dans le DOM
   de la production (outil `tools/releve-styles.mjs`), et non d'options de thème.
   Les options du personnaliseur Blocksy couvrent le corps de texte et la palette ;
   ce qu'elles n'atteignent pas est repris ici, avec la mesure d'origine en
   commentaire pour pouvoir la revérifier.

   Règle de travail : après toute modification, relancer
     node tools/releve-styles.mjs <url prod> prod.json
     node tools/releve-styles.mjs <url dev> dev.json dev:<motdepasse>
   et comparer. On ne se fie ni au CSS généré ni aux options en base.
   --------------------------------------------------------------------------- */

/* Menu principal — production : Montserrat 11px/700, interligne 40px,
   majuscules, rgba(61, 61, 61, .69). */
.ct-header [data-id="menu"] .ct-menu-link,
.ct-header .menu > li > a {
	font-family: Montserrat, sans-serif;
	font-size: 11px;
	font-weight: 700;
	line-height: 40px;
	text-transform: uppercase;
	color: rgba(61, 61, 61, 0.69);
}

/* Sous-menus — production : Montserrat 13px/400, #8D8D8D. */
.ct-header .sub-menu .ct-menu-link,
.ct-header .sub-menu a {
	font-family: Montserrat, sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.7;
	text-transform: none;
	color: #8d8d8d;
}

/* ---------------------------------------------------------------------------
   ÉCHELLE DE TITRES — dans le personnaliseur, PAS ici

   Elle vivait dans ce fichier, écrite en dur, avec des sélecteurs (`body h1`,
   `.ct-container h2`) plus spécifiques que ceux de Blocksy. Conséquence : le
   personnaliseur devenait muet. On pouvait y régler la couleur ou la taille des
   titres sans que rien ne bouge à l'écran — le thème enfant repassait derrière.
   La preuve, relevée le 2026-07-31 sur `/boutique/` :

     h1                                            color: var(--theme-heading-1-color, …)
     .entry-content h1, h1.page-title, body h1     color: #505050        ← gagnait

   Blocksy câble le personnaliseur par ses variables CSS. Écrire la valeur en dur
   par-dessus, c'est débrancher l'outil. Les tailles et graisses sont donc
   désormais dans **Personnaliser ▸ Typographie** (h1 32px/700, h2 24, h3 21,
   h4 18, h5 16, h6 14, tous en Montserrat 700), et la couleur vient de la
   **couleur 4 de la palette**, qui vaut déjà #505050.

   Règle de travail : si le personnaliseur sait l'exprimer, cela n'a rien à faire
   ici. Vérifier avec `node tools/regles-appliquees.mjs <url> <sélecteur> color`.
   --------------------------------------------------------------------------- */

/* Le rose des H2 est une signature du blog. Le personnaliseur ne sait pas
   exprimer « seulement dans le corps des articles » : c'est la raison d'être de
   cette règle, et la seule qui subsiste sur les titres.

   `.single` ne conviendrait PAS : WordPress pose cette classe sur tous les
   contenus uniques, donc aussi sur les fiches produit et sur les recettes
   (`/recipe/…`, 64 % du trafic du site). Seul `.single-post` vise les articles. */
.single-post .entry-content h2 {
	color: #f27da4;
}

/* Corps des articles — la production oscille entre 14 px (archives) et 15 px
   (articles) : on retient 15 px, la valeur du contenu rédactionnel. */
.entry-content p,
.entry-content li {
	font-size: 15px;
	line-height: 1.8;
}

/* Liens dans le contenu — accent #7DB05C. La production employait Montserrat
   sur la boutique et Open Sans dans les articles ; on garde Open Sans, la
   police du texte courant, pour ne pas rompre la ligne de lecture. */
.entry-content a:not(.wp-block-button__link):not(.wp-element-button) {
	font-weight: 400;
	color: var(--theme-palette-color-1, #7db05c);
}

/* Métadonnées d'article — production : Montserrat 11px/400, #8D8D8D,
   sans majuscules (Blocksy les force par défaut). */
.entry-meta,
.ct-meta-element,
.post-meta {
	font-family: Montserrat, sans-serif;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.7;
	text-transform: none;
	color: #8d8d8d;
}

/* ---------------------------------------------------------------------------
   BOUTIQUE — valeurs relevées sur la production
   --------------------------------------------------------------------------- */

/* Titre de produit en liste — production : Montserrat 19,6px/800. */
.woocommerce-loop-product__title,
ul.products li.product h2 {
	font-family: Montserrat, sans-serif;
	font-size: 19.6px;
	font-weight: 800;
	line-height: normal;
	color: #505050;
}

/* Prix — production : Montserrat 14px/400, #858585.
   Blocksy stylise le prix avec une spécificité élevée : on la dépasse
   explicitement plutôt que d'empiler les !important. */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.price,
.price .woocommerce-Price-amount,
.woocommerce-Price-amount {
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.7;
	color: #858585;
}

/* Le bloc « Mise en avant produits » affiche un prix plus affirmé que celui des
   listes de la boutique. Sa feuille pose la valeur sur le conteneur
   `.ct-produits__prix`, mais `get_price_html()` glisse un
   `<span class="woocommerce-Price-amount">` à l'intérieur : la règle générale
   ci-dessus l'atteignait directement et gagnait sur l'héritage — prix gris et
   fin sur la page d'accueil, à l'inverse de l'intention. On rétablit ici, dans
   la feuille chargée en dernier.

   Le montant hérite au lieu d'être fixé : la disposition « vedette » porte un
   prix à 22 px sur le conteneur, et une taille écrite en dur ici l'aurait
   ramené à 17 px. Le prix barré des promotions, lui, est enveloppé dans un
   `<del>` qui garde sa propre taille — l'héritage la respecte. */
.ct-produits__prix {
	font-size: 17px;
	font-weight: 700;
	color: #505050;
}

.ct-produits__prix .woocommerce-Price-amount {
	font: inherit;
	color: inherit;
}

/* Bouton d'ajout au panier en liste — production : Montserrat 12px/400,
   #858585 (bouton discret, pas plein).

   L'interligne de 50 px relevé sur la production n'est PAS repris : là-bas il
   tenait lieu de hauteur de bouton, sans marge intérieure. Ici la règle unique
   des boutons pose déjà `padding: 9px 20px` sur ces mêmes éléments — les deux
   s'additionnaient et donnaient un bouton de 68 px de haut. La géométrie vient
   de la règle unique, cette section ne garde que la typographie. */
ul.products li.product .add_to_cart_button,
ul.products li.product .button {
	font-family: Montserrat, sans-serif;
	font-size: 12px;
	font-weight: 400;
	color: #858585;
}

/* ---------------------------------------------------------------------------
   Bandeau d'accueil

   L'illustration est volontairement chargée : c'est une photo de produit, pas
   un fond neutre. Le texte a donc besoin d'un voile franc et d'une ombre
   portée pour rester lisible — sans quoi le titre se perd dans les motifs.
   --------------------------------------------------------------------------- */

/* Tout ce qui suit vivait ici en dur, avec des `!important` : hauteur du
   bandeau, voile, couleur, taille et graisse du titre, marges. C'était doublon
   avec ce que le bloc Couverture, le bloc Titre et le bloc Paragraphe savent
   faire eux-mêmes — et cela produisait une divergence désagréable : l'éditeur
   affichait un voile BLANC à 45 %, le site un dégradé sombre. On ne voyait donc
   pas dans l'éditeur ce que voyaient les visiteurs.

   Tout est passé en réglages natifs, dans le contenu du Content Block :
   dégradé du bloc Couverture, hauteur minimale, couleur et typographie du titre
   et de l'accroche, marge des boutons.

   Il ne reste ici que les deux choses que Gutenberg ne sait pas exprimer, et
   elles sont regroupées dans un **style de bloc** sélectionnable dans l'éditeur
   (« Lisible sur image », enregistré dans functions.php) plutôt que dans une
   classe posée à la main. */

.is-style-lisible-sur-image {
	max-width: 46ch;
	margin-inline: auto;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

h1.is-style-lisible-sur-image,
h2.is-style-lisible-sur-image {
	max-width: 24ch;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

/* Pas de media query sur la taille du titre : WordPress convertit la valeur
   saisie dans l'éditeur en `clamp(25.98px, …, 44px)`. La typographie fluide
   fait donc en continu ce que deux paliers à 900 et 700 px faisaient par
   sauts — et mieux. Les rajouter reviendrait à écraser le mécanisme natif,
   c'est-à-dire à refaire l'erreur qu'on vient de corriger. */

/* ---------------------------------------------------------------------------
   Cartes d'articles (bloc « Sélection d'articles »)

   La règle vit ici et non dans la feuille du bloc : Blocksy colore tous les
   liens avec sa couleur d'accent, et sa feuille est chargée après celle des
   blocs. Le thème enfant, lui, passe en dernier.
   --------------------------------------------------------------------------- */

/* Blocksy colore tous les liens par `a { color: var(--theme-link-initial-color) }`,
   variable qu'il réaffecte sur de nombreux conteneurs. Trois approches ont échoué
   à rendre le titre de carte gris : surcharge de `color`, sélecteurs plus
   spécifiques, et redéfinition de la variable sur le conteneur. Le `!important`
   est ici le moyen le plus simple et le plus lisible — à revoir si Blocksy
   expose un réglage dédié. */
.ct-selection-articles__titre {
	--theme-link-initial-color: #505050;
	--theme-link-hover-color: var(--theme-palette-color-1, #7db05c);
}

.ct-selection-articles__titre a,
.ct-produits__titre a {
	color: #505050 !important;
	text-decoration: none;
}

.ct-selection-articles__titre a:hover,
.ct-selection-articles__titre a:focus-visible,
.ct-produits__titre a:hover,
.ct-produits__titre a:focus-visible {
	color: var(--theme-palette-color-1, #7db05c) !important;
}

/* ===========================================================================
   BOUTONS — une seule règle pour tout le site
   ===========================================================================

   Le site mélangeait deux formes (pilules et rectangles à angles arrondis) et
   trois tailles de libellé selon l'origine du bouton : blocs Gutenberg, blocs
   maison, WooCommerce, formulaire Mailchimp, shortcode [button] hérité.
   Tout passe désormais par la même définition — forme en pilule, Montserrat
   gras, majuscules.
   --------------------------------------------------------------------------- */

.wp-block-button__link,
.wp-element-button,
.ct-produits__bouton,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.mc4wp-form input[type="submit"],
input[type="submit"] {
	display: inline-block;
	padding: 12px 26px;
	border: 0;
	border-radius: 30px;
	font-family: Montserrat, sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

/* Pas de `white-space: nowrap` dans la règle ci-dessus : elle attrape aussi les
   boutons du tunnel de commande, dont « Commander avec obligation de paiement »
   — un libellé imposé par l'article L221-14 qui, sur un écran étroit, déborderait
   de son bouton. Les libellés courts n'ont pas besoin d'être protégés ; celui-là
   ne doit surtout pas l'être. */

/* Le libellé doit ressortir en blanc sur le fond d'accent : sans cette règle
   il hérite de la couleur de lien du thème — du vert sur du vert, donc un
   bouton qui paraît vide. */
.wp-block-button__link,
.wp-element-button,
.ct-produits__bouton,
.ct-produits__bouton:link,
.ct-produits__bouton:visited,
.ct-produits__bouton:hover,
.ct-produits__bouton:focus-visible {
	color: #fff !important;
}

/* La graisse doit être forcée : une règle du thème ramenait les boutons des
   blocs maison à 400, d'où un libellé visiblement plus fin que celui des
   boutons Gutenberg. Mesuré, puis corrigé. */
.wp-block-button__link,
.wp-element-button,
.ct-produits__bouton,
.mc4wp-form input[type="submit"] {
	font-weight: 700 !important;
	font-size: 12px !important;
}

/* Les boutons de la boutique en liste restent un peu plus compacts, pour ne
   pas écraser le visuel du produit — même forme, même graisse. */
.ct-produits--grille .ct-produits__bouton,
.woocommerce ul.products li.product .button {
	padding: 9px 20px;
}

/* Le formulaire de newsletter est contraint par la largeur de la colonne :
   on garde le même style, avec des marges intérieures réduites. */
.ct-sidebar .mc4wp-form input[type="submit"],
.ct-footer .mc4wp-form input[type="submit"] {
	padding: 10px 18px;
}

/* ---------------------------------------------------------------------------
   Colonne de droite
   --------------------------------------------------------------------------- */

/* Citation de l'encart auteur — reprise de la production : italique gras,
   un cran plus grande que le texte, sans filet ni cadre. */
.ct-citation-auteur {
	margin: 4px 0 16px;
	font-family: Montserrat, sans-serif;
	font-size: 16px;
	font-style: italic;
	font-weight: 700;
	line-height: 1.45;
	color: #505050;
}

.ct-citation-auteur::before {
	content: "« ";
}

.ct-citation-auteur::after {
	content: " »";
}

/* Icônes sociales — agrandies, mais en gris comme sur le site actuel : les
   logos en couleur de marque juraient avec le reste de la colonne. */
.ct-sidebar .wp-block-social-links,
.ct-footer .wp-block-social-links {
	gap: 14px;
	margin-top: 18px;
}

.ct-sidebar .wp-block-social-link,
.ct-footer .wp-block-social-link {
	width: 26px;
	height: 26px;
	background-color: transparent !important;
}

.ct-sidebar .wp-block-social-link a,
.ct-footer .wp-block-social-link a {
	padding: 0;
	color: #8d8d8d !important;
	transition: color 0.2s ease;
}

.ct-sidebar .wp-block-social-link a:hover,
.ct-sidebar .wp-block-social-link a:focus-visible,
.ct-footer .wp-block-social-link a:hover,
.ct-footer .wp-block-social-link a:focus-visible {
	color: var(--theme-palette-color-1, #7db05c) !important;
}

.ct-sidebar .wp-block-social-link svg,
.ct-footer .wp-block-social-link svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

/* ---------------------------------------------------------------------------
   Formulaire de newsletter — champ et bouton sur une seule ligne.

   La production place le bouton À L'INTÉRIEUR du champ. Le formulaire Mailchimp
   empile deux paragraphes ; on les remet en ligne avec flexbox, en portant la
   bordure et l'arrondi sur le conteneur plutôt que sur le champ.
   --------------------------------------------------------------------------- */

/* Le champ et le bouton vivent dans le MÊME paragraphe `.mc4wp-form-email` :
   c'est lui qui porte la mise en ligne, la bordure et l'arrondi. */
.ct-sidebar .mc4wp-form .mc4wp-form-email,
.ct-footer .mc4wp-form .mc4wp-form-email {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 4px 4px 4px 6px;
	border: 1px solid #f0f0f0;
	border-radius: 30px;
	background: #fff;
}

.ct-sidebar .mc4wp-form input[type="email"],
.ct-footer .mc4wp-form input[type="email"] {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	padding: 8px 12px;
	border: 0;
	background: transparent;
	box-shadow: none;
	font-size: 14px;
}

.ct-sidebar .mc4wp-form input[type="email"]:focus,
.ct-footer .mc4wp-form input[type="email"]:focus {
	outline: none;
	box-shadow: none;
}

.ct-sidebar .mc4wp-form input[type="submit"],
.ct-footer .mc4wp-form input[type="submit"] {
	flex: 0 0 auto;
	width: auto;
	border-radius: 30px;
	padding: 9px 18px;
	font-family: Montserrat, sans-serif;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	white-space: nowrap;
	cursor: pointer;
}

/* Vignettes arrondies : articles récents, encart boutique, images de widgets. */
.ct-sidebar .wp-block-latest-posts__featured-image img,
.ct-sidebar .wp-block-image img,
.ct-sidebar .widget img {
	border-radius: 8px;
}

/* Espacement de la liste des articles récents. */
.ct-sidebar .wp-block-latest-posts__list li {
	margin-bottom: 16px;
}

/* ---------------------------------------------------------------------------
   En-tête
   --------------------------------------------------------------------------- */

/* Le logo porte déjà le nom du site : afficher en plus le titre en texte fait
   doublon. Traité ici faute d'option repérée dans le personnaliseur — à
   remplacer par le réglage natif s'il est retrouvé.
   Le nom du site reste accessible : il est porté par l'attribut alt du logo et
   par les données structurées, donc rien n'est perdu pour le référencement. */
.ct-header [data-id="logo"] .site-title,
.ct-header .site-title {
	display: none;
}

/* Le shortcode [button] hérité a été converti en blocs le 2026-08-01 : ses
   règles `.btn` ont disparu avec lui. Le fond des boutons vient désormais du
   personnaliseur Blocksy (`--theme-button-background-initial-color`), qui rend
   le même vert — vérifié avec `tools/regles-appliquees.mjs`. */

/* ---------------------------------------------------------------------------
   Correctifs hérités du thème enfant Gillion, conservés car liés au contenu
   et non au thème sortant.
   --------------------------------------------------------------------------- */

/* Les images centrées dans les articles ne doivent pas générer d'espace haut. */
.entry-content img.aligncenter {
	clear: none;
}

/* ---------------------------------------------------------------------------
   Taille des emojis écrits en image dans le contenu.
   --------------------------------------------------------------------------- */

/* Règle ajoutée le 2026-09-21, après qu'un emoji se soit affiché à 1425 px de
   large sur une fiche produit — mesuré dans le DOM, dans un paragraphe en 16 px.

   Ces `<img class="emoji" src="s.w.org/…/1f642.svg">` ne sont pas un déchet :
   les tables WordPress de ce site sont en `utf8mb3` (trois octets par
   caractère) et un emoji en occupe quatre. La base ne PEUT PAS le stocker, et
   WordPress le remplace par une image pour ne pas le perdre. Le balisage est
   donc la forme légitime, ici, tant que la base n'est pas convertie en
   `utf8mb4` — chantier à part, la base est déjà mixte (110 tables sur 159 y
   sont, seules les 34 tables WordPress d'origine restent en arrière).

   Sa taille tenait à une règle que WordPress émet lui-même par
   `print_emoji_styles`. Blocksy retire ce hook — c'est son réglage
   `emoji_scripts`, actif par défaut, qui épargne ~13 Ko de JavaScript. Le
   réglage est bon pour la performance ; ce qu'il ne prévoit pas, c'est qu'un
   contenu porte encore le balisage. On reprend donc ici la seule règle qui
   manque, sans rallumer le script : c'est la déclaration de WordPress, à
   l'identique, `!important` compris — le thème parent et le contenu injectent
   des largeurs d'image très spécifiques.

   Ce n'est pas doubler le personnaliseur : celui-ci n'exprime pas « quelle
   taille fait un emoji », il exprime « charge ou non le dispositif emoji ».

   La seconde règle couvre le cas où Imagify enveloppe l'image dans un
   `<picture>` en y déplaçant la classe — voir la fiche mémoire
   `imagify-enveloppe-et-deplace-la-classe`. Il ne touche pas aux images
   distantes aujourd'hui, mais la règle ne coûte rien et ferme le cas. */
img.emoji,
picture.emoji img {
	display: inline !important;
	width: 1em !important;
	height: 1em !important;
	margin: 0 0.07em !important;
	padding: 0 !important;
	border: none !important;
	background: none !important;
	box-shadow: none !important;
	vertical-align: -0.1em;
}