@charset "UTF-8"; /* Theme Name: Camille Carollo Theme URI: https://www.camille-carollo.fr Author: Camille Carollo Description: Archetype BF — « Atelier de cadrage » / Fiches aimantées. Magazine business, finance, tech, juridique, management et marketing. Fond blanc, accent violet unique, fiches punaisées qui se redressent au survol. Version: 1.0.0 License: GPL-2.0-or-later Text Domain: camille-carollo */ /* ═══════════════════════════════════════════════════════════════════ SYSTÈME Un seul accent : le violet #9B33CF. Il est bidirectionnel, 5,59:1 aussi bien en texte sur blanc que pour du blanc posé dessus, donc une seule valeur suffit là où la plupart des thèmes en maintiennent deux. Aucune teinte par rubrique : les six se distinguent par leur numéro et leur pictogramme. ═══════════════════════════════════════════════════════════════════ */ :root { --cc-papier: #FFFFFF; --cc-brume: #F4F3F7; --cc-brume-2: #ECEAF2; --cc-encre: #121016; --cc-encre-2: #0B0910; --cc-doux: #3B3742; --cc-gris: #5B5666; --cc-filet: #E3E1E8; --cc-filet-f: #C7C3D0; --cc-violet: #9B33CF; --cc-violet-p: #6E1F96; --cc-violet-t: #F3E9FA; --cc-clair: #F1E7F8; --cc-display: 'Recursive', system-ui, sans-serif; --cc-texte: 'Commissioner', system-ui, sans-serif; --cc-hh: 74px; --cc-max: 1240px; --cc-gap: 26px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; padding-top: var(--cc-hh); background: var(--cc-papier); color: var(--cc-encre); font-family: var(--cc-texte); font-size: 17px; font-weight: 400; line-height: 1.68; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } ul { list-style: none; margin: 0; padding: 0; } a { color: var(--cc-violet); text-decoration: none; } a:hover { color: var(--cc-violet-p); } button { font: inherit; cursor: pointer; } h1, h2, h3, h4 { font-family: var(--cc-display); font-variation-settings: 'CASL' 0; font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; margin: 0; } :focus-visible { outline: 3px solid var(--cc-violet); outline-offset: 2px; } .cc-evitement { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--cc-encre); color: #fff; padding: 12px 20px; font-size: .9rem; } .cc-evitement:focus { left: 8px; top: 8px; color: #fff; } .cc-cadre { width: 100%; max-width: var(--cc-max); margin: 0 auto; padding: 0 26px; } /* ── Révélation ─────────────────────────────────────────────────────── Le masquage est conditionné à la classe `cc-js`, posée en . Sans JS, tout reste visible plutôt que masqué pour de bon. */ .cc-js [data-cc-reveal] { opacity: 0; transform: translateY(16px) rotate(var(--a, 0deg)); } .cc-js [data-cc-reveal].cc-vu { opacity: 1; transform: translateY(0) rotate(var(--a, 0deg)); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1); } /* ═══ L'AIMANT ════════════════════════════════════════════════════════ Motif unificateur : chaque fiche est tenue par un aimant de tableau. Le dégradé radial décentré fait le reflet, sans ombre portée. */ .cc-aimant { position: absolute; top: -9px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #CE8DEC 0%, var(--cc-violet) 58%, var(--cc-violet-p) 100%); z-index: 3; } .cc-aimant--sm { width: 13px; height: 13px; margin-left: -6.5px; top: -6.5px; } .cc-aimant--brief { width: 22px; height: 22px; margin-left: -11px; top: -11px; } /* ═══ L'ENCADRÉ AU FEUTRE ═════════════════════════════════════════════ Rectangle tracé d'un seul geste, dernier segment qui repasse sur le bord haut. `vector-effect` sur le path garde l'épaisseur constante quand le cadre s'étire sur un mot long. */ .cc-cerne { position: relative; display: inline-block; color: var(--cc-violet); padding: 0 .16em .04em; white-space: nowrap; } .cc-cerne-trait { position: absolute; left: -.3em; top: -.24em; width: calc(100% + .6em); height: calc(100% + .52em); overflow: visible; pointer-events: none; } /* ═══ LIBELLÉS ════════════════════════════════════════════════════════ */ .cc-oeil { font-family: var(--cc-display); font-variation-settings: 'CASL' 0; font-size: .70rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--cc-violet); margin: 0 0 14px; display: flex; align-items: center; gap: 9px; } .cc-oeil::before { content: ''; width: 22px; height: 3px; background: var(--cc-violet); flex: none; } .cc-tete { display: flex; align-items: center; gap: 20px; margin-bottom: 34px; } .cc-tete h2 { font-size: clamp(1.5rem, 3vw, 2.05rem); flex: none; } .cc-tete-filet { flex: 1; height: 2px; background: var(--cc-encre); } /* ═══ BOUTONS ═════════════════════════════════════════════════════════ */ .cc-bouton { display: inline-flex; align-items: center; gap: 10px; background: var(--cc-violet); color: #fff; font-family: var(--cc-display); font-variation-settings: 'CASL' 0; font-size: .93rem; font-weight: 700; letter-spacing: .01em; padding: 14px 26px; border: 2px solid var(--cc-violet); transition: background .2s ease, border-color .2s ease, color .2s ease; } .cc-bouton::after { content: '→'; font-size: 1.05em; } .cc-bouton:hover { background: var(--cc-violet-p); border-color: var(--cc-violet-p); color: #fff; } .cc-bouton--ligne { background: transparent; color: var(--cc-violet); border-color: var(--cc-violet); } .cc-bouton--ligne:hover { background: var(--cc-violet); color: #fff; } /* ═══ EN-TÊTE ═════════════════════════════════════════════════════════ Blanc solide et fixe, jamais transparent : aucun risque de menu blanc sur blanc sur les pages internes. */ .cc-entete { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--cc-hh); background: var(--cc-papier); border-bottom: 2px solid var(--cc-encre); } .cc-entete-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .cc-logo { display: flex; align-items: center; } .cc-logo-svg { display: block; height: 34px; width: auto; } .cc-nav { display: flex; align-items: center; gap: 26px; margin-left: auto; } .cc-nav-liste { display: flex; align-items: center; gap: 22px; } .cc-nav-liste a { position: relative; font-family: var(--cc-display); font-variation-settings: 'CASL' 0; font-size: .86rem; font-weight: 600; color: var(--cc-encre); padding-top: 8px; display: inline-block; } .cc-nav-liste a::before { content: attr(data-num); position: absolute; top: -3px; left: 0; font-size: .58rem; font-weight: 700; letter-spacing: .08em; color: var(--cc-violet); } .cc-nav-liste a::after { content: ''; position: absolute; left: 0; bottom: -3px; width: 100%; height: 2px; background: var(--cc-violet); transform: scaleX(0); transform-origin: left; transition: transform .22s ease; } .cc-nav-liste a:hover { color: var(--cc-violet); } .cc-nav-liste a:hover::after { transform: scaleX(1); } .cc-nav-contact { font-family: var(--cc-display); font-variation-settings: 'CASL' 0; font-size: .84rem; font-weight: 700; color: var(--cc-encre); border: 2px solid var(--cc-encre); padding: 9px 17px; transition: background .2s ease, color .2s ease, border-color .2s ease; } .cc-nav-contact:hover { background: var(--cc-violet); border-color: var(--cc-violet); color: #fff; } /* Éléments réservés au mobile : masqués en desktop, sans exception. */ .cc-nav-close { display: none; } .cc-nav-logo { display: none; } .cc-burger { display: none; } /* ═══ LE MUR (hero) ═══════════════════════════════════════════════════ Bande photo pleine largeur travaillée par dégradés superposés : un voile encre vertical qui se termine en blanc pur pour rejoindre le fond de page, une nappe violette en diagonale, et une lueur radiale. La fiche de cadrage est posée par-dessus. */ .cc-mur { position: relative; padding: 0 0 108px; isolation: isolate; } .cc-mur-fond { position: absolute; inset: 0 0 auto 0; height: 100%; overflow: hidden; z-index: -1; } .cc-mur-fond img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 38%; } /* Le voile reste léger : la fiche est opaque, donc aucun texte ne se pose sur la photo et rien n'oblige à l'assombrir. Un empilement trop lourd transformait la scène d'atelier en aplat gris. */ .cc-mur-fond::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,16,22,.22) 0%, rgba(18,16,22,.30) 52%, rgba(18,16,22,.34) 74%, rgba(255,255,255,.86) 96%, rgba(255,255,255,1) 100%), linear-gradient(104deg, rgba(110,31,150,.62) 0%, rgba(155,51,207,.26) 34%, rgba(155,51,207,0) 62%); } .cc-mur-inner { padding-top: 116px; } .cc-brief { position: relative; max-width: 726px; background: var(--cc-papier); border: 2px solid var(--cc-encre); padding: 40px 44px 44px; transform: rotate(-0.45deg); } .cc-brief-tete { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-bottom: 1.5px solid var(--cc-filet); padding-bottom: 14px; margin-bottom: 26px; font-family: var(--cc-display); font-variation-settings: 'CASL' 0; font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cc-gris); } .cc-brief-ref { color: var(--cc-encre); } .cc-brief-titre { font-size: clamp(2rem, 4.6vw, 3.35rem); letter-spacing: -0.03em; margin-bottom: 22px; } .cc-brief-titre .cc-cerne { font-variation-settings: 'CASL' 0.6; } .cc-deck { font-size: 1.09rem; line-height: 1.62; color: var(--cc-doux); max-width: 62ch; margin: 0 0 30px; } /* Trois fiches d'indices qui débordent du bord bas de la fiche mère. */ .cc-indices { display: flex; flex-wrap: wrap; gap: 16px; margin: -26px 0 0 64px; position: relative; z-index: 4; } .cc-indice { position: relative; background: var(--cc-papier); border: 1.5px solid var(--cc-encre); padding: 16px 22px 14px; min-width: 148px; transform: rotate(var(--a, 0deg)); } .cc-indice-num { display: block; font-family: var(--cc-display); font-variation-settings: 'CASL' 0.4; font-size: 1.85rem; font-weight: 800; line-height: 1; color: var(--cc-violet); } .cc-indice-lib { display: block; margin-top: 5px; font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: var(--cc-gris); } /* ═══ LES FICHES ══════════════════════════════════════════════════════ Chaque fiche est légèrement pivotée. Au survol elle se redresse et avance : on redresse la fiche quand on la regarde. Aucune ombre floue dans tout le thème, la profondeur vient de la rotation, du filet et de l'aimant. */ .cc-flux { background: var(--cc-brume); padding: 78px 0 84px; } .cc-flux--archive { padding-top: 62px; } .cc-mur-fiches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px var(--cc-gap); align-items: start; } .cc-fiche { position: relative; background: var(--cc-papier); border: 1.5px solid var(--cc-filet-f); transform: rotate(var(--a, 0deg)); transition: transform .28s cubic-bezier(.2,.7,.3,1), border-color .2s ease; } .cc-fiche:hover { transform: rotate(0deg) translateY(-5px); border-color: var(--cc-violet); } .cc-js .cc-fiche[data-cc-reveal]:hover { transition: transform .28s cubic-bezier(.2,.7,.3,1), border-color .2s ease; } .cc-fiche-vue { overflow: hidden; position: relative; aspect-ratio: 4 / 3; background: var(--cc-brume-2); } .cc-fiche-vue img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cc-fiche-corps { padding: 20px 22px 24px; } .cc-cartouche { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1.5px solid var(--cc-filet); padding-bottom: 9px; margin-bottom: 13px; font-family: var(--cc-display); font-variation-settings: 'CASL' 0; font-size: .64rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; } .cc-cartouche-cat { color: var(--cc-violet); } .cc-cartouche-ref { color: var(--cc-gris); } .cc-fiche-titre { font-size: 1.16rem; line-height: 1.28; margin-bottom: 10px; } .cc-fiche-titre a { color: var(--cc-encre); } .cc-fiche-titre a:hover { color: var(--cc-violet); } .cc-fiche-chapo { margin: 0 0 12px; font-size: .94rem; color: var(--cc-doux); line-height: 1.6; } .cc-fiche-meta { margin: 0; font-size: .76rem; letter-spacing: .04em; color: var(--cc-gris); } /* La « une » : fiche horizontale, filet encre plus marqué. */ .cc-fiche--une { display: grid; grid-template-columns: 1.05fr 1fr; border-color: var(--cc-encre); border-width: 2px; margin-bottom: 40px; } .cc-fiche--une .cc-fiche-vue { aspect-ratio: 16 / 11; height: 100%; } .cc-fiche--une .cc-fiche-corps { padding: 32px 34px; display: flex; flex-direction: column; justify-content: center; } .cc-fiche--une .cc-fiche-titre { font-size: clamp(1.35rem, 2.4vw, 1.85rem); } .cc-fiche--une .cc-fiche-chapo { font-size: 1rem; } .cc-fiche--vide .cc-fiche-corps { padding-top: 26px; } .cc-fiche--plate { margin-bottom: 26px; } .cc-fiche--plate .cc-fiche-corps { padding: 30px 32px 32px; } .cc-vide { text-align: center; color: var(--cc-gris); padding: 40px 0; } /* ═══ L'ATELIER (persona) ═════════════════════════════════════════════ */ .cc-atelier { background: var(--cc-violet-t); padding: 84px 0 88px; } .cc-atelier-fiche { position: relative; display: grid; grid-template-columns: 340px 1fr; gap: 42px; background: var(--cc-papier); border: 2px solid var(--cc-encre); padding: 42px 46px 46px; transform: rotate(var(--a, 0deg)); } .cc-atelier-portrait { position: relative; aspect-ratio: 4 / 5; overflow: visible; } .cc-atelier-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center top; border: 1.5px solid var(--cc-filet-f); } /* Le post-it : seul élément à porter une écriture « tracée ». L'axe CASL de Recursive fait le travail, pas une fausse manuscrite. */ .cc-postit { position: absolute; right: -26px; bottom: 30px; width: 146px; background: var(--cc-violet); color: #fff; font-family: var(--cc-display); font-variation-settings: 'CASL' 1; font-size: .88rem; font-weight: 600; line-height: 1.3; padding: 14px 15px; transform: rotate(3.5deg); } .cc-atelier-nom { font-size: clamp(1.7rem, 3.2vw, 2.35rem); margin-bottom: 6px; } .cc-atelier-role { margin: 0 0 22px; font-family: var(--cc-display); font-variation-settings: 'CASL' 0; font-size: .92rem; font-weight: 600; color: var(--cc-violet); } .cc-atelier-specs { display: flex; gap: 0; border-top: 1.5px solid var(--cc-filet); border-bottom: 1.5px solid var(--cc-filet); margin-bottom: 24px; } .cc-atelier-specs > div { flex: 1; padding: 15px 14px; border-right: 1.5px solid var(--cc-filet); } .cc-atelier-specs > div:last-child { border-right: 0; } .cc-atelier-specs span:first-child { display: block; font-family: var(--cc-display); font-variation-settings: 'CASL' 0.4; font-size: 1.5rem; font-weight: 800; line-height: 1; color: var(--cc-encre); } .cc-atelier-specs span:last-child { display: block; margin-top: 4px; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--cc-gris); } .cc-atelier-bio { color: var(--cc-doux); margin-bottom: 26px; } .cc-atelier-bio p { margin: 0 0 14px; } .cc-atelier-bio p:last-child { margin-bottom: 0; } /* ═══ LE TABLEAU (rubriques) ══════════════════════════════════════════ */ .cc-tableau { background: var(--cc-papier); padding: 84px 0 92px; } .cc-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px var(--cc-gap); } .cc-note { position: relative; display: block; background: var(--cc-papier); border: 1.5px solid var(--cc-encre); padding: 26px 24px 24px; color: var(--cc-encre); transform: rotate(var(--a, 0deg)); transition: transform .28s cubic-bezier(.2,.7,.3,1), background .22s ease, color .22s ease; } .cc-note:hover { transform: rotate(0deg) translateY(-6px); background: var(--cc-violet); color: #fff; } .cc-note-num { display: block; font-family: var(--cc-display); font-variation-settings: 'CASL' 0; font-size: .72rem; font-weight: 700; letter-spacing: .16em; color: var(--cc-violet); margin-bottom: 14px; } .cc-note:hover .cc-note-num { color: #fff; } .cc-ico { width: 30px; height: 30px; color: var(--cc-violet); margin-bottom: 12px; } .cc-note:hover .cc-ico { color: #fff; } .cc-note-nom { display: block; font-family: var(--cc-display); font-variation-settings: 'CASL' 0; font-size: 1.28rem; font-weight: 800; letter-spacing: -0.015em; margin-bottom: 8px; } .cc-note-desc { display: block; font-size: .91rem; line-height: 1.55; color: var(--cc-doux); margin-bottom: 14px; } .cc-note:hover .cc-note-desc { color: var(--cc-clair); } .cc-note-cpt { display: block; font-family: var(--cc-display); font-variation-settings: 'CASL' 0; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cc-gris); } .cc-note:hover .cc-note-cpt { color: var(--cc-clair); } /* ═══ COIFFES (heros internes) ════════════════════════════════════════ */ .cc-coiffe { position: relative; isolation: isolate; padding: 74px 0 66px; background: var(--cc-encre); color: #fff; } .cc-coiffe-fond { position: absolute; inset: 0; overflow: hidden; z-index: -1; } .cc-coiffe-fond img { width: 100%; height: 100%; object-fit: cover; } .cc-coiffe-fond::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,9,16,.72) 0%, rgba(11,9,16,.86) 100%), linear-gradient(100deg, rgba(110,31,150,.52) 0%, rgba(110,31,150,0) 68%); } .cc-coiffe-inner { max-width: 900px; } .cc-coiffe-cat { display: inline-block; font-family: var(--cc-display); font-variation-settings: 'CASL' 0; font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; background: var(--cc-violet); color: #fff; padding: 6px 13px; margin-bottom: 16px; } .cc-coiffe-titre { font-size: clamp(1.85rem, 4.2vw, 3.05rem); color: #fff; margin-bottom: 14px; } .cc-coiffe-desc { color: var(--cc-clair) !important; margin-bottom: 12px; } .cc-coiffe-desc p { color: var(--cc-clair) !important; margin: 0 0 8px; } .cc-coiffe-meta { margin: 0; font-size: .84rem; letter-spacing: .05em; color: var(--cc-clair); } .cc-coiffe-etoiles { margin-top: 14px; } .cc-fil { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; font-size: .78rem; margin-bottom: 18px; color: var(--cc-clair); } .cc-fil a { color: var(--cc-clair); } .cc-fil a:hover { color: #fff; text-decoration: underline; } .cc-fil-sep { width: 12px; height: 1.5px; background: currentColor; opacity: .5; } .cc-fil-ici { opacity: .72; } /* ═══ LECTURE (article) ═══════════════════════════════════════════════ */ .cc-lecture { max-width: 840px; padding-top: 44px; padding-bottom: 60px; } .cc-lecture-plaque { margin: 0 0 34px; } .cc-lecture-plaque img { width: 100%; max-height: 600px; object-fit: cover; border: 1.5px solid var(--cc-filet-f); } .cc-lecture-resume { max-width: 720px; margin: 0 auto 30px; } .cc-lecture-corps { font-size: 1.06rem; } .cc-lecture-corps h2 { font-size: 1.65rem; margin: 40px 0 14px; } .cc-lecture-corps h3 { font-size: 1.28rem; margin: 30px 0 12px; } .cc-lecture-corps p { margin: 0 0 1.25em; } .cc-lecture-corps img { border: 1.5px solid var(--cc-filet-f); margin: 24px 0; } .cc-lecture-corps blockquote { margin: 28px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--cc-violet); color: var(--cc-doux); font-size: 1.1rem; } .cc-lecture-tags { display: flex; flex-wrap: wrap; gap: 9px; margin: 34px 0 0; } .cc-lecture-tags a { font-size: .78rem; letter-spacing: .05em; border: 1.5px solid var(--cc-filet-f); color: var(--cc-doux); padding: 6px 13px; } .cc-lecture-tags a:hover { border-color: var(--cc-violet); color: var(--cc-violet); } .cc-signature { position: relative; display: grid; grid-template-columns: 108px 1fr; gap: 24px; align-items: start; background: var(--cc-brume); border: 1.5px solid var(--cc-filet-f); padding: 28px 30px; margin-top: 44px; transform: rotate(var(--a, 0deg)); } .cc-signature-photo { width: 108px; height: 135px; object-fit: cover; object-position: center top; border: 1.5px solid var(--cc-filet-f); } .cc-signature-nom { font-size: 1.3rem; margin-bottom: 3px; } .cc-signature-role { margin: 0 0 12px; font-family: var(--cc-display); font-variation-settings: 'CASL' 0; font-size: .84rem; font-weight: 600; color: var(--cc-violet); } .cc-signature-bio { font-size: .95rem; color: var(--cc-doux); } .cc-signature-bio p { margin: 0 0 10px; } .cc-signature-bio p:last-child { margin-bottom: 0; } .cc-voisins { background: var(--cc-brume); padding: 74px 0 82px; } /* ═══ BULLETS entry-content ═══════════════════════════════════════════ La case cochée : carré à filet et coche violette qui déborde du carré, comme une case pointée à la main sur une grille d'audit. */ .entry-content ul { list-style: none; padding-left: 0; margin-bottom: 1.4em; } .entry-content ol { list-style: decimal; padding-left: 1.5em; margin-bottom: 1.4em; } .entry-content ul li { position: relative; padding-left: 1.75em; margin-bottom: .55em; } .entry-content ul li::before { content: ''; position: absolute; left: 0; top: .36em; width: 13px; height: 13px; border: 1.6px solid var(--cc-filet-f); background: #fff; } .entry-content ul li::after { content: ''; position: absolute; left: 3.5px; top: .22em; width: 6px; height: 12px; border-right: 2.4px solid var(--cc-violet); border-bottom: 2.4px solid var(--cc-violet); transform: rotate(40deg); } .entry-content ol li { margin-bottom: .5em; } .cc-liste-cochee { margin: 0 0 1.3em; padding-left: 0; } .cc-liste-cochee li { position: relative; padding-left: 1.75em; margin-bottom: .55em; color: var(--cc-doux); } .cc-liste-cochee li::before { content: ''; position: absolute; left: 0; top: .36em; width: 13px; height: 13px; border: 1.6px solid var(--cc-filet-f); background: #fff; } .cc-liste-cochee li::after { content: ''; position: absolute; left: 3.5px; top: .22em; width: 6px; height: 12px; border-right: 2.4px solid var(--cc-violet); border-bottom: 2.4px solid var(--cc-violet); transform: rotate(40deg); } .cc-atelier-bio ul { margin: 0 0 1.2em; padding-left: 0; list-style: none; } .cc-atelier-bio li { position: relative; padding-left: 1.75em; margin-bottom: .5em; } .cc-atelier-bio li::before { content: ''; position: absolute; left: 0; top: .36em; width: 13px; height: 13px; border: 1.6px solid var(--cc-filet-f); background: #fff; } .cc-atelier-bio li::after { content: ''; position: absolute; left: 3.5px; top: .22em; width: 6px; height: 12px; border-right: 2.4px solid var(--cc-violet); border-bottom: 2.4px solid var(--cc-violet); transform: rotate(40deg); } /* ═══ BLOC SEO ════════════════════════════════════════════════════════ */ .cc-dossier { padding: 74px 0 84px; } .cc-fiche--dossier { border-color: var(--cc-encre); border-width: 2px; } .cc-dossier-corps { display: grid; grid-template-columns: 1fr 400px; gap: 40px; align-items: center; padding: 38px 40px 40px; } .cc-dossier-titre { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 16px; } .cc-dossier-texte p { color: var(--cc-doux); margin: 0 0 16px; } .cc-dossier-vue { align-self: stretch; } .cc-dossier-vue img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; border: 1.5px solid var(--cc-filet-f); } /* ═══ PAGES ═══════════════════════════════════════════════════════════ */ .cc-echange { padding: 66px 0 84px; } .cc-echange-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; } .cc-echange-titre { font-size: 1.5rem; margin-bottom: 14px; } .cc-echange-col p { color: var(--cc-doux); } .cc-echange-note { border-top: 1.5px solid var(--cc-filet); padding-top: 14px; margin-bottom: 0; font-size: .92rem; } .cc-plan { padding: 66px 0 84px; } .cc-plan-titre { font-size: 1.4rem; margin-bottom: 8px; } .cc-plan-titre a { color: var(--cc-encre); } .cc-plan-titre a:hover { color: var(--cc-violet); } .cc-plan-desc { color: var(--cc-gris); margin: 0 0 16px; font-size: .95rem; } .cc-plan-vide { color: var(--cc-gris); font-size: .93rem; margin: 0; } .cc-legal { padding: 66px 0 84px; } .cc-legal-corps h2 { font-size: 1.32rem; margin: 32px 0 12px; } .cc-legal-corps h2:first-child { margin-top: 0; } .cc-legal-corps p { color: var(--cc-doux); margin: 0 0 14px; } /* Formulaire CF7 */ .wpcf7-form p { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; } .wpcf7-form br { display: none; } .wpcf7-form label { display: flex; flex-direction: column; gap: 7px; font-family: var(--cc-display); font-variation-settings: 'CASL' 0; font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--cc-encre); margin-bottom: 15px; } .wpcf7-form input, .wpcf7-form textarea, .wpcf7-form select { width: 100%; font-family: var(--cc-texte); font-size: .98rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--cc-encre); background: var(--cc-papier); padding: 12px 15px; border: 1.5px solid var(--cc-filet-f); border-radius: 0; } .wpcf7-form input:focus, .wpcf7-form textarea:focus { outline: 2px solid var(--cc-violet); outline-offset: 0; border-color: var(--cc-violet); } .wpcf7-form textarea { min-height: 156px; resize: vertical; } /* Requalifié : `.wpcf7-form input` (0-1-1) bat une classe simple posée sur l'input. Sans ce sélecteur, le bouton rendrait comme un champ. */ .wpcf7-form input.wpcf7-submit { width: 100%; background: var(--cc-violet); color: #fff; font-family: var(--cc-display); font-variation-settings: 'CASL' 0; font-size: .92rem; font-weight: 700; letter-spacing: .02em; text-transform: none; border: 2px solid var(--cc-violet); padding: 14px 22px; cursor: pointer; transition: background .2s ease, border-color .2s ease; } .wpcf7-form input.wpcf7-submit:hover { background: var(--cc-violet-p); border-color: var(--cc-violet-p); } /* ═══ LE CLASSEUR (pied) ══════════════════════════════════════════════ */ .cc-classeur { background: var(--cc-encre-2); color: var(--cc-clair); padding-top: 0; } .cc-classeur-rail { display: flex; justify-content: center; gap: 40px; background: var(--cc-encre); padding: 13px 0; } .cc-classeur-rail i { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #CE8DEC 0%, var(--cc-violet) 58%, var(--cc-violet-p) 100%); } .cc-classeur-grille { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.25fr; gap: 40px; padding-top: 56px; padding-bottom: 48px; } .cc-classeur-col--marque .cc-logo-svg { height: 32px; width: auto; margin-bottom: 16px; } .cc-classeur-texte { font-size: .93rem; color: #B9B2C4; margin: 0 0 16px; } .cc-classeur-copy { font-size: .82rem; color: #857E92; margin: 0; } .cc-classeur-titre { font-family: var(--cc-display); font-variation-settings: 'CASL' 0; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fff; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1.5px solid #2A2533; } .cc-classeur-liste li { position: relative; padding-left: 1.5em; margin-bottom: 9px; } .cc-classeur-liste li::before { content: ''; position: absolute; left: 0; top: .48em; width: 9px; height: 9px; border: 1.5px solid #4A4356; } .cc-classeur-liste li::after { content: ''; position: absolute; left: 2px; top: .36em; width: 5px; height: 9px; border-right: 2px solid var(--cc-violet); border-bottom: 2px solid var(--cc-violet); transform: rotate(40deg); } .cc-classeur-liste a { color: #C7C1D1; font-size: .93rem; } .cc-classeur-liste a:hover { color: #fff; } .cc-classeur-pied { border-top: 1.5px solid #221D2B; padding: 20px 0; text-align: center; } .cc-classeur-pied p { margin: 0; font-size: .82rem; color: #857E92; } /* ═══ RESPONSIVE ══════════════════════════════════════════════════════ */ @media (max-width: 1080px) { .cc-mur-fiches, .cc-notes { grid-template-columns: repeat(2, 1fr); } .cc-atelier-fiche { grid-template-columns: 280px 1fr; gap: 32px; } .cc-dossier-corps { grid-template-columns: 1fr; } .cc-classeur-grille { grid-template-columns: 1fr 1fr; gap: 34px; } } @media (max-width: 900px) { :root { --cc-hh: 66px; } .cc-burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; background: none; border: 0; padding: 0 8px; } .cc-burger span { display: block; height: 2px; width: 100%; background: var(--cc-encre); } .cc-nav { position: fixed; inset: 0; z-index: 150; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; background: var(--cc-papier); padding: 26px 26px 40px; margin: 0; overflow-y: auto; transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.7,.3,1); } .cc-nav--open { transform: translateX(0); } .cc-nav-close { display: block; position: absolute; top: 20px; right: 22px; width: 42px; height: 42px; background: none; border: 0; color: var(--cc-encre); padding: 8px; } .cc-nav-close svg { width: 100%; height: 100%; } .cc-nav-logo { display: block; margin-bottom: 36px; } .cc-nav-logo .cc-logo-svg { height: 30px; width: auto; } .cc-nav-liste { flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; } .cc-nav-liste li { width: 100%; border-bottom: 1.5px solid var(--cc-filet); } .cc-nav-liste a { font-size: 1.28rem; padding: 16px 0 14px; width: 100%; } .cc-nav-liste a::before { top: 4px; } .cc-nav-liste a::after { display: none; } .cc-nav-contact { margin-top: 28px; } .cc-mur-inner { padding-top: 56px; } .cc-mur { padding-bottom: 76px; } .cc-brief { padding: 30px 26px 32px; transform: rotate(0deg); } .cc-brief-titre { font-size: clamp(1.72rem, 7vw, 2.3rem); } .cc-indices { margin: -20px 0 0 0; justify-content: flex-start; } .cc-indice { flex: 1 1 40%; min-width: 0; } .cc-mur-fiches, .cc-notes { grid-template-columns: 1fr; gap: 30px; } .cc-fiche, .cc-note, .cc-indice, .cc-signature, .cc-atelier-fiche { transform: rotate(0deg); } .cc-js [data-cc-reveal] { transform: translateY(16px); } .cc-js [data-cc-reveal].cc-vu { transform: translateY(0); } .cc-fiche:hover, .cc-note:hover { transform: translateY(-4px); } .cc-fiche--une { grid-template-columns: 1fr; } .cc-fiche--une .cc-fiche-vue { aspect-ratio: 16 / 10; } .cc-fiche--une .cc-fiche-corps { padding: 26px 24px 28px; } .cc-atelier-fiche { grid-template-columns: 1fr; padding: 30px 24px 34px; } .cc-atelier-portrait { max-width: 300px; } .cc-postit { right: -14px; width: 128px; font-size: .82rem; } .cc-echange-grille { grid-template-columns: 1fr; } .cc-dossier-corps { padding: 28px 24px 30px; } .cc-classeur-grille { grid-template-columns: 1fr; text-align: left; } .cc-classeur-rail { gap: 26px; } } @media (max-width: 560px) { body { font-size: 16px; } .cc-cadre { padding: 0 18px; } .cc-atelier-specs { flex-direction: column; } .cc-atelier-specs > div { border-right: 0; border-bottom: 1.5px solid var(--cc-filet); } .cc-atelier-specs > div:last-child { border-bottom: 0; } .cc-tete { flex-wrap: wrap; gap: 14px; } .cc-indices { flex-direction: column; } .cc-indice { width: 100%; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } .cc-js [data-cc-reveal] { opacity: 1; transform: rotate(var(--a, 0deg)); } }