/* =====================================================================
   Charte « Claro » — reprise de l'ancienne sencillo (4.0) dans le système
   TemplateMaker : DOM simple préfixé claro-, grille Bootstrap NATIVE (marqueur
   [BOOTSTRAP] du gabarit-head). La structure interne du contenu est générée par
   la balise {CONTENU}.

   Menus, menu smartphone, pied et modules : socle commun
   (/css/template/_socle/socle.css, chargé avant ce fichier), raccordé aux
   tokens --claro-* en fin de :root.

   PERSONNALISATION : tout passe par les variables :root ci-dessous. Un site
   adapte la charte en surchargeant ces tokens (éditeur « Couleurs de la charte »
   ou CSS perso), sans toucher au reste du fichier.
   Contrastes par défaut conformes RGAA (≥ 4,5:1 pour le texte).
   ===================================================================== */

:root {
	/* — Couleurs de marque — (éditables dans charte.json) */
	--claro-primaire:          #69d3ed;   /* fonds de marque (pied, survol menu, bandeaux de modules) */
	--claro-primaire-fonce:    #1d7a92;   /* texte de marque sur fond clair (liens) */
	--claro-sur-primaire:      #10333d;   /* texte posé sur --claro-primaire */

	/* — Neutres — */
	--claro-texte:             #6f6b6f;
	--claro-titre:             #443f43;
	--claro-fond:              #ffffff;
	--claro-fond-doux:         #f5f5f5;
	--claro-bordure:          #dedede;

	/* — Typographie — */
	--claro-police:            Tahoma, Helvetica, Arial, Verdana, sans-serif;
	--claro-police-titre:      var(--claro-police);
	--claro-taille-texte:      1rem;
	--claro-interligne:        1.5;
	--claro-taille-titre-page: 2rem;
	--claro-graisse-titre:     400;

	/* — Liens — */
	--claro-lien:              var(--claro-primaire-fonce);
	--claro-lien-survol:       var(--claro-titre);
	--claro-lien-deco:         none;

	/* — Mise en page — */
	--claro-largeur:           1200px;    /* largeur max du contenu et du pied */
	--claro-largeur-entete:    98%;       /* largeur de la barre d'en-tête */
	--claro-gouttiere:         1rem;
	--claro-rayon:             0;
	--claro-transition:        .3s ease-out;
	--claro-focus:             2px solid var(--claro-primaire-fonce);

	/* — En-tête — */
	--claro-header-position:   sticky;    /* sticky | fixed (superposé au bandeau) | relative */
	--claro-header-fond:       rgba(255, 255, 255, .9);
	--claro-header-bordure:    1px solid var(--claro-bordure);
	--claro-header-ombre:      0 10px 15px rgba(50, 50, 50, .25);
	--claro-header-marge:      15px;      /* marge verticale de la barre */
	--claro-logo-hauteur:      100px;
	--claro-entete-texte:      var(--claro-texte);
	--claro-entete-fond:       transparent;
	--claro-entete-taille:     1.1rem;

	/* — Menu principal — */
	--claro-menu-texte:          #615d60;
	--claro-menu-taille:         1rem;
	--claro-menu-graisse:        400;
	--claro-menu-casse:          none;    /* none | uppercase */
	--claro-menu-hauteur:        40px;
	--claro-menu-padding:        0 .8rem;
	--claro-menu-espace:         5px;
	--claro-menu-rayon:          var(--claro-rayon);
	--claro-menu-survol-fond:    var(--claro-primaire);
	--claro-menu-survol-texte:   var(--claro-sur-primaire);
	--claro-sousmenu-fond:       var(--claro-primaire);
	--claro-sousmenu-texte:      var(--claro-sur-primaire);
	--claro-sousmenu-survol-fond:  var(--claro-fond);
	--claro-sousmenu-survol-texte: var(--claro-menu-texte);
	--claro-sousmenu-largeur:    220px;

	/* — Menu smartphone (bascule automatique, js/websee.js) — */
	--claro-mobile-cible:          44px;  /* hauteur mini des zones tactiles */
	--claro-mobile-bouton-fond:    var(--claro-primaire);
	--claro-mobile-bouton-texte:   var(--claro-sur-primaire);
	--claro-mobile-fond:           var(--claro-fond);
	--claro-mobile-texte:          var(--claro-menu-texte);
	--claro-mobile-sousmenu-fond:  var(--claro-fond-doux);

	/* — Outils (langues, recherche, réseaux sociaux) — */
	--claro-recherche-bordure:   1px solid var(--claro-primaire-fonce);
	--claro-social-taille:       20px;

	/* — Bandeau — */
	--claro-bandeau-hauteur-max: none;

	/* — Corps — */
	--claro-main-padding:        2rem 0;
	--claro-contenu-largeur:     var(--claro-largeur);    /* none : contenu pleine largeur (wrappers de page) */
	--claro-contenu-gouttiere:   var(--claro-gouttiere);
	--claro-page-titre-couleur:  var(--claro-titre);

	/* — Pied de page — */
	--claro-footer-fond:         var(--claro-primaire);
	--claro-footer-texte:        var(--claro-sur-primaire);
	--claro-footer-lien:         var(--claro-footer-texte);
	--claro-footer-padding:      20px 0;
	--claro-footer-taille:       .85rem;
	--claro-copyright-fond:      var(--claro-footer-fond);
	--claro-copyright-texte:     var(--claro-footer-texte);

	/* — Modules (titres de groupes, liens, sondage, agenda…) — */
	--claro-module-fond:         var(--claro-primaire);
	--claro-module-texte:        var(--claro-sur-primaire);

	/* — Raccordement au socle commun (/css/template/_socle/socle.css) — */
	--socle-primaire:               var(--claro-primaire-fonce);
	--socle-sur-primaire:           var(--claro-sur-primaire);
	--socle-texte:                  var(--claro-texte);
	--socle-fond:                   var(--claro-fond);
	--socle-fond-doux:              var(--claro-fond-doux);
	--socle-bordure:                var(--claro-bordure);
	--socle-rayon:                  var(--claro-rayon);
	--socle-transition:             var(--claro-transition);
	--socle-focus:                  var(--claro-focus);
	--socle-menu-alignement:        center;
	--socle-menu-espace:            var(--claro-menu-espace);
	--socle-menu-texte:             var(--claro-menu-texte);
	--socle-menu-taille:            var(--claro-menu-taille);
	--socle-menu-graisse:           var(--claro-menu-graisse);
	--socle-menu-casse:             var(--claro-menu-casse);
	--socle-menu-hauteur:           var(--claro-menu-hauteur);
	--socle-menu-padding:           var(--claro-menu-padding);
	--socle-menu-rayon:             var(--claro-menu-rayon);
	--socle-menu-survol-fond:       var(--claro-menu-survol-fond);
	--socle-menu-survol-texte:      var(--claro-menu-survol-texte);
	--socle-sousmenu-largeur:       var(--claro-sousmenu-largeur);
	--socle-sousmenu-fond:          var(--claro-sousmenu-fond);
	--socle-sousmenu-bordure:       0;
	--socle-sousmenu-ombre:         var(--claro-header-ombre);
	--socle-sousmenu-texte:         var(--claro-sousmenu-texte);
	--socle-sousmenu-lien-padding:  .5rem .8rem;
	--socle-sousmenu-survol-fond:   var(--claro-sousmenu-survol-fond);
	--socle-sousmenu-survol-texte:  var(--claro-sousmenu-survol-texte);
	--socle-mobile-cible:           var(--claro-mobile-cible);
	--socle-mobile-bouton-fond:     var(--claro-mobile-bouton-fond);
	--socle-mobile-bouton-texte:    var(--claro-mobile-bouton-texte);
	--socle-mobile-fond:            var(--claro-mobile-fond);
	--socle-mobile-texte:           var(--claro-mobile-texte);
	--socle-mobile-graisse:         400;
	--socle-mobile-sousmenu-fond:   var(--claro-mobile-sousmenu-fond);
	--socle-mobile-sousmenu-texte:  var(--claro-mobile-texte);
	--socle-mobile-sousmenu-survol: var(--claro-primaire-fonce);
	--socle-module-fond:            var(--claro-module-fond);
	--socle-module-texte:           var(--claro-module-texte);
	--socle-module-lien:            var(--claro-primaire-fonce);
}

