/* ==========================================================================
   Conseils et pages d'atterrissage Petit Canon
   conseils.html, conseil-*.html, chaussons-bebe-montreal.html,
   cadeau-naissance-quebec.html, chaussons-garderie.html, et les blocs ajoutés
   à a-propos.html (valeurs, « Le mot de Florian »).
   Préfixe cs- ; s'appuie sur les jetons et composants de base.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. En-tête de page (fil d'Ariane, titre, chapeau, date)
   -------------------------------------------------------------------------- */
.cs-entete { padding-block: var(--pc-space-2) var(--pc-space-6); }
.cs-entete .pc-kicker { margin-top: var(--pc-space-3); }
.cs-titre { margin-top: var(--pc-space-2); max-width: 22ch; }
.cs-chapo { margin-top: var(--pc-space-4); max-width: 60ch; }
.cs-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin-top: var(--pc-space-4);
  font-size: var(--pc-fs-sm);
  color: var(--pc-texte-doux);
}
.cs-meta > * + *::before { content: "·"; margin-right: 0.75rem; color: var(--pc-trait-fort); }
@media (min-width: 48em) {
  .cs-entete { padding-block: var(--pc-space-3) var(--pc-space-7); }
}

/* Photo d'ouverture */
.cs-une { margin-block: 0 var(--pc-space-7); }
.cs-une__cadre {
  overflow: hidden;
  border-radius: var(--pc-radius-l);
  background: var(--pc-papier-fonce);
  aspect-ratio: 1088 / 960;
}
/* Sur grand écran : cadrage 4:3 (recadrage léger des photos ~1:1), largeur limitée */
@media (min-width: 48em) {
  .cs-une { max-width: calc(64rem + 2 * var(--pc-gutter)); }
  .cs-une__cadre { aspect-ratio: 4 / 3; }
}
.cs-une__cadre img { width: 100%; height: 100%; object-fit: cover; }
.cs-une figcaption,
.cs-figure figcaption { margin-top: var(--pc-space-2); font-size: var(--pc-fs-xs); color: var(--pc-texte-doux); }
.cs-une figcaption a,
.cs-figure figcaption a { color: var(--pc-encre-douce); }

/* --------------------------------------------------------------------------
   2. Corps d'article : sommaire + texte
   -------------------------------------------------------------------------- */
.cs-corps { display: grid; gap: var(--pc-space-6); padding-bottom: var(--pc-section); }
@media (min-width: 64em) {
  .cs-corps { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--pc-space-8); align-items: start; }
  .cs-sommaire { position: sticky; top: calc(var(--pc-header-h) + var(--pc-space-4)); }
}
.cs-sommaire {
  padding: var(--pc-space-4) var(--pc-space-5);
  border-radius: var(--pc-radius-m);
  background: var(--pc-creme);
  font-size: var(--pc-fs-sm);
}
.cs-sommaire__titre { font-weight: 650; color: var(--pc-encre); }
.cs-sommaire ol { margin-top: var(--pc-space-2); padding-left: 1.25em; }
.cs-sommaire li::marker { color: var(--pc-terracotta-fonce); }
.cs-sommaire a {
  display: inline-block;
  padding-block: 0.75rem; /* cible tactile d'au moins 44 px avec l'interligne */
  color: var(--pc-encre-douce);
  text-decoration: underline;
  text-decoration-color: var(--pc-trait-fort);
  text-underline-offset: 0.2em;
}
.cs-sommaire a:hover { color: var(--pc-encre); text-decoration-color: currentColor; }

.cs-texte { font-size: var(--pc-fs-base); }
.cs-texte h2 { scroll-margin-top: calc(var(--pc-header-h) + var(--pc-space-4)); }
.cs-texte > h2:first-child { margin-top: 0; }
.cs-texte .pc-table-wrap { margin-top: var(--pc-space-4); }

/* Figure dans le texte */
.cs-figure { margin-block: var(--pc-space-6); }
.cs-figure img { width: 100%; height: auto; border-radius: var(--pc-radius-m); background: var(--pc-papier-fonce); }

/* Encadré « À retenir » (bord cousu par lib/couture.js) */
.cs-encadre {
  position: relative;
  padding: var(--pc-space-5);
  border: 1.5px dashed var(--pc-couture);
  border-radius: var(--pc-radius-l);
  background: var(--pc-creme);
  color: var(--pc-encre-douce);
}
.cs-encadre.is-cousu { border-color: transparent; }
.cs-encadre__titre { font-family: var(--pc-font-ui); font-size: var(--pc-fs-base); font-weight: 650; color: var(--pc-encre); }
.cs-encadre > * + * { margin-top: 0.6em; }
.cs-encadre ul { padding-left: 1.25em; }

