/* * Charte Camille Davost — surcharge du thème Quark 2. * * `custom.css` est le point d'extension prévu par Quark 2 : le thème le charge * déjà, après ses propres feuilles. On n'a donc rien à déclarer, et nos règles * gagnent par ordre de source à spécificité égale. * * Les valeurs ci-dessous ne sont PAS choisies : elles sont relevées dans la * charte Canva « 01 — Fondations », avec les rôles que la charte leur donne. * Voir docs/identite/IDENTITE.md. * * Navy #0F2D3A texte principal, logo * Teal #1E5A6B sous-titres, accents * Teal clair #6FA8B6 fonds, teintes ciel/eau * Vert #4C7F6B végétation, nature * Vert clair #A6C48A tints, feuillage léger * Crème #FCF7F7 fond principal * Tan #EAC9A3 accent chaleureux, pansement * * Le tan est un accent DÉCORATIF. Sur le crème il plafonne à 1,5:1 de * contraste : il sert de fond, de filet et d'aplat, jamais de couleur de texte. * C'est le teal et le vert qui portent les libellés colorés. */ /* * Polices de la charte, chargées par `@import`. * * Le thème ne donne pas de point d'insertion dans le `` sans surcharger * son squelette, et surcharger `base.html.twig` pour deux `` fait * dépendre tout le site du balisage interne de Quark 2. L'`@import` coûte une * requête sérialisée de plus au premier chargement ; c'est le bon échange tant * que le thème n'est pas dérivé pour de bon. * * `display=swap` : le texte s'affiche immédiatement dans la police de repli * puis bascule. Sans ce paramètre, un réseau lent laisse une page blanche. */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Caveat:wght@600;700&family=Fraunces:ital,opsz,wght@1,9..144,400&display=swap'); :root { /* --- Sources, telles que nommées dans la charte -------------------- */ --cdamm-navy: #0F2D3A; --cdamm-teal: #1E5A6B; --cdamm-teal-clair: #6FA8B6; --cdamm-vert: #4C7F6B; --cdamm-vert-clair: #A6C48A; --cdamm-creme: #FCF7F7; --cdamm-tan: #EAC9A3; /* --- Dérivées : mélanges avec du blanc, rien d'inventé ------------- */ --cdamm-vert-clair-050: #EDF3E8; /* vert clair à 20 % */ --cdamm-tan-050: #FBF1E4; /* tan à 30 % */ --cdamm-teal-fonce: #35606C; /* teal assombri, lisible en corps */ /* --- Rôles : c'est tout ce que les composants utilisent ------------ */ --cdamm-fond: var(--cdamm-creme); --cdamm-fond-doux: var(--cdamm-vert-clair-050); --cdamm-fond-chaud: var(--cdamm-tan-050); --cdamm-texte: var(--cdamm-navy); --cdamm-texte-doux: var(--cdamm-teal-fonce); --cdamm-bordure: #DCE5D6; --cdamm-accent: var(--cdamm-teal); --cdamm-accent-survol: var(--cdamm-vert); --cdamm-accent-contraste: var(--cdamm-creme); --cdamm-libelle: var(--cdamm-vert); --cdamm-decor: var(--cdamm-tan); /* --- Polices ------------------------------------------------------- */ --cdamm-titre: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; --cdamm-corps: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; --cdamm-manuscrit: 'Caveat', 'Segoe Script', cursive; --cdamm-citation: 'Fraunces', Georgia, 'Times New Roman', serif; } /* * Thème sombre. * * Quark 2 pose lui-même `data-theme` sur la racine. On redéfinit donc les * RÔLES seulement — jamais les jetons de la charte, qui restent la marque. * Le fond sombre est le navy assombri : c'est la couleur de la marque, pas un * gris générique. * * La règle `prefers-color-scheme` est gardée par `:not([data-theme="light"])` : * sans cette garde, un visiteur qui choisit explicitement le thème clair sur un * système en sombre se retrouverait quand même en sombre. */ :root[data-theme="dark"] { --cdamm-fond: #0B2029; --cdamm-fond-doux: #123039; --cdamm-fond-chaud: #1E2E30; --cdamm-texte: #EAF1EE; --cdamm-texte-doux: #9FBCC2; --cdamm-bordure: #244651; --cdamm-accent: var(--cdamm-teal-clair); --cdamm-accent-survol: var(--cdamm-vert-clair); --cdamm-accent-contraste: #0B2029; --cdamm-libelle: var(--cdamm-vert-clair); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --cdamm-fond: #0B2029; --cdamm-fond-doux: #123039; --cdamm-fond-chaud: #1E2E30; --cdamm-texte: #EAF1EE; --cdamm-texte-doux: #9FBCC2; --cdamm-bordure: #244651; --cdamm-accent: var(--cdamm-teal-clair); --cdamm-accent-survol: var(--cdamm-vert-clair); --cdamm-accent-contraste: #0B2029; --cdamm-libelle: var(--cdamm-vert-clair); } } /* ====================================================================== */ /* Alignement du thème */ /* */ /* On réaligne les jetons de Quark 2 sur la charte plutôt que de */ /* combattre chaque règle une par une : l'accent, les liens et les */ /* titres suivent alors la marque partout, y compris dans les */ /* composants du thème qu'on n'a pas prévus. */ /* ====================================================================== */ :root, :root[data-theme="light"] { --q2-accent: var(--cdamm-teal); --q2-link: var(--cdamm-teal); --q2-text-strong: var(--cdamm-navy); } :root[data-theme="dark"] { --q2-accent: var(--cdamm-teal-clair); --q2-link: var(--cdamm-teal-clair); } /* La charte donne Poppins pour les titres ET le corps. Le sélecteur reste * volontairement large : la police de marque doit valoir partout, y compris * dans les composants du thème qu'on n'a pas prévus. */ /* Le crème `#FCF7F7` est le « fond principal » de la charte, et le navy son * « texte principal ». Quark 2 sert un blanc pur et un gris : sans ces deux * lignes, la page n'est jamais tout à fait aux couleurs de la marque. */ body { font-family: var(--cdamm-corps); background-color: var(--cdamm-fond); color: var(--cdamm-texte); } h1, h2, h3, h4, h5, h6, .navbar-brand, .cdamm-bouton { font-family: var(--cdamm-titre); font-weight: 700; } /* ====================================================================== */ /* Logotype */ /* */ /* Reproduction en VRAI TEXTE du logo de la charte : « Camille » en */ /* Poppins Bold navy, « Davost » en Caveat teal, le second chevauchant */ /* le premier par le bas, puis la ligne de métier. */ /* */ /* Ce n'est pas un pis-aller : le texte se sélectionne, se lit */ /* correctement par un lecteur d'écran, reste net à tous les zooms et ne */ /* coûte aucune requête. Le fichier vectoriel d'origine reste à demander */ /* pour l'impression — voir IDENTITE.md. */ /* ====================================================================== */ .cdamm-logo { display: inline-block; padding: .2rem 0; line-height: 1; text-decoration: none; } .cdamm-logo__prenom, .cdamm-logo__nom, .cdamm-logo__baseline { display: block; } .cdamm-logo__prenom { font-family: var(--cdamm-titre); font-weight: 700; font-size: 1.5rem; letter-spacing: -.01em; color: var(--cdamm-texte); } /* Le chevauchement fait la signature du logo : le « D » de Davost remonte * sous le « Camille ». La marge négative le reproduit sans image. */ .cdamm-logo__nom { margin-top: -.42em; margin-left: -.15em; font-family: var(--cdamm-manuscrit); font-weight: 700; font-size: 2.3rem; line-height: 1; color: var(--cdamm-accent); } .cdamm-logo__baseline { margin-top: -.25em; font-family: var(--cdamm-corps); font-weight: 400; font-size: .68rem; letter-spacing: .01em; color: var(--cdamm-texte); } /* ====================================================================== */ /* Boutons */ /* ====================================================================== */ .cdamm-bouton { display: inline-block; padding: .7rem 1.4rem; border: 2px solid var(--cdamm-accent); border-radius: 2rem; background: var(--cdamm-accent); color: var(--cdamm-accent-contraste); font-weight: 600; text-decoration: none; line-height: 1.2; } .cdamm-bouton:hover, .cdamm-bouton:focus-visible { background: var(--cdamm-accent-survol); border-color: var(--cdamm-accent-survol); color: var(--cdamm-accent-contraste); text-decoration: none; } .cdamm-bouton--creux { background: transparent; color: var(--cdamm-accent); } .cdamm-bouton--creux:hover, .cdamm-bouton--creux:focus-visible { background: var(--cdamm-accent); color: var(--cdamm-accent-contraste); border-color: var(--cdamm-accent); } .cdamm-lien-suite { font-weight: 600; } .cdamm-lien-suite::after { content: " →"; } /* ====================================================================== */ /* Accueil — hero, marqueurs, récit */ /* ====================================================================== */ .cdamm-hero { padding: 2.5rem 0 2rem; border-bottom: 1px solid var(--cdamm-bordure); } .cdamm-hero__sur-titre { margin: 0 0 .5rem; font-size: .95rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--cdamm-libelle); } .cdamm-hero__titre { margin: 0 0 1rem; font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1.1; color: var(--cdamm-texte); } .cdamm-hero__texte { max-width: 46ch; font-size: 1.15rem; color: var(--cdamm-texte-doux); } .cdamm-hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; } .cdamm-marqueurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.5rem; margin: 2.5rem 0; } .cdamm-marqueur h2 { margin: 0 0 .4rem; font-size: 1.05rem; color: var(--cdamm-accent); } .cdamm-marqueur p { margin: 0; color: var(--cdamm-texte-doux); } /* * Le récit de Mafate. Il est encadré parce que c'est la pièce qui convainc : * un visiteur qui ne lit qu'un bloc de la page doit tomber sur celui-là. * * Les courbes de niveau de la charte servent de fond, en filigrane et sans * répétition — un motif répété derrière du texte le rend illisible. */ .cdamm-recit { position: relative; overflow: hidden; margin: 2.5rem 0; padding: 1.8rem; border-left: 4px solid var(--cdamm-decor); border-radius: 0 .6rem .6rem 0; background-color: var(--cdamm-fond-doux); } /* * Les courbes de niveau en filigrane. * * Sur un pseudo-élément atténué, pas en `background-image` : à pleine opacité, * un motif derrière du texte le rend illisible — constaté au rendu avec la * fleur de vanille de la page témoignages. Le contenu reprend la main par * `position: relative` ci-dessous. */ .cdamm-recit::after { content: ""; position: absolute; right: -3rem; top: -2rem; width: 18rem; height: 13rem; background: url('../images/charte/courbes-niveau.png') no-repeat center / contain; opacity: .35; pointer-events: none; z-index: 0; } .cdamm-recit > * { position: relative; z-index: 1; } .cdamm-recit h2 { margin-top: 0; } /* La chute du récit est une accroche : la charte lui donne le Caveat. */ .cdamm-recit__chute { margin-bottom: 0; font-family: var(--cdamm-manuscrit); font-size: 1.45rem; line-height: 1.35; color: var(--cdamm-texte); } .cdamm-bloc { margin: 2.5rem 0; } .cdamm-bloc--passees { padding-top: 1.5rem; border-top: 1px solid var(--cdamm-bordure); } .cdamm-appel { position: relative; overflow: hidden; margin: 3rem 0 1rem; padding: 2rem; border-radius: .6rem; background-color: var(--cdamm-fond-chaud); text-align: center; } .cdamm-appel::after { content: ""; position: absolute; left: -3rem; bottom: -2rem; width: 15rem; height: 9rem; background: url('../images/charte/liane-horizontale.png') no-repeat left bottom / contain; opacity: .35; pointer-events: none; z-index: 0; } .cdamm-appel > * { position: relative; z-index: 1; } .cdamm-appel .cdamm-hero__actions { justify-content: center; } /* ====================================================================== */ /* Sorties */ /* ====================================================================== */ .cdamm-sorties { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1.5rem; } .cdamm-sortie { display: flex; flex-direction: column; padding: 1.4rem; border: 1px solid var(--cdamm-bordure); border-radius: .6rem; background: var(--cdamm-fond); } /* * Une sortie passée reste en ligne : elle sert de preuve. Elle est atténuée * pour qu'on ne la confonde pas avec une date ouverte — et son bouton * d'inscription est retiré au rendu, pas seulement masqué en CSS. */ .cdamm-sortie--passee { background: transparent; border-style: dashed; opacity: .78; } .cdamm-sortie__date { margin: 0 0 .3rem; font-size: .85rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--cdamm-libelle); } .cdamm-sortie__titre { margin: 0 0 .3rem; font-size: 1.25rem; line-height: 1.25; } .cdamm-sortie__titre a { text-decoration: none; } .cdamm-sortie__lieu { margin: 0 0 .9rem; color: var(--cdamm-texte-doux); } .cdamm-sortie__chapeau { color: var(--cdamm-texte-doux); } /* Le bandeau de critères pousse l'action en bas de carte, quelle que soit la * longueur du chapeau : sans cela, les boutons d'une rangée ne s'alignent pas. */ .cdamm-sortie .cdamm-action { margin-top: auto; padding-top: 1rem; } .cdamm-criteres { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .6rem 1rem; margin: 0 0 1rem; padding: .9rem 0; border-top: 1px solid var(--cdamm-bordure); border-bottom: 1px solid var(--cdamm-bordure); } .cdamm-critere dt { margin: 0; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cdamm-texte-doux); } .cdamm-critere dd { margin: 0; font-weight: 600; color: var(--cdamm-texte); } .cdamm-action { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0; } .cdamm-action__note { font-size: .82rem; color: var(--cdamm-texte-doux); } .cdamm-vide { padding: 1.2rem; border: 1px dashed var(--cdamm-bordure); border-radius: .6rem; color: var(--cdamm-texte-doux); } /* ====================================================================== */ /* Témoignages */ /* */ /* La charte réserve Fraunces aux « citations terrain, témoignages » et */ /* précise « jamais pour du texte long ». C'est donc la seule zone du */ /* site qui le porte, et elle reste courte par construction. */ /* ====================================================================== */ .cdamm-temoignage { position: relative; margin: 1.8rem 0; padding: 1.5rem 1.8rem; border-left: 4px solid var(--cdamm-vert-clair); border-radius: 0 .6rem .6rem 0; background: var(--cdamm-fond-doux); font-family: var(--cdamm-citation); font-style: italic; font-size: 1.05rem; line-height: 1.6; } .cdamm-temoignage--recit { border-left-color: var(--cdamm-decor); } /* * La fleur de vanille en filigrane, sur un pseudo-élément et non en * `background-image`. * * En fond direct, elle passait à pleine opacité derrière le texte et rendait * une ligne illisible — constaté au rendu. Ici elle est atténuée et placée * SOUS le contenu, qui reprend la main par `position: relative`. */ .cdamm-temoignage--recit::after { content: ""; position: absolute; right: 1rem; bottom: 1rem; width: 4.5rem; height: 5.5rem; background: url('../images/charte/fleur-vanille.png') no-repeat right bottom / contain; opacity: .3; pointer-events: none; z-index: 0; } .cdamm-temoignage > * { position: relative; z-index: 1; } .cdamm-temoignage p:first-child { margin-top: 0; } /* La signature est une accroche manuscrite, pas une citation. */ .cdamm-temoignage__signature { margin-bottom: 0; font-family: var(--cdamm-manuscrit); font-style: normal; font-size: 1.3rem; color: var(--cdamm-accent); } .cdamm-temoignage__signature::before { content: "— "; } /* ====================================================================== */ /* Contact */ /* ====================================================================== */ .cdamm-canaux { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin: 2rem 0; } .cdamm-canal { display: flex; flex-direction: column; gap: .2rem; padding: 1.1rem 1.3rem; border: 1px solid var(--cdamm-bordure); border-radius: .6rem; text-decoration: none; color: var(--cdamm-texte); } .cdamm-canal:hover, .cdamm-canal:focus-visible { border-color: var(--cdamm-accent); background: var(--cdamm-fond-doux); text-decoration: none; } .cdamm-canal__quoi { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cdamm-texte-doux); } .cdamm-canal__valeur { font-size: 1.1rem; font-weight: 600; color: var(--cdamm-accent); } /* * Bloc d'alerte de chantier. * * Il n'apparaît que quand une donnée obligatoire manque encore (coordonnées de * contact). Il est volontairement voyant : sa raison d'être est qu'on ne puisse * pas le laisser passer en production sans le voir. Le tan de la charte y * trouve son emploi le plus littéral — c'est la couleur du pansement. */ .cdamm-alerte { margin: 2rem 0; padding: 1.2rem 1.4rem; border: 2px dashed var(--cdamm-decor); border-radius: .6rem; background: var(--cdamm-fond-chaud); color: var(--cdamm-texte); } .cdamm-alerte p:last-child { margin-bottom: 0; } /* ====================================================================== */ /* Divers */ /* ====================================================================== */ /* * Respect du réglage système « réduire les animations ». Quark 2 anime * quelques transitions ; on n'en ajoute pas, mais on neutralise les nôtres au * cas où une future règle en introduise. */ @media (prefers-reduced-motion: reduce) { .cdamm-bouton, .cdamm-canal { transition: none; } }