/* ==========================================================================
   beegin — Classes additionnelles Gutenberg (thème enfant « beegin »)
   Référence visuelle : page « Palette » du fichier Figma.
   Thème enfant de Blocksy (Scopikatz Child). Chargé après les styles de Blocksy,
   côté site et dans l'éditeur, par inc/beegin-block-styles.php.
   Couleurs, tailles, polices et espacements : theme.json (var(--wp--preset--*)).
   ========================================================================== */

:root {
  --beegin-noir: var(--wp--preset--color--noir, #1D1D1B);
  --beegin-turquoise: var(--wp--preset--color--turquoise, #6EC3BF);
  --beegin-sarcelle: var(--wp--preset--color--sarcelle, #008C84);
  --beegin-pale: var(--wp--preset--color--turquoise-pale, #E4F4F3);
  --beegin-clair: var(--wp--preset--color--fond-clair, #F6F7F7);
  --beegin-gris: var(--wp--preset--color--gris-texte, #5B5B58);
  --beegin-blanc: #FFFFFF;
  --beegin-titre: "Loos ExtraWide", "Unbounded", sans-serif;
  --beegin-texte: "IBM Plex Mono", monospace;
  --beegin-rayon-carte: 24px;
  --beegin-rayon-grand: 40px;
  --beegin-rayon-pilule: 999px;
  --beegin-gap: 30px;
  --beegin-accent: var(--beegin-turquoise); /* surchargé par .beegin-accent--* */
}

/* ==========================================================================
   0. Pont Blocksy — remplace les réglages par défaut du Personnaliseur
   (palette, polices, titres, boutons) par ceux de la charte beegin.
   Ce fichier est chargé après les styles de Blocksy.
   ========================================================================== */
:root {
  /* Palette Blocksy (Personnaliseur → Couleurs) */
  --theme-palette-color-1: #008C84;  /* sarcelle : liens, accents */
  --theme-palette-color-2: #1D1D1B;  /* noir : survol */
  --theme-palette-color-3: #1D1D1B;  /* texte */
  --theme-palette-color-4: #1D1D1B;  /* titres */
  --theme-palette-color-5: #6EC3BF;  /* filets, bordures */
  --theme-palette-color-6: #E4F4F3;  /* fonds pâles */
  --theme-palette-color-7: #F6F7F7;  /* fond de page */
  --theme-palette-color-8: #FFFFFF;  /* blanc */
  --theme-text-color: var(--beegin-noir);
  --theme-headings-color: var(--beegin-noir);
  --theme-link-initial-color: var(--beegin-sarcelle);
  --theme-link-hover-color: var(--beegin-noir);
  --theme-selection-background-color: var(--beegin-turquoise);
  --theme-selection-text-color: var(--beegin-noir);
  --theme-border-color: var(--beegin-turquoise);

  /* Texte courant */
  --theme-font-family: var(--beegin-texte);
  --theme-font-weight: 400;
  --theme-font-size: var(--wp--preset--font-size--courant, 16px);
  --theme-line-height: 1.6;
  --theme-letter-spacing: 0em;

  /* Mise en page */
  --theme-normal-container-max-width: 1200px;
  --theme-content-spacing: 30px;

  /* Boutons */
  --theme-button-font-weight: 500;
  --theme-button-font-size: 15px;
  --theme-button-min-height: 0px;
  --theme-button-padding: 14px 24px;
  --theme-button-border-radius: var(--beegin-rayon-pilule);
  --theme-button-text-initial-color: var(--beegin-blanc);
  --theme-button-text-hover-color: var(--beegin-blanc);
  --theme-button-background-initial-color: var(--beegin-noir);
  --theme-button-background-hover-color: var(--beegin-sarcelle);
}
body { background-color: var(--beegin-clair); }

h1, h2, h3, h4, h5 { --theme-font-family: var(--beegin-titre); --theme-font-weight: 500; --theme-text-transform: none; }
h1 { --theme-font-size: var(--wp--preset--font-size--titre-xl); --theme-line-height: 1.04; --theme-letter-spacing: -0.02em; }
h2 { --theme-font-size: var(--wp--preset--font-size--titre-l);  --theme-line-height: 1.12; --theme-letter-spacing: -0.015em; }
h3 { --theme-font-size: var(--wp--preset--font-size--titre-m);  --theme-line-height: 1.25; --theme-letter-spacing: -0.005em; }
h4 { --theme-font-size: var(--wp--preset--font-size--titre-s);  --theme-line-height: 1.3;  --theme-letter-spacing: 0em; }
h5 { --theme-font-size: var(--wp--preset--font-size--titre-xs); --theme-line-height: 1.3;  --theme-letter-spacing: 0em; }
h6 { --theme-font-family: var(--beegin-texte); --theme-font-weight: 500; --theme-font-size: var(--wp--preset--font-size--surtitre); --theme-line-height: 1.4; --theme-letter-spacing: .06em; --theme-text-transform: none; }

.wp-block-pullquote { --theme-font-family: var(--beegin-titre); --theme-font-weight: 500; --theme-font-size: var(--wp--preset--font-size--accent); }
pre, code, samp, kbd { --theme-font-family: var(--beegin-texte); }
figcaption { --theme-font-size: var(--wp--preset--font-size--petit); color: var(--beegin-gris); }

.wp-block-button__link, .ct-button, button.ct-button {
  font-family: var(--beegin-titre);
  line-height: 1;
}

/* ---------- Pilule (motif du « ī » du logo), réutilisée partout ---------- */
.beegin-pilule,
.is-style-surtitre::before,
.beegin-accent-pilule::before,
.is-style-carte::before {
  content: "";
  display: inline-block;
  width: 3em; height: 1em;
  border-radius: var(--beegin-rayon-pilule);
  background: var(--beegin-accent);
  flex: none;
}

/* ==========================================================================
   1. Typographie — styles de paragraphe (core/paragraph)
   intro, accent, chiffre, petit : voir les classes simples (section 11).
   ========================================================================== */
.is-style-surtitre {
  display: inline-flex; align-items: center; gap: 12px;
  font-weight: 500;
  font-size: var(--wp--preset--font-size--surtitre);
  letter-spacing: .06em;
}
.is-style-surtitre::before { width: 32px; height: 10px; }

/* ==========================================================================
   2. Boutons (core/button)
   ========================================================================== */
.wp-block-button .wp-block-button__link {
  font-family: var(--beegin-titre);
  font-weight: 500;
  font-size: 15px;
  padding: 14px 24px;
  border-radius: var(--beegin-rayon-pilule);
  border: 1.5px solid transparent;
  transition: background-color .2s, color .2s, border-color .2s;
}
.wp-block-button .wp-block-button__link:hover    { filter: brightness(.92); }
/* Couleurs : classes simples « bouton coul-1 » à « coul-5 », « bouton lien » (section 11). */

.beegin-bouton--cta .wp-block-button__link { padding: 18px 32px; font-size: 16px; }

/* ==========================================================================
   3. Appels à action (compositions beegin/cta-*)
   ========================================================================== */
.beegin-cta {
  background: var(--beegin-noir);
  color: var(--beegin-blanc);
  border-radius: var(--beegin-rayon-grand);
  padding: clamp(32px, 4vw, 56px);
  position: relative;
  overflow: hidden;
}
.beegin-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--beegin-gap); }
.beegin-cta mark,
.beegin-cta .has-turquoise-color { color: var(--beegin-turquoise); background: none; }

.beegin-cta-ligne {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--beegin-gap);
  background: var(--beegin-blanc);
  border-top: 1px solid var(--beegin-turquoise);
  border-radius: var(--beegin-rayon-grand);
  padding: 40px clamp(24px, 4vw, 48px);
}

.beegin-cta-section {
  background: var(--beegin-sarcelle);
  color: var(--beegin-blanc);
  border-radius: var(--beegin-rayon-grand);
  padding: clamp(40px, 5vw, 64px);
}
.beegin-cta-section .wp-block-columns { gap: var(--beegin-gap); align-items: center; }

/* ==========================================================================
   4. Citations
   ========================================================================== */
/* Citation pilule : classe simple « citation-pilule » (section 11). */
.is-style-citation-carte {                /* core/quote */
  background: var(--beegin-noir); color: var(--beegin-blanc);
  border: 0; border-radius: var(--beegin-rayon-grand);
  padding: clamp(32px, 4vw, 56px);
}
.is-style-citation-carte p { font-family: var(--beegin-titre); font-size: var(--wp--preset--font-size--accent); line-height: 1.45; }
.is-style-citation-carte cite { font-family: var(--beegin-texte); font-size: 14px; color: var(--beegin-turquoise); font-style: normal; }

.beegin-accent-pilule { display: flex; gap: 24px; align-items: flex-start; }
.beegin-accent-pilule::before { width: 32px; height: 10px; margin-top: .55em; background: var(--beegin-blanc); outline: 1.5px solid var(--beegin-noir); }

/* ==========================================================================
   5. Listes (core/list) — puces dessinées en CSS
   ========================================================================== */
[class*="is-style-liste-"] { list-style: none; padding-left: 0; }
[class*="is-style-liste-"] li { display: flex; gap: 16px; align-items: baseline; margin-bottom: 12px; }

/* Pilules, « + » et numérotée : classes simples « liste-pilule », « liste-plus », « liste-numerotee » (section 11). */
.is-style-liste-moins li::before { content: "–"; font-family: var(--beegin-titre); font-weight: 600; }

.is-style-liste-pastilles li {
  align-items: center;
  border: 1.5px solid var(--beegin-turquoise); border-radius: var(--beegin-rayon-pilule);
  padding: 12px 24px; color: var(--beegin-turquoise);
  font-family: var(--beegin-titre); font-weight: 500;
}
.is-style-liste-pastilles li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* ==========================================================================
   6. Étiquettes
   ========================================================================== */
/* Étiquettes claire, sombre, sarcelle : classes simples « etiquette », « etiquette sombre », « etiquette sarcelle » (section 11). */
.is-style-etiquette-pleine .wp-block-button__link {
  display: inline-block;
  font-family: var(--beegin-texte); font-weight: 400; font-size: 14px;
  padding: 6px 14px; border-radius: var(--beegin-rayon-pilule);
  background: var(--beegin-sarcelle); border: 1px solid var(--beegin-sarcelle); color: var(--beegin-blanc);
}
.beegin-etiquettes { display: flex; flex-wrap: wrap; gap: 8px; }

/* ==========================================================================
   7. Cartes (core/group)
   ========================================================================== */
.is-style-carte {
  background: var(--beegin-blanc);
  border-radius: var(--beegin-rayon-carte);
  padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.is-style-carte::before { width: 32px; height: 10px; }

.beegin-accent--vert   { --beegin-accent: var(--wp--preset--color--vert, #7DC18A); }
.beegin-accent--ocre   { --beegin-accent: var(--wp--preset--color--ocre, #B68E40); }
.beegin-accent--bleu   { --beegin-accent: var(--wp--preset--color--bleu, #6B7AB9); }
.beegin-accent--orange { --beegin-accent: var(--wp--preset--color--orange, #E95F1C); }
.beegin-accent--jaune  { --beegin-accent: var(--wp--preset--color--jaune, #FFEB33); }
.beegin-accent--rose   { --beegin-accent: var(--wp--preset--color--rose, #F29AC3); }
.beegin-accent--prune  { --beegin-accent: var(--wp--preset--color--prune, #541A41); }
.beegin-accent--rouge  { --beegin-accent: var(--wp--preset--color--rouge, #D80D33); }

.is-style-carte-chiffre {
  background: var(--beegin-noir); color: var(--beegin-blanc);
  border-radius: var(--beegin-rayon-carte); padding: 16px;
}
.is-style-carte-chiffre > .wp-block-group__inner-container,
.is-style-carte-chiffre > * { border: 1px solid var(--beegin-turquoise); border-radius: 16px; padding: 24px; }
.is-style-carte-chiffre .chiffre { color: var(--beegin-turquoise); }

.beegin-etape { display: flex; flex-direction: column; gap: 12px; padding: 16px 24px; background: var(--beegin-blanc); border-radius: var(--beegin-rayon-carte); }
.beegin-etape > :first-child {
  align-self: flex-start;
  font-family: var(--beegin-titre); font-size: 14px;
  border: 1.5px solid var(--beegin-noir); border-radius: var(--beegin-rayon-pilule); padding: 2px 14px;
}

.is-style-carte-contour { border: 1px solid var(--beegin-noir); border-radius: var(--beegin-rayon-carte); padding: 24px; background: var(--beegin-blanc); }
.is-style-carte-pale    { background: var(--beegin-pale); border-radius: var(--beegin-rayon-carte); padding: 24px; }
.beegin-carte--cas      { border-radius: var(--beegin-rayon-grand); padding: 28px; }
.beegin-carte--cas .is-style-carte-pale { border-radius: var(--beegin-rayon-carte); padding: 16px 20px; }

/* ==========================================================================
   8. Fonds de section — .beegin-section + .has-{slug}-background-color
   Règle : jamais deux fonds identiques côte à côte.
   ========================================================================== */
.beegin-section {
  padding-block: clamp(64px, 8vw, 120px);
  padding-inline: clamp(24px, 6.7vw, 96px);
}
.beegin-section > * + * { margin-block-start: var(--beegin-gap); }
.beegin-section.has-noir-background-color,
.beegin-section.has-sarcelle-background-color { color: var(--beegin-blanc); }
.beegin-section.has-noir-background-color .is-style-surtitre,
.beegin-section.has-noir-background-color .bouton.lien .wp-block-button__link { color: var(--beegin-turquoise); }
.beegin-section.has-sarcelle-background-color .bouton.lien .wp-block-button__link { color: var(--beegin-pale); }

/* ==========================================================================
   9. Logos et illustrations
   ========================================================================== */
.beegin-logo--clair img, .beegin-logo--clair svg { filter: brightness(0) invert(1); }
.beegin-blason { max-width: 160px; }
.beegin-illustration img, .beegin-illustration svg { width: 100%; height: auto; object-fit: contain; }
.beegin-illustration--clair img { filter: brightness(0) invert(1); }

/* ==========================================================================
   10. Mobile (≤ 781 px, point de rupture des colonnes Gutenberg)
   ========================================================================== */
@media (max-width: 781px) {
  .beegin-cta, .beegin-cta-ligne { flex-direction: column; align-items: flex-start; }
  .beegin-cta-section .wp-block-columns { flex-direction: column; }
  .wp-block-button .wp-block-button__link, .bouton .wp-block-button__link { font-size: 14px; }
}

/* ==========================================================================
   11. Classes combinables de la page « Palette » du site
   À saisir dans « Classe(s) CSS additionnelle(s) » (onglet Avancé du bloc).
   Ex. : « bloc couleur sarcelle rayon », « appel-a-action sombre », « bouton petit coul-1 ».
   ========================================================================== */
.intro { font-size: var(--wp--preset--font-size--intro); line-height: 1.6; }
.accent { font-family: var(--beegin-titre); font-weight: 500; font-size: var(--wp--preset--font-size--accent); line-height: 1.45; }
.chiffre { font-family: var(--beegin-titre); font-weight: 500; font-size: var(--wp--preset--font-size--chiffre); line-height: 1; letter-spacing: -0.02em; color: var(--beegin-sarcelle); }
.petit { font-size: var(--wp--preset--font-size--petit); line-height: 1.55; color: var(--beegin-gris); }

/* Blocs (core/group, core/column) */
.bloc { padding: 32px; border-radius: var(--beegin-rayon-carte); }
.bloc.rayon { border-radius: var(--beegin-rayon-grand); }
.bloc.couleur.sarcelle  { background: var(--beegin-sarcelle); color: var(--beegin-blanc); }
.bloc.couleur.turquoise { background: var(--beegin-turquoise); color: var(--beegin-noir); }
.bloc.couleur.pale      { background: var(--beegin-pale); color: var(--beegin-noir); }
.bloc.clair  { background: var(--beegin-clair); color: var(--beegin-noir); }
.bloc.sombre { background: var(--beegin-noir); color: var(--beegin-blanc); }
.bloc.couleur.sarcelle a { color: var(--beegin-pale); }
.bloc.sombre a { color: var(--beegin-turquoise); }
.bloc.contour { border: 1.5px solid var(--beegin-noir); }
.bloc.contour.tirets { border-style: dashed; }
.bloc.contour.pointilles { border-style: dotted; }
.bloc.double.contour { border: 0; outline: 1.5px solid var(--beegin-noir); outline-offset: -1.5px; box-shadow: 0 0 0 5px var(--beegin-blanc), 0 0 0 6.5px var(--beegin-noir); margin: 6.5px; }
.bloc.ombre { background: var(--beegin-blanc); box-shadow: 0 12px 32px rgba(29, 29, 27, .12); }
.bloc.transparent { background: transparent; padding-inline: 0; }

/* Appels à action (core/group en ligne : texte à gauche, bouton à droite) */
.appel-a-action {
  display: flex; align-items: center; justify-content: space-between; gap: var(--beegin-gap);
  padding: clamp(32px, 4vw, 56px); border-radius: var(--beegin-rayon-grand);
}
.appel-a-action.sombre { background: var(--beegin-noir); color: var(--beegin-blanc); }
.appel-a-action.couleur.sarcelle { background: var(--beegin-sarcelle); color: var(--beegin-blanc); }
.appel-a-action.clair { background: var(--beegin-blanc); color: var(--beegin-noir); border: 1px solid var(--beegin-turquoise); }
.appel-a-action h4, .appel-a-action .has-h-4-font-size { color: var(--beegin-turquoise); }
.appel-a-action.couleur.sarcelle h4 { color: var(--beegin-pale); }
.appel-a-action.clair h4 { color: var(--beegin-sarcelle); }
@media (max-width: 781px) { .appel-a-action { flex-direction: column; align-items: flex-start; } }

/* Boutons (core/button) */
.bouton .wp-block-button__link { font-family: var(--beegin-titre); font-weight: 500; font-size: 15px; padding: 14px 24px; border-radius: var(--beegin-rayon-pilule); border: 1.5px solid transparent; }
.bouton.petit .wp-block-button__link { font-size: 13px; padding: 10px 18px; }
.bouton.coul-1 .wp-block-button__link { background: var(--beegin-noir); color: var(--beegin-blanc); }
.bouton.coul-2 .wp-block-button__link { background: var(--beegin-turquoise); color: var(--beegin-noir); }
.bouton.coul-3 .wp-block-button__link { background: var(--beegin-blanc); color: var(--beegin-noir); }
.bouton.coul-4 .wp-block-button__link { background: transparent; color: var(--beegin-noir); border-color: var(--beegin-noir); }
.bouton.coul-5 .wp-block-button__link { background: transparent; color: var(--beegin-blanc); border-color: var(--beegin-blanc); }
.bouton.lien .wp-block-button__link { background: none; border: 0; padding: 0; color: var(--beegin-sarcelle); font-family: var(--beegin-texte); }
.bouton.lien .wp-block-button__link::after { content: " →"; }

/* Images, logo, étiquettes */
.illustration img, .illustration svg { width: 100%; height: auto; object-fit: contain; }
.illustration.clair img { filter: brightness(0) invert(1); }
.logo img { max-width: 240px; height: auto; }
.etiquette .wp-block-button__link, p.etiquette { display: inline-block; font-family: var(--beegin-texte); font-size: 14px; padding: 6px 14px; border-radius: var(--beegin-rayon-pilule); border: 1px solid var(--beegin-noir); background: transparent; color: var(--beegin-noir); }
.etiquette.sarcelle .wp-block-button__link { border-color: var(--beegin-sarcelle); color: var(--beegin-sarcelle); }
.etiquette.sombre .wp-block-button__link { border-color: var(--beegin-blanc); color: var(--beegin-blanc); }
.liste-pilule, .liste-numerotee, .liste-plus { list-style: none; padding-left: 0; }
.liste-pilule li, .liste-numerotee li, .liste-plus li { display: flex; gap: 16px; align-items: baseline; margin-bottom: 12px; }
.liste-pilule li::before { content: ""; flex: none; width: 18px; height: 7px; border-radius: 999px; background: var(--beegin-blanc); outline: 1.5px solid var(--beegin-noir); }
.liste-plus li::before { content: "+"; font-family: var(--beegin-titre); font-weight: 600; }
.liste-numerotee { counter-reset: beegin-liste; }
.liste-numerotee li { counter-increment: beegin-liste; padding: 16px 0; margin: 0; border-top: 1px solid var(--beegin-turquoise); }
.liste-numerotee li::before { content: counter(beegin-liste, decimal-leading-zero); font-family: var(--beegin-titre); font-weight: 500; color: var(--beegin-sarcelle); }
.citation-pilule { display: flex; gap: 24px; align-items: flex-start; border: 0; border-top: 1px solid var(--beegin-turquoise); padding: 32px 0 0; margin: 0; text-align: left; }
.citation-pilule::before { content: ""; flex: none; width: 48px; height: 16px; margin-top: .45em; border-radius: 999px; background: var(--beegin-turquoise); }
.citation-pilule p { font-family: var(--beegin-titre); font-size: var(--wp--preset--font-size--accent); color: var(--beegin-sarcelle); }