/* * ReputatioLab — feuille EXTRAITE de la maquette validee. * Source : reputatiolab/index.html, commit du portage. * AUCUNE valeur n'a ete retapee : ce fichier est une extraction, pas une reecriture. * Une valeur retapee peut deriver ; une valeur copiee ne le peut pas. * * A charger APRES la feuille de Bricks. * Le theme actif se lit sur . */ :root{ --sv-celestial-blue:#47A1DA; --sv-true-blue:#3769B1; --sv-polynesian-blue:#324E9D; --sv-light-blue:#B7E0E8; --sv-columbia-blue:#B1D0E8; --sv-vista-blue:#86A0CF; --sv-uranian-blue:#AED3F2; --sv-argentinian-blue:#69B1F0; --sv-celtic-blue:#4472C4; --sv-gunmetal:#1C2732; --sv-charcoal:#2C3D4E; --sv-paynes-grey:#44596B; --sv-air-blue:#7593B1; --sv-columbia-grey:#BAC9D8; --sv-alice-blue:#E3E9EF; --sv-orange:#FBB03C; --sv-bright-pink:#FF6481; --sv-sunglow:#FFD166; --sv-turquoise:#4FCCB8; --sv-viridian:#558B6E; --sv-sky-blue:#5AC2D9; --background:#ffffff; --foreground:#2C3D4E; --card:#ffffff; --card-2:#F7FAFC; --muted:#E3E9EF; --muted-foreground:#44596B; --primary:#47A1DA; --primary-foreground:#ffffff; --accent:#5AC2D9; --border:#E3E9EF; --ring:#26719F; --lien-actif:#26719F; --hairline:#DCE4EC; --radius:.5rem; --encre:#1C2732; --voile:rgba(28,39,50,.55); --duo-a:#20344B; --duo-b:#5AC2D9; --ombre-1:0 1px 2px rgba(28,39,50,.05); --ombre-2:0 10px 30px -12px rgba(28,39,50,.18); --sans:'Lato','Avenir Next',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --serif:'Source Serif 4',Georgia,'Times New Roman',serif; --page:1240px; --large:1660px; --lecture:830px; } html[data-theme="dark"]{ --background:#1C2732; --foreground:#E3E9EF; --card:#22303D; --card-2:#2C3D4E; --muted:#44596B; --muted-foreground:#BAC9D8; --primary:#69B1F0; --primary-foreground:#1C2732; --accent:#5AC2D9; --border:#3A4C5D; --ring:#69B1F0; --lien-actif:#69B1F0; --hairline:#38495A; --encre:#E3E9EF; --voile:rgba(11,17,23,.62); --duo-a:#14212E; --duo-b:#69B1F0; --ombre-1:0 1px 2px rgba(0,0,0,.4); --ombre-2:0 12px 34px -14px rgba(0,0,0,.65); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:150px} body{ margin:0;font-family:var(--sans);font-size:16px;line-height:1.6; color:var(--foreground);background:var(--background); -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; font-synthesis-weight:none; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button,input{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--ring);outline-offset:3px;border-radius:3px} ::selection{background:var(--sv-uranian-blue);color:var(--sv-gunmetal)} .enveloppe{width:min(100% - 40px,var(--page));margin-inline:auto} .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* Un lien d'evitement qui reste cache MEME au clavier ne sert a personne : il doit reapparaitre des qu'il prend le focus. */ a.sr:focus{position:fixed;top:12px;left:12px;z-index:200;width:auto;height:auto;margin:0;padding:11px 17px;clip:auto;border-radius:11px;font-size:14px;font-weight:700;background:var(--card);color:var(--foreground);border:1px solid var(--primary);box-shadow:var(--ombre-2)} .surtitre{ font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em; color:var(--muted-foreground);display:inline-flex;align-items:center;gap:8px; } .surtitre::before{content:"";width:18px;height:2px;background:var(--primary);flex:none} .chiffre{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} h1,h2,h3,h4{margin:0;font-weight:900;letter-spacing:-.025em;line-height:1.08;text-wrap:balance} .rub{ display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800; text-transform:uppercase;letter-spacing:.07em;color:#fff;align-self:flex-start; padding:5px 11px;border-radius:999px; background:linear-gradient(135deg, var(--rub-plein,var(--primary)) 0%, color-mix(in srgb,var(--rub-plein,var(--primary)) 72%,var(--sv-gunmetal)) 100%); } .rub::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;opacity:.85;flex:none} .une-texte .rub,.art-entete .rub{font-size:11.5px;padding:6px 13px} [data-rub="Crises"]{--rub-c:#DD314E;--rub-plein:#DD314E} [data-rub="Analyses"]{--rub-c:#3769B1;--rub-plein:#3769B1} [data-rub="Politique"]{--rub-c:#324E9D;--rub-plein:#324E9D} [data-rub="Société"]{--rub-c:#317F90;--rub-plein:#317F90} [data-rub="Comm"]{--rub-c:#278475;--rub-plein:#278475} [data-rub="Guerre & Géopolitique"]{--rub-c:#A66711;--rub-plein:#A66711} [data-rub="Activisme"]{--rub-c:#4E8065;--rub-plein:#4E8065} [data-rub="Autres"]{--rub-c:#44596B;--rub-plein:#44596B} html[data-theme="dark"] [data-rub="Crises"]{--rub-c:#FF7B94} html[data-theme="dark"] [data-rub="Analyses"]{--rub-c:#69B1F0} html[data-theme="dark"] [data-rub="Politique"]{--rub-c:#8DA6D2} html[data-theme="dark"] [data-rub="Société"]{--rub-c:#5AC2D9} html[data-theme="dark"] [data-rub="Comm"]{--rub-c:#4FCCB8} html[data-theme="dark"] [data-rub="Guerre & Géopolitique"]{--rub-c:#FBB03C} html[data-theme="dark"] [data-rub="Activisme"]{--rub-c:#7FBE9B} html[data-theme="dark"] [data-rub="Autres"]{--rub-c:#8FA6B8} .meta{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--muted-foreground)} .meta .sep{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5;flex:none} .meta.pilule{ background:#fff;border:1px solid var(--hairline);border-radius:999px; padding:9px 18px;box-shadow:var(--ombre-1);color:var(--sv-charcoal);font-weight:600; } html[data-theme="dark"] .meta.pilule{ background:#fff;border-color:transparent;color:var(--sv-charcoal); } .meta.pilule.petite{ padding:6px 13px;font-size:12.5px;align-self:flex-start;width:max-content;max-width:100%; gap:8px;box-shadow:none; } .carte-a .meta.pilule.petite,.carte-suite .meta.pilule.petite{margin-top:auto} .visuel{position:relative;overflow:hidden;background:var(--sv-gunmetal);isolation:isolate} .visuel img{ width:100%;height:100%;object-fit:cover; filter:grayscale(1) contrast(1.04) brightness(1.16); transition:filter .5s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1); } .visuel::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(150deg,var(--duo-a),var(--duo-b)); mix-blend-mode:color;opacity:.84;transition:opacity .5s ease; } html[data-theme="dark"] .visuel img{filter:grayscale(1) contrast(1.02) brightness(1.02)} html[data-theme="dark"] .visuel::after{opacity:.7} a:hover .visuel img,.visuel:hover img{filter:grayscale(0) contrast(1) brightness(1);transform:scale(1.035)} a:hover .visuel::after,.visuel:hover::after{opacity:.06} .visuel.typo{ display:grid;place-items:center;padding:18px;text-align:center; background:linear-gradient(145deg,var(--sv-gunmetal),var(--rub-c,var(--sv-true-blue)) 190%); } .visuel.typo::after{display:none} .visuel.typo span{ font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em; color:rgba(255,255,255,.62);line-height:1.5;max-width:26ch; } .visuel.typo span b{display:block;font-size:27px;letter-spacing:-.03em;text-transform:none;color:#fff;margin-bottom:5px} .pagin{ display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px 18px; margin-top:44px;padding-top:26px;border-top:1px solid var(--hairline); } .pagin .pagin-b:first-child{justify-self:start} .pagin .pagin-b:nth-of-type(2){justify-self:end} .pagin .compte{grid-column:1/-1;justify-self:center;font-size:13px;color:var(--muted-foreground)} .pagin .compte .chiffre{color:var(--foreground);font-weight:700} .pagin-n{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap} .pagin-n a,.pagin-n span{ display:inline-flex;align-items:center;justify-content:center; min-width:38px;height:38px;padding:0 12px;border-radius:11px; font-size:14px;font-weight:700;font-variant-numeric:tabular-nums; border:1px solid transparent;color:var(--muted-foreground); transition:color .18s,border-color .18s,background .18s,transform .18s; } .pagin-n a:hover{color:var(--primary);border-color:var(--primary);background:var(--card);transform:translateY(-1px)} .pagin-n .current{ color:var(--primary-foreground);border-color:transparent; background:linear-gradient(135deg,var(--sv-celestial-blue) 0%,var(--sv-true-blue) 55%,var(--sv-polynesian-blue) 100%); box-shadow:0 8px 18px -10px rgba(50,78,157,.75); } html[data-theme="dark"] .pagin-n .current{background:#fff;color:var(--sv-gunmetal);box-shadow:none} .pagin-n .dots{min-width:22px;padding:0;opacity:.5;pointer-events:none} .pagin-b{ display:inline-flex;align-items:center;gap:9px;flex:none;height:38px;padding:0 15px; border-radius:11px;border:1px solid var(--border);background:var(--card); font-size:13px;font-weight:700;color:var(--foreground); transition:color .18s,border-color .18s,transform .18s; } .pagin-b:hover{color:var(--primary);border-color:var(--primary);transform:translateY(-1px)} .pagin-b.morte{opacity:.35;pointer-events:none} .bouton{ display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:12px 22px;border-radius:999px;border:1px solid transparent; font-size:14.5px;font-weight:700;letter-spacing:-.005em;cursor:pointer; transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease; } .bouton:active{transform:translateY(1px)} .bouton.plein{ background:linear-gradient(135deg,var(--sv-celestial-blue) 0%,var(--sv-true-blue) 55%,var(--sv-polynesian-blue) 100%); color:#fff;box-shadow:0 6px 18px -8px rgba(50,78,157,.65); } .bouton.plein:hover{filter:brightness(1.07);box-shadow:0 9px 24px -9px rgba(50,78,157,.75)} html[data-theme="dark"] .bouton.plein{ background:#fff;color:var(--sv-polynesian-blue); box-shadow:0 6px 18px -8px rgba(0,0,0,.6); } html[data-theme="dark"] .bouton.plein:hover{background:var(--sv-alice-blue);filter:none} .bouton.creux{border-color:var(--border);background:transparent} .bouton.creux:hover{border-color:var(--primary);color:var(--primary)} .bouton .fl{transition:transform .22s ease} .bouton:hover .fl{transform:translateX(3px)} .bascule{display:flex;gap:3px;background:rgba(255,255,255,.07);padding:3px;border-radius:999px} .bascule button{ border:0;background:transparent;color:#BAC9D8;padding:6px 16px;border-radius:999px; font-size:13px;font-weight:700;cursor:pointer;transition:background .18s,color .18s; } .bascule button[aria-pressed="true"]{background:#fff;color:var(--sv-gunmetal)} html[data-theme="dark"] .bascule button[aria-pressed="true"]{background:var(--primary);color:var(--sv-gunmetal)} .pousse{margin-left:auto} .entete{ position:sticky;top:46px;z-index:80;background:color-mix(in srgb,var(--background) 88%,transparent); backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--hairline); } .entete .in{display:flex;align-items:center;gap:10px;height:74px} .entete .marque{margin-right:26px} .marque{display:flex;align-items:center;gap:11px;flex:none;align-self:center} .marque img{height:36px;width:auto} .marque .blanc{display:none} html[data-theme="dark"] .marque .noir{display:none} html[data-theme="dark"] .marque .blanc{display:block} .marque .sig{ font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.11em; color:var(--muted-foreground);border-left:1px solid var(--border);padding-left:11px;line-height:1.35; } .nav-rub{ display:flex;align-items:center;gap:0;overflow-x:auto;scrollbar-width:none; min-width:0;flex:0 1 auto; } .nav-rub::-webkit-scrollbar{display:none} .nav-rub a{ display:flex;align-items:center;position:relative; padding:10px 15px 12px;font-size:14px;font-weight:700;letter-spacing:-.014em;white-space:nowrap; color:var(--muted-foreground);transition:color .22s; } .nav-rub a::before{ content:"";position:absolute;left:50%;bottom:3px;width:5px;height:5px;margin-left:-2.5px; border-radius:50%;background:var(--rub-c,var(--primary)); opacity:0;transform:scale(.4);transition:opacity .22s,transform .28s cubic-bezier(.2,.7,.3,1); } .nav-rub a::after{ content:"";position:absolute;left:15px;right:15px;bottom:4px;height:2px;border-radius:999px; background:var(--rub-c,var(--primary)); transform:scaleX(0);transform-origin:center;transition:transform .28s cubic-bezier(.2,.7,.3,1); } .nav-rub a:hover,.nav-rub a:focus-visible{color:var(--rub-c,var(--primary))} .nav-rub a:hover::after,.nav-rub a:focus-visible::after{transform:scaleX(1)} .nav-rub a:hover::before,.nav-rub a:focus-visible::before{opacity:0;transform:scale(1)} .maisons{ display:flex;align-items:center;gap:2px;margin-left:auto;flex:none; padding-left:14px;border-left:1px solid var(--hairline); } .maisons a{ display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:10px; font-size:12.5px;font-weight:700;color:var(--muted-foreground);white-space:nowrap; transition:background .18s,color .18s; } .maisons a:hover{background:var(--sv-alice-blue);color:var(--sv-polynesian-blue)} html[data-theme="dark"] .maisons a:hover{background:rgba(255,255,255,.08);color:var(--foreground)} .maisons img{width:20px;height:20px;flex:none} .actions-entete{display:flex;align-items:center;gap:9px;flex:none;padding-left:14px} .actions-entete .bouton{padding:9px 14px;font-size:12.5px} .bascule-jour{ display:inline-flex;align-items:center;justify-content:center;flex:none; width:38px;height:38px;padding:0;border-radius:12px;cursor:pointer; border:1px solid var(--border);background:var(--card);color:var(--muted-foreground); transition:color .18s,border-color .18s,background .18s,transform .18s; } .bascule-jour:hover{color:var(--primary);border-color:var(--primary);transform:translateY(-1px)} .bascule-jour:focus-visible{outline:2px solid var(--ring);outline-offset:2px} .bascule-jour svg{display:block} .bascule-jour .lune{display:none} html[data-theme="dark"] .bascule-jour{background:var(--card);border-color:var(--border)} html[data-theme="dark"] .bascule-jour .lune{display:block} html[data-theme="dark"] .bascule-jour .soleil{display:none} .jauge-lecture{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent} .jauge-lecture i{display:block;height:100%;width:0;background:var(--primary);transition:width .1s linear} .une{padding:64px 0 20px;position:relative} .une::before{ content:"";position:absolute;inset:0 0 auto;height:420px;z-index:-1; background:radial-gradient(120% 100% at 12% 0%,color-mix(in srgb,var(--sv-uranian-blue) 42%,transparent),transparent 62%); } html[data-theme="dark"] .une::before{background:radial-gradient(120% 100% at 12% 0%,rgba(105,177,240,.14),transparent 62%)} .cadence{ display:flex;align-items:center;gap:14px;flex-wrap:wrap; padding-bottom:26px;margin-bottom:32px;border-bottom:1px solid var(--hairline); } .cadence .pastille{ display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700; text-transform:uppercase;letter-spacing:.07em;color:var(--muted-foreground); } .cadence .pastille b{color:var(--foreground);font-weight:900} .cadence .pastille.objectif{color:var(--foreground)} .cadence .pastille.objectif b{color:var(--lien-actif)} .pouls{width:8px;height:8px;border-radius:50%;background:var(--sv-turquoise);flex:none;position:relative} .pouls::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--sv-turquoise);opacity:.5;animation:pouls 2.6s ease-out infinite} @keyframes pouls{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.5);opacity:0}} .grille-une{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center} .une-texte h1{font-size:clamp(34px,4.3vw,60px);letter-spacing:-.035em;margin:16px 0 0} .une-texte .chapeau{ font-family:var(--serif);font-size:19px;line-height:1.6;color:var(--muted-foreground); margin:20px 0 0;max-width:56ch; } .une-texte .pied{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:30px} .une-visuel{position:relative} .une-visuel .visuel{border-radius:14px;aspect-ratio:4/3;box-shadow:var(--ombre-2)} .cartouche{ position:absolute;left:-26px;bottom:-24px;background:var(--card);border:1px solid var(--hairline); border-radius:12px;padding:15px 17px;box-shadow:var(--ombre-2);min-width:172px; } .cartouche .lb{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-foreground)} .cartouche .vl{font-size:27px;font-weight:900;letter-spacing:-.03em;line-height:1.1;margin-top:3px} .cartouche .ss{font-size:12.5px;color:var(--muted-foreground);margin-top:2px} .cartouche i{position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--primary)} .section{padding:76px 0} .section.serree{padding:56px 0} .tete-section{display:flex;align-items:flex-end;gap:24px;margin-bottom:34px;flex-wrap:wrap} .tete-section h2{font-size:clamp(25px,2.6vw,35px);letter-spacing:-.03em;margin-top:9px} .tete-section p{margin:9px 0 0;color:var(--muted-foreground);font-size:15px;max-width:62ch} .tete-section .droite{margin-left:auto} .inscription{ background:linear-gradient(135deg,var(--sv-celestial-blue) 0%,var(--sv-true-blue) 55%,var(--sv-polynesian-blue) 100%);color:#fff;border-radius:18px;overflow:hidden;position:relative; } html[data-theme="dark"] .inscription{background:#fff;color:var(--sv-charcoal)} .inscription .in{position:relative;display:grid;grid-template-columns:1fr 1.08fr;gap:46px;padding:44px 46px;align-items:center} .inscription h2{font-size:clamp(24px,2.4vw,33px);letter-spacing:-.03em;color:#fff} html[data-theme="dark"] .inscription h2{color:var(--sv-gunmetal)} .badge-grad{ display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px; background:linear-gradient(135deg,var(--sv-celestial-blue) 0%,var(--sv-true-blue) 55%,var(--sv-polynesian-blue) 100%); color:#fff;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.09em; box-shadow:0 6px 16px -8px rgba(50,78,157,.7); } .inscription .badge-grad{box-shadow:0 6px 16px -8px rgba(0,0,0,.45)} html[data-theme="dark"] .inscription .badge-grad{box-shadow:0 6px 16px -8px rgba(50,78,157,.6)} .inscription .surtitre{color:#fff} .inscription .surtitre::before{background:#fff} html[data-theme="dark"] .inscription .surtitre{color:var(--sv-true-blue)} html[data-theme="dark"] .inscription .surtitre::before{background:var(--sv-celestial-blue)} .inscription p{color:#fff;font-size:15px;margin:14px 0 0;max-width:46ch} html[data-theme="dark"] .inscription p{color:var(--sv-paynes-grey)} .inscription .atouts{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:9px} .inscription .atouts li{position:relative;padding-left:24px;font-size:14.5px;color:#fff;font-weight:600} html[data-theme="dark"] .inscription .atouts li{color:var(--sv-charcoal);font-weight:400} .inscription .atouts li::before{ content:"";position:absolute;left:0;top:.5em;width:11px;height:6px; border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg); } html[data-theme="dark"] .inscription .atouts li::before{border-color:var(--sv-turquoise)} .form-inscr{display:grid;grid-template-columns:1fr 1fr;gap:11px} .form-inscr .large{grid-column:1/-1} .champ{ width:100%;padding:13px 15px;border-radius:10px;background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.5);color:#fff;font-size:14.5px; transition:border-color .18s,background .18s; } .champ::placeholder{color:rgba(255,255,255,.8)} .champ:focus{outline:none;border-color:#fff;background:rgba(255,255,255,.26)} html[data-theme="dark"] .champ{ background:var(--sv-alice-blue);border-color:var(--sv-columbia-grey);color:var(--sv-charcoal); } html[data-theme="dark"] .champ::placeholder{color:var(--sv-paynes-grey)} html[data-theme="dark"] .champ:focus{border-color:var(--sv-celestial-blue);background:#fff} .form-inscr .bouton{ width:100%;background:#fff;color:var(--sv-polynesian-blue); box-shadow:0 8px 22px -10px rgba(28,39,50,.4); } .form-inscr .bouton:hover{background:var(--sv-alice-blue)} html[data-theme="dark"] .form-inscr .bouton{ background:linear-gradient(135deg,var(--sv-celestial-blue) 0%,var(--sv-true-blue) 55%,var(--sv-polynesian-blue) 100%);color:#fff;box-shadow:0 8px 22px -10px rgba(71,161,218,.6); } html[data-theme="dark"] .form-inscr .bouton:hover{filter:brightness(1.08);background:linear-gradient(135deg,var(--sv-celestial-blue) 0%,var(--sv-true-blue) 55%,var(--sv-polynesian-blue) 100%)} .mentions{grid-column:1/-1;font-size:12px;color:#fff;margin:2px 0 0;line-height:1.5} html[data-theme="dark"] .mentions{color:var(--sv-paynes-grey)} /* Le retour apres envoi du formulaire. Il se lit sur le degrade bleu comme sur le fond blanc du theme sombre : la couleur vient donc de .mentions, seule la graisse et la pastille changent. */ .mentions.retour-bon,.mentions.retour-mauvais{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;margin-top:10px} .mentions.retour-bon::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sv-turquoise);flex:none} .mentions.retour-mauvais::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sv-orange);flex:none} .barres.vu .p i{animation:pousse 1.05s cubic-bezier(.2,.7,.3,1)} @keyframes pousse{from{width:0}} .mosaique{display:grid;grid-template-columns:repeat(6,1fr);gap:14px} .tuile-rub{ grid-column:span 2;position:relative;border-radius:14px;overflow:hidden;min-height:186px; display:flex;flex-direction:column;justify-content:flex-end;padding:18px;color:#fff; border:1px solid var(--hairline);transition:transform .25s cubic-bezier(.2,.7,.3,1); background:var(--sv-gunmetal); } .tuile-rub:hover{transform:translateY(-3px)} .tuile-rub:nth-child(1),.tuile-rub:nth-child(2){grid-column:span 3;min-height:228px} .tuile-rub .fond{position:absolute;inset:0;z-index:0;background:var(--sv-gunmetal)} .tuile-rub .fond img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.55) contrast(1.05)} .tuile-rub .fond::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(28,39,50,.12) 0%,rgba(28,39,50,.55) 32%,rgba(28,39,50,.96) 58%,rgba(28,39,50,.98) 100%), linear-gradient(140deg,color-mix(in srgb,var(--rub-plein,var(--primary)) 62%,transparent),transparent 64%); } .tuile-rub>*{position:relative;z-index:1} .tuile-rub .rub{display:none} .tuile-rub .n{font-size:34px;font-weight:900;letter-spacing:-.04em;line-height:1} .tuile-rub .nom{font-size:18px;font-weight:900;letter-spacing:-.025em;margin-top:2px} .tuile-rub .dern{font-size:12.5px;color:#fff;opacity:.9;margin-top:7px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .grille-recentes{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 24px} .carte-a{display:flex;flex-direction:column;gap:11px} .carte-a .visuel{border-radius:11px;aspect-ratio:3/2} .carte-a h3{font-size:16.5px;line-height:1.28;letter-spacing:-.02em;transition:color .2s} .carte-a:hover h3{color:var(--primary)} .auteur{ display:grid;grid-template-columns:auto 1fr auto;gap:38px;align-items:center; background:var(--card-2);border:1px solid var(--hairline);border-radius:18px;padding:36px 40px; } html[data-theme="dark"] .auteur{background:var(--card)} .portrait{ width:148px;height:148px;border-radius:50%;flex:none;position:relative;overflow:hidden; background:var(--sv-charcoal);box-shadow:0 0 0 1px var(--hairline),0 0 0 7px var(--card); } .portrait img{width:100%;height:100%;object-fit:cover;object-position:center 18%} .portrait::after{ content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none; background:linear-gradient(160deg,transparent 55%,color-mix(in srgb,var(--sv-celestial-blue) 26%,transparent)); } .auteur h2{font-size:29px;letter-spacing:-.03em;margin-top:8px} .auteur .role{font-size:14.5px;color:var(--muted-foreground);margin:7px 0 0;font-weight:700} .auteur .bio{font-family:var(--serif);font-size:16.5px;line-height:1.62;margin:15px 0 0;max-width:64ch;color:var(--muted-foreground)} .auteur .rdv{display:flex;flex-direction:column;gap:10px;align-items:stretch;min-width:216px} .auteur .rdv .bouton{width:100%} .auteur .rdv .lg{font-size:12px;color:var(--muted-foreground);text-align:center;line-height:1.45} .tags-auteur{display:flex;gap:7px;flex-wrap:wrap;margin-top:17px} .tag{font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:999px;border:1px solid var(--hairline);color:var(--muted-foreground)} .pied-page{border-top:1px solid var(--hairline);background:var(--card-2);margin-top:24px} html[data-theme="dark"] .pied-page{background:#16202A} .pied-page .haut{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding:56px 0 44px} .pied-page h4{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--muted-foreground);margin-bottom:15px} .pied-page ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .pied-page li a{font-size:14px;color:var(--muted-foreground);transition:color .18s} .pied-page li a:hover{color:var(--primary)} .pied-page .desc{font-size:14px;color:var(--muted-foreground);margin:16px 0 0;max-width:36ch;line-height:1.6} .reseaux{display:flex;gap:9px;margin-top:18px} .reseaux a{ width:36px;height:36px;border-radius:9px;border:1px solid var(--hairline);display:grid;place-items:center; color:var(--muted-foreground);transition:border-color .18s,color .18s,background .18s; } .reseaux a:hover{border-color:var(--primary);color:var(--primary);background:var(--card)} .pied-page .bas{border-top:1px solid var(--hairline);padding:20px 0;display:flex;gap:18px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--muted-foreground)} .pied-page .bas a:hover{color:var(--primary)} .art-entete{padding:52px 0 40px;border-bottom:1px solid var(--hairline)} .art-entete .in{max-width:840px} .art-entete h1{font-size:clamp(31px,4vw,53px);letter-spacing:-.035em;margin:15px 0 0} .art-entete .chapeau{font-family:var(--serif);font-size:20px;line-height:1.6;color:var(--muted-foreground);margin:20px 0 0;max-width:60ch} .signature{display:flex;align-items:center;gap:13px;margin-top:28px;flex-wrap:wrap} .signature .av{ width:46px;height:46px;border-radius:50%;flex:none;overflow:hidden;background:var(--sv-charcoal); box-shadow:0 0 0 1px var(--hairline); } .signature .av img{width:100%;height:100%;object-fit:cover;object-position:center 18%} .signature .nm{font-size:14.5px;font-weight:900;letter-spacing:-.01em} .signature .dt{font-size:13px;color:var(--muted-foreground)} .art-visuel{margin:34px 0 0} .art-visuel .visuel{border-radius:14px;aspect-ratio:21/9} .art-visuel figcaption{font-size:12.5px;color:var(--muted-foreground);margin-top:9px} .enveloppe.large{width:min(100% - 32px,var(--large));margin-inline:auto} .art-corps{ display:grid;grid-template-columns:300px minmax(0,1fr); gap:0 64px;padding:48px 0 80px;align-items:start; } .rail{ position:sticky;top:136px;display:flex;flex-direction:column;gap:16px; max-height:calc(100vh - 160px);overflow:visible; } .rail > *{ background:linear-gradient(135deg,var(--sv-celestial-blue) 0%,var(--sv-true-blue) 55%,var(--sv-polynesian-blue) 100%);color:#fff;border-radius:18px;padding:22px 22px 24px; box-shadow:0 14px 34px -20px rgba(50,78,157,.6); } html[data-theme="dark"] .rail > *{ background:#fff;color:var(--sv-charcoal);box-shadow:0 14px 34px -22px rgba(0,0,0,.7); } .somm h4{ font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.1em; color:#fff;margin:0 0 14px; } html[data-theme="dark"] .somm h4{color:var(--sv-paynes-grey)} .somm ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;border-left:2px solid rgba(255,255,255,.45)} html[data-theme="dark"] .somm ol{border-left-color:var(--sv-columbia-grey)} .somm a{ display:block;padding:8px 0 8px 16px;margin-left:-2px;border-left:2px solid transparent; color:#fff;transition:color .2s,border-color .2s; font-size:14px;line-height:1.35;font-weight:700;letter-spacing:-.012em; } .somm a .chiffre{ display:inline-block;min-width:19px;font-size:11px;font-weight:800; color:#fff;letter-spacing:.03em; } .somm li.sous{position:relative} .somm li.sous a{ padding-left:32px;font-size:12.5px;font-weight:400;line-height:1.42; color:#fff;letter-spacing:0; } .somm li.sous a::before{ content:"";position:absolute;left:17px;top:1.05em;width:8px;height:1px; background:currentColor;opacity:.55; } .somm a:hover{color:#fff} .somm a[aria-current="true"]{color:#fff;border-left-color:#fff} .somm a[aria-current="true"] .chiffre{color:#fff} .somm li.sous a[aria-current="true"]{font-weight:700} html[data-theme="dark"] .somm a{color:var(--sv-charcoal)} html[data-theme="dark"] .somm a .chiffre{color:var(--sv-paynes-grey)} html[data-theme="dark"] .somm li.sous a{color:var(--sv-paynes-grey)} html[data-theme="dark"] .somm a:hover{color:var(--sv-gunmetal)} html[data-theme="dark"] .somm a[aria-current="true"]{color:var(--sv-true-blue);border-left-color:var(--sv-true-blue)} html[data-theme="dark"] .somm a[aria-current="true"] .chiffre{color:var(--sv-true-blue)} .partage h4{ font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.1em; color:#fff;margin:0 0 12px; } html[data-theme="dark"] .partage h4{color:var(--sv-paynes-grey)} .partage .liens{display:grid;grid-template-columns:1fr 1fr;gap:8px} .partage a,.partage button{ display:flex;align-items:center;justify-content:flex-start;gap:9px; padding:0 12px;height:42px;box-sizing:border-box;text-align:left;font:inherit; border-radius:11px;border:0;background:var(--rs);color:#fff; cursor:pointer;font-size:13px;font-weight:700; transition:transform .18s cubic-bezier(.2,.7,.3,1),filter .18s,box-shadow .18s; } .partage a svg,.partage button svg{flex:none;width:16px;height:16px} .partage .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .partage a:hover,.partage button:hover{filter:brightness(1.12);transform:translateY(-1px);box-shadow:var(--ombre-1)} #pt-li{--rs:#0A66C2} #pt-x{--rs:#000000} #pt-bs{--rs:#1185FE} #pt-copie{--rs:#44596B} html[data-theme="dark"] #pt-x{--rs:#2C3D4E} .prose{font-family:var(--serif);font-size:19px;line-height:1.7;color:var(--foreground)} .prose p{margin:0 0 24px} .prose h2{ font-family:var(--sans);font-size:32px;letter-spacing:-.035em;line-height:1.12; margin:64px 0 22px;scroll-margin-top:150px;position:relative;padding-top:30px; } .prose h2::before{ content:"";position:absolute;left:0;top:0;width:56px;height:5px;border-radius:999px; background:linear-gradient(90deg,var(--sv-celestial-blue),var(--sv-polynesian-blue)); } .prose h2::after{ content:"";position:absolute;left:68px;right:0;top:2px;height:1px;background:var(--hairline); } .prose h2:first-child{margin-top:0} .prose h3{ font-family:var(--sans);font-size:21px;letter-spacing:-.025em;line-height:1.25; margin:44px 0 15px;font-weight:900;padding-left:17px;position:relative; } .prose h3::before{ content:"";position:absolute;left:0;top:.22em;bottom:.22em;width:4px;border-radius:999px; background:var(--sv-celestial-blue); } .prose h4{ font-family:var(--sans);font-size:12px;font-weight:800;text-transform:uppercase; letter-spacing:.1em;color:var(--muted-foreground);margin:34px 0 10px; } .prose a{color:var(--primary);text-decoration:underline;text-underline-offset:3px} .prose ul{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:11px} .prose ul li{position:relative;padding-left:26px;line-height:1.6} .prose ul li::before{ content:"";position:absolute;left:2px;top:.62em;width:9px;height:2px;border-radius:2px;background:var(--primary); } .prose .lettrine::first-letter{ float:left;font-size:66px;line-height:.82;font-weight:600;padding:5px 12px 0 0;color:var(--primary); } .exergue{ margin:44px 0;padding:6px 0 6px 28px;border-left:3px solid var(--primary); font-family:var(--sans);font-size:24px;font-weight:900;letter-spacing:-.03em;line-height:1.3; } .exergue cite{display:block;font-size:13px;font-weight:700;font-style:normal;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-foreground);margin-top:13px} .figure{ margin:44px 0;border:1px solid var(--hairline);border-radius:14px;overflow:hidden;background:var(--card); font-family:var(--sans); } .figure .tete{padding:17px 20px;border-bottom:1px solid var(--hairline);background:var(--card-2)} html[data-theme="dark"] .figure .tete{background:rgba(255,255,255,.04)} .figure .tete .ti{font-size:15.5px;font-weight:900;letter-spacing:-.02em;margin-top:6px} .figure .grille{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hairline)} .tuile{background:var(--card);padding:18px 19px;position:relative} .tuile i{position:absolute;left:0;right:0;top:0;height:3px;background:var(--tui-c,var(--primary))} .tuile .vl{font-size:29px;font-weight:900;letter-spacing:-.04em;line-height:1.05;color:var(--foreground)} .tuile .lb{font-size:13px;color:var(--muted-foreground);line-height:1.45;margin-top:6px} .figure .pied{padding:12px 20px;border-top:1px solid var(--hairline);font-size:12px;color:var(--muted-foreground)} .barres{padding:20px;display:flex;flex-direction:column;gap:13px} .barres .b{display:grid;grid-template-columns:196px 1fr 58px;gap:14px;align-items:center;font-size:13.5px} .barres .b .p{height:9px;border-radius:999px;background:var(--muted);overflow:hidden} .barres .b .p i{display:block;height:100%;border-radius:999px;background:var(--bc,var(--primary));width:var(--w,0)} .barres .b .v{text-align:right;font-weight:900;font-variant-numeric:tabular-nums} .encadre{ margin:44px 0;padding:26px 28px;border-radius:18px;font-family:var(--sans); font-size:15.5px;line-height:1.62;color:#fff; background:linear-gradient(135deg,var(--sv-celestial-blue) 0%,var(--sv-true-blue) 55%,var(--sv-polynesian-blue) 100%); box-shadow:0 14px 34px -18px rgba(50,78,157,.75); } .encadre .surtitre{ color:#fff;margin-bottom:11px;font-weight:800;letter-spacing:.1em; } .encadre .surtitre::before{background:#fff;width:22px} .encadre p{margin:0} .encadre a{color:#fff;text-decoration:underline;text-underline-offset:3px} html[data-theme="dark"] .encadre{ background:#fff;color:var(--sv-charcoal);box-shadow:0 14px 34px -20px rgba(0,0,0,.7); } html[data-theme="dark"] .encadre .surtitre{color:var(--sv-true-blue)} html[data-theme="dark"] .encadre .surtitre::before{background:var(--sv-celestial-blue)} html[data-theme="dark"] .encadre a{color:var(--sv-true-blue)} .rdv-flottant{ position:fixed;right:24px;bottom:24px;z-index:70;display:flex;align-items:center;gap:11px; background:linear-gradient(135deg,var(--sv-celestial-blue) 0%,var(--sv-true-blue) 55%,var(--sv-polynesian-blue) 100%); color:#fff;border-radius:999px;padding:11px 20px 11px 13px; box-shadow:var(--ombre-2);opacity:0;transform:translateY(14px);pointer-events:none; transition:opacity .3s ease,transform .3s cubic-bezier(.2,.7,.3,1); } html[data-theme="dark"] .rdv-flottant{background:#fff;color:var(--sv-polynesian-blue)} .rdv-flottant.visible{opacity:1;transform:none;pointer-events:auto} .rdv-flottant .pt{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center;flex:none} html[data-theme="dark"] .rdv-flottant .pt{background:color-mix(in srgb,var(--sv-celestial-blue) 20%,transparent)} .rdv-flottant .tx{font-size:13.5px;font-weight:700;line-height:1.25} .rdv-flottant .tx small{display:block;font-weight:400;opacity:.75;font-size:11.5px} .suite{border-top:1px solid var(--hairline);padding:64px 0 20px} .grille-suite{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .carte-suite{ border:1px solid var(--hairline);border-radius:14px;overflow:hidden;background:var(--card); display:flex;flex-direction:column;transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s; } .carte-suite:hover{transform:translateY(-3px);box-shadow:var(--ombre-2)} .carte-suite .visuel{aspect-ratio:16/9} .carte-suite .bas{padding:17px 19px 20px;display:flex;flex-direction:column;gap:9px;flex:1} .carte-suite h3{font-size:17px;line-height:1.26;letter-spacing:-.022em} .carte-suite .pied{margin-top:auto;padding-top:11px} @media (min-width:1181px){ .figure{width:calc(100% + 152px)} .encadre{width:calc(100% + 96px)} } @media (max-width:1420px){ .maisons a .lbl{display:none} .maisons a{padding:6px 7px} } @media (max-width:1150px){ .maisons{display:none} } @media (max-width:1180px){ .art-corps{grid-template-columns:230px minmax(0,1fr);gap:0 40px} .grille-recentes{grid-template-columns:repeat(3,1fr)} } @media (max-width:980px){ .grille-une{grid-template-columns:1fr;gap:34px} .une-visuel{order:-1} .cartouche{left:auto;right:14px;bottom:-18px} .inscription .in{grid-template-columns:1fr;padding:34px 26px;gap:28px} .mosaique{grid-template-columns:repeat(2,1fr)} .tuile-rub,.tuile-rub:nth-child(1),.tuile-rub:nth-child(2){grid-column:span 1;min-height:170px} .auteur{grid-template-columns:1fr;gap:24px;padding:28px 24px;text-align:left} .auteur .rdv{min-width:0} .art-corps{grid-template-columns:1fr;gap:0} .rail{position:static;flex-direction:row;flex-wrap:wrap;gap:22px;justify-content:space-between; padding-bottom:26px;margin-bottom:30px;border-bottom:1px solid var(--hairline)} .somm{flex:1;min-width:260px} .pied-page .haut{grid-template-columns:1fr 1fr;gap:30px} .grille-suite{grid-template-columns:1fr} .figure .grille{grid-template-columns:repeat(2,1fr)} } @media (max-width:680px){ html{scroll-padding-top:210px} .prose h2{scroll-margin-top:210px} .barre-maquette{position:static} .barre-maquette .in{height:auto;padding:8px 0;flex-wrap:wrap;gap:9px} .entete{top:0} .entete .in{height:auto;padding:12px 0;flex-wrap:wrap;gap:12px} .nav-rub{order:3;width:100%;margin:0 -20px;padding:0 20px} .actions-entete{margin-left:auto} .grille-recentes{grid-template-columns:repeat(2,1fr)} .figure .grille{grid-template-columns:1fr} .barres .b{grid-template-columns:1fr 52px} .barres .b .p{grid-column:1/-1;order:3} .prose{font-size:17.5px} .rdv-flottant{right:12px;left:12px;bottom:12px;justify-content:center} .pied-page .haut{grid-template-columns:1fr} .pagin{grid-template-columns:1fr 1fr} .pagin-n{grid-column:1/-1;order:-1} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important} html{scroll-behavior:auto} }