/* * Fiche de brief — feuille de style unique (aiguillage + formulaire + fin). * * Parti pris : blanc et noir, beaucoup d'air, aucune fioriture. Le formulaire * est long par nature ; tout ce qui n'aide pas à répondre est retiré. * Pas d'avant-titre en petites capitales au-dessus des titres (cliché proscrit * dans la charte) : les titres se suffisent. * * Les couleurs viennent de marque.js (variables CSS posées sur ), les * valeurs ci-dessous ne servent que de repli si le script ne charge pas. */ :root { --encre: #0a0a0a; --encre-douce: #5a5a5a; --encre-tenue: #8e8e8e; --papier: #ffffff; --papier-doux: #f6f6f5; --filet: #e4e4e2; --accent: #0a0a0a; --alerte: #b4342a; --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --titre: 'Space Grotesk', var(--sans); --gouttiere: clamp(20px, 5vw, 48px); --colonne: 680px; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--sans); font-weight: 400; font-size: 16px; line-height: 1.6; color: var(--encre); background: var(--papier); -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--titre); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; margin: 0; } a { color: inherit; } button { font: inherit; cursor: pointer; } /* ───────────────────────────────────────────────────────────────────────── En-tête, commune à toutes les pages ───────────────────────────────────────────────────────────────────────── */ .tete { position: sticky; top: 0; z-index: 10; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--filet); } .tete__ligne { max-width: 1100px; margin: 0 auto; padding: 14px var(--gouttiere); display: flex; align-items: center; justify-content: space-between; gap: 16px; } .tete__marque { font-family: var(--titre); font-size: 15px; font-weight: 600; letter-spacing: 0.01em; text-decoration: none; } .tete__etat { font-size: 12.5px; color: var(--encre-tenue); font-variant-numeric: tabular-nums; } /* Barre de progression, collée sous l'en-tête */ .jauge { height: 2px; background: var(--filet); overflow: hidden; } .jauge__part { height: 100%; width: 0; background: var(--accent); transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1); } /* ───────────────────────────────────────────────────────────────────────── Page d'aiguillage ───────────────────────────────────────────────────────────────────────── */ .accueil { max-width: 860px; margin: 0 auto; padding: clamp(56px, 12vh, 120px) var(--gouttiere) 96px; } .accueil__titre { font-size: clamp(32px, 5.4vw, 50px); max-width: 15ch; } .accueil__intro { margin: 24px 0 0; font-size: clamp(16px, 1.9vw, 18px); color: var(--encre-douce); max-width: 58ch; } .choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: clamp(40px, 6vh, 64px); } .choix__carte { display: block; padding: 30px 28px 26px; border: 1px solid var(--filet); border-radius: 14px; text-decoration: none; background: var(--papier); transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .choix__carte:hover, .choix__carte:focus-visible { border-color: var(--encre); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(10, 10, 10, 0.06); } .choix__num { font-family: var(--titre); font-size: 13px; color: var(--encre-tenue); font-variant-numeric: tabular-nums; } .choix__titre { font-size: 23px; margin-top: 12px; } .choix__texte { margin: 10px 0 0; color: var(--encre-douce); font-size: 14.5px; } .choix__duree { margin-top: 20px; font-size: 12.5px; color: var(--encre-tenue); } .accueil__note { margin-top: clamp(36px, 6vh, 56px); padding-top: 24px; border-top: 1px solid var(--filet); font-size: 13.5px; color: var(--encre-tenue); max-width: 62ch; } /* ───────────────────────────────────────────────────────────────────────── Formulaire ───────────────────────────────────────────────────────────────────────── */ .feuille { max-width: var(--colonne); margin: 0 auto; padding: clamp(40px, 8vh, 76px) var(--gouttiere) 140px; } .section__rang { font-size: 12.5px; color: var(--encre-tenue); font-variant-numeric: tabular-nums; margin-bottom: 10px; } .section__titre { font-size: clamp(26px, 4.2vw, 34px); } .section__chapeau { margin: 14px 0 0; color: var(--encre-douce); font-size: 15.5px; max-width: 56ch; } .champs { margin-top: clamp(34px, 5vh, 48px); display: flex; flex-direction: column; gap: 34px; } .champ__intitule { display: block; font-size: 16px; font-weight: 500; line-height: 1.45; } .champ__requis { color: var(--encre-tenue); font-weight: 400; } .champ__aide { margin: 6px 0 0; font-size: 13.5px; color: var(--encre-tenue); line-height: 1.5; } .champ__saisie { margin-top: 14px; } /* Champs texte */ .saisie { width: 100%; padding: 12px 14px; font: inherit; font-size: 15.5px; color: var(--encre); background: var(--papier); border: 1px solid var(--filet); border-radius: 9px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .saisie:focus { outline: none; border-color: var(--encre); box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.06); } .saisie::placeholder { color: #b8b8b6; } textarea.saisie { min-height: 118px; resize: vertical; line-height: 1.55; } select.saisie { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235a5a5a' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; } /* Options : cases et boutons radio dessinés en pastilles */ .options { display: flex; flex-direction: column; gap: 8px; } .options--paire { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .option { display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px; border: 1px solid var(--filet); border-radius: 9px; cursor: pointer; transition: border-color 0.18s ease, background 0.18s ease; } .option:hover { border-color: #c9c9c6; } .option input { appearance: none; flex: none; width: 17px; height: 17px; margin: 2px 0 0; border: 1.5px solid #bdbdba; background: var(--papier); transition: border-color 0.18s ease, background 0.18s ease; } .option input[type='radio'] { border-radius: 50%; } .option input[type='checkbox'] { border-radius: 5px; } .option input:checked { border-color: var(--accent); background: var(--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9'%3E%3Cpath d='M1 4.4 4 7.4 10 1.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; } .option input:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; } .option:has(input:checked) { border-color: var(--encre); background: var(--papier-doux); } .option__texte { font-size: 15px; line-height: 1.45; } /* Champ libre associé à une option « Autre » */ .autre { margin-top: 8px; display: none; } .autre.est-ouvert { display: block; } /* Dépôt de fichiers */ .depot { border: 1px dashed #cfcfcc; border-radius: 11px; padding: 22px; text-align: center; transition: border-color 0.2s ease, background 0.2s ease; } .depot.est-survole { border-color: var(--encre); background: var(--papier-doux); } .depot__bouton { border: 1px solid var(--filet); background: var(--papier); border-radius: 999px; padding: 9px 20px; font-size: 14px; transition: border-color 0.2s ease; } .depot__bouton:hover { border-color: var(--encre); } .depot__note { margin: 12px 0 0; font-size: 12.5px; color: var(--encre-tenue); } .fichiers { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; } .fichier { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; background: var(--papier-doux); border-radius: 8px; font-size: 13.5px; } .fichier__poids { color: var(--encre-tenue); font-variant-numeric: tabular-nums; } .fichier__retrait { border: none; background: none; color: var(--encre-tenue); padding: 2px 6px; font-size: 17px; line-height: 1; } .fichier__retrait:hover { color: var(--alerte); } /* Encadré d'information posé entre deux questions */ .note { padding: 16px 18px; background: var(--papier-doux); border-radius: 10px; font-size: 14px; color: var(--encre-douce); line-height: 1.55; } /* Signalement d'erreur */ .champ.est-en-faute .saisie, .champ.est-en-faute .depot { border-color: var(--alerte); } .champ.est-en-faute .option { border-color: rgba(180, 52, 42, 0.4); } .champ__faute { margin: 8px 0 0; font-size: 13px; color: var(--alerte); } /* ───────────────────────────────────────────────────────────────────────── Pied de navigation ───────────────────────────────────────────────────────────────────────── */ .pied { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: rgba(255, 255, 255, 0.94); backdrop-filter: saturate(180%) blur(12px); border-top: 1px solid var(--filet); } .pied__ligne { max-width: var(--colonne); margin: 0 auto; padding: 14px var(--gouttiere); display: flex; align-items: center; justify-content: space-between; gap: 14px; } .bouton { border-radius: 999px; padding: 12px 26px; font-size: 15px; font-weight: 500; border: 1px solid var(--encre); background: var(--encre); color: var(--papier); transition: opacity 0.2s ease, transform 0.2s ease; } .bouton:hover { opacity: 0.86; } .bouton:active { transform: translateY(1px); } .bouton[disabled] { opacity: 0.4; cursor: not-allowed; transform: none; } .bouton--discret { background: none; color: var(--encre-douce); border-color: transparent; padding-left: 4px; padding-right: 12px; } .bouton--discret:hover { color: var(--encre); opacity: 1; } .bouton--discret[hidden] { display: none; } .pied__memo { font-size: 12px; color: var(--encre-tenue); } /* ───────────────────────────────────────────────────────────────────────── Écran de fin et messages d'état ───────────────────────────────────────────────────────────────────────── */ .final { max-width: 620px; margin: 0 auto; padding: clamp(72px, 16vh, 140px) var(--gouttiere) 120px; text-align: center; } .final__titre { font-size: clamp(28px, 4.6vw, 40px); } .final__texte { margin: 20px 0 0; color: var(--encre-douce); font-size: 16.5px; } .final__retour { display: inline-block; margin-top: 34px; font-size: 14.5px; color: var(--encre-douce); } .etat { margin-top: 20px; padding: 14px 16px; border-radius: 9px; font-size: 14.5px; background: var(--papier-doux); } .etat--faute { background: rgba(180, 52, 42, 0.07); color: var(--alerte); } .etat[hidden] { display: none; } /* Piège à robots : hors écran, jamais masqué par display:none (certains remplisseurs automatiques ignorent les champs masqués de cette façon). */ .leurre { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } @media (max-width: 560px) { .pied__memo { display: none; } .bouton { padding: 12px 20px; } }