/* Feuille commune aux pages legales — reprend la charte du site */ @import url('fonts.css'); :root{ --navy:#1B294B; --navy-deep:#141F3A; --ivory:#F6F2E9; --travertine:#C9BFAE; --text-dim:rgba(246,242,233,.66); --line:rgba(246,242,233,.16); } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{ background:var(--navy);color:var(--ivory); font-family:'Inter',sans-serif;font-size:16px;line-height:1.7; -webkit-font-smoothing:antialiased; } h1,h2,h3{font-family:'Fraunces',serif;font-variation-settings:'SOFT' 0,'WONK' 0;} :focus-visible{outline:2px solid var(--travertine);outline-offset:3px;border-radius:2px;} .grain{ position:fixed;inset:0;z-index:9998;pointer-events:none; opacity:.055;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .bar{ position:sticky;top:0;z-index:10; display:flex;align-items:center;gap:16px; padding:20px 48px;background:rgba(27,41,75,.88);backdrop-filter:blur(12px); border-bottom:1px solid var(--line); transform:translateZ(0);will-change:transform; } .bar a{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ivory);} .bar img{width:46px;height:46px;display:block;} .bar small{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--travertine);} .retour{ margin-left:auto;font-size:13.5px;color:var(--travertine);text-decoration:none; border:1px solid rgba(246,242,233,.4);border-radius:2px;padding:10px 20px; transition:background .3s,color .3s; } .retour:hover{background:var(--ivory);color:var(--navy);border-color:var(--ivory);} main{max-width:820px;margin:0 auto;padding:72px 48px 110px;} .eyebrow{ font-size:12px;letter-spacing:.2em;text-transform:uppercase; color:var(--travertine);margin-bottom:18px; } h1{font-size:clamp(34px,5vw,58px);font-weight:500;line-height:1.06;letter-spacing:-.02em;} .maj{margin-top:16px;font-size:13.5px;color:var(--text-dim);} /* Sections repliables : chaque h2 devient un cliquable, sans JavaScript, via
natif. */ .acc{border-top:1px solid var(--line);} .acc summary{ list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent; -webkit-appearance:none;appearance:none; display:flex;align-items:center;justify-content:space-between;gap:20px; padding:26px 0;font-family:'Fraunces',serif; font-size:24px;font-weight:500;color:var(--ivory); transition:color .25s ease; } /* Safari (macOS recents) ignore parfois -webkit-details-marker seul et affiche quand meme son triangle natif : appearance:none ci-dessus est le verrou qui le supprime vraiment sur ces versions. */ .acc summary::marker{content:'';} .acc summary::-webkit-details-marker{display:none;} .acc summary:hover{color:var(--travertine);} .acc summary .chevron{ display:block;flex-shrink:0;width:15px;height:15px;color:var(--travertine); transition:transform .3s cubic-bezier(.16,1,.3,1); } .acc[open] summary .chevron{transform:rotate(180deg);} .acc-body{padding-bottom:30px;} .acc-body>*:last-child{margin-bottom:0;} h3{font-size:17px;font-weight:500;margin:26px 0 8px;color:var(--travertine);} /* Texte justifie, comme sur un contrat imprime : bords droits nets plutot que la marge irreguliere du texte aligne a gauche seul. L'union de hyphens:auto et lang="fr" (sur ) active la cesure francaise. */ p{ margin-bottom:14px;color:rgba(246,242,233,.84); text-align:justify;text-justify:inter-word; -webkit-hyphens:auto;hyphens:auto; } a{color:var(--ivory);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--travertine);} a:hover{color:var(--travertine);} ul{margin:0 0 16px 22px;} li{ margin-bottom:8px;color:rgba(246,242,233,.84); text-align:justify;text-justify:inter-word; -webkit-hyphens:auto;hyphens:auto; } /* Ligne d'identite discrete, hors du tableau : presente et exacte (obligation legale), sans etre le premier element visuel de la page. */ .discret{ font-size:12.5px;color:rgba(246,242,233,.45);margin-top:10px; text-align:left; } dl.infos{ display:grid;grid-template-columns:210px 1fr;gap:12px 26px; margin:20px 0 8px;padding:24px 26px; background:var(--navy-deep);border-radius:5px;border:1px solid var(--line); } dl.infos dt{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--travertine);padding-top:4px;} dl.infos dd{margin:0;} /* Champ que l'exploitant du site doit completer avant mise en ligne */ .todo{ display:inline;background:rgba(232,160,160,.14); border:1px dashed rgba(232,160,160,.75); border-radius:3px;padding:2px 9px;color:#F0C0C0;font-size:14.5px; font-family:'Inter',sans-serif; /* Le texte doit pouvoir passer a la ligne : certains libelles sont longs */ white-space:normal;overflow-wrap:anywhere; } .avis{ margin:30px 0;padding:20px 24px;border-left:3px solid var(--travertine); background:rgba(201,191,174,.09);border-radius:0 4px 4px 0; font-size:14.5px;color:rgba(246,242,233,.86); } .avis strong{color:var(--travertine);} footer{ border-top:1px solid var(--line);padding:34px 48px 46px; text-align:center;font-size:13px;color:var(--text-dim); } footer a{color:rgba(246,242,233,.8);text-decoration:none;margin:0 10px;} footer a:hover{color:var(--travertine);} @media(max-width:700px){ .bar{padding:16px 20px;} .retour{padding:9px 14px;font-size:12.5px;} main{padding:48px 20px 80px;} dl.infos{grid-template-columns:1fr;gap:4px 0;padding:20px;} dl.infos dt{padding-top:14px;} }