/* =============================================================================
   Vikings de Rouen — Charte graphique
   =============================================================================

   Deux couleurs de marque : le bleu roi et le blanc. C'est tout.
   L'or que l'on croit voir sur la page d'accueil est la lumière d'une photo,
   pas une couleur de club — il ne se déclare donc pas ici.

   Une seule source de vérité. Le thème, Elementor et le plugin Boutique
   consomment ces variables. Pour changer une couleur du site, on change une
   ligne ici, pas quinze réglages dispersés.

   Ce fichier ne contient aucun !important. S'il faut en écrire un, c'est que le
   problème est ailleurs : un widget Elementor qui porte une couleur en dur.

   Sommaire
     1. Tokens          — les valeurs. C'est la seule partie à éditer.
     2. Typographie     — échelle appliquée au site.
     3. Contrôles       — champs, boutons, focus.
     4. Section libre   — retouches ponctuelles.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
	/* Bleus, relevés sur le bandeau et le logo */
	--vikings-primary: #1d5bc4;
	--vikings-primary-hover: #17499e;
	--vikings-navy: #0d2a5c;
	--vikings-abyss: #071a3c;

	/* Neutres. Le blanc est une couleur de club à part entière :
	   il porte le bleu, il n'est pas un fond par défaut. */
	--vikings-white: #ffffff;
	--vikings-ink: #14202c;
	--vikings-muted: #6b7783;
	--vikings-line: #dfe4ea;
	--vikings-surface: #f4f7fb;

	/* Rôles fonctionnels. Jamais dans le parcours nominal : uniquement les
	   états et les alertes. Ce ne sont pas des couleurs de marque, et c'est
	   pour ça qu'elles ne ressemblent à rien du club. */
	--vikings-danger: #c0392b;
	--vikings-danger-surface: #fdeeef;
	--vikings-danger-line: #f0c2c6;

	--vikings-warning: #b45309;
	--vikings-warning-surface: #fdf6e7;
	--vikings-warning-line: #ecd6a4;

	--vikings-success: #2e7d4f;
	--vikings-success-surface: #eef7f0;
	--vikings-success-line: #b7ddc4;

	/* Typographie. Le site utilise déjà une grotesque géométrique :
	   on hérite de la police, on reprend la main sur l'échelle. */
	--vikings-font-sans: inherit;
	--vikings-font-display: inherit;

	--vikings-text-xs: 12px;
	--vikings-text-sm: 13px;
	--vikings-text-base: 16px;
	--vikings-text-lg: 19px;
	--vikings-text-xl: 23px;
	--vikings-text-2xl: 27px;
	--vikings-text-3xl: 34px;
	--vikings-text-4xl: 42px;

	--vikings-leading-tight: 1.2;
	--vikings-leading-normal: 1.55;

	/* Géométrie */
	--vikings-radius: 3px;
	--vikings-radius-lg: 6px;
	--vikings-control-height: 42px;
	--vikings-control-pad: 9px 12px;

	/* Rythme vertical */
	--vikings-space-1: 4px;
	--vikings-space-2: 8px;
	--vikings-space-3: 16px;
	--vikings-space-4: 24px;
	--vikings-space-5: 32px;
	--vikings-space-6: 48px;
}

/* -----------------------------------------------------------------------------
   2. Typographie
   Elementor pose ses propres tailles sur h1…h6 via les Réglages du site.
   Ces règles ne servent que de filet : elles rattrapent les titres écrits
   à la main dans un widget Éditeur de texte ou un bloc Gutenberg.
   -------------------------------------------------------------------------- */

body {
	color: var(--vikings-ink);
	line-height: var(--vikings-leading-normal);
}

.entry-content h1,
.entry-content h2,
.entry-content h3 { line-height: var(--vikings-leading-tight); }

.entry-content h1 { font-size: var(--vikings-text-3xl); }
.entry-content h2 { font-size: var(--vikings-text-2xl); }
.entry-content h3 { font-size: var(--vikings-text-xl); }
.entry-content h4 { font-size: var(--vikings-text-lg); }

a { color: var(--vikings-primary); }

/* -----------------------------------------------------------------------------
   3. Contrôles

   Le problème n'est pas la couleur : c'est que chaque plugin, chaque widget
   et chaque bloc dessine ses champs à sa façon. Une seule grammaire ici.
   -------------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
	-webkit-appearance: none;
	appearance: none;
	font-family: var(--vikings-font-sans);
	font-size: var(--vikings-text-base);
	line-height: 1.3;
	padding: var(--vikings-control-pad);
	border: 1px solid var(--vikings-line);
	border-radius: var(--vikings-radius);
	background-color: var(--vikings-white);
	color: var(--vikings-ink);
	box-shadow: none;
}

select {
	padding-right: 30px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b7783' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 11px center;
	background-size: 11px;
}

input[type="checkbox"],
input[type="radio"] { accent-color: var(--vikings-primary); }

/* input[type=submit] est le grand oublié des feuilles de style : ni un input
   de saisie, ni un <button>. C'est lui que produit wp_login_form(), et c'est
   par là que le liseré rouge du thème s'invitait. */
input[type="submit"],
input[type="reset"],
input[type="button"] {
	-webkit-appearance: none;
	appearance: none;
	width: auto;
	border: 1px solid var(--vikings-primary);
	border-radius: var(--vikings-radius);
	background-color: var(--vikings-primary);
	color: var(--vikings-white);
	font-weight: 600;
	line-height: 1.2;
	padding: 11px 18px;
	box-shadow: none;
	cursor: pointer;
}
input[type="submit"]:hover { background-color: var(--vikings-primary-hover); border-color: var(--vikings-primary-hover); }
input[type="submit"]:focus { outline: none; box-shadow: none; }

input:focus,
select:focus,
textarea:focus {
	border-color: var(--vikings-primary);
	outline: none;
	box-shadow: none;
}

/* Un anneau de focus au clavier, invisible à la souris. Accessibilité minimale. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.elementor-button:focus-visible {
	outline: 2px solid var(--vikings-primary);
	outline-offset: 2px;
}

/* Boutons Elementor. La classe .elementor-button couvre widgets et formulaires. */
.elementor-button {
	border-radius: var(--vikings-radius);
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	transition: background-color .15s, color .15s, border-color .15s;
}

/* -----------------------------------------------------------------------------
   4. Section libre

   Les retouches que les Réglages du site d'Elementor ne couvrent pas.
   Une règle, un commentaire expliquant pourquoi elle existe.
   -------------------------------------------------------------------------- */