/* Note de prudence (pas un avis médical) */
.cs-note {
  padding: var(--pc-space-3) var(--pc-space-4);
  border-left: 3px solid var(--pc-terracotta);
  background: var(--pc-papier-fonce);
  border-radius: 0 var(--pc-radius-s) var(--pc-radius-s) 0;
  font-size: var(--pc-fs-sm);
}

/* Sources : liens en texte simple, aucun contenu externe chargé */
.cs-sources { margin-top: var(--pc-space-7); padding-top: var(--pc-space-5); border-top: 1px solid var(--pc-trait); font-size: var(--pc-fs-sm); }
.cs-sources h2 { font-family: var(--pc-font-ui); font-size: var(--pc-fs-base); font-weight: 650; margin-top: 0; }
.cs-sources ol { padding-left: 1.25em; }
.cs-sources li { overflow-wrap: anywhere; }

/* Questions-réponses en fin d'article */
.cs-faq { margin-top: var(--pc-space-6); }
.cs-faq .pc-accordion__summary { font-size: var(--pc-fs-base); }
.cs-faq .pc-accordion__panel > * + * { margin-top: 0.6em; }

/* --------------------------------------------------------------------------
   3. Appel discret vers la boutique
   -------------------------------------------------------------------------- */
.cs-appel {
  display: grid;
  gap: var(--pc-space-4);
  margin-top: var(--pc-space-7);
  padding: var(--pc-space-5);
  border-radius: var(--pc-radius-l);
  background: var(--pc-papier-fonce);
}
.cs-appel .cs-appel__titre { margin-top: 0; font-size: var(--pc-fs-lg); }
.cs-appel p { color: var(--pc-encre-douce); max-width: 56ch; }
@media (min-width: 48em) {
  .cs-appel { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: var(--pc-space-6); }
}

/* --------------------------------------------------------------------------
   4. Cartes d'articles (index des conseils, « À lire aussi »)
   -------------------------------------------------------------------------- */
.cs-articles { display: grid; gap: var(--pc-space-6); margin-top: var(--pc-space-6); }
@media (min-width: 40em) { .cs-articles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .cs-articles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cs-article-carte { position: relative; display: flex; flex-direction: column; gap: var(--pc-space-2); }
.cs-article-carte__media {
  overflow: hidden;
  border-radius: var(--pc-radius-m);
  background: var(--pc-papier-fonce);
  aspect-ratio: 1088 / 960;
}
.cs-article-carte__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--pc-dur-3) var(--pc-ease); }
.cs-article-carte:hover .cs-article-carte__media img { transform: scale(1.03); }
.cs-article-carte .pc-kicker { margin-top: var(--pc-space-2); }
.cs-article-carte__titre { font-size: var(--pc-fs-lg); }
.cs-article-carte__titre a { color: var(--pc-encre); text-decoration: none; }
/* Toute la carte est cliquable, le lien reste celui du titre. */
.cs-article-carte__titre a::after { content: ""; position: absolute; inset: 0; border-radius: var(--pc-radius-m); }
.cs-article-carte__titre a:focus-visible { outline: none; }
.cs-article-carte__titre a:focus-visible::after { outline: 3px solid var(--pc-focus); outline-offset: 4px; }
.cs-article-carte:hover .cs-article-carte__titre a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
.cs-article-carte p { color: var(--pc-encre-douce); font-size: var(--pc-fs-sm); }
@media (prefers-reduced-motion: reduce) {
  .cs-article-carte__media img { transition: none; }
  .cs-article-carte:hover .cs-article-carte__media img { transform: none; }
}

/* Liens utiles (index des conseils) */
.cs-liens { display: grid; gap: var(--pc-space-3); margin-top: var(--pc-space-5); }
@media (min-width: 48em) { .cs-liens { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cs-liens a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--pc-tap);
  padding: var(--pc-space-4);
  border: 1px solid var(--pc-trait);
  border-radius: var(--pc-radius-m);
  background: var(--pc-surface);
  color: var(--pc-encre);
  font-weight: 600;
  text-decoration: none;
}
.cs-liens a:hover { border-color: var(--pc-trait-fort); background: var(--pc-creme); }
.cs-liens .pc-icon { flex: none; color: var(--pc-terracotta-fonce); }

/* --------------------------------------------------------------------------
   5. Pages d'atterrissage
   -------------------------------------------------------------------------- */
