/*
Theme Name:   La tête dans les nouages
Theme URI:    https://latetedanslesnouages.be/
Description:  Child theme of Blocksy for latetedanslesnouages.be, identity « Nuage pastel » (mock-ups of 23 October 2026: ink, sky blue, peach, cream, Baloo 2 + Nunito, very round shapes). Colours, fonts, header and footer rows live in the Customizer (blocksy-settings.json); this sheet only carries what Blocksy cannot set.
Author:       La tête dans les nouages
Template:     blocksy
Version:      0.1.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain:  latetedanslesnouages
License:      GPL-2.0-or-later
*/

/* -------------------------------------------------------------------------
   A. Fonts, self-hosted (SIL OFL 1.1, assets/fonts/OFL-*.txt), latin subset.
      Five files only: Baloo 2 700/800 (headings), Nunito 400/600/700 (text, meta, buttons, menu).
      Baloo 2 500 of the recap is used by no template: not shipped. Nothing is fetched from Google.
   ------------------------------------------------------------------------- */
@font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/baloo-2-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 800; font-display: swap; src: url("assets/fonts/baloo-2-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/nunito-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/nunito-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/nunito-latin-700-normal.woff2") format("woff2"); }

/* -------------------------------------------------------------------------
   B. Tokens. Palette 1-8 comes from Blocksy (--theme-palette-color-N, light and night).
      Colour 9 (Allaitement) and moon yellow have no palette slot: defined here for both modes.
      Blocksy marks the mode on <html data-color-mode="light|dark|os-default">.
   ------------------------------------------------------------------------- */