/* ============================== Base ============================== */

body {
	margin: 0;
	font-family: var(--claro-police);
	font-size: var(--claro-taille-texte);
	line-height: var(--claro-interligne);
	color: var(--claro-texte);
	background: var(--claro-fond);
}

a, a:link, a:visited      { color: var(--claro-lien); text-decoration: var(--claro-lien-deco); }
a:hover, a:active         { color: var(--claro-lien-survol); }

h1, h2, h3, h4            { font-family: var(--claro-police-titre); color: var(--claro-titre); font-weight: var(--claro-graisse-titre); }

.claro-container {
	max-width: var(--claro-largeur);
	margin-inline: auto;
	padding-inline: var(--claro-gouttiere);
}

/* ============================== En-tête ============================== */

.claro-header {
	position: var(--claro-header-position);
	top: 0;
	left: 0;
	right: 0;
	z-index: 1030;
	background: var(--claro-header-fond);
	border-bottom: var(--claro-header-bordure);
	box-shadow: var(--claro-header-ombre);
}

.claro-entete              { background: var(--claro-entete-fond); }
.claro-entete .header-text {
	color: var(--claro-entete-texte);
	font-size: var(--claro-entete-taille);
	text-align: center;
	padding: .5rem var(--claro-gouttiere);
}
.claro-entete:empty,
.claro-entete .header-text:empty { display: none; }

