/* ==========================================================================
   Chartes « FCPN » et « FCPN arrondi » — s'appliquent uniquement quand
   <html data-charte="fcpn"> ou <html data-charte="fcpn-arrondi"> (sélecteur de charte).
   Reprend la charte du site national : vert sapin / olive / tilleul, étiquettes rouges,
   titres manuscrits (Caveat), texte en Roboto, boutons en pilule, cadres en pointillés.
   ========================================================================== */

@font-face {
  font-family: "Roboto"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/roboto.woff2") format("woff2");
}
@font-face {
  font-family: "Caveat"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/caveat-700.woff2") format("woff2");
}

/* Charte claire uniquement (comme le site national), y compris si l'appareil est en mode sombre */
:root[data-charte^="fcpn"] {
  --fond: #FFFFFF;
  --fond-2: #E4E7E2;          /* gris-vert du site national */
  --surface: #FFFFFF;
  --sauge: #EEF4E0;
  --texte: #2E411B;           /* vert sapin */
  --texte-2: #4F5E40;
  --primaire: #5C7B1F;        /* vert olive */
  --primaire-hover: #2E411B;
  --plumage: #2E411B;
  --accent: #AACC64;          /* vert tilleul */
  --cta: #2E411B;
  --cta-hover: #1F2D12;
  --rouge: #D9322A;           /* étiquettes de section */
  --nuit: #2E411B;
  --sur-nuit: #FFFFFF;
  --sur-nuit-2: #DCE6C8;
  --bordure: #D5DACF;
  --sur-primaire: #FFFFFF;
  --bandeau-fond: #2E411B;
  --bandeau-texte: #FFFFFF;
  --surlignage: .6;

  --bleu-fond: #E1EEF2;  --bleu-texte: #1F4E66;
  --vert-fond: #E3EFC8;  --vert-texte: #2E411B;
  --peche-fond: #F8E2D4; --peche-texte: #7A3518;
  --jaune-fond: #F4EDC4; --jaune-texte: #5A4300;
  --printemps: #E3EFC8; --ete: #F4EDC4; --automne: #F2DCC9; --hiver: #E1EBEF;
  --sur-saison: #2E411B;

  --police-titre: "Caveat", "Segoe Print", cursive;
  --police-texte: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --police-main: "Caveat", "Segoe Print", cursive;

  /* Angles presque droits, comme le site national */
  --r-sm: 0px;
  --r-md: 3px;
  --r-lg: 4px;
  --r-tag: 0px;
  --ombre: 0 1px 2px rgb(46 65 27 / .08), 0 6px 18px -8px rgb(46 65 27 / .25);
  color-scheme: light;
}

/* Variante arrondie : mêmes couleurs, formes douces */
:root[data-charte="fcpn-arrondi"] {
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-tag: 999px;
  --ombre: 0 2px 4px rgb(46 65 27 / .06), 0 12px 28px -12px rgb(46 65 27 / .3);
}

