/* ==================================================================== design.css — Académie Clairefontaine (FFF) · site Vackelys Feuille unique, commune à index / sejour / resultatrecherche. Remplace styles-mutu.css. Ne définit JAMAIS la couleur des 13 classes pilotées par style_config.css (forme uniquement). ==================================================================== */ /* ---------- 0. Police FFF Equipe ---------- */ @font-face { font-family: "FFF Equipe"; src: url(fonts/FFF-Equipe-Light.otf) format("opentype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "FFF Equipe"; src: url(fonts/FFF-Equipe-Regular.otf) format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "FFF Equipe"; src: url(fonts/FFF-Equipe-Bold.otf) format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "FFF Equipe"; src: url(fonts/FFF-Equipe-Black.otf) format("opentype"); font-weight: 900; font-style: normal; font-display: swap; } /* ---------- 0 bis. Polices de la charte FFF (livraison skeletons/new_retour) ---------- Les trois familles de titrage de la charte, absentes jusqu'ici du projet : les blocs repris du squelette se rabattaient sur FFF Equipe. EN SERVICE. FFF Hero porte tous les titres, via --font-title (section 1) et la regle h1-h6 (section 2). FFF France et FFF Heritage ne sont appelees QUE par la tuile Immersion du bloc Univers (section 7), qui redefinit --font-title / --font-body sur elle seule : ces deux familles ne sont donc telechargees que sur les pages ou le module Univers est actif avec au moins deux univers configures. /!\ Les sections 10 (tableau des sessions) et 17 (cartes sejour) notent que le titrage FFF France n'y est PAS repris. C'est toujours exact, mais la raison a change : la police est desormais chargee de toute facon, ces deux blocs restent en FFF Hero par choix de rendu, pas par economie. FFF Equipe est aussi livree en .woff dans le meme dossier, plus legere que les .otf ci-dessus ; la bascule n'est pas faite ici, elle changerait le fichier charge sur toutes les pages. */ @font-face { font-family: "FFF Hero"; src: url(fonts/FFF-Hero-Light.woff) format("woff"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "FFF Hero"; src: url(fonts/FFF-Hero-Book.woff) format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "FFF Hero"; src: url(fonts/FFF-Hero-Bold.woff) format("woff"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "FFF Hero"; src: url(fonts/FFF-Hero-Black.woff) format("woff"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: "FFF France"; src: url(fonts/FFFFrance-Regular.woff) format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "FFF France"; src: url(fonts/FFFFrance-Medium.woff) format("woff"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "FFF France"; src: url(fonts/FFFFrance-Bold.woff) format("woff"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "FFF France"; src: url(fonts/FFFFrance-Black.woff) format("woff"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: "FFF Heritage"; src: url(fonts/FFFHeritage-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "FFF Heritage"; src: url(fonts/FFFHeritage-Medium.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "FFF Heritage"; src: url(fonts/FFFHeritage-Black.woff2) format("woff2"); font-weight: 900; font-style: normal; font-display: swap; } /* ---------- 1. Variables ---------- Les 3 teintes de marque (navy / rouge / or) ne sont utilisées QUE sur des éléments non pilotés par le back-office. À retoucher ici si un client change d'identité. */ :root { --fff-navy: #002140; --fff-navy-2: #0a2c4f; --fff-navy-3: #244a70; --fff-red: #e30613; --fff-gold: #c8af73; --fff-green: #1f8d49; --fff-orange: #d97706; --fff-ink: #1f2a37; --fff-text: #3f4650; --fff-muted: #5b6572; --fff-muted-2: #8a929c; --fff-muted-3: #9aa4b0; --fff-hero-text: #d9e2ec; --fff-line: #e4e4e4; --fff-line-2: #eeeeee; --fff-line-3: #dfe4ea; --fff-field: #d7dce2; --fff-bg: #eceef1; --fff-bg-2: #f4f6f8; --fff-white: #ffffff; --fff-font: "FFF Equipe", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --fff-container: 1180px; --fff-gutter: 24px; /* Largeur de la carte du moteur de recherche (Figma : 1084 px dans le conteneur 1180). Variabilisee pour que la section 18 (tres grands ecrans) la fasse suivre le conteneur : les deux regles qui la portent sont `.moteur-bandeau` et `.barre-icone-1 > div` (section 6). */ --fff-moteur: 1084px; --fff-header-h: 88px; --fff-shadow-card: 0 30px 64px 0 rgba(0, 20, 45, 0.34); --fff-shadow-soft: 0 12px 32px rgba(0, 20, 45, 0.16); /* Charte « Equipe de France », reprise du squelette FFF_new_Accueil.html. Employee UNIQUEMENT par la carte Immersion du bloc #stages-im-ex et par la colonne Immersion du bloc #comparer : le reste du site garde navy / rouge / or ci-dessus. */ --fff-edf-blue: #0030b1; --fff-edf-wave: #0a2bb8; --fff-edf-deep: #000563; --fff-edf-gold: #d8b260; --fff-edf-tint: #eef2ff; --fff-edf-tint-2: #e2e9fb; /* Filet des surfaces teintées Immersion (squelette : --tint-edf-line) : --fff-edf-tint-2 ci-dessus est un FOND, trop clair pour un filet. */ --fff-edf-tint-line: #c9d6fa; /* Fond des lignes « Féminin » du tableau des sessions (squelette : #FFF3F5, le rosé qui accompagne le liseré --fff-red). */ --fff-red-tint: #fff3f5; --fff-blue: #003287; /* Bleu ciel de la charte FFF. Ajoute pour la page Clairefontaine (section 13 ter) : numerotation des cartes « la semaine » et triangle plein de la section « la vie du site ». */ --fff-sky: #009fe3; --font-fff-title: 'FFF Hero', 'Oswald', 'Arial Narrow', sans-serif; --font-fff-body: 'FFF Equipe', 'Plus Jakarta Sans', Arial, system-ui, sans-serif; --font-edf-title: 'FFF France', 'FFF Hero', 'Oswald', 'Arial Narrow', sans-serif; --font-edf-body: 'FFF Heritage', 'Plus Jakarta Sans', Arial, system-ui, sans-serif; --font-title: var(--font-fff-title); --font-body: var(--font-fff-body); --fff-footerblue: #002566; } /* ---------- 2. Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--fff-header-h); } body { margin: 0; font-family: var(--font-fff-body); font-size: 13px; line-height: 1.5; color: var(--fff-text); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: var(--fff-navy); text-decoration: none; transition: color .15s ease; } a:hover, a:focus-visible { color: var(--fff-blue); } h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-title); font-weight: 700; line-height: 1; color: var(--fff-navy); text-transform: uppercase; } p { margin: 0 0 12px; } ul { margin: 0; padding: 0; } button, input, select, textarea { font-family: inherit; font-size: inherit; } button { cursor: pointer; } :focus-visible { outline: 2px solid var(--fff-blue); outline-offset: 2px; } /* Utilitaires (doublons volontaires de Bootstrap, sans effet si BS est chargé). /!\ Ne PAS redéclarer `.d-none` ici : chargée après Bootstrap, la copie `display:none !important` bat `.d-lg-block` / `.d-md-block` à spécificité égale et masque l'élément à toutes les tailles (`d-none d-lg-block`…). Bootstrap 5 fournit déjà `.d-none`. */ .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* Annotation maquette : indique l'origine d'un contenu injecté par le site (absent du site réel) */ .fff-src { display: none; padding: 3px 8px; border: 1px dashed var(--fff-muted-3); border-radius: 3px; font: 400 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--fff-muted-2); background: var(--fff-bg-2); } body > .fff-src { margin: 4px 16px; } /* Conteneur */ .fff-container { width: 100%; max-width: calc(var(--fff-container) + 2 * var(--fff-gutter)); margin: 0 auto; padding: 0 var(--fff-gutter); } .fff-section { padding: 48px 0; } .fff-section-head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-start; gap: 12px; flex-wrap: wrap; } .fff-title { font-size: 30px; line-height: 1; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--fff-navy) ; } .fff-kicker { font-size: 11px; font-weight: 700; letter-spacing: 1.32px; text-transform: uppercase; color: var(--fff-muted); } /* Pastille carree des surtitres du squelette (`.dot-fff`, `.eyebrow`), prefixee comme le reste du fichier. Le surtitre qui la porte doit passer en `display: flex` : elle n'est pas un puce de liste, c'est un premier enfant a aligner sur la ligne de texte. */ .fff-dot { display: inline-block; flex-shrink: 0; width: 9px; height: 9px; background: var(--fff-blue); } .fff-lbl { font-size: 13px; font-weight: 700; letter-spacing: 1.56px; text-transform: uppercase; color: var(--fff-muted-2); } /* Echelle de titres du squelette (`FFF_Academie_V16_1_Accueil.html`, `.h-xl` / `.h-lg` / `.h-md` / `.h-sm`), prefixee `fff-` comme le reste du fichier. Ces classes ne portent QUE la taille (et le poids pour les deux plus petites) : elles se cumulent avec `.fff-title`, qui garde la casse, la couleur navy et l'interlettrage. Les tailles sont fluides (`clamp()`), donc valables a toutes les largeurs : un titre qui porte une de ces classes echappe au palier mobile `.fff-title { font-size: 24px }` (section 14), d'ou le `:not()` pose la-bas. Ne pas le retirer. `.fff-h-xl` n'est utilisee par aucun gabarit : le H1 du heros porte deja la meme `clamp()` en dur (`.titre-site-index h1`, section 5). Elle est definie ici pour que l'echelle soit complete. `font-weight: 600` est repris du squelette tel quel ; FFF Hero ne fournit pas ce poids (300/400/700/900), le navigateur retient donc 700 — meme rendu qu'aujourd'hui, valeur conservee par fidelite. */ .fff-h-xl { font-size: clamp(44px, 6.4vw, 88px); } .fff-h-lg { font-size: clamp(34px, 4.4vw, 60px); } .fff-h-md { font-size: clamp(28px, 3vw, 40px); font-weight: 600; } .fff-h-sm { font-size: clamp(22px, 2vw, 26px); font-weight: 600; } /* Couleurs sémantiques historiques */ .text-darkblue { color: var(--fff-navy); } .text-danger, .danger { color: var(--fff-red); } .text-success, .success { color: var(--fff-green); } .upper { text-transform: uppercase; } .cursor-default { cursor: default; } .font-size-13 { font-size: 13px; } .left { float: left; } .right { float: right; } .span-nunito-b { font-weight: 700; } .fixe { position: relative; } /* ---------- 3. Boutons ---------- Couleurs : back-office (.btn-process-cmd-one/two, .bgColorBouton, .btnSearch, .btn-couleur-config …) → on ne fixe que la forme. */ .btn-process-cmd-one, .btn-process-cmd-two, .bgColorBouton, .btn-custom-color-back, .btn-retour-sejour, .btn-couleur-config, .btn-cookies, .fff-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 28px; border: 1px solid transparent; border-radius: 5px; font-family: var(--fff-font); font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0.7px; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease; } .btn-process-cmd-one:hover, .bgColorBouton:hover, .fff-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0, 20, 45, 0.16); } .btn-process-cmd-two { background: transparent; } /* Famille CTA « contour » (cartes séjour) : la FORME est ici, la COULEUR vient du back-office. S'emploie TOUJOURS avec .btn-process-cmd-two, dont style_config.css fixe border-color + color (couleur bouton) en !important : Découvrir Survol : le fond prend currentColor (= couleur bouton) et le texte passe en blanc via -webkit-text-fill-color, propriété que style_config ne verrouille pas. */ .fff-btn-cta::after { content: "→"; } .fff-btn-cta:hover, .fff-btn-cta:focus-visible { background-color: currentColor; -webkit-text-fill-color: var(--fff-white); transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0, 20, 45, 0.16); } .fff-btn { background: var(--fff-blue); color: var(--fff-white); } .fff-btn:hover { color: var(--fff-white); } .fff-btn--outline { background: transparent; border-color: var(--fff-field); color: var(--fff-navy); } .fff-btn--outline:hover { color: var(--fff-navy); } .fff-btn--sm, .btn-cookies, .fff-btn-cta, .index-sejour-card .btn-process-cmd-one, .background-white .btn-process-cmd-one, .background-search .btn-process-cmd-one { min-height: 30px; padding: 8px 16px; border-radius: 3px; font-size: 12px; letter-spacing: 0.6px; } /* ---------- 4. Champs ---------- */ .form-control, .form-select, .selectSearch, .fff-input, select, input[type="text"], input[type="email"], input[type="tel"], input[type="date"], textarea { width: 100%; min-height: 44px; padding: 0 14px; border: 1px solid var(--fff-field); border-radius: 5px; background: var(--fff-white); font-family: var(--fff-font); font-size: 13px; font-weight: 700; color: #33404d; appearance: none; -webkit-appearance: none; } textarea { padding: 12px 14px; min-height: 120px; } select, .form-select, .selectSearch { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239aa4b0'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 30px; } input::placeholder { color: var(--fff-muted-3); font-weight: 400; } label { font-size: 11px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--fff-muted-2); } input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; min-height: 0; margin: 0 8px 0 0; vertical-align: middle; accent-color: var(--fff-blue); } /* ==================================================================== 5. LAYOUT — EN-TÊTE (identique sur les 3 pages) Règle 3 : aucun
ajouté dans le menu. Tout est fait en CSS. ==================================================================== */ /* /!\ NE PAS poser de `z-index` ici, ni sur `.header` : cela creerait un contexte d'empilement qui enfermerait la barre de navigation FIXE avec le heros. Les blocs qui mordent sur le bas du heros en marge negative passeraient alors DERRIERE la photo : le moteur de recherche (`#searchForm`, -64 px, z-index 6) et les canaux de contact (`.fff-contact-canaux`, -46 px, z-index 3) disparaissent. L'empilement de l'en-tete se regle sur son enfant `.navbar-default` (100), pas sur ses conteneurs. */ .fff-header { position: relative; } /* .header : barre de navigation seule, hauteur reduite au contenu. Tout l'habillage du heros (image de fond du back-office, hauteur pleine, voile sombre) est porte par `.header-image`, posee par layout-header.html.twig quand `showHero` est vrai. */ .header { /* PAS d'`isolation: isolate` : elle enfermait le z-index de la barre fixe et du logo dans l'en-tete (cf. `.fff-header` ci-dessus). Le voile du heros est donc en z-index 0 et non -1, cf. `.header-image::before`. */ position: relative; min-height: var(--fff-header-h); padding-top: var(--fff-header-h); background-color: var(--fff-white); } /* /!\ LE `!important` EST OBLIGATOIRE — ne pas le retirer. La banniere de l'enseigne (`assets/template/config/style_config.css`, genere par TemplateController) et l'image de couverture de la recherche (layout-head-assets.html.twig, section 7) posent toutes deux leur background-image sur `.header` lui-meme, en `!important`. style_config.css est partage avec les autres templates (edv, Skeleton, Default) : impossible de le retarger sur `.header-image`. Sans heros, la banniere doit donc etre neutralisee ici. */ .header:not(.header-image) { background-image: none !important; } /* Habillage du heros : image de fond, hauteur pleine, voile sombre. Gabarit : squelette `FFF_Academie_V16_1_Accueil.html`, bloc `.hero.hero--sky`. /!\ La hauteur est une `clamp()` : elle remplace les trois paliers de `min-height` que portaient les media queries (788 / 640 / 560 px). Ne pas remettre de `min-height` fixe dans une media query, elle gagnerait sur la clamp et figerait la hauteur. `+ var(--fff-header-h)` : dans le squelette, le heros est un bloc SEPARE, pose sous une barre de navigation qui ne lui prend pas de hauteur. Ici, `.header-image` contient AUSSI la barre (88 px de `padding-top`). Sans ce `calc`, la photo visible serait plus courte de 88 px que dans le squelette. */ .header-image { min-height: calc(clamp(540px, 66vh, 680px) + var(--fff-header-h)); display: flex; flex-direction: column; justify-content: center; background-color: var(--fff-navy); background-size: cover; background-position: 50% 60%; background-repeat: no-repeat; } /* Voile du heros : DEUX degrades superposes (squelette `.hero::before` + `.hero--sky::before`). L'horizontal porte la lisibilite du texte, cale a gauche ; le vertical assombrit le bas, sous lequel le moteur de recherche vient mordre. Un seul degre vertical ne suffit pas : le titre passe sur la partie claire de la photo. `top: var(--fff-header-h)` (et non `0` comme dans le squelette) : ici la barre de navigation est opaque et posee DANS `.header`, il n'y a rien a assombrir derriere elle. */ .header-image::before { content: ""; position: absolute; left: 0; right: 0; top: var(--fff-header-h); bottom: 0; background: linear-gradient(90deg, rgba(0, 22, 70, 0.88) 0%, rgba(0, 22, 70, 0.55) 48%, rgba(0, 22, 70, 0.08) 100%), linear-gradient(0deg, rgba(0, 22, 70, 0.75) 0%, rgba(0, 22, 70, 0) 55%); /* `0` et non `-1` : sans `isolation` sur `.header`, un z-index negatif passerait DERRIERE la photo de fond (peinte par `.header` lui-meme) et le voile serait invisible. A 0, il couvre la photo et reste sous les enfants de `.header`, qui sont tous en z-index >= 1 (regle suivante). */ pointer-events: none; z-index: 0; } /* S'applique AUSSI a `.fff-hero-body` : son contenu (titre SEO, slogan) doit passer devant le voile. La regle qui le repassait en `position: static` n'a plus lieu d'etre — elle servait a ce que le logo `absolute` se cale sur `.header` et non sur le corps du heros ; le logo est `fixed` desormais. */ .header > * { position: relative; z-index: 1; } /* Artefact de la maquette statique : un
  • rendu hors du