/* ============================================================
cabinet conseil idiôma — feuille de style du site public
------------------------------------------------------------
Tout ce qui se règle se règle ICI, dans le bloc :root.
Les deux couleurs d'accent (--accent, --accent-soft) sont
surchargées à la volée par le thème saisonnier actif ;
les valeurs ci-dessous servent de repli.
============================================================ */
/* ------------------------------------------------------------
POLICE
Cabin (Google Fonts) est chargée dans le du gabarit.
C'est un substitut libre de Gill Sans, dessiné dans la même
veine humaniste.
POUR REVENIR À GILL SANS :
1. déposer les fichiers .woff2 dans assets/fonts/
2. décommenter le bloc @font-face ci-dessous
3. retirer les trois balises de Google Fonts
dans templates/layout.php
@font-face {
font-family: 'Gill Sans';
src: url('../fonts/GillSans-Regular.woff2') format('woff2');
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Gill Sans';
src: url('../fonts/GillSans-SemiBold.woff2') format('woff2');
font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Gill Sans';
src: url('../fonts/GillSans-SemiBoldItalic.woff2') format('woff2');
font-weight: 600; font-style: italic; font-display: swap;
}
------------------------------------------------------------ */
:root {
/* --- Charte : les deux couleurs officielles --- */
--bleu: #008AB3;
--marine: #29234F;
/* --- Teintes 50 % et 20 % de la charte --- */
--bleu-50: #80C5D9;
--bleu-20: #CCE9F1;
--marine-50: #9491A7;
--marine-20: #D4D3DC;
/* --- Accents (page À propos) — surchargés par les saisons --- */
--accent: #E42F12;
--accent-soft: #FAD5D0;
/* --- Neutres --- */
--blanc: #FFFFFF;
--gris: #F7F7F5;
--gris-trait: #DCDFE4;
--texte: var(--marine);
--texte-doux: #6E6A83;
/* --- Typographie --- */
--police: 'Cabin', 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
/* Échelle relevée au pixel sur grille_web_CC_idioma.pdf (planche 1280 px) :
titres 30,8 px · surtitres 21,4 px · corps 20,8 px · secondaire 19 px
· étiquettes 13 px · navigation 15 px · numéro de service 76 px.
Les clamp() reproduisent ces valeurs à 1280 et montent à peine au-delà. */
--t-xxl: clamp(1.6rem, 2.4vw, 2.1rem); /* titres de héro et de section */
--t-xl: clamp(1.6rem, 2.4vw, 2.1rem);
--t-l: clamp(1.15rem, 1.72vw, 1.42rem); /* sous-titres, questions */
--t-sur: clamp(1.1rem, 1.67vw, 1.4rem); /* surtitres */
--t-m: clamp(1.05rem, 1.62vw, 1.35rem); /* corps */
--t-s: clamp(.98rem, 1.48vw, 1.24rem); /* secondaire */
--t-nav: clamp(.9rem, 1.17vw, 1rem); /* navigation */
--t-xs: clamp(.78rem, 1.02vw, .88rem); /* étiquettes */
/* --- Rythme --- */
--h-entete: 72px;
/* Largeur utile du contenu. C'est LE réglage à toucher si le site
paraît trop étroit ou trop large : min() garde une marge sur les
petits écrans et plafonne sur les très grands.
plus large : min(1760px, 96vw)
maquette : 1180px */
--conteneur: min(1560px, 94vw);
/* Distance entre le bord intérieur du conteneur et le bord de l'écran.
Sert aux images qui doivent aller se coller contre ce bord. */
--bord: calc((100vw - min(1560px, 94vw)) / 2 + var(--gouttiere));
--gouttiere: clamp(1.25rem, 2.5vw, 2.5rem);
--sec-y: clamp(3rem, 6vw, 5.5rem);
--rayon: 2px;
}
/* ============================ Base ============================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* clip, pas hidden : hidden casserait l'entête collante. */
body { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
margin: 0;
font-family: var(--police);
font-size: var(--t-m);
line-height: 1.62;
color: var(--texte);
background: var(--blanc);
-webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--bleu); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 600; line-height: 1.18; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
:focus-visible {
outline: 3px solid var(--bleu);
outline-offset: 3px;
}
.skip {
position: absolute; left: -9999px; top: 0; z-index: 100;
background: var(--marine); color: #fff; padding: .75rem 1.25rem;
}
.skip:focus { left: 0; }
.conteneur {
width: 100%;
max-width: var(--conteneur);
margin-inline: auto;
padding-inline: var(--gouttiere);
}
/* ========================== Entête ============================ */
.entete {
position: sticky; top: 0; z-index: 50;
background: var(--blanc);
border-bottom: 1px solid var(--gris-trait);
}
.entete__inner {
display: flex; align-items: center; justify-content: space-between;
gap: 1.5rem; min-height: var(--h-entete);
padding-block: .55rem;
}
/* Logo calé à gauche, navigation poussée à droite */
.entete__logo { flex: 0 0 auto; margin-right: auto; display: block; }
.entete__logo img { height: clamp(38px, 3.7vw, 50px); width: auto; display: block; }
.nav { margin-left: auto; }
.nav__liste {
display: flex; align-items: center; justify-content: flex-end;
gap: clamp(.9rem, 1.9vw, 2rem);
list-style: none; margin: 0; padding: 0;
}
.nav__lien {
color: var(--marine); font-weight: 600; font-size: var(--t-nav);
padding: .4rem 0; border-bottom: 2px solid transparent;
}
.nav__lien:hover { text-decoration: none; border-bottom-color: var(--bleu-50); }
.nav__lien.est-actif { border-bottom-color: var(--bleu); }
/* ------------------------- Menu déroulant ---------------------- */
.nav__item { position: relative; }
/* Ce bouton ne porte volontairement PAS la classe .nav__lien : les deux
ensemble se disputaient la propriété display, et le