:root {
  --ltdn-vert-eau: var(--theme-palette-color-9, #DFF2EA); /* colour 9: Allaitement backgrounds, pill, card shadow */
  --ltdn-lune: #FFE7A8;                                     /* moon yellow: Blog, birth list, pictograms */
  --ltdn-pied-fond: #2B3A55;                                /* footer: identical in both modes */
  --ltdn-pied-texte: #E8EEF6;
  --ltdn-pied-filet: #47577A;
  --ltdn-titres: "Baloo 2", "Trebuchet MS", sans-serif;
}
[data-color-mode="dark"] { --ltdn-vert-eau: var(--theme-palette-color-9, #1F3B38); --ltdn-lune: #F2D98C; }
@media (prefers-color-scheme: dark) {
  [data-color-mode="os-default"] { --ltdn-vert-eau: var(--theme-palette-color-9, #1F3B38); --ltdn-lune: #F2D98C; }
}

/* -------------------------------------------------------------------------
   C. Base. Links are ink like the text, so content links stay underlined; elsewhere, underline on hover.
   ------------------------------------------------------------------------- */
.entry-content :where(a:not(.wp-block-button__link):not(.ct-button)) { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
:where(.ct-header, .ct-breadcrumbs, .entry-meta) a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--theme-palette-color-1); outline-offset: 2px; }
/* H1 of the home page: 56 px (36 px phone) instead of 54 / 34 (recap 2). */
body.home .entry-content h1 { font-size: 56px; }
@media (max-width: 689.98px) { body.home .entry-content h1 { font-size: 36px; } }
/* Universe backgrounds for blocks (Additional CSS class), since colour 9 and moon yellow are not in the editor palette. */
.ltdn-fond-vert-eau { background-color: var(--ltdn-vert-eau) !important; }
.ltdn-fond-lune { background-color: var(--ltdn-lune) !important; color: #2B3A55; } /* stays light in night mode: fixed ink text */

/* -------------------------------------------------------------------------
   D. Header menu: one pill per universe (mock-up 01), padding 10/20, radius 999.
      Classes ltdn-pastille-* and ltdn-actif are added by functions.php part 2.
   ------------------------------------------------------------------------- */
.ct-header [data-id="menu"] .menu { gap: 8px; }
.ct-header [data-id="menu"] .menu > li > .ct-menu-link { height: auto; min-height: 44px; padding: 10px 20px; border-radius: 999px; white-space: nowrap; }
.ct-header [data-id="menu"] .menu > li.ltdn-pastille-portage > .ct-menu-link { background: var(--theme-palette-color-5); }
.ct-header [data-id="menu"] .menu > li.ltdn-pastille-sommeil > .ct-menu-link { background: var(--theme-palette-color-6); }
.ct-header [data-id="menu"] .menu > li.ltdn-pastille-allaitement > .ct-menu-link { background: var(--ltdn-vert-eau); }
.ct-header [data-id="menu"] .menu > li.ltdn-actif > .ct-menu-link { box-shadow: inset 0 0 0 2px var(--theme-palette-color-1); }
/* Search and colour-mode buttons: 46 px rings, 2 px ink border, white fill (mock-up 01). */
.ct-header :is([data-id="search"], [data-id="color-mode-switcher"]) {
  display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
  border: 2px solid var(--theme-palette-color-1); border-radius: 50%; background: var(--theme-palette-color-8);
}
/* Mobile panel (mock-up 24): each universe is a rounded block in its colour. */
#offcanvas .mobile-menu .menu > li[class*="ltdn-pastille-"] { border-radius: 32px; padding: 6px 20px; margin-bottom: 10px; }
#offcanvas .mobile-menu .menu > li.ltdn-pastille-portage { background: var(--theme-palette-color-5); }
#offcanvas .mobile-menu .menu > li.ltdn-pastille-sommeil { background: var(--theme-palette-color-6); }
#offcanvas .mobile-menu .menu > li.ltdn-pastille-allaitement { background: var(--ltdn-vert-eau); }
#offcanvas .mobile-menu .menu > li.ltdn-pastille-blog { background: var(--ltdn-lune); }
#offcanvas .mobile-menu .menu > li.ltdn-pastille-blog > .ct-menu-link { color: #2B3A55; }

/* -------------------------------------------------------------------------
   E. Content: block styles of functions.php part 8, and the featured image beside the table of contents.
   ------------------------------------------------------------------------- */
/* Arch 200 200 40 40 (home band photo). */
.wp-block-image.is-style-ltdn-arche img,
.wp-block-group.is-style-ltdn-arche { border-radius: 200px 200px 40px 40px; overflow: hidden; }
/* Flat card shadow 0 6px 0, no blur, in the universe colour (blocks have no native flat shadow). */
.wp-block-group.is-style-ltdn-carte-portage { box-shadow: 0 6px 0 var(--theme-palette-color-5); }
.wp-block-group.is-style-ltdn-carte-sommeil { box-shadow: 0 6px 0 var(--theme-palette-color-6); }
.wp-block-group.is-style-ltdn-carte-allaitement { box-shadow: 0 6px 0 var(--ltdn-vert-eau); }
/* Separator: 3 px sky dashes on each side of the peach knot (44 x 24). */
.wp-block-separator.is-style-ltdn-noeud {
  border: 0; height: 24px; width: 100%; max-width: none; opacity: 1; margin-block: 64px;
  background:
    url("assets/icons/noeud.svg") center / 44px 24px no-repeat,
    repeating-linear-gradient(90deg, var(--theme-palette-color-4) 0 8px, transparent 8px 14px) left center / calc(50% - 38px) 3px no-repeat,
    repeating-linear-gradient(90deg, var(--theme-palette-color-4) 0 8px, transparent 8px 14px) right center / calc(50% - 38px) 3px no-repeat;
}
@media (max-width: 689.98px) { .wp-block-separator.is-style-ltdn-noeud { margin-block: 44px; } }
/* Featured image (medium, 16:9, radius 32) floated beside the LuckyWP table of contents on guides. */
.entry-content .ltdn-une { margin: 0 0 28px; }
.entry-content .ltdn-une img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 32px; }
@media (min-width: 690px) {
  .entry-content .ltdn-une { float: left; width: calc(50% - 14px); margin: 0 28px 28px 0; }
  .entry-content .ltdn-une + .lwptoc { display: flow-root; }
  .entry-content .ltdn-une + .lwptoc + * { clear: both; }
}

/* -------------------------------------------------------------------------
   F. Archive cards: radius, shadow, image ratio and radius are native (Customizer);
      here only the 24 px bottom padding and the 18 px between image and the next line (recap 3 and 4).
   ------------------------------------------------------------------------- */
.entries[data-cards="boxed"] .entry-card { padding-bottom: 24px; }
.entries .entry-card > .ct-media-container,
.ct-related-posts .ct-media-container { margin-bottom: 18px; }
.entries .entry-card .entry-meta { text-transform: none; letter-spacing: 0; }

/* -------------------------------------------------------------------------
   G. Footer (mock-up 01): ink block with radius 60 60 0 0 (48 on phones), padding 90 / 40,
      columns 1.4fr + 4 (2 columns on phones, the brand on its own row), titles in the universe colours.
   ------------------------------------------------------------------------- */
.ct-footer { border-radius: 60px 60px 0 0; overflow: hidden; margin-top: 72px; padding-top: 34px; padding-bottom: 20px; }
.ct-footer [data-row*="middle"] > .ct-container { grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 689.98px) {
  .ct-footer { border-radius: 48px 48px 0 0; margin-top: 48px; padding-top: 32px; }
  .ct-footer [data-row*="middle"] > .ct-container { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ct-footer [data-row*="middle"] [data-column="widget-area-1"] { grid-column: 1 / -1; }
}
.ct-footer a { text-decoration: underline; text-underline-offset: 3px; }
.ltdn-pied-nom { margin: 0 0 10px; font-family: var(--ltdn-titres); font-weight: 800; font-size: 24px; line-height: 1.3; }
.ltdn-pied-nom a { color: #FFFFFF; text-decoration: none; }
.ltdn-pied-titre { margin: 0 0 6px; font-weight: 700; }
.ltdn-pied-titre-portage { color: #CFE4F5; }
.ltdn-pied-titre-sommeil { color: #FDE7DF; }
.ltdn-pied-titre-allaitement { color: #DFF2EA; }
.ltdn-pied-titre-site { color: #FFFFFF; }
.ltdn-pied-liens { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

/* Blocks of the rewritten pages (moved from the preview plugin on 2026-10-26). */
.ltdn-bandeau-accueil{background:var(--theme-palette-color-4);border-radius:48px;padding:56px 32px;margin-bottom:40px}
.ltdn-un-doute{background:var(--theme-palette-color-5);border-radius:32px;padding:24px 28px}
.ltdn-produit{background:var(--theme-palette-color-8);border-radius:32px;padding:24px 28px;box-shadow:0 6px 0 var(--theme-palette-color-6)}
.ltdn-produit-etiquette{font-size:14px;color:var(--theme-palette-color-3)}
.ltdn-produit-a-choisir{border:2px dashed var(--theme-palette-color-4);border-radius:24px;padding:12px 20px;font-size:14px;color:var(--theme-palette-color-3)}
.ltdn-a-retenir{border-left:4px solid var(--theme-palette-color-2);padding-left:16px}
.ltdn-sources{font-size:15px;color:var(--theme-palette-color-3)}
.ltdn-image-a-venir{display:block;margin:24px 0;padding:14px 20px;border:2px dashed var(--theme-palette-color-4);border-radius:22px;background:transparent}
.ltdn-image-a-venir-legende{font-size:14px;color:var(--theme-palette-color-3);margin:0}
.ltdn-bandeau-accueil .wp-block-columns{gap:40px;margin:0}.ltdn-bandeau-accueil h1{margin:8px 0 18px}
.ltdn-etiquette{display:inline-block;background:#fff;border-radius:999px;padding:6px 16px;font-size:14px;font-weight:700;margin:0}
.ltdn-arche-vide{min-height:360px;display:flex;align-items:flex-end;justify-content:center;background:var(--theme-palette-color-7);border:6px solid #fff;padding:24px;text-align:center}
.ltdn-picto{margin:0 0 12px}.ltdn-picto img{display:block}
.ltdn-carte-univers{border-radius:36px;padding:32px;height:100%}.ltdn-carte-univers h3{margin:0 0 10px}.ltdn-carte-univers h3 a{text-decoration:none}
.ltdn-encart-liste{background:#fff;border-radius:32px;padding:20px 32px;box-shadow:0 6px 0 #FFE7A8;margin:40px 0}.ltdn-encart-liste h2{font-size:28px;margin:0 0 6px}
.ltdn-carte-guide{background:var(--theme-palette-color-8);border-radius:32px;padding:16px 16px 24px;height:100%}
.ltdn-vignette-a-venir{aspect-ratio:16/9;border-radius:22px;background:var(--theme-palette-color-5);display:flex;align-items:center;justify-content:center;margin:0 0 18px}
.ltdn-carte-categorie{font-size:14px;font-weight:700;color:var(--theme-palette-color-3);margin:0 8px 6px}.ltdn-carte-titre{font-size:22px;margin:0 8px 10px}.ltdn-carte-titre a{text-decoration:none}.ltdn-carte-guide>p:last-child{margin:0 8px;font-size:15px}
@media (max-width:781px){.ltdn-bandeau-accueil{padding:32px 20px;border-radius:40px}.ltdn-arche-vide{min-height:240px}}

/* Switch of 2026-10-26: product slots not chosen yet stay hidden; image slots shown again with the batch of the same day. */
.ltdn-image-a-venir, .ltdn-produit-a-choisir, .ltdn-vignette-a-venir { display: none !important; }
.ltdn-bandeau-accueil .wp-block-column:has(.ltdn-arche-vide) { display: none !important; }
.ltdn-bandeau-accueil .wp-block-column:has(.ltdn-arche-vide) ~ .wp-block-column:has(h1),
.ltdn-bandeau-accueil .wp-block-column:has(h1):has(~ .wp-block-column .ltdn-arche-vide) { flex-basis: 100% !important; }

/* Images of the pages (batch of 2026-10-26). */
.wp-block-image.ltdn-image { margin-block: 32px; }
.wp-block-image.ltdn-image img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 28px; }
.wp-block-image.ltdn-image figcaption, .wp-block-image.is-style-ltdn-arche figcaption { font-size: 13px; color: var(--theme-palette-color-3); text-align: right; margin-top: 8px; }
.wp-block-image.is-style-ltdn-arche { margin: 0; }
.wp-block-image.is-style-ltdn-arche img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 6px solid #fff; }
.wp-block-image.ltdn-vignette { margin: 0 0 18px; }
.wp-block-image.ltdn-vignette img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 22px; }
@media (max-width:781px) { .wp-block-image.is-style-ltdn-arche img { aspect-ratio: 4 / 3; } }

/* Product box as a visible CTA (Julie, 2026-10-26: « je ne vois pas de page avec cta »). */
.ltdn-produit { position: relative; background: var(--theme-palette-color-8); border: 2px solid var(--theme-palette-color-6); border-radius: 32px; padding: 28px 32px 28px 128px; box-shadow: 0 6px 0 var(--theme-palette-color-2); margin-block: 36px; }
.ltdn-produit::before { content: ""; position: absolute; left: 28px; top: 28px; width: 76px; height: 76px; border-radius: 50%; background: var(--theme-palette-color-5) url("assets/icons/portage.svg") center / 46px no-repeat; }
.ltdn-univers-sommeil .ltdn-produit::before, .postid-90 .ltdn-produit::before { background-color: var(--theme-palette-color-6); background-image: url("assets/icons/sommeil.svg"); }
.ltdn-produit .ltdn-produit-etiquette { margin: 0 0 6px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--theme-palette-color-3); }
.ltdn-produit .ltdn-produit-etiquette + p { margin: 0 0 10px; font-family: var(--ltdn-titres); font-size: 26px; line-height: 1.2; }
.ltdn-produit ul { margin: 12px 0 22px; }
.ltdn-produit .wp-block-buttons { margin-top: 8px; }
.ltdn-produit .wp-block-button__link { background: #F29D85 !important; color: #2B3A55 !important; font-weight: 800; font-size: 18px; padding: 15px 34px; border-radius: 999px; text-decoration: none !important; box-shadow: 0 4px 0 rgba(43, 58, 85, .18); }
.ltdn-produit .wp-block-button__link:hover, .ltdn-produit .wp-block-button__link:focus-visible { background: #E8896B !important; }
@media (max-width: 689.98px) {
  .ltdn-produit { padding: 24px 22px; }
  .ltdn-produit::before { position: static; display: block; width: 60px; height: 60px; margin: 0 0 14px; background-size: 36px; }
  .ltdn-produit .ltdn-produit-etiquette + p { font-size: 22px; }
  .ltdn-produit .wp-block-button__link { display: block; text-align: center; }
}

/* Mobile header (2026-10-26): with the night-mode button, the logo ran under the search icon at 390 px. */
@media (max-width: 689.98px) {
  #header [data-device="mobile"] [data-column="start"] { min-width: 0; flex: 1 1 auto; }
  #header [data-device="mobile"] .site-logo-container img { max-width: calc(100vw - 214px) !important; width: auto !important; height: auto !important; }
}