/* SOSERIM — feuille autonome de la page espace membre : socle limité aux composants utilisés
   ici (nav et footer complets du site), puis l'aiguillage connexion / adhésion.
   Source de vérité des composants partagés : style.css (design system). */
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/poppins-400.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/poppins-500.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/poppins-600.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/poppins-700.woff2) format("woff2")}

:root{
--font:"Poppins",system-ui,sans-serif;
--ink:#221b4e;--body:#4d4966;--muted:#6e6890;
--primary:#4a38a8;--lav50:#f7f5fc;--lav100:#efebf9;--line:#e7e4f1;--accent:#0b7d91;
--err:#c2375d;--err50:#fbeef3; /* framboise diluée : signaux d'échec de saisie, jamais décorative */
--grad:linear-gradient(92deg,#4a38a8,#3f63c9 55%,#129cb5);
--r:16px;--rs:10px;
--sh1:0 1px 2px rgba(34,27,78,.05),0 4px 16px rgba(34,27,78,.07);
--sh2:0 6px 14px rgba(34,27,78,.1),0 18px 44px rgba(34,27,78,.14);
}

/* Base */
*{box-sizing:border-box;margin:0}
html{font-size:112.5%;scroll-behavior:smooth} /* 18px : lectorat senior */
body{font:400 1rem/1.65 var(--font);color:var(--body);background:#fff;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
h1,h2{color:var(--ink);font-weight:700;line-height:1.18;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(2rem,5vw,3.7rem);line-height:1.12} /* plancher mobile : 36px, borne basse de l'échelle */
p{max-width:70ch}
.lead{font-size:1.125rem;color:var(--muted)}
a{color:var(--primary);text-underline-offset:3px}
::selection{background:var(--primary);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.skip{position:absolute;top:-100%;left:0;z-index:30;padding:.6rem 1.2rem;background:var(--primary);color:#fff;border-radius:0 0 var(--rs) 0}
.skip:focus{top:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* libellé réservé aux lecteurs d'écran */
.wrap{max-width:1350px;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}
.cy{color:var(--accent)}

/* Navigation : barre collante, ombre fondue dès que la page défile (classe posée par script.js) */
body>header{position:sticky;top:0;z-index:20}
.nav{padding-block:.7rem;background:#fff;border-bottom:1px solid var(--line);transition:box-shadow .3s}
.nav.pose{box-shadow:var(--sh1)}
.nav-in{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2rem}
.nav-in>.btn{justify-self:end;padding:.6rem 1.4rem}
.nav-logo{display:flex;align-items:center;gap:.65rem;justify-self:start;color:var(--ink);text-decoration:none}
.nav-nom{display:block;font:700 1.15rem/1.15 var(--font);letter-spacing:-.01em}
.nav-nom i{display:block;font:400 .6875rem/1.3 var(--font);font-style:normal;color:var(--muted)}
.nav-logo img{height:48px;width:auto}
.nav-links{display:flex;justify-self:center;position:relative;gap:1.6rem;list-style:none;padding:0}
.nav-links a{color:var(--body);text-decoration:none;font-weight:500;font-size:.9375rem;transition:color .25s}
.nav-links a:hover,.nav-links a[aria-current=page]{color:var(--primary)}
/* Filet du menu : trait au dégradé du logo qui glisse d'une entrée à l'autre. Il se cale sous
   l'entrée courante, suit le survol et le focus ; script.js pose sa position et sa largeur. */
.nav-links::after{content:"";position:absolute;left:0;bottom:-.35rem;width:var(--w,0);height:2px;border-radius:2px;background:var(--grad);box-shadow:0 2px 10px rgba(18,156,181,.45);opacity:0;translate:var(--x,0) 0;transition:translate .42s cubic-bezier(.32,.72,0,1),width .42s cubic-bezier(.32,.72,0,1),opacity .3s}
.nav-links.filet::after{opacity:1}
.burger{display:none;flex-direction:column;gap:.32rem;align-items:center;justify-content:center;margin-left:auto;width:2.6rem;height:2.6rem;border:1px solid var(--line);border-radius:50%;background:#fff;cursor:pointer}
.burger i{width:1.1rem;height:2px;background:var(--ink);border-radius:2px}
/* Libellé du bouton de compte : la version courte prend le relais en tablette, où le
   libellé long casserait sur deux lignes dans sa pilule */
.nav .lib{font-size:13px}
.nav .lib-c{display:none}
/* Entre le tiroir et le desktop large, le menu à six entrées se resserre et le bouton de
   compte prend son libellé court */
@media(min-width:1001px) and (max-width:1300px){
.nav .lib{display:none}
.nav .lib-c{display:inline}
.nav-nom i{display:none}
.nav-in{gap:1.2rem}
.nav-links{gap:1rem}
.nav-links a{font-size:.875rem}
}

/* Boutons, icônes */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem 1.6rem;border:1px solid transparent;border-radius:999px;font:600 .9375rem/1 var(--font);letter-spacing:.01em;color:#fff;background:var(--primary);cursor:pointer;text-decoration:none;transition:transform .2s,box-shadow .2s,filter .2s,border-color .2s}
.btn:hover{transform:translateY(-1px);box-shadow:var(--sh2);filter:brightness(1.07)}
.btn:active{transform:none;filter:brightness(.97)}
.btn-o{background:#fff;color:var(--primary);border-color:var(--line)}
.btn-o:hover{border-color:var(--primary);filter:none}
.btn-disc{display:grid;place-items:center;flex:none;width:1.3rem;height:1.3rem;margin:-.5rem 0 -.5rem -1rem;border-radius:50%;background:rgba(255,255,255,.2)}
.btn-disc .ico,.btn>.ico{width:1.05rem;height:1.05rem}
.ico{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Champs et coches : famille reprise du design system */
.field{display:grid;gap:.4rem}
.field>label{font-size:.9375rem;font-weight:600;color:var(--ink)}
.input{width:100%;padding:.7rem 1rem;background:#fff;border:1px solid var(--line);border-radius:var(--rs);font:inherit;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--lav100)}
.checks{list-style:none;padding:0;display:grid;gap:.65rem}
.checks li{display:flex;gap:.65rem;align-items:flex-start;font-weight:500;color:var(--ink)}
.checks .ico{color:var(--accent);margin-top:.2rem}
.pic{display:grid;place-items:center;flex:none;border-radius:50%;background:var(--lav50)}

/* Aiguillage : titre centré puis deux cartes jumelles — la connexion blanche et portée par son
   ombre, l'adhésion sur lavande pâle (la primaire diluée du système), bouton contour en pied. */
.em{padding-block:clamp(4rem,8vw,6rem);background:var(--lav50)}
.em-head{display:grid;gap:.75rem;justify-items:center;text-align:center;margin-bottom:2.6rem}
.em-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem;max-width:52rem;margin-inline:auto}
.em-card{display:flex;flex-direction:column;gap:1rem;padding:2rem 1.9rem;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh1)}
.em-card h2{font-size:1.3rem}
.em-note{font-size:.9375rem;color:var(--muted)}
.em-card form{display:grid;gap:1rem}
.em-card form[hidden]{display:none} /* sans quoi la grille ci-dessus rouvre un formulaire masqué */
.em-forgot{justify-self:end;font-size:.9rem;font-weight:500}
.em-card .btn{width:100%}
.em-join{background:var(--lav100);box-shadow:none}
.em-join .btn{margin-top:auto}
.em-join .checks{margin-block:.2rem .9rem}
/* Mot de passe oublié : une carte seule, au gabarit d'une demi-grille de l'aiguillage */
.em-one{width:min(100%,25.4rem);margin-inline:auto}
.em-back{text-align:center;font-size:.9rem;font-weight:500}

/* Pied de page : bandeau lettre d'information sous halo violet — la profondeur des fonds
   sombres passe par le halo, jamais par une ombre —, puis identité, réseaux et colonnes de
   liens, enfin la barre de mentions sur un fond d'un cran plus profond. */
.ft{background:var(--ink);color:#c9c2e8}
.ft a{color:#c9c2e8;text-decoration:none;transition:color .2s}
.ft a:hover{color:#fff}
.ft :focus-visible{outline-color:#5fd0e4} /* le cyan du système tomberait à 3,2:1 sur ce fond */
.ft-news{background:radial-gradient(58% 130% at 38% -10%,#3a2c86,transparent 62%);border-bottom:1px solid rgba(255,255,255,.1)}
.ft-news-in{display:grid;grid-template-columns:1fr 1fr;gap:2rem 3.5rem;align-items:center;padding-block:3.6rem}
.ft-news h2{color:#fff;max-width:20ch;font-size:clamp(1.7rem,3.4vw,2.6rem)} /* échelon headline */
.ft-news .mark{color:#5fd0e4} /* le cyan du système tomberait à 3,2:1 sur ce fond */
.ft-sub{display:grid;gap:1.2rem}
.ft-sub-t{display:flex;align-items:flex-start;gap:.9rem;font-size:.9375rem}
.ft-sub-t .pic{width:2.4rem;height:2.4rem;background:rgba(255,255,255,.08);color:#fff}
.ft-form{display:flex;align-items:center;gap:.5rem;padding:.4rem .4rem .4rem 1.3rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:999px;transition:border-color .2s}
.ft-form:focus-within{border-color:rgba(255,255,255,.34)}
.ft-form input{flex:1;min-width:0;padding:.55rem 0;background:none;border:0;color:#fff;font:400 .9375rem var(--font)}
.ft-form input::placeholder{color:#c9c2e8;opacity:.62}
.ft-form input:focus{outline:0} /* l'anneau se pose sur la pilule entière, pas sur le champ nu */
.ft-form button{display:grid;place-items:center;flex:none;width:2.7rem;height:2.7rem;background:var(--primary);border:0;border-radius:var(--rs);color:#fff;cursor:pointer;transition:filter .2s}
.ft-form button:hover{filter:brightness(1.15)}
.ft-top{display:grid;grid-template-columns:1.7fr repeat(3,1fr);gap:2.5rem 2.4rem;padding-block:3.4rem}
.ft-id{display:grid;justify-items:start;gap:1.1rem;max-width:24rem}
.ft .ft-logo{display:flex;align-items:center;gap:.7rem;font:700 1.3rem var(--font);color:#fff}
/* Le logo est une image carrée sur fond blanc : la pastille doit contenir sa diagonale
   (2 × 1,41 = 2,83 rem) pour que ses angles se fondent dans le blanc au lieu d'en déborder. */
.ft-mark{display:grid;place-items:center;flex:none;width:3rem;height:3rem;background:#fff;border-radius:50%}
.ft-mark img{width:2rem;height:auto}
.ft-id p{font-size:.9375rem}
.ft-soc{display:flex;gap:.6rem;list-style:none;padding:0}
.ft-soc a{display:grid;place-items:center;width:2.4rem;height:2.4rem;border:1px solid rgba(255,255,255,.2);border-radius:50%;transition:background .2s,border-color .2s}
.ft-soc a:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4)}
.sico{width:1.05rem;height:1.05rem;fill:currentColor} /* glyphes de marque : pleins, hors set trait */
.ft-col h2{font-size:1rem;color:#fff}
.ft-col ul{display:grid;gap:.7rem;margin-top:1.3rem;list-style:none;padding:0}
.ft-col a{font-size:.9375rem}
.ft-contact p{margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.12);font-size:.9375rem}
.ft-base{background:rgba(0,0,0,.22);border-top:1px solid rgba(255,255,255,.08)}
.ft-base-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.8rem;padding-block:1.3rem;font-size:.875rem}
.ft-base ul{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;list-style:none;padding:0}

/* États d'échange avec le serveur — reprise du design system (style.css n'est chargé par
   aucune page servie). Attente pendant la connexion, échec d'identifiants. */
.btn[aria-busy=true]{pointer-events:none;opacity:.85}
.btn[aria-busy=true]::before{content:"";width:.95em;height:.95em;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{rotate:1turn}}
.field.err .input{border-color:var(--err)}
.field.err .input:focus{box-shadow:0 0 0 3px #f7dee5}
.err-msg{font-size:.85rem;font-weight:600;color:var(--err)}
/* Échec de connexion : un seul message, au-dessus du bouton, jamais un bandeau flottant */
.em-err{display:none;padding:.7rem .9rem;border-radius:var(--rs);background:var(--err50);color:var(--err);font-size:.9rem;font-weight:600}
.em-err.on{display:block}
/* Indicatif fixe accolé au champ : le socle n'interroge que le numéro, en format international */
.tel{display:flex;align-items:stretch}
.tel .ind{display:flex;align-items:center;padding:0 .8rem;border:1px solid var(--line);border-right:0;border-radius:var(--rs) 0 0 var(--rs);background:var(--lav100);color:var(--body);font-weight:600}
.tel .input{border-radius:0 var(--rs) var(--rs) 0}
/* Bascule d'affichage du mot de passe : bouton posé dans le champ, dont la réserve à droite
   empêche le texte saisi de passer dessous */
.pw{position:relative}
.pw .input{padding-right:3rem}
.pw-b{position:absolute;top:50%;right:.5rem;translate:0 -50%;display:grid;place-items:center;width:2rem;height:2rem;padding:0;border:0;border-radius:50%;background:none;color:var(--body);cursor:pointer;transition:background .2s,color .2s}
.pw-b:hover{background:var(--lav100);color:var(--primary)}
.pw-b:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.pw-b .ico{width:1.15rem;height:1.15rem}

/* Menu en tiroir (tablette et mobile) : le panneau glisse de la droite sous un voile encre, le
   burger se mue en croix et reste cliquable par-dessus, le bouton de compte se cale au pied. */
@media(max-width:1000px){
.nav-in{display:flex;justify-content:space-between}
.burger{display:flex;position:relative;z-index:23}
.burger i{transition:translate .3s,rotate .3s,opacity .2s}
.nav.open .burger i:nth-child(1){translate:0 .43rem;rotate:45deg}
.nav.open .burger i:nth-child(2){opacity:0}
.nav.open .burger i:nth-child(3){translate:0 -.43rem;rotate:-45deg}
.nav::before{content:"";position:fixed;inset:0;z-index:21;background:rgba(34,27,78,.42);opacity:0;pointer-events:none;transition:opacity .35s}
.nav.open::before{opacity:1;pointer-events:auto} /* un clic sur le voile referme (script.js) */
.nav-links,.nav-in>.btn{position:fixed;z-index:22;transition:translate .42s cubic-bezier(.32,.72,0,1)}
.nav-links{inset:0 0 0 auto;width:min(20rem,85vw);display:grid;align-content:start;gap:.35rem;padding:5.2rem 1.6rem 7.5rem;background:#fff;box-shadow:var(--sh2);overflow-y:auto;translate:100% 0}
.nav-links::after{display:none} /* le filet suit une rangée horizontale : sans objet dans le tiroir */
.nav-links a{display:block;padding:.85rem .9rem;border-radius:var(--rs);font-size:1.05rem;font-weight:600;color:var(--ink)}
.nav-links a:hover{background:var(--lav50)}
.nav-links li{opacity:0;translate:12px 0;transition:opacity .25s,translate .25s}
.nav-in>.btn{display:inline-flex;right:1.6rem;bottom:1.6rem;width:calc(min(20rem,85vw) - 3.2rem);translate:calc(100% + 1.6rem) 0}
.nav.open :is(.nav-links,.nav-in>.btn){translate:0 0}
.nav.open .nav-links li{opacity:1;translate:0 0}
.nav.open .nav-links li:nth-child(1){transition-delay:.1s}
.nav.open .nav-links li:nth-child(2){transition-delay:.16s}
.nav.open .nav-links li:nth-child(3){transition-delay:.22s}
.nav.open .nav-links li:nth-child(4){transition-delay:.28s}
.nav.open .nav-links li:nth-child(5){transition-delay:.34s}
.nav.open .nav-links li:nth-child(6){transition-delay:.4s}
body.fige{overflow:hidden} /* le fond ne défile pas sous le tiroir ouvert */
}
@media(max-width:900px){
.ft-news-in{grid-template-columns:1fr;gap:1.6rem}
.ft-top{grid-template-columns:1fr 1fr;gap:2.2rem}
}
@media(max-width:768px){
/* Footer empilé : tout se centre — identité, réseaux, colonnes de liens et contact */
.ft-top{grid-template-columns:1fr;text-align:center}
.ft-id{justify-items:center;margin-inline:auto}
.ft-soc{justify-content:center}
.ft-base-in,.ft-base ul{justify-content:center;text-align:center}
.em-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*,::before,::after{animation-duration:.01ms!important;transition-duration:.01ms!important}html{scroll-behavior:auto}}