.cs-hero { display: grid; gap: var(--pc-space-6); align-items: center; margin-top: var(--pc-space-3); }
@media (min-width: 56em) { .cs-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--pc-space-8); } }
.cs-hero .cs-titre { max-width: 16ch; }
.cs-hero__actions { margin-top: var(--pc-space-5); }
.cs-hero__media { margin: 0; }
.cs-hero__media .cs-une__cadre { aspect-ratio: 1088 / 960; }

/* Atouts (icône + titre + texte) */
.cs-atouts { display: grid; gap: var(--pc-space-5); margin-top: var(--pc-space-6); }
@media (min-width: 40em) { .cs-atouts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .cs-atouts--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cs-atout { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--pc-space-3); align-items: start; }
.cs-atout .pc-icon { width: 2rem; height: 2rem; color: var(--pc-terracotta-fonce); }
.cs-atout h3 { font-size: var(--pc-fs-md); }
.cs-atout p { margin-top: 0.375rem; color: var(--pc-encre-douce); }

.cs-section-titre { max-width: 26ch; }
.cs-section-intro { margin-top: var(--pc-space-3); max-width: 62ch; color: var(--pc-encre-douce); }
.cs-produits { margin-top: var(--pc-space-6); }
.cs-produits-suite { margin-top: var(--pc-space-5); }

/* Deux colonnes de texte (prose + encadré) */
.cs-duo > .pc-prose > h2:first-child { margin-top: 0; }
.cs-duo { display: grid; gap: var(--pc-space-6); align-items: start; }
@media (min-width: 56em) { .cs-duo { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--pc-space-8); } }

/* Liste à cocher (préparer le sac de garderie, idées cadeaux…) */
.cs-liste-check { display: flex; flex-direction: column; gap: 0.6rem; padding: 0; list-style: none; }
.cs-encadre .cs-liste-check { padding-left: 0; }
.cs-liste-check li { display: flex; gap: 0.625rem; align-items: flex-start; }
.cs-liste-check .pc-icon { flex: none; margin-top: 0.2rem; color: var(--pc-terracotta-fonce); }

/* --------------------------------------------------------------------------
   6. À propos : valeurs et « Le mot de Florian »
   -------------------------------------------------------------------------- */
/* Récit de la page À propos : espace au-dessus quand il suit une section colorée */
.cs-recit-haut { padding-top: var(--pc-section); }
.cs-valeurs { display: grid; gap: var(--pc-space-5); margin-top: var(--pc-space-6); }
@media (min-width: 40em) { .cs-valeurs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72em) { .cs-valeurs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 64em) { .cs-valeurs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cs-valeur { padding: var(--pc-space-5); border-radius: var(--pc-radius-l); background: var(--pc-surface); border: 1px solid var(--pc-trait); }
.cs-valeur .pc-icon { width: 2rem; height: 2rem; color: var(--pc-terracotta-fonce); }
.cs-valeur h3 { margin-top: var(--pc-space-3); font-size: var(--pc-fs-md); }
.cs-valeur p { margin-top: 0.5rem; color: var(--pc-encre-douce); }

.cs-mot {
  position: relative;
  display: grid;
  gap: var(--pc-space-5);
  padding: var(--pc-space-6) var(--pc-space-5);
  border-radius: var(--pc-radius-l);
  background: var(--pc-creme);
}
@media (min-width: 48em) { .cs-mot { grid-template-columns: 9rem minmax(0, 1fr); gap: var(--pc-space-7); padding: var(--pc-space-7); align-items: start; } }
/* Emplacement de la photo de Florian (à fournir) : monogramme en attendant */
.cs-mot__portrait {
  display: grid;
  place-items: center;
  width: 7rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--pc-papier-fonce);
  color: var(--pc-cacao);
  font-family: var(--pc-font-titre);
  font-size: var(--pc-fs-2xl);
}
@media (min-width: 48em) { .cs-mot__portrait { width: 9rem; } }
.cs-mot__titre { font-size: var(--pc-fs-xl); }
.cs-mot blockquote { margin: var(--pc-space-4) 0 0; }
.cs-mot blockquote p { font-family: var(--pc-font-titre); font-variation-settings: "SOFT" 50; font-size: var(--pc-fs-md); line-height: 1.55; color: var(--pc-encre-douce); max-width: 60ch; }
.cs-mot blockquote p + p { margin-top: var(--pc-space-3); }
.cs-mot__signature { margin-top: var(--pc-space-4); font-weight: 600; color: var(--pc-encre); }