/* ================================================================ AUREA NOVA CONSULTING · systeme commun aux deux sites Institutionnel : accent or mat #A98A3F Entreprises : accent bleu acier #2E6E8E (class .ent sur ) ================================================================ */ :root{ --e:#14161A; /* encre */ --n:#10243E; /* bleu nuit */ --or:#A98A3F; /* accent institutionnel */ --p:#F4F2ED; /* pierre */ --g:#5A626B; /* gris texte */ --f:#D8D6D0; /* filet */ --fond2:#FBFAF7; } body.ent{--or:#2E6E8E;--p:#F1F4F6;--f:#D3DADE;--fond2:#F8FAFB} *{margin:0;padding:0;box-sizing:border-box} img,svg{max-width:100%;display:block} html{scroll-behavior:smooth} body{font-family:'Source Sans 3',sans-serif;color:var(--e);background:#fff; font-size:17.5px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden} .w{max-width:1180px;margin:0 auto;padding:0 30px} .wn{max-width:840px;margin:0 auto;padding:0 30px} h1,h2,h3,h4{font-family:'Spectral',serif;color:var(--n);font-weight:700;line-height:1.08} a{color:inherit} /* ---- apparition au fil de la lecture ---- */ .rv{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease} .rv.on{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}} /* ---- navigation : une seule ligne, jamais de retour a la ligne ---- */ .nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96); backdrop-filter:blur(8px);border-bottom:1px solid var(--f)} .nav-in{max-width:1180px;margin:0 auto;padding:12px 30px;display:flex; align-items:center;justify-content:space-between;gap:20px;flex-wrap:nowrap} /* logotype horizontal, version A : le cartouche porte le filet d'or, donc le nom reste sobre. Taille minimale respectee : 130 px. */ .marque{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none;white-space:nowrap} .marque img{width:38px;height:38px;flex:none;object-fit:contain} .marque .nm{font-family:'Spectral',serif;font-weight:800;font-size:20px;color:var(--n); line-height:1.02;letter-spacing:-.01em} .marque .nm.caps{text-transform:uppercase;letter-spacing:.05em;font-size:19px} .marque .nm small{display:block;font-family:'Source Sans 3',sans-serif;font-weight:700; font-size:8.5px;letter-spacing:.3em;text-transform:uppercase; color:var(--e);margin-top:3px} /* logotype trace : une seule image, hauteur fixe, largeur libre */ .marque.logotype{display:block} .marque.logotype img{height:42px;width:auto;max-width:none} @media(max-width:560px){.marque.logotype img{height:34px}} .nav .liens{display:flex;gap:20px;font-size:14px;font-weight:600; flex:0 1 auto;min-width:0;justify-content:flex-end} .nav .liens a{text-decoration:none;padding-bottom:3px;border-bottom:2px solid transparent;white-space:nowrap} .nav .liens a:hover{border-bottom-color:var(--or)} .nav .cta{background:var(--n);color:#fff;font-weight:700;font-size:13.5px; padding:11px 18px;text-decoration:none;white-space:nowrap;flex:none} .nav .cta:hover{background:var(--or)} @media(max-width:1080px){.nav .liens{display:none}} @media(max-width:560px){ .nav-in{padding:10px 18px;gap:12px} .marque{gap:9px}.marque img{width:32px;height:32px}.marque .nm{font-size:17px} .nav .cta{font-size:12px;padding:10px 13px} } /* ---- bandeau ---- */ .hero{background:var(--n);color:#E8ECF1;position:relative;overflow:hidden} .hero .w{padding-top:76px;padding-bottom:80px;position:relative;z-index:2} .hero .k{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--or)} .hero h1{color:#fff;font-size:clamp(31px,5.2vw,66px);line-height:1.03;margin-top:16px;max-width:15ch} .hero h1 em{font-style:normal;color:var(--or)} .hero .act{margin-top:34px;display:flex;gap:18px;align-items:center;flex-wrap:wrap} .hero .b1{background:var(--or);color:#fff;font-weight:700;font-size:15.5px;padding:15px 30px;text-decoration:none} .hero .b1:hover{background:#fff;color:var(--n)} .hero .b2{color:#E8ECF1;font-weight:600;font-size:15px;text-decoration:none; border-bottom:1px solid rgba(232,236,241,.45);padding-bottom:5px} .hero .b2:hover{border-bottom-color:var(--or);color:var(--or)} @media(max-width:700px){.hero .w{padding-top:52px;padding-bottom:56px}.hero h1{max-width:100%}} /* ---- sections ---- */ .s{padding:82px 0} .s.pierre{background:var(--p)} .s.creme{background:var(--fond2)} .s .k{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--or);display:block;margin-bottom:9px} .s h2{font-size:clamp(26px,3.5vw,42px);max-width:21ch} .s .lead{font-size:19px;color:var(--g);max-width:66ch;margin-top:15px} @media(max-width:820px){.s{padding:54px 0}} /* ================================================================ TRANSITION ENTRE SECTIONS Un filet, un glyphe, une respiration. Toujours le meme geste. ================================================================ */ .tr{padding:0;background:#fff;position:relative} .tr.surpierre{background:var(--p)} .tr .in{max-width:1180px;margin:0 auto;padding:0 30px;display:flex;align-items:center;gap:18px} .tr .l{flex:1;height:1px;background:var(--f)} .tr svg{width:26px;height:26px;flex:none;color:var(--or)} .tr .n{font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--or);flex:none} .tr.plein{padding:46px 0} /* ================================================================ TEMPS DE PAUSE Une phrase, beaucoup d'air, rien a cliquer. ================================================================ */ .pause{padding:112px 0;text-align:center;background:#fff} .pause.nuit{background:var(--n)} .pause.pierre{background:var(--p)} .pause .fil{width:1px;height:58px;margin:0 auto 36px; background:linear-gradient(180deg,transparent,var(--or))} .pause .ph{font-family:'Spectral',serif;font-weight:800; font-size:clamp(24px,3.6vw,44px);color:var(--n); line-height:1.16;max-width:21ch;margin:0 auto} .pause.nuit .ph{color:#fff} .pause .ph em{font-style:italic;color:var(--or)} .pause .sub{max-width:48ch;margin:20px auto 0;font-size:16.5px;color:var(--g)} .pause.nuit .sub{color:#B6C0CC} @media(max-width:820px){.pause{padding:64px 0}.pause .ph{max-width:100%}} /* ---- etiquettes de fonction ---- */ .tg{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:20px} .tg li{font-size:13px;font-weight:600;padding:6px 13px;border:1px solid var(--f);color:#4A525C} /* ---- portes ---- */ .portes{display:grid;grid-template-columns:1fr 1fr; grid-template-rows:auto auto auto auto;margin-top:34px;border-top:2px solid var(--e)} .portes .pte{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:0; text-decoration:none;padding:26px 38px 26px 0} .portes .pte+.pte{padding:26px 0 26px 38px;border-left:1px solid var(--f)} .portes .kk{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--or);align-self:start} .portes .ph{font-family:'Spectral',serif;font-weight:800;font-size:clamp(21px,2.5vw,29px); color:var(--n);margin-top:9px;max-width:16ch;line-height:1.12;align-self:start} .portes .tg{align-self:start} .portes .ll{margin-top:22px;font-weight:700;font-size:14px;color:var(--n); border-bottom:2px solid var(--or);padding-bottom:4px;justify-self:start;align-self:start} .portes .pte:hover .ll{color:var(--or)} /* ---- listes en colonnes ---- */ .decl{list-style:none;columns:2;column-gap:46px;margin-top:26px} .decl li{padding:12px 0 12px 20px;position:relative;border-bottom:1px solid var(--f); break-inside:avoid;font-size:16px;color:#2C343D} .decl li::before{content:"";position:absolute;left:0;top:20px;width:7px;height:7px;background:var(--or)} /* ---- pictogrammes : discrets, ils n'ecrasent jamais le titre ---- */ .ico{width:28px;height:28px;color:var(--or);opacity:.72;flex:none} .cartes .ico{margin-bottom:11px} .fam .bloc .ico{width:24px;height:24px;margin-right:2px} .pal .ico{margin-bottom:10px;align-self:start} @media(max-width:900px){.ico{width:24px;height:24px}} /* ---- grille de cartes ---- */ /* colonnes de largeur STRICTEMENT egale : la gouttiere est un column-gap, pas un retrait interieur. Sinon la premiere colonne est plus large que les deux autres et les textes ne se coupent pas au meme endroit. */ .cartes{display:grid;grid-template-columns:repeat(3,1fr);column-gap:52px;margin-top:34px;border-top:2px solid var(--e)} .cartes>div{padding:24px 0 26px;border-bottom:1px solid var(--f);display:flex;flex-direction:column;position:relative} .cartes>div:nth-child(3n+2)::before,.cartes>div:nth-child(3n)::before{content:"";position:absolute;left:-26px;top:0;bottom:-1px;width:1px;background:var(--f)} .cartes .no{font-family:'Spectral',serif;font-size:13px;color:var(--or);font-weight:700;letter-spacing:.1em} .cartes .no.rom{font-family:'Spectral',serif;font-size:19px;font-weight:700;color:var(--or);letter-spacing:.22em;line-height:1} .cartes h3{font-size:20px;margin-top:8px} .cartes p{font-size:14.5px;color:var(--g);margin-top:7px} /* l'etiquette se cale en bas : les trois colonnes s'alignent quel que soit le nombre de lignes du paragraphe qui la precede */ .cartes .bg{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:#fff;background:var(--or);padding:4px 9px; margin-top:16px;align-self:flex-start} .cartes>div:has(.bg) p{margin-bottom:auto} .cartes .bg.gris{background:var(--g)} /* ---- deux colonnes ---- */ .duo{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:34px;align-items:start} .duo h3{font-size:22px;margin-bottom:10px} .det{list-style:none} .det li{padding:12px 0;border-bottom:1px solid var(--f)} .det li:first-child{border-top:2px solid var(--e)} .det li b{display:block;font-family:'Spectral',serif;font-size:17px;color:var(--n)} .det li span{font-size:14.5px;color:var(--g)} /* ---- modeles graphiques ---- */ .mod{margin-top:32px} .mod svg{width:100%;height:auto} .mod .lg{font-size:13.5px;color:var(--g);margin-top:14px;max-width:74ch} .cf{fill:none;stroke:#C6C4BE;stroke-width:1.6} .co{fill:none;stroke:currentColor;stroke-width:2} .bl{fill:#F4F2ED}.bn{fill:#10243E}.bo{fill:currentColor} .tx{font-family:'Source Sans 3',sans-serif;font-size:15px;fill:#14161A} .txw{font-family:'Source Sans 3',sans-serif;font-size:13px;font-weight:700;fill:#fff} .txk{font-family:'Source Sans 3',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.08em;fill:currentColor} .txp{font-family:'Source Sans 3',sans-serif;font-size:13px;fill:#5A626B} .pt{fill:currentColor}.ptn{fill:#10243E} .mods{color:var(--or)} /* onglets de modeles, sans JS : ancres */ .choix{display:flex;flex-wrap:wrap;gap:0;margin-top:26px;border-bottom:2px solid var(--e)} .choix a{text-decoration:none;font-size:14px;font-weight:700;padding:12px 20px;color:var(--g)} .choix a:hover{color:var(--n);background:var(--p)} /* ---- tableau ---- */ table.t{width:100%;border-collapse:collapse;margin-top:26px;font-size:15.5px} table.t th{font-family:'Spectral',serif;font-weight:700;text-align:left; border-bottom:2px solid var(--e);padding:11px 12px 11px 0;color:var(--n);font-size:16px} table.t td{border-bottom:1px solid var(--f);padding:12px 12px 12px 0;vertical-align:top} table.t td:first-child{font-family:'Spectral',serif;font-size:17px;color:var(--n);width:26%} table.t td.g{color:var(--g);font-size:15px} /* ---- bloc sombre ---- */ .nuit{background:var(--n);color:#DDE3EA;padding:86px 0} .nuit h2{color:#fff} .nuit .k{color:var(--or)} .nuit p{color:#B6C0CC} .nuit .fil{width:64px;height:3px;background:var(--or);margin-top:26px} /* ---- pied ---- */ .pied{background:#0C1B2E;color:#93A1B2;padding:56px 0 34px;font-size:14.5px} .pied .c{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px} .pied h4{color:#fff;font-size:16px;margin-bottom:12px} .pied ul{list-style:none} .pied li{padding:4px 0} .pied a{color:#93A1B2;text-decoration:none} .pied a:hover{color:var(--or)} .pied .bas{border-top:1px solid rgba(255,255,255,.12);margin-top:34px;padding-top:18px;font-size:12.5px;color:#6B7A8C} @media(max-width:900px){ .cartes{grid-template-columns:1fr} .cartes{column-gap:0} .cartes>div{padding:20px 0} .cartes>div::before{display:none} .duo{grid-template-columns:1fr;gap:34px} .decl{columns:1} .portes{grid-template-rows:none;grid-template-columns:1fr} .portes .pte,.portes .pte+.pte{display:block;grid-row:auto;padding:24px 0} .portes .pte+.pte{border-left:none;border-top:1px solid var(--f)} .portes .ph{max-width:100%} .pied .c{grid-template-columns:1fr;gap:26px} table.t td:first-child{width:auto} }