:root[data-charte^="fcpn"] {
  body { font-size: 1rem; }

  /* Titres manuscrits, plus grands car Caveat est une écriture compacte */
  h1, h2, h3 { font-weight: 700; letter-spacing: 0; line-height: 1.05; }
  h1 { font-size: clamp(2.8rem, 7vw, 4.4rem); }
  h2 { font-size: clamp(2.2rem, 5vw, 3rem); }
  h3 { font-size: 1.65rem; }
  .faits h3, .etapes h3, .actu h3 { font-size: 1.55rem; }
  .sortie h3 { font-size: 1.7rem; }
  .etapes .sortie h3 { font-size: 1.45rem; }
  .marque span { font-size: 1.55rem; font-weight: 700; }
  .marque small { font-family: var(--police-texte); }

  /* Surtitres = étiquettes rouges du site national */
  .surtitre, .page-titre .surtitre {
    display: inline-block; width: fit-content;
    background: var(--rouge); color: #FFFFFF;
    font-family: var(--police-texte); font-weight: 500; font-size: .85rem;
    text-transform: none; letter-spacing: 0;
    padding: .2em .7em; border-radius: var(--r-tag); margin-bottom: .9em;
  }
  .manuscrit { color: var(--primaire); transform: none; }

  /* En-tête : blanc, menu en capitales, soulignement vert tilleul */
  .entete { background: #FFFFFF; border-bottom: 3px solid var(--accent); }
  .menu a {
    border-radius: var(--r-sm); text-transform: uppercase; font-weight: 500; font-size: .85rem; letter-spacing: .04em;
    color: var(--texte); border-bottom: 4px solid transparent; padding: .6em .7em .45em;
  }
  .menu a:hover { background: transparent; border-bottom-color: var(--accent); color: var(--texte); }
  .menu a[aria-current="page"] { background: transparent; border-bottom-color: var(--primaire); text-decoration: none; }
  .menu-toggle { border-radius: var(--r-md); background: var(--sauge); }

  /* Bandeau « prochaine sortie » */
  .prochaine { background: var(--primaire); }
  .prochaine__label { color: #FFFFFF; }
  .prochaine__delai { background: #FFFFFF; color: var(--texte); border-radius: var(--r-tag); }
  .pastille, .pastille--proche::after { background: #FFFFFF; }

  /* Boutons en pilule vert sapin */
  .bouton { border-radius: 999px; box-shadow: none; font-weight: 500; }
  .bouton:active { transform: translateY(1px); box-shadow: none; }
  .bouton--cta { background: var(--cta); }
  .bouton--contour { border-color: var(--texte); color: var(--texte); }
  .bouton--contour:hover { background: var(--sauge); color: var(--texte); }
  .lien-fleche { font-weight: 700; text-transform: uppercase; font-size: .85rem; letter-spacing: .06em; }

  /* Hero : photo rectangulaire, fond blanc, bande verte en pied */
  .hero { background: #FFFFFF; border-bottom: 10px solid var(--accent); }
  .hero::before { opacity: .05; }
  .galet { border-radius: var(--r-lg); aspect-ratio: 4 / 3.4; }
  .hero__note { border-radius: var(--r-md); color: var(--texte); font-weight: 700; }
  .hero h1 .manuscrit { font-size: clamp(1.5rem, 3vw, 1.9rem); }
  .hero h1 em { color: var(--primaire); }
  .infos-cles li { border-radius: var(--r-tag); background: var(--sauge); border: 0; color: var(--texte); font-weight: 500; }
  .infos-cles strong { color: var(--texte); }

  /* Cartes blanches sans bordure sur les sections gris-vert */
  .carte, .sortie, .actu, .etapes > li, .faq details, .archives details, .charte li, .telechargement {
    border: 0; border-radius: var(--r-lg); box-shadow: var(--ombre);
  }
  .section:not(.section--alt) .carte,
  .section:not(.section--alt) .faq details,
  .section:not(.section--alt) .archives details,
  .section:not(.section--alt) .charte li { border: 1px solid var(--bordure); box-shadow: none; }

  /* Dates d'agenda : bloc vert tilleul, jour et mois en manuscrit */
  .sortie__date { background: var(--accent); color: var(--texte); border-radius: var(--r-md); }
  .sortie__jour { font-family: var(--police-titre); font-weight: 700; font-size: 2.3rem; }
  .sortie__mois { font-family: var(--police-titre); font-weight: 700; font-size: 1.15rem; text-transform: none; letter-spacing: 0; }
  .badge { border-radius: var(--r-tag); font-weight: 500; }
  .badge--delai { border-color: var(--texte); color: var(--texte); }
  .badge--proche { background: var(--rouge); border-color: var(--rouge); color: #FFFFFF; }
  .actu time { color: var(--primaire); }

  /* Ligne pointillée sous les titres de section */
  .entete-section { border-bottom: 2px dotted var(--primaire); padding-bottom: 1rem; }

  /* Cadres en pointillés (rubrique « Ressources » du site national) */
  .fiche { background: #FFFFFF; border: 2px dashed var(--texte); border-radius: var(--r-lg); }
  .fiche__latin { color: var(--primaire); }
  .faits li { border-radius: var(--r-md); }
  .saison { border-radius: var(--r-lg); }
  .galerie figure { border-radius: var(--r-md); }
  .galerie figcaption {
    border-radius: var(--r-sm); background: rgb(46 65 27 / .85);
    font-family: var(--police-titre); font-size: 1.2rem; font-weight: 700;
  }
  .photo-arrondie { border-radius: var(--r-lg); }
  .carte__icone { border-radius: var(--r-md); }
  .liste-coches li::before { background: var(--sauge); }
  .etapes > li::before {
    background: var(--accent); color: var(--texte); font-family: var(--police-titre); font-size: 1.7rem;
    border-radius: var(--r-md);
  }

  /* Bandeau d'appel : bloc vert sapin « Devenir adhérent ? » */
  .bandeau { border-radius: var(--r-lg); }
  .bandeau h2 { font-size: clamp(2.2rem, 5vw, 2.8rem); }
  .bandeau .bouton { background: #FFFFFF; color: var(--texte); box-shadow: none; }
  .bandeau .bouton:hover { background: var(--sauge); }

  /* Pied de page */
  .pied__titre { color: var(--accent); font-size: 1.6rem; }
  .pied__marque strong { font-size: 1.7rem; }
  .pied__marque img { border-radius: var(--r-md); }
  .haut { background: var(--texte); }

  /* Focus : contour vert sapin + halo tilleul */
  :focus-visible { outline-color: var(--texte); box-shadow: 0 0 0 6px var(--accent); }
  .pied :focus-visible { outline-color: var(--accent); }
}