.claro-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: var(--claro-largeur-entete);
	margin: var(--claro-header-marge) auto;
}

.claro-logo                { flex: 1 1 0; }
.claro-logo img            { display: block; max-height: var(--claro-logo-hauteur); width: auto; height: auto; max-width: 100%; }
.claro-nav                 { flex: 3 1 0; }
.claro-outils {
	flex: 1 1 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: .75rem;
}

/* Recherche */
.claro-outils .recherche-text {
	border: 0;
	border-bottom: var(--claro-recherche-bordure);
	background: transparent;
	color: var(--claro-texte);
	padding: .25rem .4rem;
}

/* Réseaux sociaux */
.claro-outils .social-networks .socicon,
.claro-outils .social-networks .fa { font-size: var(--claro-social-taille); border-radius: 50%; }

/* Tablette / mobile : barre sur deux lignes, menu pleine largeur */
@media (max-width: 991.98px) {
	.claro-header              { position: relative; }
	.claro-logo                { flex: 1 1 auto; }
	.claro-nav                 { order: 3; flex: 1 1 100%; }
}

@media (max-width: 470px) {
	.claro-bar                 { flex-direction: column; text-align: center; }
	.claro-nav                 { align-self: stretch; }   /* menu smartphone pleine largeur */
	.claro-logo img            { margin-inline: auto; }
	.claro-outils              { justify-content: center; }
}

/* ============================== Bandeau ({BANDEAU}) ============================== */

.claro-bandeau              { position: relative; clear: both; overflow: hidden; }
.claro-bandeau img          { display: block; width: 100%; height: auto; max-height: var(--claro-bandeau-hauteur-max); object-fit: cover; }

/* ============================== Corps de page ============================== */

.claro-main                 { padding: var(--claro-main-padding); }
.claro-main > .claro-container { max-width: var(--claro-contenu-largeur); padding-inline: var(--claro-contenu-gouttiere); }

.claro-page-title .nom-page-text {
	color: var(--claro-page-titre-couleur);
	font-family: var(--claro-police-titre);
	font-size: var(--claro-taille-titre-page);
	font-weight: var(--claro-graisse-titre);
	padding: .5rem 0 1rem;
}

/* ============================== Pied de page ============================== */

.claro-footer {
	clear: both;
	background: var(--claro-footer-fond);
	color: var(--claro-footer-texte);
	padding: var(--claro-footer-padding);
}
.claro-footer a,
.claro-footer a:link,
.claro-footer a:visited     { color: var(--claro-footer-lien); }
.claro-footer .footer-text  { text-align: center; font-size: var(--claro-footer-taille); }

/* Mentions de bas de page (émises par le noyau après le gabarit) */
.copyright                  { background: var(--claro-copyright-fond); color: var(--claro-copyright-texte); }
.copyright a,
.copyright a:link,
.copyright a:visited,
.copyright a:hover          { color: var(--claro-copyright-texte); }

/* ============================== Modules ============================== */

.module-bloc-item-titre     { text-align: center; }