@charset "UTF-8";
/*
Theme Name: Thème CCN Néhémie
Theme URI: https://www.chemin-neuf.fr
Author: Communauté du Chemin Neuf
Author URI: https://www.chemin-neuf.fr
Description: Le thème des sites de la Communauté du Chemin Neuf
Requires at least: 7.0
Tested up to: 7.0
Requires PHP: 8.0
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ccn
*/
/**
 * SETTINGS
 * File-header..........The file header for the themes style.css file.
 * Fonts................Any font files, if the project needs specific fonts.
 * Global...............Project-specific, globally available variables.
 *
 * TOOLS
 * Functions............Global functions.
 * Mixins...............Global mixins.
 *
 * GENERIC
 * Normalize.css........Normalise browser defaults.
 * Breakpoints..........Mixins and variables for responsive styles
 * Vertical-margins.....Vertical spacing for the main components.
 * Reset................Reset specific elements to make them easier to style in other contexts.
 * Clearings............Clearings for the main components.
 *
 * ELEMENTS
 * Blockquote...........Default blockquote.
 * Forms................Element-level form styling.
 * Headings.............H1–H6
 * Links................Default links.
 * Lists................Default lists.
 * Media................Images, Figure, Figcaption, Embed, iFrame, Objects, Video.
 *
 * BLOCKS
 * Audio................Specific styles for the audio block.
 * Code.................Specific styles for the code block.
 * Columns..............Specific styles for the columns block.
 * File.................Specific styles for the file block.
 * Gallery..............Specific styles for the gallery block.
 * Group................Specific styles for the group block.
 * Image................Specific styles for the image block.
 * Latest comments......Specific styles for the latest comments block.
 * Latest posts.........Specific styles for the latest posts block.
 * Legacy...............Specific styles for the legacy gallery.
 * Media text...........Specific styles for the media and text block.
 * Navigation...........Specific styles for the navigation block.
 * Pullquote............Specific styles for the pullquote block.
 * Quote................Specific styles for the quote block.
 * Search...............Specific styles for the search block.
 * Separator............Specific styles for the separator block.
 * Spacer...............Specific styles for the spacer block.
 * Table................Specific styles for the table block.
 * Verse................Specific styles for the verse block.
 * Video................Specific styles for the video block.
 * Utilities............Block alignments.
 *
 * COMPONENTS
 * Header...............Header styles.
 * Footer...............Footer styles.
 * Comments.............Comment styles.
 * Archives.............Archive styles.
 * 404..................404 styles.
 * Search...............Search styles.
 * Navigation...........Navigation styles.
 * Footer Navigation....Footer Navigation styles.
 * Pagination...........Pagination styles.
 * Single...............Single page and post styles.
 * Posts and pages......Misc, sticky post styles.
 * Entry................Entry, author biography.
 * Widget...............Widget styles.
 * Editor...............Editor styles.
 *
 * UTILITIES
 * A11y.................Screen reader text, prefers reduced motion etc.
 * Color Palette........Classes for the color palette colors.
 * Editor Font Sizes....Editor Font Sizes.
 * Measure..............The width of a line of text, in characters.
 */
/* Categories 01 to 03 are the basics. */
/* Variables */
:root {
  /* Colors */
  --global--color-black: #000;
  --global--color-dark-gray: #2e2c2a;
  --global--color-gray: #595959;
  --global--color-light-gray: #f0f0f0;
  --global--color-green: #80d03b;
  --global--color-beige: #eeeadd;
  --global--color-blue: #d1dfe4;
  --global--color-purple: #d1d1e4;
  --global--color-red: #e4d1d1;
  --global--color-orange: #d85d0f;
  --global--color-yellow: #eeeadd;
  --global--color-white: #fff;
  --global--color-white-50: rgba(255, 255, 255, 0.5);
  --global--color-white-90: rgba(255, 255, 255, 0.9);
  --global--color-primary: var(--global--color-dark-gray);
  /* Body text color, site title, footer text color. */
  --global--color-secondary: var(--global--color-gray);
  /* Headings */
  --global--color-primary-hover: var(--global--color-primary);
  --global--color-background: var(--global--color-green);
  /* Mint, default body background */
  --global--color-border: var(--global--color-gray);
  /* Used for borders (separators) */
  --global--color-accent1: var(--global--color-orange);
  --global--color-accent2: var(--global--color-beige);
  /* Spacing */
  --global--spacing-unit: 20px;
  --global--spacing-measure: unset;
  --global--spacing-horizontal: 23px;
  --global--spacing-vertical: 25px;
  --mobile--page-margin: 2rem;
  /* Dimensions */
  --global--page-width: 24cm;
  /* Elevation */
  --global--elevation: 1px 1px 3px 0 rgba(0, 0, 0, 0.2);
  /* Forms */
  --form--color-text: var(--global--color-dark-gray);
  --form--color-ranged: var(--global--color-secondary);
  --form--label-weight: 500;
  --form--border-color: var(--global--color-secondary);
  --form--border-width: 3px;
  --form--border-radius: 0;
  --form--spacing-unit: calc(0.5 * var(--global--spacing-unit));
  /* entry */
  --entry-header--color: var(--global--color-primary);
  --entry-header--color-link: currentColor;
  --entry-header--color-hover: var(--global--color-primary-hover);
  --entry-header--color-focus: var(--global--color-secondary);
  /* Header */
  --branding--color-text: var(--global--color-primary);
  --branding--color-link: var(--global--color-primary);
  --branding--color-link-hover: var(--global--color-secondary);
  --branding--title--text-transform: uppercase;
  --branding--logo--max-width: 300px;
  --branding--logo--max-height: 100px;
  --branding--logo--max-width-mobile: 96px;
  --branding--logo--max-height-mobile: 96px;
  /* Main navigation */
  --main-menu-height: 3.5rem;
  --primary-nav--color-link: var(--global--color-primary);
  --primary-nav--color-link-hover: var(--global--color-primary-hover);
  --primary-nav--color-text: var(--global--color-primary);
  --primary-nav--padding: calc(0.66 * var(--global--spacing-unit));
  --primary-nav--border-color: var(--global--color-primary);
  /* Pagination */
  --pagination--color-text: var(--global--color-primary);
  --pagination--color-link-hover: var(--global--color-primary-hover);
  /* Footer */
  --footer--color-text: var(--global--color-primary);
  --footer--color-link: var(--global--color-primary);
  --footer--color-link-hover: var(--global--color-primary-hover);
  /* Block: Pull quote */
  --pullquote--border-width: 3px;
  --pullquote--border-color: var(--global--color-primary);
  --pullquote--color-foreground: var(--global--color-primary);
  --pullquote--color-background: var(--global--color-background);
  --separator--border-color: var(--global--color-border);
  --separator--height: 1px;
  /* Block: Table */
  --table--stripes-border-color: var(--global--color-light-gray);
  --table--stripes-background-color: var(--global--color-light-gray);
  --table--has-background-text-color: var(--global--color-dark-gray);
  /* Widgets */
  --widget--spacing-menu: calc(0.66 * var(--global--spacing-unit));
  /* Admin-bar height */
  --global--admin-bar--height: 0;
}

.admin-bar {
  --global--admin-bar--height: 32px;
}
@media only screen and (max-width: 782px) {
  .admin-bar {
    --global--admin-bar--height: 46px;
  }
}

html {
  scroll-behavior: smooth;
}