/*
Theme Name:   Blocksy Enfant — Carnet de Normandie
Theme URI:    https://carnetdenormandie.fr
Description:  Thème enfant de Blocksy. Contient les polices auto-hébergées et le CSS personnalisé.
Author:       Isa
Template:     blocksy
Version:      1.1.8
Text Domain:  blocksy-child
*/

/* =========================================================================
   1. POLICES AUTO-HÉBERGÉES
   Fichiers dans /polices/ — aucune requête vers Google. Ne pas modifier.
   ========================================================================= */

/* --- Inria Serif : 3 graisses + italiques --------------------------------- */
@font-face {
  font-family: 'Inria Serif';
  src: url('polices/inria-serif-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inria Serif';
  src: url('polices/inria-serif-300-italic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inria Serif';
  src: url('polices/inria-serif-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inria Serif';
  src: url('polices/inria-serif-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inria Serif';
  src: url('polices/inria-serif-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inria Serif';
  src: url('polices/inria-serif-700-italic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* --- Inter : police VARIABLE (une seule requête pour toutes les graisses) -- */
@font-face {
  font-family: 'Inter';
  src: url('polices/inter-variable.woff2') format('woff2');
  font-weight: 100 900;   /* plage continue : 100, 437, 612… tout est permis */
  font-style: normal;
  font-display: swap;
}

/* --- Paytone One : titrage / display -------------------------------------- */
@font-face {
  font-family: 'Paytone One';
  src: url('polices/paytone-one-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- Satisfy : manuscrite / accent ---------------------------------------- */
@font-face {
  font-family: 'Satisfy';
  src: url('polices/satisfy-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* =========================================================================
   2. POLICES ET COULEURS  ← LA SEULE SECTION À MODIFIER AU QUOTIDIEN
   ========================================================================= */

:root {
  /* Polices */
  --cdn-h1:         'Paytone One', Impact, sans-serif;              /* titres H1        */
  --cdn-titres:     'Inter', system-ui, -apple-system, sans-serif;  /* titres H2 → H6   */
  --cdn-texte:      'Inria Serif', Georgia, serif;                  /* corps de texte   */
  --cdn-manuscrite: 'Satisfy', cursive;                             /* légendes, citations */

  /* Couleurs */
  --cdn-chocolat:        #331D16;   /* brun foncé                      */
  /*--cdn-terracotta:      #D25D38;   ancienne couleur rouille plus organgée — accents, boutons      */
  --cdn-terracotta:      #B84A28;   /* rouille — accents, boutons      */
  --cdn-terracotta-text: #B84A28;   /* rouille foncé — texte, AA 5,2:1 */
}


/* =========================================================================
   3. APPLICATION DES POLICES — famille uniquement.
   Tailles, graisses, casse, interlignage, mobile : panneaux Blocksy.
   ========================================================================= */

body,
button,
input,
select,
textarea {
  font-family: var(--cdn-texte);
}

h1,
.entry-title {
  font-family: var(--cdn-h1);   /* Paytone One */
  font-weight: 400;
  font-synthesis: none;
}

/* Le titre du site échappe à Paytone One : il porte l'identité de la marque */
.site-title,
.site-title a {
  font-family: var(--cdn-titres);   /* Inter */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cdn-chocolat);
  font-synthesis: none;
}

h2, h3, h4, h5, h6 {
  font-family: var(--cdn-titres);
  font-optical-sizing: auto;
}


/* =========================================================================
   4. LÉGENDES, CITATIONS ET CLASSES UTILITAIRES
   ========================================================================= */

figcaption,
.wp-element-caption,
.wp-block-image figcaption,
blockquote,
.wp-block-quote,
.wp-block-pullquote blockquote {
  font-family: var(--cdn-manuscrite);
  font-weight: 400;      /* Satisfy n'a qu'une graisse */
  font-style: normal;    /* empêche le faux italique des citations */
  font-synthesis: none;  /* verrou : ni faux gras, ni faux italique */
}

/* Satisfy est étroite et fine : on compense un peu */
figcaption,
.wp-element-caption {
  font-size: 1.25em;
  line-height: 1.5;
}

blockquote,
.wp-block-quote {
  font-size: 1.3em;
  line-height: 1.7;
}

/* La source d'une citation reste lisible */
blockquote cite,
.wp-block-quote cite {
  font-family: var(--cdn-texte);
  font-size: 0.75em;
}

/* À poser sur un bloc via : panneau Avancé → Classe(s) CSS additionnelle(s) */
.police-display {
  font-family: var(--cdn-h1);
  font-weight: 400;
  font-synthesis: none;
}

.police-manuscrite {
  font-family: var(--cdn-manuscrite);
  font-weight: 400;
  font-style: normal;
  font-synthesis: none;
}


/* =========================================================================
   5. IDENTITÉ DE L'EN-TÊTE
   Titre + filets ondulés + slogan.
   Le HTML correspondant vit dans l'élément HTML du constructeur d'en-tête.
   ========================================================================= */

.cdn-identite {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;            /* ← écart titre / slogan : LE seul réglage à toucher */
  text-align: center;
}

/* --- Ligne du titre ------------------------------------------------------- */
.cdn-titre {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  color: var(--cdn-chocolat);   /* les filets suivent, via currentColor */
  /* font-size: clamp(1.1rem, 2.6vw, 1.75rem);  ancienne taille */
  font-size: clamp(1.2rem, 2.8vw, 1.85rem);
  line-height: 1;
}

.cdn-mot {
  font-family: var(--cdn-titres);      /* Inter */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cdn-de {
  font-family: var(--cdn-manuscrite);  /* Satisfy */
  font-weight: 400;
  font-size: 1.30em;
  font-synthesis: none;
}

/* --- Filets ondulés ------------------------------------------------------- */
.cdn-filet {
  width: 2.2em;
  height: 0.52em;
  flex: none;        /* le filet ne se déforme jamais */
  overflow: visible; /* le trait peut déborder du viewBox sans être coupé */
}

/* Le filet de droite est retourné : l'ornement devient symétrique */
.cdn-filet--miroir {
  transform: scaleX(-1);
}

/* --- Slogan --------------------------------------------------------------- */
.cdn-slogan {
  margin: 0;                              /* neutralise la marge par défaut du <p> */
  font-family: var(--cdn-manuscrite);     /* Satisfy */
  font-weight: 400;
  font-synthesis: none;
  color: var(--cdn-terracotta-text);      /* version foncée : contraste AA */
  /* font-size: clamp(0.95rem, 1.9vw, 1.25rem); ancienne version de taille */
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  line-height: 1.3;
}

/* --- Mobile --------------------------------------------------------------- */
@media (max-width: 600px) {
  .cdn-identite {
    gap: 0.2em;
    padding-inline: 0.5rem;   /* le slogan ne touche plus le hamburger */
  }
  .cdn-titre  { gap: 0.35em; }
  .cdn-filet  { width: 1.4em; }
  .cdn-slogan { text-wrap: balance; max-width: 24ch; }
}

/* --- Zoom 400 % et très petits écrans ------------------------------------- */
@media (max-width: 340px) {
  .cdn-titre { font-size: 0.95rem; }
  .cdn-filet { width: 1.2em; }
}

/* =========================================================================
   6. TON CSS PERSONNALISÉ
   Tout le reste vient ici.
   Rappel : sélecteurs NUS (pas d'ancêtre du type header, .wp-site-blocks…)
   pour que le rendu soit identique dans l'éditeur et sur le site.
   ========================================================================= */

/* Le header et ses menus déroulants au-dessus des cartes Leaflet */
#header.ct-header {
    position: relative;
    z-index: 100;
}
/* Le conteneur sticky doit aussi être au-dessus */
#header .ct-sticky-container {
    position: relative;
    z-index: 100;
}
/* Le sous-menu déroulant explicitement au premier plan */
#header .menu .sub-menu {
    z-index: 9999 !important;
}

/* Abaisse SEULEMENT le conteneur global de la carte (pas ses calques internes) */
.leaflet-container {
    position: relative;
    z-index: 1;
}


/* =========================================================================
   ESPACEMENT VERTICAL DES TITRES ET PARAGRAPHES
   Un seul endroit à régler : les variables ci-dessous.
   1re valeur margin-block = espace AVANT | 2e valeur = espace APRÈS
   ========================================================================= */

:root {
  /* H1 : pas d'espace avant, espace après */
  --cdn-h1-avant:  0;
  --cdn-h1-apres:  0.4em;

  /* H2 : avant > après */
  --cdn-h2-avant:  0.9em;
  --cdn-h2-apres:  0.3em;

  /* H3 : pas d'espace avant, espace après */
  --cdn-h3-avant:  0.2em;
  --cdn-h3-apres:  0.2em;

  /* H4 : avant > après */
  --cdn-h4-avant:  0;
  --cdn-h4-apres:  0.2em;

  /* Paragraphes : pas d'espace avant, léger espace après */
  --cdn-p-avant:   0;
  --cdn-p-apres:   0.4em;
}

/* --- H1 (natif WP + GreenShift) ------------------------------------------ */
h1,
h1.gspb_heading {
  margin-block: var(--cdn-h1-avant) var(--cdn-h1-apres) !important;
}

/* --- H2 ------------------------------------------------------------------- */
h2,
h2.gspb_heading {
  margin-block: var(--cdn-h2-avant) var(--cdn-h2-apres) !important;
}

/* --- H3 ------------------------------------------------------------------- */
h3,
h3.gspb_heading {
  margin-block: var(--cdn-h3-avant) var(--cdn-h3-apres) !important;
}

/* --- H4 ------------------------------------------------------------------- */
h4,
h4.gspb_heading {
  margin-block: var(--cdn-h4-avant) var(--cdn-h4-apres) !important;
}

/* --- Paragraphes (natif WP + bloc texte GreenShift) ---------------------- */
p,
.gspb_text > p,
.gspb_text {
  margin-block: var(--cdn-p-avant) var(--cdn-p-apres) !important;
}


/* =========================================================================
   TABLEAU COOKIES (WP Consent) — responsive par défilement horizontal
   La classe .cdn-tableau-scroll est posée sur la COLONNE GreenShift.
   ========================================================================= */
.cdn-tableau-scroll {
  min-width: 0 !important;
}

/* Le conteneur du tableau doit être contraint à la largeur de la colonne */
.cdn-tableau-scroll > .wpconsent-cookie-policy {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;          /* active le défilement horizontal */
  -webkit-overflow-scrolling: touch;
}

.cdn-tableau-scroll .wpconsent-cookie-policy-table {
  min-width: 480px;   /* garde le tableau lisible ; en dessous, on scrolle */
}