/* Theme Name: Kris Laudato Theme URI: https://krislaudato.com Author: Kris Laudato Description: Thème code-pur pour krislaudato.com — v2 « abricot et nuit » : stages et voyages photo comparés, formulaire d'orientation en cartes. Version: 2.0.0 Requires at least: 6.0 Requires PHP: 7.4 Text Domain: krislaudato */ /* ========================================================================== 0. JETONS — DA v2 (24/09/2026). Mode clair uniquement : fonds et encres posés explicitement. ⛔ Jamais de blanc sur abricot (2,24:1) : sur abricot, tout est nuit. Contrastes : nuit/abricot 6,46 · encre/blanc 15,3 · cuivre/blanc 5,4 · cuivre/givre 4,83 · gris/blanc 6,1 · gris/givre 5,45 · nuit/sable 11,9 · blanc/nuit 14,5 · abricot/nuit 6,46. ========================================================================== */ @font-face{ font-family: 'Baloo 2'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/Baloo2-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family: 'Baloo 2'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/Baloo2-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family: 'Mukta'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Mukta-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family: 'Mukta'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Mukta-400-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+A720-A7FF; } @font-face{ font-family: 'Mukta'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Mukta-500.woff2') format('woff2'); } @font-face{ font-family: 'Mukta'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/Mukta-700.woff2') format('woff2'); } :root{ color-scheme: light; --abricot: #F7963F; --abricot-1: #D8843A; --abricot-2: #E38C3D; --abricot-3: #EE913E; --nuit: #1C2A3F; --nuit-2: #26374F; --givre: #EAF3F8; --blanc: #FFFFFF; --encre: #23252B; --cuivre: #A9510D; --sable: #FAE6CF; --gris: #5A6272; --dispo: #2E7A4F; --erreur: #B3261E; --bord: #D6E4EC; --titre: 'Baloo 2', 'Trebuchet MS', 'Segoe UI', sans-serif; --texte: 'Mukta', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --r-s: 6px; --r-m: 10px; --r-l: 16px; --r-xl: 20px; --ombre-carte: 0 6px 18px rgba(28,42,63,.10); --ombre-form: 0 12px 36px rgba(28,42,63,.18); --haut-header: 88px; --gouttiere: 40px; --pad: clamp(20px, 5.5vw, 80px); --transition: 180ms ease-out; /* passerelles pour le composant « sources » du mu-plugin (sbsrc) */ --rayon: 10px; --surf: var(--givre); --filet: #C9DCE7; --doux: var(--gris); } /* ========================================================================== 1. BASE ========================================================================== */ *, *::before, *::after{ box-sizing: border-box; } html{ background: var(--blanc); color: var(--encre); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 100px; overflow-x: clip; } html.kl-sans-defilement{ overflow: hidden; } body{ margin: 0; background: var(--blanc); color: var(--encre); font-family: var(--texte); font-size: 18px; line-height: 1.72; overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video{ max-width: 100%; height: auto; } img{ display: block; } a{ color: var(--cuivre); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover{ color: var(--nuit); } button, input, select, textarea{ font: inherit; color: inherit; } button{ cursor: pointer; } h1, h2, h3, h4{ font-family: var(--titre); font-weight: 800; color: var(--nuit); margin: 0 0 .5em; line-height: 1.15; letter-spacing: -.005em; } h1{ font-size: 48px; line-height: 1.12; } h2{ font-size: 36px; } h3{ font-size: 24px; } p{ margin: 0 0 1em; } :focus-visible{ outline: 3px solid var(--nuit); outline-offset: 2px; border-radius: 4px; } .kl-ico{ width: 1em; height: 1em; flex: 0 0 auto; } .kl-visually-hidden{ position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .kl-skip{ position: absolute; left: -999px; top: 0; z-index: 1000; background: var(--nuit); color: var(--blanc); padding: 12px 18px; border-radius: var(--r-m); font-weight: 700; } .kl-skip:focus{ left: 16px; top: 16px; color: var(--blanc); } .kl-container{ width: 100%; max-width: calc(1280px + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); } .kl-centre{ text-align: center; } .kl-cuivre{ color: var(--cuivre); } .kl-abricot{ color: var(--abricot); } main{ display: block; } /* ========================================================================== 2. BOUTONS, SUR-TITRES, TITRES DE SECTION ========================================================================== */ .kl-bouton{ display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 14px 30px; border-radius: var(--r-m); border: 2px solid transparent; font-family: var(--titre); font-weight: 800; font-size: 16px; line-height: 1; letter-spacing: .02em; text-transform: uppercase; text-decoration: none; transition: background var(--transition), color var(--transition), transform var(--transition), border-color var(--transition); } .kl-bouton .kl-ico{ width: 18px; height: 18px; transition: transform var(--transition); } .kl-bouton:hover .kl-ico{ transform: translateX(3px); } .kl-bouton--nuit{ background: var(--nuit); color: var(--blanc); } .kl-bouton--nuit:hover{ background: var(--nuit-2); color: var(--blanc); } .kl-bouton--abricot{ background: var(--abricot); color: var(--nuit); } .kl-bouton--abricot:hover{ background: var(--abricot-3); color: var(--nuit); } .kl-bouton--blanc{ background: var(--blanc); color: var(--nuit); } .kl-bouton--blanc:hover{ background: var(--nuit); color: var(--blanc); } .kl-bouton--plein{ width: 100%; } .kl-lien-fort{ display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--cuivre); text-decoration: none; } .kl-lien-fort .kl-ico{ width: 18px; height: 18px; transition: transform var(--transition); } .kl-lien-fort:hover{ color: var(--nuit); } .kl-lien-fort:hover .kl-ico{ transform: translateX(3px); } .kl-surtitre{ display: inline-block; margin: 0 0 10px; font-family: var(--texte); font-weight: 700; font-size: 13px; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; color: var(--cuivre); } .kl-surtitre--abricot{ color: var(--abricot); } /* Détail mineur (jugement passe 2, page projet mobile) : le fil d'Ariane n'a pas de marge basse propre — sans cette règle le sur-titre qui le suit est collé à 0 px, quel que soit l'écran. */ .kl-fil-ariane + .kl-surtitre{ margin-top: 12px; } .kl-titre-section{ font-size: 44px; line-height: 1.14; margin-bottom: 16px; } .kl-titre-section--clair{ color: var(--blanc); } .kl-intro-section{ max-width: 720px; margin: 0 auto 40px; color: var(--encre); font-size: 18px; } .kl-titre-bicolore{ font-size: 44px; line-height: 1.08; margin: 0; } .kl-titre-bicolore span{ display: block; } .kl-titre-bicolore__2{ color: var(--cuivre); } .kl-tuile-picto{ display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; flex: 0 0 56px; border-radius: var(--r-m); background: var(--abricot); color: var(--nuit); } .kl-tuile-picto .kl-ico{ width: 30px; height: 30px; } .kl-tuile-picto--grand{ width: 64px; height: 64px; flex-basis: 64px; background: var(--nuit); color: var(--abricot); } .kl-tuile-picto--grand .kl-ico{ width: 34px; height: 34px; } .kl-tuile-picto--petit{ width: 36px; height: 36px; flex-basis: 36px; border-radius: 8px; } .kl-tuile-picto--petit .kl-ico{ width: 20px; height: 20px; } .kl-pans{ position: absolute; pointer-events: none; z-index: 0; width: 260px; height: 180px; } .kl-pans--haut-droit{ top: 0; right: 0; } .kl-pans--bas-gauche{ bottom: 0; left: 0; transform: rotate(180deg); } .kl-pans--haut-gauche{ top: 0; left: 0; transform: scaleX(-1); } .kl-pans--haut-gauche polygon:nth-child(1){ fill: var(--abricot-1); } .kl-pans--haut-gauche polygon:nth-child(2){ fill: var(--abricot-2); opacity: .7; } .kl-pans--haut-gauche polygon:nth-child(3){ fill: var(--abricot-3); opacity: .45; } .kl-bande--nuit .kl-pans polygon:nth-child(1){ fill: var(--abricot-1); opacity: .9; } .kl-bande--nuit .kl-pans polygon:nth-child(2){ fill: var(--abricot); opacity: .55; } .kl-bande--nuit .kl-pans polygon:nth-child(3){ fill: var(--blanc); opacity: .08; } /* ========================================================================== 3. HEADER — posé sur l'abricot, collant ========================================================================== */ .kl-header{ position: sticky; top: 0; z-index: 500; background: var(--abricot); color: var(--nuit); transition: box-shadow var(--transition); } .kl-header.is-reduit{ box-shadow: 0 1px 0 rgba(28,42,63,.12), 0 6px 18px rgba(28,42,63,.08); } .kl-header__inner{ display: flex; align-items: center; gap: 28px; height: var(--haut-header); transition: height var(--transition); } .kl-header.is-reduit .kl-header__inner{ height: 64px; } .kl-logo{ display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--nuit); flex: 0 0 auto; } .kl-logo:hover{ color: var(--nuit); } .kl-logo__symbole{ width: 48px; height: 48px; flex: 0 0 48px; transition: width var(--transition), height var(--transition); } .kl-header.is-reduit .kl-logo__symbole{ width: 40px; height: 40px; } .kl-logo__texte{ display: flex; flex-direction: column; line-height: 1; } .kl-logo__nom{ font-family: var(--titre); font-weight: 800; font-size: 26px; line-height: 1; letter-spacing: -.01em; white-space: nowrap; } .kl-logo__mention{ font-family: var(--texte); font-weight: 700; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; margin-top: 5px; white-space: nowrap; } .kl-nav{ flex: 1 1 auto; display: flex; justify-content: center; } .kl-nav__liste{ display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; } .kl-nav__lien{ position: relative; display: inline-block; padding: 8px 0; font-family: var(--titre); font-weight: 700; font-size: 19px; line-height: 1.2; color: var(--nuit); text-decoration: none; white-space: nowrap; } .kl-nav__lien::after{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px; background: var(--nuit); transform: scaleX(0); transform-origin: left; transition: transform var(--transition); } .kl-nav__lien:hover{ color: var(--nuit); } .kl-nav__lien:hover::after, .kl-nav__item.is-actif .kl-nav__lien::after{ transform: scaleX(1); } .kl-nav__item--fort .kl-nav__lien::after{ height: 4px; background: var(--blanc); transform: scaleX(1); } .kl-nav__item--fort.is-actif .kl-nav__lien::after{ background: var(--nuit); } .kl-header__actions{ display: flex; align-items: center; gap: 12px; flex: 0 0 auto; } .kl-loupe, .kl-burger{ display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-m); border: 2px solid var(--nuit); background: transparent; color: var(--nuit); transition: background var(--transition), color var(--transition); } .kl-loupe .kl-ico, .kl-burger .kl-ico{ width: 22px; height: 22px; } .kl-loupe:hover, .kl-burger:hover, .kl-loupe[aria-expanded="true"]{ background: var(--nuit); color: var(--blanc); } .kl-burger{ display: none; } .kl-header__cta{ display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 14px 24px; border-radius: var(--r-m); background: var(--blanc); color: var(--nuit); font-family: var(--titre); font-weight: 800; font-size: 16px; line-height: 1; letter-spacing: .02em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background var(--transition), color var(--transition); } .kl-header__cta .kl-ico{ width: 18px; height: 18px; } .kl-header__cta:hover{ background: var(--nuit); color: var(--blanc); } .kl-header__cta-court{ display: none; } .kl-reglette{ height: 4px; background: rgba(28,42,63,.12); } .kl-reglette__jauge{ height: 100%; width: 0; background: var(--nuit); } .kl-recherche-sur{ background: var(--abricot); border-top: 1px solid rgba(28,42,63,.14); padding: 16px 0 20px; } .kl-recherche-sur[hidden]{ display: none; } .kl-recherche{ position: relative; display: flex; max-width: 640px; margin-inline: auto; } .kl-recherche input[type="search"]{ width: 100%; min-height: 52px; padding: 12px 56px 12px 18px; border: 2px solid var(--nuit); border-radius: var(--r-m); background: var(--blanc); color: var(--encre); font-size: 17px; } .kl-recherche__bouton{ position: absolute; right: 4px; top: 4px; bottom: 4px; width: 46px; border: 0; border-radius: 8px; background: var(--nuit); color: var(--blanc); display: inline-flex; align-items: center; justify-content: center; } .kl-recherche__bouton .kl-ico{ width: 20px; height: 20px; } /* Tiroir mobile */ .kl-menu-mobile{ position: fixed; inset: 0 0 0 auto; width: min(100%, 420px); z-index: 700; background: var(--nuit); color: var(--blanc); padding: 16px 24px 32px; overflow-y: auto; transform: translateX(100%); transition: transform 220ms ease-out; display: flex; flex-direction: column; gap: 8px; } .kl-menu-mobile[hidden]{ display: none; } .kl-menu-mobile.is-ouvert{ transform: none; } .kl-menu-mobile__haut{ display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin-bottom: 16px; } .kl-logo--clair, .kl-logo--clair:hover{ color: var(--blanc); } .kl-logo--clair .kl-logo__symbole{ width: 40px; height: 40px; } .kl-logo--clair .kl-logo__nom{ font-size: 22px; } .kl-menu-mobile__fermer{ width: 44px; height: 44px; border-radius: var(--r-m); border: 2px solid rgba(255,255,255,.5); background: transparent; color: var(--blanc); display: inline-flex; align-items: center; justify-content: center; } .kl-menu-mobile__fermer .kl-ico{ width: 22px; height: 22px; } .kl-menu-mobile__liste, .kl-menu-mobile__rubriques{ list-style: none; margin: 0; padding: 0; } .kl-menu-mobile__liste a{ display: block; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-family: var(--titre); font-weight: 800; font-size: 22px; line-height: 1.2; color: var(--blanc); text-decoration: none; } .kl-menu-mobile__liste a[aria-current]{ color: var(--abricot); } .kl-menu-mobile__sous-titre{ margin: 18px 0 4px; font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--abricot); } .kl-menu-mobile__rubriques a{ display: flex; align-items: center; gap: 12px; padding: 10px 0; color: var(--blanc); text-decoration: none; font-weight: 500; font-size: 18px; } .kl-menu-mobile__rubriques .kl-ico{ width: 22px; height: 22px; color: var(--abricot); } .kl-menu-mobile__recherche{ margin: 16px 0; } .kl-menu-mobile__recherche input[type="search"]{ border-color: var(--blanc); } .kl-menu-mobile__cta{ margin-top: auto; } .kl-menu-mobile__fond{ position: fixed; inset: 0; z-index: 650; background: rgba(28,42,63,.55); opacity: 0; pointer-events: none; transition: opacity 220ms ease-out; } .kl-menu-mobile__fond.is-ouvert{ opacity: 1; pointer-events: auto; } /* ========================================================================== 4. BANDES (fonds alternés) et BANDEAUX abricot ========================================================================== */ .kl-bande{ position: relative; padding-block: 80px; overflow: hidden; } .kl-bande > .kl-container{ position: relative; z-index: 1; } .kl-bande--compacte{ padding-block: 56px; } .kl-bande--serree{ padding-block: 48px; } .kl-bande--blanc{ background: var(--blanc); color: var(--encre); } .kl-bande--givre, .kl-bande--givre-doux{ background: var(--givre); color: var(--encre); } .kl-bande--nuit{ background: var(--nuit); color: var(--blanc); } .kl-bande--nuit p{ color: rgba(255,255,255,.88); } .kl-bande--remonte{ padding-top: 0; overflow: visible; } .kl-bande--lecture{ padding-block: 64px; } .kl-bandeau{ position: relative; overflow: hidden; background: var(--abricot); color: var(--nuit); padding: 28px 0 56px; } .kl-bandeau > .kl-container{ position: relative; z-index: 1; } .kl-bandeau h1{ font-size: 48px; line-height: 1.12; color: var(--nuit); margin: 8px 0 12px; } .kl-bandeau__chapo{ font-weight: 500; font-size: 19px; line-height: 1.6; color: var(--nuit); max-width: 760px; margin: 0; } .kl-bandeau__maj, .kl-bandeau__role, .kl-bandeau__compte{ margin: 10px 0 0; font-weight: 700; font-size: 15px; color: var(--nuit); } .kl-bandeau__centre{ display: flex; flex-direction: column; align-items: center; text-align: center; } .kl-bandeau__centre .kl-fil-ariane{ justify-content: center; margin-bottom: 16px; } .kl-bandeau__centre .kl-bandeau__chapo{ margin-inline: auto; max-width: 680px; } .kl-bandeau__centre h1{ margin-top: 14px; } .kl-bandeau--chevauche{ padding-bottom: 128px; } .kl-bandeau--court{ padding-bottom: 48px; } .kl-bandeau__gauche .kl-bandeau__chapo{ max-width: 720px; } .kl-bandeau__recherche{ max-width: 560px; margin-top: 16px; } .kl-bandeau__recherche .kl-recherche{ margin: 0; } .kl-bandeau__auteur{ display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center; } .kl-rond-photo{ width: 200px; height: 200px; border-radius: 50%; object-fit: cover; border: 8px solid var(--nuit); background: var(--nuit); } .kl-fil-ariane{ display: flex; flex-wrap: wrap; gap: 4px 8px; font-weight: 500; font-size: 14px; line-height: 1.4; color: var(--nuit); } .kl-fil-ariane a{ color: var(--nuit); text-decoration: underline; text-decoration-thickness: 1px; } .kl-fil-ariane a:hover{ text-decoration-thickness: 2px; color: var(--nuit); } .kl-fil-ariane > span:last-child{ max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kl-pastilles{ display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; } .kl-pastilles__item{ display: inline-flex; align-items: center; min-height: 44px; padding: 10px 20px; border-radius: var(--r-m); border: 2px solid var(--nuit); color: var(--nuit); font-family: var(--titre); font-weight: 700; font-size: 15px; line-height: 1; text-decoration: none; transition: background var(--transition), color var(--transition); } .kl-pastilles__item:hover{ background: rgba(28,42,63,.1); color: var(--nuit); } .kl-pastilles__item.is-actif{ background: var(--nuit); color: var(--blanc); } .kl-pastille{ display: inline-block; margin: 14px 0 6px; padding: 5px 10px; border-radius: var(--r-s); background: var(--nuit); color: var(--blanc); font-weight: 700; font-size: 12px; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; } .kl-pastille:hover{ color: var(--abricot); } /* ========================================================================== 5. ACCUEIL ========================================================================== */ /* B1 hero */ .kl-hero{ position: relative; overflow: hidden; background: var(--abricot); color: var(--nuit); } .kl-hero .kl-pans{ top: auto; bottom: 0; right: 0; width: 320px; height: 220px; transform: rotate(180deg) scaleX(-1); } .kl-hero__grille{ position: relative; z-index: 1; display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: var(--gouttiere); align-items: end; min-height: 700px; } .kl-hero__portrait{ position: relative; align-self: end; height: 100%; min-height: 640px; display: flex; align-items: flex-end; justify-content: center; } .kl-hero__soleil{ position: absolute; left: 50%; bottom: 150px; width: 420px; height: 420px; margin-left: -210px; border-radius: 50%; background: var(--abricot-2); box-shadow: inset 0 0 0 26px rgba(255,255,255,.12); } .kl-hero__photo{ position: relative; z-index: 1; width: auto; max-width: 128%; height: min(660px, 100%); max-height: 660px; object-fit: contain; object-position: bottom center; } /* Retour Mathias 24/09 : l'étiquette empiétait sur le visage (top:38%). Ancrée par le BAS (bottom), elle suit le pied de la photo (object-position:bottom) quelle que soit la hauteur réelle du bloc hero, et se pose à hauteur du buste, jamais sur la tête. */ .kl-hero__etiquette{ position: absolute; z-index: 2; left: -8px; top: auto; bottom: 230px; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: var(--r-m); background: var(--blanc); color: var(--nuit); box-shadow: var(--ombre-carte); text-decoration: none; font-size: 14px; line-height: 1.3; } .kl-hero__etiquette strong{ font-family: var(--titre); font-weight: 800; font-size: 16px; } .kl-hero__etiquette span{ color: var(--gris); font-weight: 500; } .kl-hero__etiquette:hover{ color: var(--nuit); box-shadow: var(--ombre-form); } .kl-hero__contenu{ display: flex; flex-direction: column; align-items: flex-start; padding: 40px 0 48px; } .kl-hero .kl-surtitre{ color: var(--nuit); margin-bottom: 8px; } .kl-hero h1{ font-size: 50px; line-height: 1.12; margin: 0 0 14px; max-width: 18em; } .kl-hero__chapo{ font-weight: 500; font-size: 20px; line-height: 1.6; color: var(--nuit); max-width: 40em; margin: 0 0 16px; } .kl-hero__preuves{ display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; margin: 0 0 22px; padding: 0; } .kl-hero__preuves li{ display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--nuit); } .kl-hero__preuves .kl-ico{ width: 20px; height: 20px; } .kl-hero__form{ width: 100%; } .kl-hero__signature{ display: none; } /* B2 chiffres */ .kl-chiffres{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; text-align: center; } .kl-chiffres--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .kl-chiffres--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .kl-chiffres__tuile{ display: flex; flex-direction: column; align-items: center; gap: 4px; } .kl-chiffres__ico{ width: 40px; height: 40px; color: var(--nuit); margin-bottom: 4px; } .kl-chiffres__nombre{ font-family: var(--titre); font-weight: 800; font-size: 44px; line-height: 1; color: var(--nuit); font-variant-numeric: tabular-nums; } .kl-chiffres__phrase{ max-width: 24ch; font-weight: 500; font-size: 15px; line-height: 1.45; color: var(--encre); } /* B3 « Vous voulez… » */ .kl-voulez__grille{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 28px; } .kl-voulez__tuile{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; aspect-ratio: 1 / .62; padding: 20px; border-radius: var(--r-m); color: var(--nuit); text-decoration: none; text-align: center; transition: transform var(--transition), box-shadow var(--transition); } .kl-voulez__tuile .kl-ico{ width: 40px; height: 40px; margin-bottom: 6px; } .kl-voulez__tuile--1{ background: var(--abricot-1); } .kl-voulez__tuile--2{ background: var(--abricot-2); } .kl-voulez__tuile--3{ background: var(--abricot-3); } .kl-voulez__tuile--4{ background: var(--abricot); } .kl-voulez__tuile:hover{ transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,.28); color: var(--nuit); } .kl-voulez__l1{ font-family: var(--titre); font-weight: 800; font-size: 24px; line-height: 1.1; } .kl-voulez__l2{ font-family: var(--titre); font-weight: 500; font-size: 20px; line-height: 1.15; } /* B4 rangées de rubrique */ .kl-rangee{ padding-block: 88px 64px; } .kl-rangee__tete{ display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--gouttiere); align-items: end; margin-bottom: 36px; } .kl-rangee__titre-bloc{ display: flex; align-items: flex-end; gap: 16px; } .kl-rangee__titre-bloc .kl-tuile-picto{ margin-bottom: 6px; } .kl-rangee .kl-centre, .kl-parcours-bande .kl-centre:last-child{ margin: 36px 0 0; } .kl-rangee__intro{ margin: 0; font-size: 17px; line-height: 1.65; max-width: 60ch; } /* Cartes d'article */ .kl-cartes{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gouttiere); } .kl-cartes--deux{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .kl-carte{ display: flex; flex-direction: column; min-width: 0; border-radius: var(--r-m); background: var(--blanc); color: var(--encre); text-decoration: none; transition: box-shadow var(--transition), transform var(--transition); } .kl-bande--blanc .kl-carte{ box-shadow: inset 0 0 0 1px var(--bord); } .kl-carte:hover{ box-shadow: var(--ombre-carte); transform: translateY(-2px); color: var(--encre); } .kl-carte__img{ position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-m) var(--r-m) 0 0; background: var(--givre); } .kl-carte__img img{ width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease-out; } .kl-carte:hover .kl-carte__img img{ transform: scale(1.03); } .kl-carte__pastille{ position: absolute; left: 12px; top: 12px; padding: 4px 9px; border-radius: var(--r-s); background: var(--nuit); color: var(--blanc); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; } .kl-carte__corps{ display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; padding: 18px 20px 20px; } .kl-carte__titre{ font-family: var(--titre); font-weight: 700; font-size: 20px; line-height: 1.3; color: var(--nuit); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .kl-carte__extrait{ font-size: 15px; line-height: 1.55; color: var(--encre); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .kl-carte__meta{ font-size: 14px; line-height: 1.4; color: var(--gris); } .kl-carte__lien{ margin-top: auto; padding-top: 4px; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--cuivre); } .kl-carte__lien .kl-ico{ width: 16px; height: 16px; transition: transform var(--transition); } .kl-carte:hover .kl-carte__lien .kl-ico{ transform: translateX(3px); } .kl-carte--capture{ background: var(--nuit); color: var(--blanc); box-shadow: none !important; } .kl-carte--capture:hover{ color: var(--blanc); } .kl-carte--capture__haut{ display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; border-radius: var(--r-m) var(--r-m) 0 0; background: var(--nuit-2); } .kl-carte--capture__haut .kl-tuile-picto{ width: 72px; height: 72px; flex-basis: 72px; } .kl-carte--capture__haut .kl-tuile-picto .kl-ico{ width: 38px; height: 38px; } .kl-carte--capture .kl-carte__titre{ color: var(--blanc); } .kl-carte--capture .kl-carte__extrait{ color: rgba(255,255,255,.88); } .kl-carte--capture .kl-bouton{ margin-top: auto; align-self: flex-start; } .kl-carte--large{ grid-column: span 2; flex-direction: row; } .kl-carte--large .kl-carte--capture__haut{ aspect-ratio: auto; width: 40%; border-radius: var(--r-m) 0 0 var(--r-m); } .kl-carte--large .kl-carte__corps{ justify-content: center; padding: 28px; } /* B5 actualité — retour Mathias 24/09 : colonne gauche perdue dans le vide face aux 3 images. Traitement magazine : la colonne texte s'étire sur toute la hauteur de la colonne d'images (align-items:stretch) et distribue son contenu du haut au bas (kicker/titre en haut, texte au milieu, bouton en bas), avec un filet cuivre qui lui donne du poids. Repli en bloc normal dès 1100px (voir media query). */ .kl-actu__grille{ display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: start; } .kl-actu__texte{ display: flex; flex-direction: column; justify-content: flex-start; position: sticky; top: 110px; padding-left: 28px; border-left: 3px solid var(--abricot); } .kl-actu__texte .kl-surtitre{ margin-bottom: 14px; } .kl-actu__texte .kl-titre-section{ font-size: 42px; margin-bottom: 18px; } .kl-actu__texte p{ font-size: 19px; line-height: 1.6; margin-bottom: 0; max-width: 34ch; } .kl-actu__texte .kl-bouton{ margin-top: 32px; align-self: flex-start; } .kl-actu__vignettes{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .kl-actu__une{ grid-column: 1 / -1; } .kl-actu__une, .kl-actu__petite{ display: flex; flex-direction: column; gap: 6px; color: var(--blanc); text-decoration: none; } .kl-actu__img{ display: block; overflow: hidden; border-radius: var(--r-m); aspect-ratio: 16 / 9; background: var(--nuit-2); } .kl-actu__petite .kl-actu__img{ aspect-ratio: 16 / 10; } .kl-actu__img img{ width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease-out; } .kl-actu__une:hover img, .kl-actu__petite:hover img{ transform: scale(1.03); } .kl-actu__date{ margin-top: 6px; font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--abricot); } .kl-actu__titre{ font-family: var(--titre); font-weight: 700; font-size: 20px; line-height: 1.3; color: var(--blanc); } .kl-actu__une .kl-actu__titre{ font-size: 24px; } .kl-actu__une:hover .kl-actu__titre, .kl-actu__petite:hover .kl-actu__titre{ text-decoration: underline; text-underline-offset: 4px; } /* B6 parcours */ .kl-parcours-bande .kl-pans{ width: 300px; height: 220px; } .kl-parcours-grille{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-bottom: 32px; } .kl-page--trouver ~ .kl-bande .kl-parcours-grille{ display: flex; flex-wrap: wrap; justify-content: center; } .kl-page--trouver ~ .kl-bande .kl-parcours{ flex: 0 1 calc((100% - 72px) / 4); } .kl-parcours{ position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--r-m); background: var(--givre); color: var(--encre); text-decoration: none; transition: box-shadow var(--transition), transform var(--transition); } .kl-bande--givre-doux .kl-parcours, .kl-bande--givre .kl-parcours{ background: var(--blanc); } .kl-parcours:hover{ box-shadow: var(--ombre-carte); transform: translateY(-2px); color: var(--encre); } .kl-parcours__img{ display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--r-m) var(--r-m) 0 0; background: var(--bord); } .kl-parcours__img img{ width: 100%; height: 100%; object-fit: cover; } .kl-parcours .kl-tuile-picto--carte{ width: 48px; height: 48px; flex-basis: 48px; margin: -24px 0 0 22px; position: relative; z-index: 1; box-shadow: 0 4px 10px rgba(28,42,63,.18); } .kl-parcours .kl-tuile-picto--carte .kl-ico{ width: 26px; height: 26px; } .kl-parcours__titre{ padding: 12px 22px 0; font-family: var(--titre); font-weight: 800; font-size: 22px; line-height: 1.2; color: var(--nuit); } .kl-parcours__texte{ padding: 8px 22px 0; font-size: 15px; line-height: 1.55; } .kl-parcours__lien{ margin-top: auto; padding: 14px 22px 20px; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--cuivre); } .kl-parcours__lien .kl-ico{ width: 16px; height: 16px; } /* B7 encart sable */ .kl-encart-sable{ display: grid; grid-template-columns: 320px minmax(0, 1fr); align-items: stretch; overflow: hidden; border-radius: var(--r-l); background: var(--sable); color: var(--nuit); } .kl-encart-sable__img img{ width: 100%; height: 100%; min-height: 220px; object-fit: cover; } .kl-encart-sable__texte{ padding: 32px 40px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } .kl-encart-sable__titre{ font-family: var(--titre); font-weight: 800; font-size: 30px; line-height: 1.15; margin: 0 0 8px; } .kl-encart-sable__texte p{ max-width: 62ch; } .kl-encart-sable__texte a:not(.kl-bouton){ color: var(--nuit); } /* B8 « Qui écrit ici ? » */ .kl-qui__grille{ display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; align-items: center; } .kl-qui__texte p{ max-width: 62ch; } .kl-qui__photo img{ width: 280px; height: 280px; border-radius: 50%; object-fit: cover; background: var(--nuit); border: 8px solid var(--abricot); box-shadow: 0 0 0 10px var(--nuit); margin-inline: auto; } /* ========================================================================== 6. GABARIT « PAGE AVEC COLONNE » (article, page projet, trouver) ========================================================================== */ .kl-page{ --chev: 200px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 400px; column-gap: var(--gouttiere); align-items: start; } .kl-page--projet{ --chev: 150px; } .kl-page__fond{ grid-column: 1 / -1; grid-row: 1; align-self: stretch; position: relative; z-index: 0; margin-bottom: calc(-1 * var(--chev)); background: var(--abricot); box-shadow: 0 0 0 100vmax var(--abricot); clip-path: inset(0 -100vmax); } .kl-page__fond .kl-pans{ right: calc(-1 * var(--pad)); } .kl-page__tete{ grid-column: 1; grid-row: 1; position: relative; z-index: 1; padding: 28px 0 40px; color: var(--nuit); } .kl-page__tete h1{ font-size: 46px; line-height: 1.13; margin: 6px 0 14px; } .kl-page__chapo{ font-weight: 500; font-size: 19px; line-height: 1.58; color: var(--nuit); max-width: 760px; margin: 0 0 16px; } .kl-page__chapo--court{ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .kl-meta{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-weight: 500; font-size: 15px; line-height: 1.3; color: var(--nuit); } .kl-meta__sep{ width: 4px; height: 4px; border-radius: 50%; background: var(--nuit); opacity: .6; } .kl-meta__temps{ display: inline-flex; align-items: center; gap: 6px; } .kl-meta__temps .kl-ico{ width: 18px; height: 18px; } .kl-auteur-mini{ display: inline-flex; align-items: center; gap: 10px; } .kl-auteur-mini img{ width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--nuit); } .kl-auteur-mini a{ color: var(--nuit); font-weight: 700; } .kl-page__une{ grid-column: 1; grid-row: 2; position: relative; z-index: 1; margin: 0; } .kl-page__une img{ width: 100%; height: min(420px, 46vh); object-fit: cover; border-radius: var(--r-m); background: var(--givre); } .kl-page__une .kl-legende{ margin-top: 8px; } .kl-page__form{ grid-column: 1; grid-row: 2; position: relative; z-index: 1; scroll-margin-top: 100px; } .kl-page__corps{ grid-column: 1; grid-row: 3; min-width: 0; padding: 40px 0 80px; } .kl-page__cote{ grid-column: 2; grid-row: 1 / span 3; align-self: stretch; position: relative; z-index: 2; display: flex; flex-direction: column; gap: 24px; padding: 28px 0 80px; } .kl-cote__collant{ position: sticky; top: calc(64px + 24px); display: flex; flex-direction: column; gap: 20px; } .kl-page--article .kl-cote__collant{ top: calc(64px + 4px + 20px); } .kl-legende{ font-style: italic; font-size: 14px; line-height: 1.45; color: var(--gris); text-align: center; margin: 8px 0 0; } .kl-legende a{ color: var(--gris); } /* Sommaire (colonne) */ .kl-sommaire{ padding: 22px 24px; border-radius: var(--r-m); background: var(--givre); } .kl-sommaire__tete{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .kl-sommaire__titre{ margin: 0; font-family: var(--titre); font-weight: 800; font-size: 18px; line-height: 1.2; color: var(--cuivre); } .kl-sommaire__reste{ flex: 0 0 auto; padding: 4px 10px; border-radius: 20px; background: var(--nuit); color: var(--blanc); font-weight: 700; font-size: 13px; line-height: 1.3; white-space: nowrap; } .kl-sommaire__liste{ list-style: none; margin: 0; padding: 0; max-height: 42vh; overflow-y: auto; overscroll-behavior: contain; } .kl-sommaire__liste li + li{ margin-top: 2px; } .kl-sommaire__liste a{ display: block; padding: 7px 10px 7px 12px; border-left: 3px solid transparent; border-radius: 0 6px 6px 0; font-weight: 500; font-size: 15px; line-height: 1.4; color: var(--nuit); text-decoration: none; } .kl-sommaire__liste a:hover{ background: rgba(255,255,255,.7); } .kl-sommaire__liste a.is-actif{ font-weight: 700; border-left-color: var(--abricot); background: var(--blanc); } .kl-sommaire-mobile{ display: none; } /* Carte « Mon projet photo » (formulaire compact en colonne) */ .kl-carte-projet{ padding: 22px; border-radius: var(--r-l); background: var(--blanc); box-shadow: var(--ombre-form); } .kl-carte-projet__titre{ margin: 0 0 12px; font-family: var(--titre); font-weight: 800; font-size: 20px; line-height: 1.2; color: var(--nuit); } .kl-carte-projet .kl-form{ padding: 0; box-shadow: none; border-radius: 0; } /* Carte nuit de capture (colonne) */ .kl-carte-nuit{ padding: 24px; border-radius: var(--r-l); background: var(--nuit); color: var(--blanc); } .kl-carte-nuit__titre{ margin: 0 0 6px; font-family: var(--titre); font-weight: 800; font-size: 22px; line-height: 1.2; color: var(--blanc); } .kl-carte-nuit p{ color: rgba(255,255,255,.88); font-size: 16px; line-height: 1.5; } .kl-carte-nuit .kl-bouton{ width: 100%; } .kl-carte-givre{ padding: 22px 24px; border-radius: var(--r-m); background: var(--givre); } .kl-cote__actus{ padding: 22px 24px; border-radius: var(--r-m); background: var(--givre); } /* Correction 6 (24/09) : .kl-liste est en grille 2 colonnes par défaut (pensée pour /dossiers/ et /actualites/, pleine largeur). Dans la colonne latérale (400px, moins le padding de la carte), 2 colonnes écrasent chaque carte à ~70px de texte : image ronde compressée, titre et date qui retombent mot par mot. Une seule colonne, comme .kl-deux-colonnes .kl-liste juste au-dessus, redonne à la carte sa largeur réelle. */ .kl-cote__actus .kl-liste{ grid-template-columns: 1fr; gap: 14px; } .kl-cote__actus .kl-liste__item{ grid-template-columns: 72px minmax(0, 1fr); padding: 0; } .kl-cote__actus .kl-liste__titre{ font-size: 16px; } .kl-cote__actus .kl-liste__date{ white-space: nowrap; } .kl-liens-rubriques{ list-style: none; margin: 12px 0 0; padding: 0; } .kl-liens-rubriques a{ display: flex; align-items: center; gap: 12px; padding: 8px 0; font-weight: 700; color: var(--nuit); text-decoration: none; } .kl-liens-rubriques a:hover{ text-decoration: underline; } /* « Mon projet » (pages projet) */ .kl-mon-projet{ overflow: hidden; border-radius: var(--r-l); background: var(--blanc); box-shadow: var(--ombre-form); } .kl-mon-projet__img img{ width: 100%; aspect-ratio: 16 / 8; object-fit: cover; } .kl-mon-projet__corps{ padding: 22px 24px 24px; } .kl-mon-projet__tete{ display: flex; justify-content: space-between; align-items: center; } .kl-mon-projet__titre{ margin: 0; font-family: var(--titre); font-weight: 800; font-size: 20px; color: var(--nuit); } .kl-mon-projet__compte{ font-weight: 700; font-size: 14px; color: var(--cuivre); } .kl-mon-projet__barre{ height: 6px; margin: 10px 0 12px; border-radius: 3px; background: var(--givre); overflow: hidden; } .kl-mon-projet__barre span{ display: block; height: 100%; width: 0; background: var(--abricot); border-radius: 3px; transition: width 300ms ease-out; } .kl-mon-projet__lignes{ list-style: none; margin: 0 0 16px; padding: 0; } .kl-mon-projet__lignes li{ display: grid; grid-template-columns: 22px 92px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--givre); font-size: 15px; line-height: 1.35; } .kl-mon-projet__lignes li:last-child{ border-bottom: 0; } .kl-mon-projet__lignes .kl-ico{ width: 20px; height: 20px; color: var(--nuit); } .kl-mon-projet__lignes em{ font-style: normal; color: var(--gris); } .kl-mon-projet__lignes span{ font-style: italic; color: var(--gris); overflow-wrap: anywhere; } .kl-mon-projet__lignes li.is-fait span{ font-style: normal; font-weight: 700; color: var(--nuit); } .kl-mon-projet__lignes--simple li{ grid-template-columns: 22px minmax(0, 1fr); } .kl-mon-projet__lignes--simple span{ font-style: normal; color: var(--encre); } .kl-mon-projet__note{ margin: 14px 0 0; font-size: 14px; line-height: 1.45; color: var(--gris); } /* Badges (pages projet) */ .kl-badges{ display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 4px 0 0; padding: 0; } .kl-badges li{ display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 20px; background: var(--blanc); color: var(--nuit); font-weight: 700; font-size: 14px; line-height: 1.2; } .kl-badges .kl-ico{ width: 18px; height: 18px; color: var(--cuivre); } /* Encart de capture au 1/3 de l'article */ .kl-encart-capture{ display: grid; grid-template-columns: 38% minmax(0, 1fr); overflow: hidden; margin: 40px 0; border-radius: var(--r-l); background: var(--sable); color: var(--nuit); } .kl-encart-capture__img img{ width: 100%; height: 100%; min-height: 240px; object-fit: cover; } .kl-encart-capture__corps{ padding: 26px 28px; } .kl-encart-capture__titre{ margin: 0 0 6px !important; font-family: var(--titre); font-weight: 800; font-size: 24px !important; line-height: 1.2 !important; color: var(--nuit); } .kl-encart-capture__texte{ font-size: 16px !important; line-height: 1.5 !important; margin: 0 0 14px !important; } .kl-encart-capture .kl-bouton{ margin-top: 14px; } .kl-choix-mini{ display: flex; flex-wrap: wrap; gap: 10px; } .kl-choix-mini__carte{ position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 16px; border-radius: var(--r-m); border: 2px solid var(--bord); background: var(--blanc); color: var(--nuit); font-weight: 700; font-size: 15px; line-height: 1.2; cursor: pointer; transition: border-color var(--transition), background var(--transition); } .kl-choix-mini__carte input{ position: absolute; opacity: 0; width: 1px; height: 1px; } .kl-choix-mini__carte .kl-ico{ width: 20px; height: 20px; } .kl-choix-mini__carte:hover{ border-color: var(--abricot); } .kl-choix-mini__carte:has(input:checked){ border-color: var(--abricot); background: var(--sable); } .kl-encart-capture .kl-choix-mini__carte:has(input:checked){ background: var(--blanc); border-color: var(--nuit); } .kl-choix-mini__carte:has(input:focus-visible){ outline: 3px solid var(--nuit); outline-offset: 2px; } /* Quiz de fin d'article */ .kl-quiz{ margin: 48px 0 0; padding: 28px; border-radius: var(--r-l); background: var(--givre); } .kl-plus-loin{ margin: 48px 0 0; } .kl-plus-loin .kl-titre-section{ margin: 0 0 20px !important; font-size: 26px; } .kl-quiz__titre{ margin: 0 0 16px; font-family: var(--titre); font-weight: 800; font-size: 24px; line-height: 1.2; color: var(--nuit); } .kl-quiz__choix{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .kl-choix-carte{ display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 12px; border-radius: var(--r-m); border: 2px solid var(--bord); background: var(--blanc); color: var(--nuit); text-align: center; text-decoration: none; transition: border-color var(--transition), transform var(--transition); } .kl-choix-carte:hover{ border-color: var(--abricot); transform: translateY(-2px); color: var(--nuit); } .kl-choix-carte__rond{ display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--givre); margin-bottom: 6px; } .kl-choix-carte__rond .kl-ico{ width: 26px; height: 26px; } .kl-choix-carte__libelle{ font-weight: 700; font-size: 16px; line-height: 1.3; } .kl-choix-carte__precision{ font-size: 14px; line-height: 1.35; color: var(--gris); } /* Bloc auteur unique */ .kl-auteur{ display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 24px; margin: 48px 0 0; padding: 36px 40px; border-radius: var(--r-xl); background: var(--nuit); color: var(--blanc); } .kl-auteur__photo{ width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 4px solid var(--abricot); } .kl-auteur__nom{ margin: 0; font-family: var(--titre); font-weight: 800; font-size: 22px; line-height: 1.2; } .kl-auteur__nom a{ color: var(--blanc); text-decoration: none; } .kl-auteur__nom a:hover{ text-decoration: underline; } .kl-auteur__role{ margin: 2px 0 10px; font-weight: 500; font-size: 15px; color: var(--abricot); } .kl-auteur__bio{ margin: 0 0 8px; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.88); } .kl-auteur__date{ margin: 0 0 10px; font-size: 14px; color: rgba(255,255,255,.75); } .kl-auteur__lien{ display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--abricot); text-decoration: none; } .kl-auteur__lien .kl-ico{ width: 16px; height: 16px; } .kl-auteur__lien:hover{ color: var(--blanc); } /* Barre collante basse (mobile, articles) */ .kl-barre-mobile{ display: none; } /* ========================================================================== 7. TEXTE LONG (articles, pages projet, pages annexes) ========================================================================== */ .kl-prose{ font-size: 18px; line-height: 1.72; color: var(--encre); overflow-wrap: break-word; } .kl-prose > *{ max-width: 760px; } .kl-prose > .kl-encart-capture, .kl-prose > .kl-planche-projets, .kl-prose > figure, .kl-prose > .sbs_tableau, .kl-prose > .kl-planche-compar, .kl-prose > .sb-maillage, .kl-prose > sbs-jauges, .kl-prose > sbs-tarifs, .kl-prose > sbs-frise, .kl-prose > sbs-lieu, .kl-prose > .kl-faq, .kl-prose > .kl-encadre{ max-width: none; } .kl-prose p{ margin: 0 0 1.15em; } .kl-prose h2{ position: relative; font-size: 32px; line-height: 1.25; margin: 56px 0 16px; padding-top: 18px; } .kl-prose h2::before{ content: ""; position: absolute; left: 0; top: 0; width: 40px; height: 5px; border-radius: 3px; background: var(--abricot); } .kl-prose h3{ font-weight: 700; font-size: 24px; line-height: 1.3; margin: 36px 0 10px; } .kl-prose h4{ font-weight: 700; font-size: 20px; margin: 28px 0 8px; } .kl-prose > :first-child{ margin-top: 0; } .kl-prose a{ color: var(--cuivre); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .kl-prose a:hover{ color: var(--nuit); } .kl-prose strong{ font-weight: 700; color: var(--nuit); } .kl-prose ul, .kl-prose ol{ padding-left: 0; margin: 0 0 1.3em; list-style: none; } .kl-prose ul > li, .kl-prose ol > li{ position: relative; padding-left: 30px; margin-bottom: .55em; } .kl-prose ul > li::before{ content: ""; position: absolute; left: 6px; top: .62em; width: 9px; height: 9px; border-radius: 3px; background: var(--abricot); } .kl-prose ol{ counter-reset: kl-ol; } .kl-prose ol > li{ counter-increment: kl-ol; } .kl-prose ol > li::before{ content: counter(kl-ol); position: absolute; left: 0; top: .15em; width: 22px; height: 22px; border-radius: 50%; background: var(--abricot); color: var(--nuit); font-family: var(--titre); font-weight: 800; font-size: 13px; line-height: 22px; text-align: center; } .kl-prose blockquote{ position: relative; margin: 32px 0; padding: 8px 0 8px 68px; font-family: var(--titre); font-weight: 500; font-size: 24px; line-height: 1.35; color: var(--nuit); border: 0; } .kl-prose blockquote::before{ content: "\201C"; position: absolute; left: 0; top: -8px; font-family: var(--titre); font-weight: 800; font-size: 72px; line-height: 1; color: var(--abricot); } .kl-prose blockquote p{ margin: 0 0 .4em; } .kl-prose figure, .kl-prose .wp-block-image{ margin: 32px 0; } .kl-prose img{ border-radius: var(--r-m); height: auto; } .kl-prose figcaption{ font-style: italic; font-size: 15px; line-height: 1.45; color: var(--gris); text-align: center; margin-top: 8px; } .kl-prose hr{ border: 0; height: 2px; background: var(--givre); margin: 40px 0; } .kl-prose--page > *{ max-width: 840px; } .kl-colonne-lecture{ max-width: 760px; margin-inline: auto; } .kl-colonne-lecture > *{ max-width: none; } .kl-prose--legale h2{ font-size: 28px; } .kl-prose .chapo{ font-weight: 500; font-size: 20px; line-height: 1.6; color: var(--nuit); } /* À propos, correction 5 (24/09) : « Ce que vous trouverez ici » et la suite, en fiches — même famille que .kl-etapes__carte (méthode, juste en dessous) et .kl-actu__texte (accueil) : pastille-icône + titre en tête, filet cuivre à gauche, fond blanc qui se détache du fond givre de la bande. Le h2 garde son

sémantique mais perd le repère de .kl-prose (barre + marge de 56px) : la fiche porte déjà le sien. */ .kl-fiche-apropos{ background: var(--blanc); border-radius: var(--r-m); box-shadow: var(--ombre-carte); padding: 32px 36px; margin: 0 0 28px; border-left: 3px solid var(--abricot); } .kl-fiche-apropos:last-child{ margin-bottom: 0; } .kl-fiche-apropos__tete{ display: flex; align-items: center; gap: 16px; margin-bottom: 14px; } .kl-fiche-apropos__tete .kl-tuile-picto{ flex: none; } .kl-fiche-apropos__tete h2{ margin: 0; padding-top: 0; font-size: 26px; } .kl-fiche-apropos__tete h2::before{ display: none; } .kl-fiche-apropos__corps p:last-child{ margin-bottom: 0; } @media (max-width: 760px){ .kl-fiche-apropos{ padding: 22px 20px; } .kl-fiche-apropos__tete{ gap: 12px; } .kl-fiche-apropos__tete h2{ font-size: 21px; } } /* Encadrés posés par le thème (inc/aides.php) */ .kl-encadre{ margin: 32px 0; padding: 24px 28px; border-radius: var(--r-m); } .kl-encadre--essentiel{ background: var(--sable); border-left: 5px solid var(--abricot); color: var(--nuit); } .kl-encadre__titre{ margin: 0 0 6px !important; font-family: var(--titre); font-weight: 800; font-size: 18px; color: var(--cuivre); } .kl-encadre--essentiel .kl-encadre__titre{ color: var(--nuit); } .kl-encadre--essentiel p:last-child{ margin-bottom: 0; } .kl-encadre--sources{ background: var(--givre); } .kl-encadre--sources h2{ font-size: 18px; margin: 0 0 10px; padding-top: 0; color: var(--nuit); } .kl-encadre--sources h2::before{ display: none; } .kl-encadre__sources-liste{ list-style: none !important; margin: 0 !important; padding: 0 !important; counter-reset: none; } .kl-encadre__sources-liste > li{ padding: 10px 0 !important; margin: 0 !important; border-bottom: 1px solid #C9DCE7; font-size: 15px; line-height: 1.5; } .kl-encadre__sources-liste > li::before{ display: none !important; } .kl-encadre__sources-liste > li:last-child{ border-bottom: 0; } .kl-encadre--points{ background: var(--givre); } .kl-encadre--points ul{ margin: 0; } .kl-pave-chiffre{ margin: 28px 0; padding: 20px 24px; border-radius: var(--r-m); background: var(--givre); border-left: 5px solid var(--nuit); } .kl-pave-chiffre::before{ content: "Chiffres clés"; display: block; margin-bottom: 6px; font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--cuivre); } .kl-pave-chiffre p{ margin: 0; font-size: 17px; line-height: 1.65; } .kl-chiffre-cle{ font-family: var(--titre); font-weight: 800; color: var(--nuit); background: linear-gradient(transparent 62%, rgba(247,150,63,.45) 62%); padding: 0 1px; } /* Planches comparatives (dans le contenu) */ .kl-planche-compar{ margin: 32px 0; } .kl-planche-compar__grille{ display: grid; grid-template-columns: 1fr; gap: 14px; } .kl-planche-compar__carte{ padding: 18px 22px; border-radius: var(--r-m); background: var(--givre); border-top: 4px solid var(--abricot); } .kl-planche-compar__critere{ display: block; margin-bottom: 10px; font-family: var(--titre); font-weight: 800; font-size: 18px; line-height: 1.3; color: var(--nuit); } .kl-planche-compar__vals{ display: grid; grid-template-columns: 1fr; gap: 12px; } .kl-planche-compar__val{ display: flex; flex-direction: column; gap: 2px; min-width: 0; } .kl-planche-compar__label{ font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--cuivre); } .kl-planche-compar__texte{ font-size: 15px; line-height: 1.5; color: var(--encre); } @media (min-width: 700px){ .kl-planche-compar__vals{ grid-template-columns: 1fr 1fr; gap: 20px; } .kl-planche-compar__val + .kl-planche-compar__val{ padding-left: 20px; border-left: 1px solid #C9DCE7; } } /* Planche « autres formats » (pages projet) */ .kl-planche-projets{ margin: 40px 0; padding: 24px; border-radius: var(--r-l); background: var(--givre); } .kl-planche-projets__titre{ margin: 0 0 14px !important; font-family: var(--titre); font-weight: 800; font-size: 22px; color: var(--nuit); } .kl-planche-projets__grille{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .kl-mini-projet{ display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-m); background: var(--blanc); color: var(--nuit); text-decoration: none !important; transition: box-shadow var(--transition); } .kl-mini-projet:hover{ box-shadow: var(--ombre-carte); color: var(--nuit); } .kl-mini-projet__img img{ width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0 !important; } .kl-mini-projet__titre{ padding: 12px 14px 0; font-family: var(--titre); font-weight: 700; font-size: 17px; line-height: 1.25; } .kl-mini-projet__lien{ display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px 14px; font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--cuivre); } .kl-mini-projet__lien .kl-ico{ width: 14px; height: 14px; } /* ---------- Carte de destinations (stages France / voyages Monde), 24/09/2026 ---------- */ .kl-carte-destinations{ margin: 32px 0 40px; } .kl-carte-destinations__titre{ margin: 0 0 14px !important; font-family: var(--titre); font-weight: 800; font-size: 22px; color: var(--nuit); } .kl-carte-destinations__cadre{ position: relative; padding: 28px 24px 36px; border-radius: var(--r-l); background: var(--givre); overflow: hidden; } .kl-carte-destinations__plan{ position: relative; width: 100%; counter-reset: kl-pt; } .kl-carte-destinations--france .kl-carte-destinations__plan{ max-width: 380px; aspect-ratio: 600 / 640; margin-inline: auto; } .kl-carte-destinations--monde .kl-carte-destinations__plan{ aspect-ratio: 800 / 480; } .kl-carte-destinations__svg{ position: absolute; inset: 0; display: block; width: 100%; height: 100%; } .kl-carte-destinations__sphere{ fill: var(--bord); } .kl-carte-destinations__terre{ fill: var(--sable); stroke: var(--nuit-2); stroke-width: 1; stroke-linejoin: round; } .kl-carte-destinations__pt{ position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -22px 0 0 -22px; text-decoration: none !important; counter-increment: kl-pt; } .kl-carte-destinations__point{ position: relative; width: 14px; height: 14px; border-radius: 50%; background: var(--abricot); box-shadow: 0 0 0 4px var(--blanc), 0 2px 6px rgba(28, 42, 63, .35); transition: transform var(--transition); } .kl-carte-destinations__pt:hover .kl-carte-destinations__point, .kl-carte-destinations__pt:focus-visible .kl-carte-destinations__point{ transform: scale(1.3); } /* Étiquette accolée au point : ancrée au centre, décalée de 18px (≈ 6-8px au-delà du rond + son liseré blanc), jamais plus loin. */ .kl-carte-destinations__label{ position: absolute; top: 50%; left: 50%; z-index: 2; white-space: nowrap; font-family: var(--texte); font-weight: 700; font-size: 12px; line-height: 1; color: var(--nuit); background: var(--blanc); padding: 5px 10px; border-radius: 999px; box-shadow: 0 2px 6px rgba(28, 42, 63, .18); pointer-events: none; } .kl-carte-destinations__pt--droite .kl-carte-destinations__label{ transform: translate(18px, -50%); } .kl-carte-destinations__pt--gauche .kl-carte-destinations__label{ transform: translate(calc(-100% - 18px), -50%); } .kl-carte-destinations__pt--bas .kl-carte-destinations__label{ transform: translate(-50%, 18px); } .kl-carte-destinations__pt--haut .kl-carte-destinations__label{ transform: translate(-50%, calc(-100% - 18px)); } .kl-carte-destinations__liste{ counter-reset: kl-pt; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 16px 0 0 !important; padding: 0 !important; list-style: none; font-size: 15px; } .kl-carte-destinations__liste li{ counter-increment: kl-pt; position: relative; } .kl-carte-destinations__liste > li::before{ content: none !important; display: none !important; } .kl-carte-destinations__liste a{ color: var(--cuivre); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } /* < 600px : les étiquettes flottantes se chevauchent trop pour être lisibles. On numérote les points (pastille = numéro) et on transforme la liste du dessous en légende numérotée de même couleur, chaque ligne restant cliquable. */ @media ( max-width: 600px ) { .kl-carte-destinations__label{ display: none; } .kl-carte-destinations__pt{ width: 32px; height: 32px; margin: -16px 0 0 -16px; } .kl-carte-destinations__point{ width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-family: var(--texte); font-size: 11px; font-weight: 800; color: var(--blanc); } .kl-carte-destinations__point::after{ content: counter( kl-pt ); } .kl-carte-destinations__pt--nudge-gauche{ margin-left: -22px; } .kl-carte-destinations__pt--nudge-droite{ margin-left: 2px; } .kl-carte-destinations__pt--nudge-haut{ margin-top: -34px; } .kl-carte-destinations__liste{ display: grid; grid-template-columns: repeat( 2, 1fr ); gap: 10px 16px; } .kl-carte-destinations__liste li{ display: flex; align-items: center; } .kl-carte-destinations__liste a{ display: inline-flex; align-items: center; gap: 8px; text-decoration: none; } .kl-carte-destinations__liste a::before{ content: counter( kl-pt ); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--abricot); color: var(--blanc); font-size: 11px; font-weight: 800; } } .kl-figure-section{ margin: 36px 0; } .kl-figure-section img{ width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: var(--r-m); } .kl-figure{ margin: 0; } .kl-figure img{ border-radius: var(--r-m); } .kl-apropos-travail{ margin: 28px 0; } .kl-apropos-travail img{ width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: var(--r-m); } /* FAQ en accordéon */ .kl-faq{ display: flex; flex-direction: column; gap: 10px; margin: 16px 0 32px; } .kl-faq__item{ border-radius: var(--r-m); background: var(--givre); overflow: hidden; } .kl-faq__question{ position: relative; display: block; list-style: none; cursor: pointer; padding: 16px 56px 16px 20px; font-family: var(--titre); font-weight: 700; font-size: 19px; line-height: 1.35; color: var(--nuit); } .kl-faq__question::-webkit-details-marker{ display: none; } .kl-faq__question::after{ content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; background: var(--blanc); color: var(--cuivre); font-family: var(--titre); font-weight: 800; font-size: 22px; line-height: 28px; text-align: center; } .kl-faq__item[open] .kl-faq__question::after{ content: "\2212"; } .kl-faq__reponse{ padding: 0 20px 18px; } .kl-faq__reponse p{ margin: 0; font-size: 17px; } /* Tableaux (socle) — lisibles et défilables sur téléphone */ .sbs_tableau{ overflow-x: auto; margin: 28px 0; border-radius: var(--r-m); border: 1px solid var(--bord); -webkit-overflow-scrolling: touch; } .sbs_tableau table{ width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; line-height: 1.45; } .sbs_tableau th, .sbs_tableau td{ padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--bord); } .sbs_tableau thead th{ background: var(--nuit); color: var(--blanc); font-family: var(--titre); font-weight: 700; white-space: nowrap; } .sbs_tableau tbody tr:nth-child(even){ background: #F5F9FC; } /* Maillage de fin d'article (mu-plugin sb-maillage) */ .sb-maillage{ margin: 48px 0 0; padding: 24px 28px; border-radius: var(--r-m); background: var(--givre); max-width: none !important; } .sb-maillage h2{ font-size: 20px !important; margin: 0 0 10px !important; padding-top: 0 !important; } .sb-maillage h2::before{ display: none; } .sb-maillage ul{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; margin: 0 !important; } .sb-maillage ul > li{ margin: 0 !important; } .sb-maillage a{ font-weight: 700; color: var(--nuit); } /* Infographies du socle (, , , ) */ sbs-jauges, sbs-tarifs, sbs-frise, sbs-lieu{ display: block; margin: 32px 0; padding: 26px 28px; border-radius: var(--r-l); background: var(--nuit); color: var(--blanc); } .sbs_jauges_titre, .sbs_tarifs_titre, .sbs_frise_titre{ display: block; margin-bottom: 16px; font-family: var(--titre); font-weight: 800; font-size: 22px; line-height: 1.2; color: var(--blanc); } sbs-jauges{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } sbs-jauges > .sbs_jauges_titre, sbs-jauges > .sbs_source{ grid-column: 1 / -1; } sbs-jauge{ display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 16px; border-radius: var(--r-m); background: var(--nuit-2); } /* v2 correction 2 (24/09) : valeur + unité dans une même ligne flex, jamais deux flex-items séparés (c'était la cause réelle de l'unité seule sur sa propre ligne, pas un manque de place) ; espace insécable posée côté PHP (sbs_shortcode_jauges). */ .sbs_jauge_ligne{ display: flex; align-items: baseline; flex-wrap: nowrap; min-width: 0; } .sbs_jauge_valeur{ font-family: var(--titre); font-weight: 800; font-size: 34px; line-height: 1; color: var(--abricot); overflow-wrap: anywhere; } .sbs_jauge_unite{ font-family: var(--titre); font-weight: 800; font-size: 20px; line-height: 1; color: var(--abricot); white-space: nowrap; } .sbs_jauge_libelle{ font-size: 14px; line-height: 1.4; color: rgba(255,255,255,.85); } sbs-tarif{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.14); } .sbs_tarif_libelle{ font-size: 15px; color: var(--blanc); } .sbs_tarif_barre{ width: 100%; height: 10px; } .sbs_tarif_barre::-webkit-meter-bar{ background: rgba(255,255,255,.14); border: 0; border-radius: 5px; } .sbs_tarif_barre::-webkit-meter-optimum-value{ background: var(--abricot); border-radius: 5px; } .sbs_tarif_barre::-moz-meter-bar{ background: var(--abricot); } sbs-tarif data, sbs-tarif strong{ font-family: var(--titre); font-weight: 800; font-size: 20px; color: var(--blanc); white-space: nowrap; } .sbs_tarifs_notes{ display: block; margin-top: 12px; font-size: 13px; color: rgba(255,255,255,.8); } sbs-etape{ display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 4px 16px; padding: 12px 0 12px 16px; margin-left: 4px; border-left: 3px solid var(--abricot); } .sbs_etape_date{ font-weight: 700; font-size: 14px; color: var(--abricot); } .sbs_etape_titre{ font-family: var(--titre); font-weight: 700; font-size: 19px; color: var(--blanc); } .sbs_etape_desc{ grid-column: 2; font-size: 15px; color: rgba(255,255,255,.85); } sbs-lieu{ display: flex; flex-direction: column; gap: 6px; } .sbs_lieu_nom{ font-family: var(--titre); font-weight: 800; font-size: 22px; color: var(--blanc); } .sbs_lieu_adresse{ font-style: normal; color: var(--blanc); } .sbs_lieu_acces{ font-size: 14px; color: rgba(255,255,255,.85); } .sbs_lieu_carte{ font-weight: 700; color: var(--abricot); } sbs-jauges .sbs_source, sbs-tarifs .sbs_source, sbs-frise .sbs_source, sbs-lieu .sbs_source{ display: block; margin-top: 14px; font-size: 13px; color: rgba(255,255,255,.8); } /* ========================================================================== 8. FORMULAIRE MULTI-ÉTAPES (R-0519) — carte blanche, cartes-choix à picto ========================================================================== */ .kl-form{ position: relative; padding: 26px 28px 22px; border-radius: var(--r-l); background: var(--blanc); color: var(--nuit); box-shadow: var(--ombre-form); } .kl-form__tete{ display: flex; align-items: center; gap: 14px; margin-bottom: 8px; } .kl-form__compteur{ flex: 0 0 auto; margin: 0; font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--cuivre); } .kl-form__barre{ flex: 1 1 auto; height: 6px; border-radius: 3px; background: var(--givre); overflow: hidden; } .kl-form__barre-jauge{ height: 100%; border-radius: 3px; background: var(--abricot); transition: width 300ms ease-out; } .kl-form__etape{ display: none; } .kl-form__etape.is-active{ display: block; animation: kl-apparait 220ms ease-out; } @keyframes kl-apparait{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: none; } } .kl-form__question{ margin: 0 0 14px; font-family: var(--titre); font-weight: 800; font-size: 24px; line-height: 1.2; color: var(--nuit); } .kl-form__vignettes, .kl-form__options{ display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; } .kl-choix{ position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; min-height: 104px; padding: 16px 12px 14px; border-radius: var(--r-m); border: 2px solid var(--bord); background: var(--blanc); color: var(--nuit); text-align: center; transition: border-color var(--transition), background var(--transition), transform var(--transition); } .kl-choix:hover{ border-color: var(--abricot); transform: translateY(-1px); } .kl-choix__rond{ display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; flex: 0 0 52px; border-radius: 50%; background: var(--givre); color: var(--nuit); transition: background var(--transition); } .kl-choix__rond .kl-ico{ width: 28px; height: 28px; } .kl-choix__texte{ display: flex; flex-direction: column; gap: 2px; } .kl-choix__libelle{ font-weight: 700; font-size: 16px; line-height: 1.25; } .kl-choix__precision{ font-size: 13px; line-height: 1.3; color: var(--gris); } .kl-choix__coche{ position: absolute; top: 8px; right: 8px; display: none; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--nuit); color: var(--blanc); } .kl-choix__coche .kl-ico{ width: 14px; height: 14px; stroke-width: 3; } .kl-choix.is-choisie{ border-color: var(--abricot); background: var(--sable); } .kl-choix.is-choisie .kl-choix__rond{ background: var(--blanc); } .kl-choix.is-choisie .kl-choix__coche{ display: inline-flex; } .kl-form__champ{ display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .kl-form__champ label{ font-weight: 700; font-size: 14px; line-height: 1.35; color: var(--nuit); } .kl-form__champ input[type="text"], .kl-form__champ input[type="email"], .kl-form__champ input[type="tel"], .kl-form__champ textarea, .kl-form-court input{ width: 100%; min-height: 52px; padding: 12px 16px; border: 2px solid transparent; border-radius: var(--r-s); background: var(--givre); color: var(--encre); font-size: 17px; transition: border-color var(--transition), background var(--transition); } .kl-form__champ textarea{ min-height: 130px; resize: vertical; } .kl-form__champ input:focus, .kl-form__champ textarea:focus, .kl-form-court input:focus{ outline: none; border-color: var(--nuit); background: var(--blanc); } .kl-form__champ input::placeholder, .kl-form__champ textarea::placeholder, .kl-form-court input::placeholder{ color: #6B7383; } .kl-form__champ--case{ flex-direction: row; align-items: flex-start; gap: 10px; } .kl-form__champ--case input{ width: 20px; height: 20px; margin-top: 2px; flex: 0 0 20px; accent-color: var(--nuit); } .kl-form__champ--case label{ font-weight: 500; font-size: 14px; } .kl-form__champ--case .kl-form__erreur{ flex-basis: 100%; } .kl-form__champ--case{ flex-wrap: wrap; } .kl-form__erreur{ display: none; margin: 8px 0 0; font-weight: 700; font-size: 14px; color: var(--erreur); } .kl-form__champ.has-erreur .kl-form__erreur{ display: block; } .kl-form__champ.has-erreur input, .kl-form__champ.has-erreur textarea{ border-color: var(--erreur); background: #FDF1F0; } .kl-form__erreur-globale{ display: none; margin-bottom: 14px; padding: 12px 14px; border-radius: var(--r-s); background: #FDF1F0; color: var(--erreur); border-left: 4px solid var(--erreur); font-weight: 700; font-size: 14px; } .kl-form__erreur-globale.is-visible{ display: block; } .kl-form__nav{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; } .kl-form__retour{ min-height: 44px; padding: 8px 4px; border: 0; background: transparent; color: var(--gris); font-weight: 700; font-size: 15px; } .kl-form__retour:hover{ color: var(--nuit); text-decoration: underline; } .kl-form__suivant, .kl-form__envoyer{ display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 14px 30px; border: 0; border-radius: var(--r-m); background: var(--nuit); color: var(--blanc); font-family: var(--titre); font-weight: 800; font-size: 16px; line-height: 1; letter-spacing: .02em; text-transform: uppercase; transition: background var(--transition); } .kl-form__suivant .kl-ico{ width: 18px; height: 18px; } .kl-form__suivant:hover, .kl-form__envoyer:hover{ background: var(--nuit-2); } .kl-form__envoyer[disabled]{ opacity: .7; cursor: progress; } .kl-form__rgpd{ margin: 12px 0 0; font-size: 13px; line-height: 1.45; color: var(--gris); } .kl-form__rgpd a{ color: var(--gris); } .kl-form__succes{ display: none; text-align: center; padding: 20px 8px 8px; } .kl-form__succes.is-visible{ display: block; } .kl-form__succes-rond{ display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--dispo); color: var(--blanc); margin-bottom: 10px; } .kl-form__succes-rond .kl-ico{ width: 32px; height: 32px; stroke-width: 3; } .kl-form__succes-titre{ margin: 0 0 6px; font-family: var(--titre); font-weight: 800; font-size: 24px; color: var(--nuit); } .kl-form.is-envoye .kl-form__etape, .kl-form.is-envoye .kl-form__tete, .kl-form.is-envoye .kl-form__nav, .kl-form.is-envoye .kl-form__rgpd, .kl-form.is-envoye .kl-form__objet, .kl-form.is-envoye > .kl-form__champ{ display: none; } /* Hero : cartes-choix en une rangée de 4 */ .kl-form--hero .kl-form__vignettes{ grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Version compacte (colonne latérale) */ .kl-form--compacte .kl-form__question{ font-size: 19px; margin-bottom: 10px; } .kl-form--compacte .kl-form__vignettes, .kl-form--compacte .kl-form__options{ grid-template-columns: 1fr 1fr; gap: 8px; } .kl-form--compacte .kl-choix{ min-height: 0; padding: 12px 8px 10px; gap: 6px; } .kl-form--compacte .kl-choix__rond{ width: 40px; height: 40px; flex-basis: 40px; } .kl-form--compacte .kl-choix__rond .kl-ico{ width: 22px; height: 22px; } .kl-form--compacte .kl-choix__libelle{ font-size: 14px; } .kl-form--compacte .kl-choix__precision{ display: none; } .kl-form--compacte .kl-form__suivant, .kl-form--compacte .kl-form__envoyer{ padding: 12px 18px; font-size: 14px; min-height: 46px; } .kl-form--compacte .kl-form__rgpd{ font-size: 12px; } /* Formulaire court (sortie / atelier) */ .kl-carte-form{ padding: 26px 28px; border-radius: var(--r-l); background: var(--blanc); box-shadow: var(--ombre-form); } .kl-carte-form__titre{ margin: 0 0 14px; font-family: var(--titre); font-weight: 800; font-size: 24px; line-height: 1.2; color: var(--nuit); } .kl-carte-form .kl-form{ padding: 0; box-shadow: none; border-radius: 0; } .kl-form-court__lignes{ display: grid; grid-template-columns: 1fr; gap: 12px; align-items: end; } .kl-form-court__lignes .kl-form__champ{ margin: 0; } .kl-form-court .kl-bouton{ min-height: 52px; } .kl-form-court .kl-form__succes{ text-align: left; } @media (min-width: 760px){ .kl-form-court__lignes{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .kl-form-court .kl-bouton{ grid-column: 1 / -1; justify-self: start; } } /* Contact : objet */ .kl-form__objet{ border: 0; margin: 0 0 16px; padding: 0; } .kl-form__objet legend{ margin-bottom: 8px; padding: 0; font-weight: 700; font-size: 14px; color: var(--nuit); } /* ========================================================================== 9. RUBRIQUE, DOSSIERS, ACTUALITÉS, LISTES ========================================================================== */ .kl-alaune{ position: relative; z-index: 2; display: grid; grid-template-columns: 7fr 5fr; overflow: hidden; margin-top: -96px; border-radius: var(--r-l); background: var(--blanc); color: var(--encre); box-shadow: var(--ombre-form); text-decoration: none; } .kl-alaune:hover{ color: var(--encre); } .kl-alaune__img{ display: block; min-height: 340px; background: var(--givre); } .kl-alaune__img img{ width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; } .kl-alaune__texte{ display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; padding: 32px 40px; } .kl-alaune__texte .kl-surtitre{ margin: 0; } .kl-alaune__titre{ font-family: var(--titre); font-weight: 800; font-size: 30px; line-height: 1.2; color: var(--nuit); } .kl-alaune__chapo{ font-size: 16px; line-height: 1.6; } .kl-alaune .kl-bouton{ margin-top: 6px; } .kl-alaune:hover .kl-alaune__titre{ text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } .kl-depliant{ margin-top: 48px; border-radius: var(--r-m); background: var(--givre); } .kl-depliant summary{ cursor: pointer; list-style: none; padding: 18px 56px 18px 22px; position: relative; font-family: var(--titre); font-weight: 700; font-size: 19px; color: var(--nuit); } .kl-depliant summary::-webkit-details-marker{ display: none; } .kl-depliant summary::after{ content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; background: var(--blanc); color: var(--cuivre); font-weight: 800; font-size: 22px; line-height: 28px; text-align: center; } .kl-depliant[open] summary::after{ content: "\2212"; } .kl-depliant .kl-prose{ padding: 0 22px 20px; } .kl-pagination{ display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 40px; } .kl-pagination:empty{ display: none; } .kl-pagination .page-numbers{ display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 22px; border: 2px solid var(--bord); color: var(--nuit); font-weight: 700; text-decoration: none; } .kl-pagination .page-numbers.current{ background: var(--nuit); border-color: var(--nuit); color: var(--blanc); } .kl-pagination a.page-numbers:hover{ border-color: var(--abricot); } .kl-vide{ padding: 32px; border-radius: var(--r-m); background: var(--givre); text-align: center; } .kl-tuiles-rubriques{ position: relative; z-index: 2; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin-top: -88px; } .kl-tuile-rubrique{ display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-l); background: var(--blanc); color: var(--nuit); box-shadow: var(--ombre-form); text-decoration: none; transition: transform var(--transition); } .kl-tuile-rubrique:hover{ transform: translateY(-3px); color: var(--nuit); } .kl-tuile-rubrique__img{ display: block; aspect-ratio: 16 / 10; background: var(--givre); } .kl-tuile-rubrique__img img{ width: 100%; height: 100%; object-fit: cover; } .kl-tuile-rubrique .kl-tuile-picto--carte{ width: 48px; height: 48px; flex-basis: 48px; margin: -24px 0 0 20px; position: relative; } .kl-tuile-rubrique .kl-tuile-picto--carte .kl-ico{ width: 26px; height: 26px; } .kl-tuile-rubrique__nom{ padding: 10px 20px 0; font-family: var(--titre); font-weight: 800; font-size: 21px; line-height: 1.2; } .kl-tuile-rubrique__compte{ padding: 2px 20px 18px; font-size: 14px; color: var(--gris); } .kl-dossiers__tete{ display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 24px; } .kl-dossiers__tete .kl-titre-section{ margin: 0; font-size: 34px; flex: 1 1 auto; } .kl-dossiers__compte{ font-family: var(--texte); font-weight: 500; font-size: 16px; color: var(--gris); margin-left: 6px; } .kl-liste{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; } .kl-liste__item{ display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; padding: 10px; border-radius: var(--r-m); color: var(--encre); text-decoration: none; transition: background var(--transition); } .kl-liste__item:hover{ background: rgba(255,255,255,.75); color: var(--encre); } .kl-bande--blanc .kl-liste__item:hover{ background: var(--givre); } .kl-liste__img{ display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--r-m); background: var(--bord); } .kl-liste__img img{ width: 100%; height: 100%; object-fit: cover; } .kl-liste__corps{ display: flex; flex-direction: column; gap: 2px; min-width: 0; } .kl-liste__date{ font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--cuivre); } .kl-liste__titre{ font-family: var(--titre); font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--nuit); } .kl-liste__meta{ font-size: 13px; color: var(--gris); } .kl-deux-colonnes{ display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--gouttiere); align-items: start; } .kl-deux-colonnes .kl-liste{ grid-template-columns: 1fr; } .kl-page__cote--simple{ padding: 0; } .kl-suite{ padding-block: 72px; } /* ========================================================================== 10. PAGES ANNEXES ========================================================================== */ .kl-equipe{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gouttiere); margin-top: 32px; } .kl-equipe__membre{ display: flex; flex-direction: column; align-items: center; text-align: center; padding: 32px 28px; border-radius: var(--r-l); background: var(--givre); } .kl-equipe__membre .kl-rond-photo{ width: 200px; height: 200px; border: 6px solid var(--abricot); box-shadow: 0 0 0 8px var(--nuit); margin-bottom: 20px; } .kl-equipe__nom{ margin: 0; font-size: 24px; } .kl-equipe__role{ margin: 2px 0 12px; font-weight: 700; font-size: 15px; color: var(--cuivre); } .kl-equipe__bio{ font-size: 16px; line-height: 1.6; } .kl-equipe__pastilles{ display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 14px; } .kl-puce-givre{ padding: 4px 12px; border-radius: 20px; background: var(--blanc); color: var(--nuit); font-weight: 700; font-size: 13px; } .kl-etapes{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 56px 0 0; padding: 0; } .kl-etapes__carte{ position: relative; padding: 44px 24px 26px; border-radius: var(--r-l); background: var(--givre); text-align: center; } .kl-bande--givre-doux .kl-etapes__carte{ background: var(--blanc); } .kl-etapes__rond{ position: absolute; left: 50%; top: -28px; transform: translateX(-50%); display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--abricot); color: var(--nuit); box-shadow: 0 0 0 6px var(--blanc); } .kl-etapes__rond .kl-ico{ width: 28px; height: 28px; } .kl-etapes__num{ display: block; margin-bottom: 4px; font-family: var(--titre); font-weight: 800; font-size: 14px; letter-spacing: .12em; color: var(--cuivre); } .kl-etapes__titre{ margin: 0 0 8px; font-family: var(--titre); font-weight: 800; font-size: 20px; line-height: 1.25; color: var(--nuit); } .kl-etapes__carte p:last-child{ margin: 0; font-size: 15px; line-height: 1.55; } .kl-deux-cartes{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--gouttiere); } .kl-deux-cartes__carte{ padding: 32px; border-radius: var(--r-l); background: var(--blanc); } .kl-deux-cartes__titre{ margin: 0 0 16px; font-family: var(--titre); font-weight: 800; font-size: 28px; line-height: 1.2; color: var(--nuit); } .kl-ligne-picto{ display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--givre); font-size: 16px; line-height: 1.55; } .kl-ligne-picto:last-child{ border-bottom: 0; } .kl-ligne-picto .kl-ico{ width: 24px; height: 24px; margin-top: 1px; } .kl-ligne-picto--non .kl-ico{ color: var(--cuivre); } .kl-ligne-picto--oui .kl-ico{ color: var(--dispo); } .kl-nest-pas__grille{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gouttiere); margin-top: 24px; } .kl-nest-pas__grille p{ display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; margin: 0; font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.88); } .kl-nest-pas__grille strong{ color: var(--blanc); } .kl-nest-pas__grille .kl-ico{ width: 26px; height: 26px; color: var(--abricot); grid-row: span 2; } .kl-bande-capture{ position: relative; overflow: hidden; background: var(--abricot); color: var(--nuit); padding-block: 64px; } .kl-bande-capture__inner{ position: relative; display: flex; align-items: center; justify-content: space-between; gap: 40px; } .kl-bande-capture__inner > div{ position: relative; z-index: 1; max-width: 760px; } .kl-bande-capture__inner .kl-bouton{ position: relative; z-index: 1; flex: 0 0 auto; } .kl-bande-capture__titre{ margin: 0 0 8px; font-size: 36px; line-height: 1.15; } .kl-bande-capture p{ margin: 0; font-weight: 500; font-size: 18px; color: var(--nuit); } .kl-bande-capture .kl-pans{ left: auto; right: 0; bottom: 0; top: auto; width: 220px; height: 150px; opacity: .9; } .kl-contact{ display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gouttiere); align-items: start; margin-top: -24px; position: relative; z-index: 2; } .kl-contact__cote{ overflow: hidden; border-radius: var(--r-l); background: var(--givre); } .kl-contact__img img{ width: 100%; aspect-ratio: 3 / 2; object-fit: cover; } .kl-contact__texte{ padding: 24px 28px 26px; } .kl-contact__titre{ margin: 0 0 8px; font-family: var(--titre); font-weight: 800; font-size: 22px; color: var(--nuit); } .kl-contact__texte p{ font-size: 16px; line-height: 1.6; } .kl-contact__texte .kl-legende{ text-align: left; margin-top: 14px; } .kl-carte-form--contact .kl-form__nav{ justify-content: flex-start !important; } .kl-bandeau--404{ padding: 56px 0 72px; } .kl-404{ display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: center; } .kl-404__code{ margin: 0; font-family: var(--titre); font-weight: 800; font-size: 160px; line-height: .9; color: var(--nuit); } .kl-404 h1{ font-size: 44px; margin: 8px 0 12px; } .kl-404__recherche{ max-width: 520px; margin: 22px 0 16px; } .kl-404__recherche .kl-recherche{ margin: 0; } .kl-404__liens{ display: flex; flex-wrap: wrap; gap: 10px; } .kl-404__img img{ width: 320px; height: 320px; border-radius: 50%; object-fit: cover; border: 8px solid var(--nuit); } /* ========================================================================== 11. PIED DE PAGE — abricot plein, texte nuit ========================================================================== */ .kl-footer{ position: relative; overflow: hidden; background: var(--abricot); color: var(--nuit); } .kl-footer .kl-pans{ width: 240px; height: 64px; } .kl-footer__haut{ padding-top: 96px !important; } .kl-footer__haut{ position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: var(--gouttiere); padding-block: 72px 56px; } .kl-footer__marque p{ max-width: 42ch; margin: 18px 0 20px; font-weight: 500; font-size: 16px; line-height: 1.6; color: var(--nuit); } .kl-footer__titre{ display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-family: var(--titre); font-weight: 800; font-size: 20px; line-height: 1.2; color: var(--nuit); } .kl-footer__titre::before{ content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blanc); } .kl-footer__liste{ list-style: none; margin: 0; padding: 0; } .kl-footer__liste li{ margin: 0 0 8px; } .kl-footer__liste a{ font-weight: 500; font-size: 16px; line-height: 1.4; color: var(--nuit); text-decoration: none; } .kl-footer__liste a:hover{ text-decoration: underline; color: var(--nuit); } .kl-footer__rappel{ display: flex; flex-wrap: wrap; gap: 8px; max-width: 460px; } .kl-footer__rappel-titre{ flex-basis: 100%; margin: 0 0 2px; font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--nuit); } .kl-footer__rappel input[type="text"], .kl-footer__rappel input[type="tel"]{ flex: 1 1 140px; min-width: 0; min-height: 46px; padding: 10px 14px; border: 2px solid var(--nuit); border-radius: var(--r-s); background: var(--blanc); color: var(--encre); font-size: 16px; } .kl-footer__rappel input::placeholder{ color: #5A6272; } .kl-footer__rappel .kl-bouton{ min-height: 46px; padding: 10px 18px; font-size: 14px; } .kl-footer__rappel .kl-form__succes{ flex-basis: 100%; text-align: left; padding: 8px 0 0; font-weight: 700; } .kl-footer__rappel.is-envoye input, .kl-footer__rappel.is-envoye .kl-bouton{ display: none; } .kl-footer__rappel .kl-form__erreur-globale{ flex-basis: 100%; margin: 0; } .kl-footer__bas{ position: relative; z-index: 1; background: var(--nuit); color: rgba(255,255,255,.85); font-size: 14px; } .kl-footer__bas-inner{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; min-height: 56px; padding-block: 12px; } .kl-footer__utiles{ display: flex; flex-wrap: wrap; gap: 6px 20px; } .kl-footer__utiles a, .kl-footer__haut-page{ color: rgba(255,255,255,.88); text-decoration: none; font-weight: 500; } .kl-footer__utiles a:hover, .kl-footer__haut-page:hover{ color: var(--abricot); text-decoration: underline; } .kl-footer__haut-page{ display: inline-flex; align-items: center; gap: 6px; } .kl-footer__haut-page .kl-ico{ width: 16px; height: 16px; } /* ========================================================================== 12. RESPONSIVE ========================================================================== */ @media (max-width: 1240px){ .kl-page{ grid-template-columns: minmax(0, 1fr) 340px; } .kl-deux-colonnes{ grid-template-columns: minmax(0, 1fr) 340px; } .kl-hero__grille{ grid-template-columns: 340px minmax(0, 1fr); } .kl-hero h1{ font-size: 44px; } .kl-footer__haut{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .kl-footer__marque{ grid-column: 1 / -1; } } @media (max-width: 1100px){ .kl-nav, .kl-loupe{ display: none; } .kl-burger{ display: inline-flex; } .kl-header__inner{ justify-content: space-between; } .kl-hero__grille{ grid-template-columns: 1fr; min-height: 0; } .kl-hero__portrait{ display: none; } .kl-hero__signature{ display: flex; align-items: center; gap: 12px; margin-top: 20px; color: var(--nuit); text-decoration: none; font-size: 15px; line-height: 1.4; } .kl-hero__signature img{ width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 3px solid var(--nuit); } .kl-voulez__grille, .kl-parcours-grille, .kl-etapes{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .kl-etapes{ row-gap: 48px; } .kl-page--trouver ~ .kl-bande .kl-parcours{ flex-basis: calc((100% - 24px) / 2); } .kl-actu__grille{ grid-template-columns: 1fr; gap: 32px; } .kl-actu__texte{ display: block; position: static; height: auto; border-left: none; padding-left: 0; } .kl-actu__texte .kl-surtitre{ margin-bottom: 10px; } .kl-actu__texte .kl-titre-section{ font-size: 32px; margin-bottom: 16px; } .kl-actu__texte p{ margin-bottom: 24px; max-width: none; } .kl-actu__texte .kl-bouton{ margin-top: 0; } .kl-equipe{ grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; } } @media (max-width: 1023px){ .kl-page{ --chev: 40px; grid-template-columns: minmax(0, 1fr); } .kl-page--projet{ --chev: 60px; } .kl-page__cote{ display: none; } .kl-deux-colonnes{ grid-template-columns: 1fr; } .kl-deux-colonnes .kl-page__cote{ display: block; } .kl-page__une img{ height: auto; aspect-ratio: 3 / 2; max-height: 56vh; } .kl-sommaire-mobile{ display: block; margin: 0 0 28px; border-radius: var(--r-m); background: var(--givre); } .kl-sommaire-mobile summary{ display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 18px; cursor: pointer; list-style: none; font-family: var(--titre); font-weight: 800; font-size: 18px; color: var(--nuit); } .kl-sommaire-mobile summary::-webkit-details-marker{ display: none; } .kl-sommaire-mobile summary .kl-ico{ width: 22px; height: 22px; color: var(--cuivre); } .kl-sommaire-mobile summary span{ font-family: var(--texte); font-weight: 500; font-size: 15px; color: var(--gris); } .kl-sommaire-mobile ol{ list-style: none; margin: 0; padding: 0 18px 14px; } .kl-sommaire-mobile a{ display: block; padding: 8px 0; border-top: 1px solid #D3E4EE; color: var(--nuit); font-weight: 500; font-size: 15px; text-decoration: none; } .kl-barre-mobile{ position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 400; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; border-radius: var(--r-m); background: var(--nuit); color: var(--blanc); font-family: var(--titre); font-weight: 800; font-size: 16px; letter-spacing: .02em; text-transform: uppercase; text-decoration: none; box-shadow: 0 8px 24px rgba(28,42,63,.35); transform: translateY(140%); transition: transform 220ms ease-out; } .kl-barre-mobile .kl-ico{ width: 18px; height: 18px; } .kl-barre-mobile.is-visible{ transform: none; } .kl-barre-mobile:hover{ color: var(--blanc); } .kl-rangee__tete{ grid-template-columns: 1fr; gap: 16px; } .kl-contact{ grid-template-columns: 1fr; } .kl-deux-cartes{ grid-template-columns: 1fr; } .kl-nest-pas__grille{ grid-template-columns: 1fr; gap: 20px; } .kl-alaune{ grid-template-columns: 1fr; } .kl-alaune__img{ min-height: 0; } .kl-alaune__img img{ aspect-ratio: 16 / 9; } .kl-alaune__texte{ padding: 24px; } .kl-qui__grille{ grid-template-columns: 1fr; gap: 32px; } .kl-qui__photo{ order: -1; } .kl-encart-sable{ grid-template-columns: 1fr; } .kl-encart-sable__img img{ min-height: 0; aspect-ratio: 16 / 7; } .kl-404{ grid-template-columns: 1fr; } .kl-404__img{ display: none; } .kl-planche-projets__grille{ grid-template-columns: 1fr 1fr 1fr; } } @media (max-width: 760px){ body{ font-size: 17px; line-height: 1.7; } h1, .kl-bandeau h1{ font-size: 32px; line-height: 1.16; } .kl-titre-section, .kl-titre-bicolore{ font-size: 30px; line-height: 1.17; } .kl-bande{ padding-block: 48px; } .kl-bande--compacte{ padding-block: 40px; } .kl-rangee{ padding-block: 48px; } .kl-bandeau{ padding: 20px 0 40px; } .kl-bandeau--chevauche{ padding-bottom: 88px; } .kl-alaune{ margin-top: -64px; } .kl-bandeau__chapo{ font-size: 17px; } .kl-bandeau__auteur{ grid-template-columns: 1fr; gap: 20px; } .kl-rond-photo{ width: 140px; height: 140px; } .kl-header__inner{ height: 64px; gap: 8px; } .kl-logo{ gap: 8px; } .kl-logo__symbole{ width: 38px; height: 38px; flex-basis: 38px; } .kl-logo__nom{ font-size: 21px; } .kl-logo__mention{ display: none; } .kl-header__actions{ gap: 8px; } .kl-header__cta{ min-height: 44px; padding: 10px 14px; font-size: 14px; gap: 6px; } .kl-header__cta-long{ display: none; } .kl-header__cta-court{ display: inline; } .kl-header__cta .kl-ico{ width: 16px; height: 16px; } .kl-hero__contenu{ padding: 24px 0 36px; } .kl-hero h1{ font-size: 32px; line-height: 1.16; margin-bottom: 10px; } .kl-hero__chapo{ font-size: 17px; line-height: 1.55; margin-bottom: 18px; } .kl-hero__form{ order: 4; } .kl-hero__preuves{ order: 5; flex-direction: column; gap: 8px; margin: 20px 0 0; } .kl-hero__signature{ order: 6; } .kl-hero .kl-pans{ width: 140px; height: 100px; opacity: .8; } .kl-form{ padding: 20px 18px 18px; } .kl-form__question{ font-size: 21px; } .kl-form--hero .kl-form__vignettes, .kl-form__vignettes, .kl-form__options{ grid-template-columns: 1fr 1fr; gap: 10px; } .kl-choix{ min-height: 96px; padding: 14px 8px 12px; } .kl-choix__rond{ width: 44px; height: 44px; flex-basis: 44px; } .kl-choix__rond .kl-ico{ width: 24px; height: 24px; } .kl-choix__libelle{ font-size: 15px; } .kl-form__suivant, .kl-form__envoyer{ padding: 14px 22px; } .kl-chiffres, .kl-chiffres--3{ grid-template-columns: 1fr 1fr; gap: 28px 16px; } .kl-chiffres__nombre{ font-size: 36px; } .kl-voulez__grille{ gap: 12px; } .kl-voulez__tuile{ padding: 14px 8px; } .kl-voulez__tuile .kl-ico{ width: 32px; height: 32px; } .kl-voulez__l1{ font-size: 20px; } .kl-voulez__l2{ font-size: 16px; } .kl-cartes{ grid-template-columns: 1fr; gap: 24px; } .kl-cartes--defile{ display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); scroll-padding-inline: var(--pad); overscroll-behavior-x: contain; } .kl-cartes--defile > .kl-carte{ flex: 0 0 84%; scroll-snap-align: start; } .kl-carte--large{ grid-column: auto; flex-direction: column; } .kl-carte--large .kl-carte--capture__haut{ width: auto; aspect-ratio: 16 / 10; border-radius: var(--r-m) var(--r-m) 0 0; } .kl-parcours-grille, .kl-etapes, .kl-planche-projets__grille{ grid-template-columns: 1fr; } .kl-page--trouver ~ .kl-bande .kl-parcours{ flex-basis: 100%; } .kl-actu__vignettes{ grid-template-columns: 1fr; } .kl-page__tete{ padding: 18px 0 28px; } .kl-page__tete h1{ font-size: 30px; line-height: 1.17; } .kl-page__chapo{ font-size: 17px; } .kl-prose{ font-size: 17px; line-height: 1.7; } .kl-prose h2{ font-size: 25px; line-height: 1.24; margin-top: 44px; } .kl-prose h3{ font-size: 20px; } .kl-prose blockquote{ padding-left: 44px; font-size: 20px; } .kl-prose blockquote::before{ font-size: 52px; } .kl-encart-capture{ grid-template-columns: 1fr; } .kl-encart-capture__img img{ min-height: 0; aspect-ratio: 16 / 8; } .kl-encart-capture__corps{ padding: 20px; } .kl-quiz{ padding: 20px; } .kl-quiz__choix{ grid-template-columns: 1fr; } /* Détail mineur (jugement passe 2) : le sous-texte retombait sous le picto, pas sous le libellé — une grille 2 colonnes (picto / texte) aligne définitivement les deux lignes de texte sur le même retrait, quelle que soit leur longueur. */ .kl-choix-carte{ display: grid; grid-template-columns: 52px 1fr; grid-template-areas: "rond libelle" "rond precision"; align-items: center; column-gap: 12px; row-gap: 2px; text-align: left; } .kl-choix-carte__rond{ grid-area: rond; margin: 0; } .kl-choix-carte__libelle{ grid-area: libelle; } .kl-choix-carte__precision{ grid-area: precision; } .kl-auteur{ grid-template-columns: 1fr; padding: 28px 22px; gap: 14px; } .kl-liste{ grid-template-columns: 1fr; } .kl-liste__item{ grid-template-columns: 80px minmax(0, 1fr); gap: 12px; padding: 8px 0; } .kl-dossiers__tete .kl-titre-section{ font-size: 26px; } .kl-tuiles-rubriques{ grid-template-columns: 1fr; margin-top: -56px; } .kl-sommaire-mobile{ margin-bottom: 24px; } .kl-bande-capture__inner{ flex-direction: column; align-items: flex-start; gap: 20px; } .kl-bande-capture__titre{ font-size: 28px; } .kl-deux-cartes__carte{ padding: 22px; } .kl-deux-cartes__titre{ font-size: 24px; } .kl-footer__haut{ grid-template-columns: 1fr 1fr; padding-block: 48px 36px; gap: 32px 20px; } .kl-footer__bas-inner{ flex-direction: column; align-items: flex-start; padding-block: 16px; } .kl-404__code{ font-size: 110px; } .kl-404 h1{ font-size: 32px; } .kl-pans{ display: none; } .sb-maillage ul{ grid-template-columns: 1fr; } sbs-tarif{ grid-template-columns: minmax(0, 1fr) auto; } .sbs_tarif_barre{ grid-column: 1 / -1; order: 3; } sbs-etape{ grid-template-columns: minmax(0, 1fr); } .sbs_etape_desc{ grid-column: 1; } sbs-jauges{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 420px){ .kl-footer__haut{ grid-template-columns: 1fr; } .kl-logo__nom{ font-size: 20px; } .kl-mon-projet__lignes li{ grid-template-columns: 22px 80px minmax(0, 1fr); } sbs-jauges{ grid-template-columns: 1fr; } .kl-carte-destinations__cadre{ padding: 20px 14px 28px; } .kl-carte-destinations__label{ font-size: 11px; padding: 4px 8px; } } @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } @media print{ .kl-header, .kl-footer, .kl-page__cote, .kl-barre-mobile, .kl-encart-capture, .kl-quiz{ display: none !important; } } /* ========================================================================== 13. CORRECTIFS APRÈS RENDU REGARDÉ (24/09) ========================================================================== */ /* composants sombres du socle dans le texte : jamais l'encre nuit ni le cuivre des liens du corps */ .kl-prose sbs-jauges strong, .kl-prose sbs-tarifs strong, .kl-prose sbs-frise strong, .kl-prose sbs-lieu strong, .kl-prose .sbs_jauges_titre, .kl-prose .sbs_tarifs_titre, .kl-prose .sbs_frise_titre{ color: var(--blanc); } .kl-prose sbs-jauges a, .kl-prose sbs-tarifs a, .kl-prose sbs-frise a, .kl-prose sbs-lieu a{ color: var(--abricot); } .kl-prose sbs-jauges, .kl-prose sbs-tarifs, .kl-prose sbs-frise, .kl-prose sbs-lieu{ max-width: none; } /* maillage de fin d'article : cartes de liens, pas une liste à puces */ .sb-maillage p:empty{ display: none; } .sb-maillage ul > li{ padding: 0 !important; } .sb-maillage ul > li::before{ display: none !important; } .sb-maillage ul a{ display: flex; align-items: center; min-height: 52px; height: 100%; padding: 10px 16px; border-radius: var(--r-m); background: var(--blanc); color: var(--nuit); text-decoration: none; font-weight: 700; font-size: 15px; line-height: 1.35; border-left: 4px solid var(--abricot); } .sb-maillage ul a:hover{ box-shadow: var(--ombre-carte); color: var(--nuit); } .sb-maillage ul{ gap: 10px 14px !important; } /* sur l'aplat abricot, le sur-titre passe en nuit (cuivre/abricot = 2,7:1) */ .kl-page__tete .kl-surtitre, .kl-bandeau .kl-surtitre, .kl-hero .kl-surtitre{ color: var(--nuit); } /* bande de capture de fin de page : sable (jamais deux aplats abricot qui se touchent avec le pied) */ .kl-bande-capture{ background: var(--sable); } .kl-bande-capture .kl-pans{ display: none; } /* carte de capture élargie : photo à gauche, texte centré */ .kl-carte--capture__haut{ position: relative; overflow: hidden; } .kl-carte--capture__haut img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; } .kl-carte--capture__haut .kl-tuile-picto{ position: relative; z-index: 1; } .kl-carte--large .kl-carte--capture__haut{ width: 46%; } .kl-carte--large .kl-carte__corps{ justify-content: center; gap: 12px; } .kl-carte--large .kl-carte__titre{ font-size: 26px; } .kl-carte--large .kl-carte__extrait{ font-size: 16px; -webkit-line-clamp: 4; } .kl-carte--large .kl-bouton{ margin-top: 8px; } .kl-deux-colonnes > .kl-page__cote{ grid-column: auto; grid-row: auto; } /* ========================================================================== v2 PASSE 2 (24/09/2026) — corrections du jugement JUGEMENT-V2-passe1.md ========================================================================== */ /* 1 + 3 — Composant « Sources » (article et pages projet) : givre, une source par rangée, aucun lien. */ .kl-sources{ margin: 40px 0 0; padding: 24px 28px; border-radius: var(--r-m); background: var(--givre); color: var(--encre); } .kl-prose .kl-sources{ max-width: none; margin-top: 48px; } .kl-sources__titre, .kl-prose h2.kl-sources__titre{ margin: 0 0 6px; padding: 0; font-family: var(--titre); font-weight: 800; font-size: 18px; line-height: 1.3; color: var(--nuit); } .kl-prose h2.kl-sources__titre::before{ display: none; } .kl-sources__intro{ margin: 0 0 6px; font-size: 15px; line-height: 1.5; color: var(--gris); } .kl-sources__liste{ display: flex; flex-direction: column; } .kl-sources__ligne{ display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--bord); font-size: 15px; line-height: 1.5; } .kl-sources__ligne:last-child{ border-bottom: 0; padding-bottom: 0; } .kl-sources__org{ font-family: var(--texte); font-weight: 700; color: var(--nuit); } .kl-sources__doc{ flex: 1 1 260px; min-width: 0; color: var(--encre); overflow-wrap: anywhere; } .kl-sources__date{ margin-left: auto; white-space: nowrap; font-size: 14px; color: var(--gris); } /* 2 — Pages projet : pas numérotés (rond abricot 36 px) au lieu des puces. */ .kl-pas{ display: flex; flex-direction: column; gap: 14px; margin: 8px 0 1.6em; } .kl-pas__ligne{ display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: start; } .kl-pas__num{ display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--abricot); color: var(--nuit); font-family: var(--titre); font-weight: 800; font-size: 18px; line-height: 1; } .kl-pas__ligne > p{ margin: 6px 0 0; } /* 4 — « Dans la même rubrique » : grille de cartes, sans liste ni retrait. */ .kl-prose > .kl-maillage{ max-width: none; margin: 48px 0 0; padding: 24px; border-radius: var(--r-l); background: var(--givre); } .kl-prose .kl-maillage h2.kl-maillage__h{ margin: 0 0 16px; padding: 0; font-size: 22px; } .kl-prose .kl-maillage h2.kl-maillage__h::before{ display: none; } .kl-maillage__grille{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .kl-maillage__grille--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .kl-prose a.kl-maillage__carte{ display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-m); background: var(--blanc); box-shadow: var(--ombre-carte); color: var(--nuit); text-decoration: none; transition: transform var(--transition), box-shadow var(--transition); } .kl-prose a.kl-maillage__carte:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(28,42,63,.14); } .kl-maillage__img{ display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bord); } .kl-maillage__img img{ display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; } .kl-maillage__corps{ display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; } .kl-maillage__rub{ font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cuivre); } .kl-maillage__titre{ font-family: var(--titre); font-weight: 700; font-size: 17px; line-height: 1.3; } .kl-maillage__temps{ font-size: 14px; color: var(--gris); } /* Détail mineur (jugement passe 2) : flux inline normal (pas flex) + espace insécable côté PHP, pour que la flèche ne se détache jamais du texte quand celui-ci passe sur 2 lignes en mobile (un flex-item séparé restait centré verticalement, seul au bord droit). */ .kl-prose a.kl-maillage__tout{ display: inline-block; margin-top: 16px; font-weight: 700; color: var(--nuit); text-decoration: underline; text-underline-offset: 4px; } .kl-maillage__tout .kl-ico{ display: inline-block; width: 18px; height: 18px; margin-left: 6px; vertical-align: -4px; } /* 5 — En-tête : « Stages & voyages » en pastille claire ; le soulignement nuit est réservé à la page active. */ .kl-nav__item--fort .kl-nav__lien{ padding: 8px 14px; border-radius: var(--r-m); background: rgba(255,255,255,.35); } .kl-nav__item--fort .kl-nav__lien::after{ left: 14px; right: 14px; bottom: 3px; height: 3px; background: var(--nuit); transform: scaleX(0); } .kl-nav__item--fort .kl-nav__lien:hover::after, .kl-nav__item--fort.is-actif .kl-nav__lien::after{ transform: scaleX(1); } .kl-nav__item--fort .kl-nav__lien:hover{ background: rgba(255,255,255,.5); } /* 6 — À propos, « Ce que Kris Laudato n'est pas » : pans dans le coin libre, 3 colonnes au même écart. */ .kl-nest-pas-bande .kl-pans{ top: 0; right: 0; bottom: auto; left: auto; width: 200px; height: 120px; transform: none; } .kl-nest-pas-bande .kl-container{ position: relative; z-index: 1; } .kl-nest-pas__grille{ align-items: start; } .kl-nest-pas__item{ display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; } .kl-nest-pas__item .kl-ico{ width: 26px; height: 26px; color: var(--abricot); } .kl-nest-pas__grille .kl-nest-pas__item p{ display: block; margin: 0; font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.88); } .kl-nest-pas__grille .kl-nest-pas__item p.kl-nest-pas__titre{ margin: 0 0 6px; font-weight: 700; color: var(--blanc); } /* 8 — Accueil, bande actualité : une seule grande carte centrée quand il y a moins de 3 actus. */ .kl-actu__vignettes--seule{ grid-template-columns: 1fr; max-width: 640px; } /* 9 — Pied de page : mini-formulaire avec libellés visibles. */ .kl-footer__rappel{ align-items: flex-end; } .kl-footer__rappel-champs{ display: flex; flex: 1 1 280px; gap: 8px; min-width: 0; } .kl-footer__rappel-champ{ display: flex; flex-direction: column; gap: 4px; flex: 1 1 0; min-width: 0; } .kl-footer__label{ font-family: var(--texte); font-weight: 700; font-size: 14px; line-height: 1.2; color: var(--nuit); } .kl-footer__rappel .kl-footer__rappel-champ input{ flex: none; width: 100%; } .kl-footer__rappel.is-envoye .kl-footer__rappel-champs{ display: none; } /* Détail — hero d'accueil : les pans (signature de famille) grands et en haut à GAUCHE, comme la référence, au-dessus de la tête du portrait : jamais sous le titre ni le formulaire. */ .kl-hero .kl-pans{ top: 0; bottom: auto; left: 0; right: auto; width: 300px; height: 200px; transform: scaleX(-1); z-index: 0; } .kl-hero__grille{ z-index: 1; } @media (max-width: 1100px){ .kl-hero .kl-pans{ display: none; } } @media (max-width: 760px){ .kl-sources{ padding: 20px 18px; } .kl-sources__date{ margin-left: 0; } .kl-maillage__grille, .kl-maillage__grille--2{ grid-template-columns: 1fr; } .kl-prose > .kl-maillage{ padding: 18px; } .kl-nav__item--fort .kl-nav__lien{ padding: 8px 10px; } .kl-actu__vignettes--seule{ max-width: none; } }