/* Page d'accès des licenciés — propositions B, C et D, bandeau de comparaison (site d'essai) et volet de connexion
   (js/appli-connexion.js, demande d'Alexis du 11/10/2026). Préfixe acv-. La proposition A garde les styles de
   styles/appli-connexion.css (acx-). Couleurs de la charte seulement : Klein #001CA8, Midnight #191970, noir #120D16,
   White Smoke #F5F5F5, Cranberry #950714, rouge #F32837, blanc — et leurs transparences. Pages claires (B, C, D) quel que
   soit le thème du système ; le volet suit le thème (variables --acx-*). Téléphone d'abord (390 px), puis 760 et 1100 px. */

/* ═══ Bandeau « Proposition B sur 4 — voir A · B · C · D » (site d'essai seulement) ═══ */
.acv-comparer{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.35rem .8rem;padding:.55rem 1rem;
  background:#120D16;color:#fff;font:600 .82rem/1.3 var(--acx-disp);box-shadow:0 6px 18px rgba(18,13,22,.25)}
.acv-comparer-pastille{padding:.18rem .5rem;border-radius:999px;background:#950714;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase}
.acv-comparer-nom{font-weight:500;opacity:.8}
.acv-comparer-voir{display:inline-flex;align-items:center;gap:.3rem}
.acv-comparer-voir>span[aria-hidden]{opacity:.55}
.acv-comparer a{display:inline-grid;place-items:center;min-width:1.9rem;height:1.9rem;padding:0 .3rem;box-sizing:border-box;border-radius:999px;color:#fff;text-decoration:none;font-weight:800;background:rgba(255,255,255,.1)}
.acv-comparer a:hover{background:rgba(255,255,255,.22)}
.acv-comparer a[aria-current]{background:#fff;color:#120D16}
.acv-comparer a:focus-visible{outline:3px solid #F32837;outline-offset:2px}
@media (max-width:520px){.acv-comparer-nom{display:none}}

/* ═══ Commun B, C, D ═══ */
.acx-ecran.acv{background:#F5F5F5;color:#120D16;background-attachment:local}
.acv-bande{position:relative;z-index:0;padding-bottom:var(--acv-recouvre,0px)}
.acv-bande+.acv-corps{margin-top:calc(-1 * var(--acv-recouvre,0px))}
.acv .acx-haut{position:relative;z-index:3}
.acv-corps{position:relative;z-index:1;flex:1;width:100%;max-width:76rem;margin:0 auto;padding:.6rem 1rem 1.6rem;box-sizing:border-box;display:grid;gap:1rem;align-content:start}
.acv-sur{margin:0 0 .55rem;font:700 .74rem/1.25 var(--acx-disp);letter-spacing:.14em;text-transform:uppercase;opacity:.9}
.acv-sur::before{content:"";display:inline-block;width:1.4rem;height:2px;margin-right:.55rem;vertical-align:.3em;background:#F32837;border-radius:2px}
.acv-h1{margin:0 0 .7rem;font:800 clamp(2.1rem,8vw,4rem)/1.03 var(--acx-disp);letter-spacing:-.025em;text-wrap:balance}
.acv-chapo{margin:0;font-size:clamp(1rem,3.6vw,1.18rem);line-height:1.55;max-width:38rem;text-wrap:pretty}
.acv-h2{margin:0 0 .3rem;font:800 1.2rem/1.2 var(--acx-disp);letter-spacing:-.01em;color:#191970}
.acv-nouveau{display:inline-block;margin:0 0 .4rem;padding:.2rem .55rem;border-radius:999px;background:#950714;color:#fff;font:700 .66rem/1.3 var(--acx-disp);letter-spacing:.1em;text-transform:uppercase}
.acv-bouton{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.4rem;padding:.85rem 1.5rem;box-sizing:border-box;border:0;border-radius:999px;cursor:pointer;
  font:700 1.03rem/1.15 var(--acx-disp);text-decoration:none;text-align:center;transition:transform .18s var(--acx-doux-anim),box-shadow .2s,background .2s,color .2s;-webkit-tap-highlight-color:transparent}
.acv-bouton .acx-ico{width:1.15em;height:1.15em;transition:transform .2s var(--acx-doux-anim)}
.acv-bouton:hover{transform:translateY(-1px)}
.acv-bouton:hover .acx-ico{transform:translateX(3px)}
.acv-bouton:active{transform:translateY(1px) scale(.99)}
.acv-bouton:focus-visible,.acv-b-lien:focus-visible,.acv-tuile-lien:focus-visible,.acv-porte-liens a:focus-visible,.acv-fermer:focus-visible,.acv a[href^="tel"]:focus-visible{outline:3px solid #F32837;outline-offset:3px}
.acv-bouton-blanc{background:#fff;color:#191970;box-shadow:0 12px 28px rgba(18,13,22,.28)}
.acv-bouton-blanc:hover{background:#F5F5F5;box-shadow:0 16px 34px rgba(18,13,22,.34)}
.acv-bouton-grand{min-height:4rem;padding:1rem 2rem;font-size:1.13rem;width:100%}
.acv-bouton-contour{background:#fff;color:#001CA8;box-shadow:inset 0 0 0 2px #001CA8}
.acv-bouton-contour:hover{background:#001CA8;color:#fff}
.acv .acx-pied{display:block;color:rgba(18,13,22,.62);padding-top:.4rem}
.acv .acx-pied a{color:#001CA8}

/* ═══ B · Comme avant, avec l'espace en plus ═══ */
.acv-b .acx-retour{color:#191970;background:#fff;border-color:rgba(25,25,112,.16)}
.acv-b .acx-retour:hover{background:#fff;border-color:#191970}
.acv-b .acx-marque{color:#191970}
.acv-b-licence{position:relative;overflow:hidden;isolation:isolate;display:grid;gap:1.4rem;padding:1.7rem 1.2rem 1.2rem;border-radius:28px;color:#fff;
  background:linear-gradient(140deg,#001CA8 0%,#191970 58%,#120D16 100%);box-shadow:0 34px 70px -34px rgba(25,25,112,.75)}
.acv-b-photo{position:absolute;inset:0;z-index:-1}
.acv-b-photo img{width:100%;height:100%;object-fit:cover;object-position:70% 40%;opacity:.26;mix-blend-mode:luminosity}
.acv-b-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(25,25,112,.2) 0%,rgba(25,25,112,.75) 70%,#191970 100%)}
.acv-b-texte .acv-chapo{color:rgba(255,255,255,.92)}
.acv-b-action{margin:1.5rem 0 .9rem}
.acv-b-aide{margin:0;font-size:.9rem;color:rgba(255,255,255,.84)}
.acv-b-aide a{color:#fff;font-weight:700;text-underline-offset:.2em}
.acv-b-liens{list-style:none;margin:0;padding:.35rem;border-radius:22px;background:#fff;color:#120D16;box-shadow:0 24px 50px -28px rgba(18,13,22,.6)}
.acv-b-liens li+li{border-top:1px solid rgba(18,13,22,.08)}
.acv-b-lien{display:flex;gap:.85rem;align-items:center;padding:.85rem .75rem;border-radius:16px;color:inherit;text-decoration:none;transition:background .15s}
.acv-b-lien:hover{background:#F5F5F5}
.acv-b-lien-ico{flex:none;display:grid;place-items:center;width:2.65rem;height:2.65rem;border-radius:13px;background:rgba(0,28,168,.08);color:#001CA8}
.acv-b-lien-ico .acx-ico{width:1.35rem;height:1.35rem}
.acv-b-lien-txt{min-width:0}
.acv-b-lien-txt b{display:block;font:700 .98rem/1.25 var(--acx-disp)}
.acv-b-lien-txt small{display:block;margin-top:.12rem;font-size:.84rem;line-height:1.35;color:rgba(18,13,22,.66)}
.acv-b-lien-fleche{margin-left:auto;color:#001CA8;transition:transform .2s var(--acx-doux-anim)}
.acv-b-lien:hover .acv-b-lien-fleche{transform:translateX(3px)}
.acv-b-echange{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.9rem 1rem;align-items:start;padding:1.15rem;border-radius:22px;background:#fff;border:1px solid rgba(18,13,22,.08)}
.acv-b-echange-ico{display:grid;place-items:center;width:3rem;height:3rem;border-radius:15px;background:#001CA8;color:#fff}
.acv-b-echange-ico .acx-ico{width:1.5rem;height:1.5rem}
.acv-b-echange-txt p:not(.acv-nouveau){margin:0;font-size:.93rem;line-height:1.5;color:rgba(18,13,22,.72)}
.acv-b-echange .acv-bouton{grid-column:1/-1;width:100%}

/* ═══ C · Deux portes égales ═══ */
.acv-c{--acv-recouvre:5rem}
.acv-c .acv-bande{background:radial-gradient(90% 120% at 50% 0%,rgba(0,28,168,.55),transparent 70%),linear-gradient(170deg,#120D16 0%,#191970 100%)}
.acv-c-tete{text-align:center;color:#fff;padding:.6rem 1rem 1.6rem;max-width:44rem;margin:0 auto}
.acv-c-tete .acv-chapo{margin:0 auto;color:rgba(255,255,255,.88)}
.acv-c-portes{display:grid;gap:1rem;width:100%;max-width:70rem;margin:.4rem auto 0}
.acv-porte{display:flex;flex-direction:column;min-width:0;overflow:hidden;border-radius:26px;color:#fff;border:1px solid rgba(255,255,255,.12);box-shadow:0 34px 64px -34px rgba(18,13,22,.7)}
.acv-porte-licence{background:#191970}
.acv-porte-echange{background:#001CA8}
.acv-porte-image{position:relative;height:9.5rem;overflow:hidden}
.acv-porte-image img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;display:block}
.acv-porte-image::after{content:"";position:absolute;inset:0}
.acv-porte-licence .acv-porte-image::after{background:linear-gradient(180deg,rgba(25,25,112,.05) 0%,rgba(25,25,112,.55) 60%,#191970 100%)}
.acv-porte-echange .acv-porte-image::after{background:linear-gradient(180deg,rgba(0,28,168,.05) 0%,rgba(0,28,168,.55) 60%,#001CA8 100%)}
.acv-porte-corps{position:relative;flex:1;display:flex;flex-direction:column;gap:.65rem;padding:0 1.25rem 1.35rem;margin-top:-2.1rem}
.acv-porte-ico{display:grid;place-items:center;width:3.3rem;height:3.3rem;border-radius:17px;background:#fff;color:#191970;box-shadow:0 10px 24px rgba(18,13,22,.3)}
.acv-porte-echange .acv-porte-ico{color:#001CA8}
.acv-porte-ico .acx-ico{width:1.7rem;height:1.7rem}
.acv-porte-sur{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:.35rem 0 0;font:700 .72rem/1.3 var(--acx-disp);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.86)}
.acv-porte .acv-nouveau{margin:0;background:#fff;color:#950714}
.acv-porte-titre{margin:0;font:800 clamp(1.55rem,6vw,2rem)/1.1 var(--acx-disp);letter-spacing:-.015em}
.acv-porte-texte{margin:0;line-height:1.55;color:rgba(255,255,255,.9);text-wrap:pretty}
.acv-porte-action{margin:auto 0 0;padding-top:.6rem}
.acv-porte-action .acv-bouton{width:100%}
.acv-porte-echange .acv-bouton-blanc{color:#001CA8}
.acv-porte-liens{display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem .6rem;margin:0;font-size:.88rem;color:rgba(255,255,255,.85)}
.acv-porte-liens a{color:#fff;font-weight:600;text-underline-offset:.2em}
.acv-c-aide{margin:.6rem 0 0;text-align:center;font-size:.93rem;color:rgba(18,13,22,.7)}
.acv-c-aide a,.acv-b-echange a{color:#001CA8;font-weight:700}

/* ═══ D · Tableau d'accueil ═══ */
.acv-d{--acv-recouvre:2.2rem}
.acv-d .acv-bande{background:linear-gradient(100deg,rgba(18,13,22,.92) 0%,rgba(25,25,112,.8) 55%,rgba(0,28,168,.62) 100%),url(/images/federation/large-065.jpg) 60% 40%/cover}
.acv-d-tete{position:relative;z-index:1;width:100%;max-width:76rem;margin:0 auto;padding:.6rem 1rem 0;box-sizing:border-box;color:#fff}
.acv-d-tete .acv-chapo{color:rgba(255,255,255,.9)}
.acv-d .acv-corps{padding-top:1.4rem}
.acv-d-tuiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
.acv-tuile{min-width:0;display:flex}
.acv-tuile-lien{position:relative;flex:1;display:flex;flex-direction:column;gap:.7rem;box-sizing:border-box;width:100%;min-height:8.5rem;padding:1rem .95rem;border:1px solid rgba(18,13,22,.07);border-radius:20px;
  background:#fff;color:#120D16;text-align:left;text-decoration:none;font:inherit;cursor:pointer;box-shadow:0 1px 2px rgba(18,13,22,.05),0 14px 30px -20px rgba(18,13,22,.4);
  transition:transform .18s var(--acx-doux-anim),box-shadow .2s,border-color .2s;-webkit-tap-highlight-color:transparent}
.acv-tuile-lien:hover{transform:translateY(-2px);border-color:rgba(0,28,168,.35);box-shadow:0 2px 4px rgba(18,13,22,.06),0 22px 40px -22px rgba(18,13,22,.5)}
.acv-tuile-ico{display:grid;place-items:center;width:2.7rem;height:2.7rem;border-radius:13px;background:rgba(0,28,168,.08);color:#001CA8}
.acv-tuile-ico .acx-ico{width:1.4rem;height:1.4rem}
.acv-tuile-txt{display:block;min-width:0}
.acv-tuile-txt b{display:block;font:700 1rem/1.25 var(--acx-disp)}
.acv-tuile-txt small{display:block;margin-top:.2rem;font-size:.83rem;line-height:1.4;color:rgba(18,13,22,.66)}
.acv-tuile-txt .acv-nouveau{margin-bottom:.3rem}
.acv-tuile-fleche{position:absolute;top:1rem;right:.95rem;color:rgba(18,13,22,.32);transition:transform .2s var(--acx-doux-anim),color .2s}
.acv-tuile-lien:hover .acv-tuile-fleche{color:#001CA8;transform:translateX(2px)}
.acv-t-licence{grid-column:1/-1}
.acv-t-licence .acv-tuile-lien{gap:1rem;padding:1.35rem 1.25rem;border:0;color:#fff;background:radial-gradient(120% 90% at 100% 0%,rgba(0,28,168,.9),transparent 60%),linear-gradient(140deg,#001CA8 0%,#191970 65%,#120D16 100%);box-shadow:0 30px 60px -30px rgba(25,25,112,.8)}
.acv-t-licence .acv-tuile-ico{width:3.2rem;height:3.2rem;border-radius:16px;background:#fff;color:#191970}
.acv-t-licence .acv-tuile-ico .acx-ico{width:1.7rem;height:1.7rem}
.acv-tuile-sur{display:block;margin-bottom:.4rem;font:700 .7rem/1.3 var(--acx-disp);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.84)}
.acv-t-licence .acv-tuile-txt b{font-size:clamp(1.45rem,5.5vw,2.1rem);line-height:1.1;letter-spacing:-.015em}
.acv-t-licence .acv-tuile-txt small{margin-top:.45rem;font-size:.95rem;color:rgba(255,255,255,.88);max-width:30rem}
.acv-t-licence .acv-tuile-fleche{display:none}
.acv-faux-bouton{display:inline-flex;align-self:flex-start;align-items:center;gap:.55rem;margin-top:auto;padding:.85rem 1.35rem;border-radius:999px;background:#fff;color:#191970;font:700 1rem/1.15 var(--acx-disp);box-shadow:0 10px 24px rgba(18,13,22,.3)}
.acv-faux-bouton .acx-ico{width:1.1em;height:1.1em}
.acv-t-licence .acv-tuile-lien:hover .acv-faux-bouton{background:#F5F5F5}
.acv-t-echange .acv-tuile-lien{border-color:transparent;box-shadow:inset 0 0 0 2px #001CA8,0 14px 30px -20px rgba(0,28,168,.55)}
.acv-t-echange .acv-tuile-ico{background:#001CA8;color:#fff}
.acv-t-echange .acv-tuile-fleche{color:#001CA8}

/* ═══ Volet de connexion à l'espace d'échange (B, C, D) ═══ */
.acv-volet{box-sizing:border-box;width:100%;max-width:100%;max-height:94dvh;margin:auto auto 0;padding:0;border:0;border-radius:26px 26px 0 0;overflow:auto;overscroll-behavior:contain;
  background:var(--acx-fond);color:var(--acx-texte);font-family:var(--acx-txt);box-shadow:var(--acx-ombre)}
.acv-volet[open]{animation:acv-monte .38s var(--acx-doux-anim) both}
.acv-volet::backdrop{background:rgba(18,13,22,.62);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.acv-volet-tete{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.15rem 0 1.25rem}
.acv-volet-sur{display:flex;gap:.5rem;align-items:center;margin:0;font:700 .76rem/1.25 var(--acx-disp);letter-spacing:.08em;text-transform:uppercase;color:var(--acx-accent)}
.acv-volet-sur .acx-ico{width:1.3rem;height:1.3rem}
.acv-fermer{all:unset;flex:none;display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;cursor:pointer;background:var(--acx-champ);color:var(--acx-texte)}
.acv-fermer:hover{background:var(--acx-trait)}
.acv-volet .acx-carte{margin:0;min-height:0;padding:.9rem 1.25rem calc(1.4rem + env(safe-area-inset-bottom));border-radius:0;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
html.acv-volet-ouvert{overflow:hidden}

/* ═══ Tablette et ordinateur ═══ */
@media (min-width:760px){
  .acv-corps{padding:1rem clamp(1.5rem,4vw,3rem) 2rem;gap:1.4rem}
  .acv-d-tete{padding:1.4rem clamp(1.5rem,4vw,3rem) 0}
  .acv .acx-pied{padding-bottom:1.3rem}
  .acv-bouton-grand{width:auto}
  /* B */
  .acv-b-licence{padding:2.6rem 2.4rem;gap:2rem}
  .acv-b-echange{padding:1.35rem 1.6rem;gap:1rem 1.4rem}
  .acv-b-echange .acv-bouton{grid-column:2;justify-self:start;width:auto;white-space:nowrap}
  /* C */
  .acv-c{--acv-recouvre:7rem}
  .acv-c-tete{padding:1.4rem 1rem 2.2rem}
  .acv-c-portes{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
  .acv-porte-image{height:12rem}
  .acv-porte-corps{padding:0 1.8rem 1.8rem}
  /* D */
  .acv-d{--acv-recouvre:3rem}
  .acv-d-tete{padding-bottom:1.4rem}
  .acv-d-tuiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}
  .acv-t-licence{grid-column:span 2;grid-row:span 2}
  .acv-t-licence .acv-tuile-lien{padding:1.8rem}
  /* Volet : boîte au centre */
  .acv-volet{width:min(29rem,calc(100% - 2rem));margin:auto;border-radius:28px;max-height:calc(100dvh - 3rem)}
  .acv-volet-tete{padding:1.3rem 1.4rem 0 1.9rem}
  .acv-volet .acx-carte{padding:1rem 1.9rem 1.9rem}
}
@media (min-width:1100px){
  .acv-b-licence{grid-template-columns:minmax(0,1.2fr) minmax(21rem,25rem);align-items:center;gap:3.5rem;padding:3.4rem 3.4rem 3.4rem 3.6rem}
  .acv-b-photo img{object-position:85% 40%}
  .acv-b-photo::after{background:linear-gradient(90deg,#191970 0%,rgba(25,25,112,.82) 45%,rgba(25,25,112,.35) 100%)}
  .acv-d-tuiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .acv-b-echange{grid-template-columns:auto minmax(0,1fr) auto;align-items:center}
  .acv-b-echange .acv-bouton{grid-column:auto}
  .acv-tuile-lien{min-height:10rem;padding:1.2rem 1.15rem}
  .acv-t-licence .acv-tuile-lien{padding:2.2rem}
  .acv-porte-image{height:14rem}
}
@keyframes acv-monte{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .acv-volet[open]{animation:none}
  .acv-bouton,.acv-bouton .acx-ico,.acv-tuile-lien,.acv-tuile-fleche,.acv-b-lien,.acv-b-lien-fleche{transition:none}
}
@media print{.acv-comparer,.acv-volet{display:none}}

/* ═══ Retouches après captures (en-tête aligné sur le contenu, textes clairs sur les bandeaux sombres, boutons sur téléphone) ═══ */
.acv .acx-haut{width:100%;max-width:76rem;margin:0 auto;box-sizing:border-box}
.acv-c .acx-haut,.acv-d .acx-haut{color:#fff}
.acv a[href^="tel"]{white-space:nowrap}
@media (min-width:760px){.acv .acx-haut{padding-left:clamp(1.5rem,4vw,3rem);padding-right:clamp(1.5rem,4vw,3rem)}}
@media (max-width:520px){
  .acv-bouton,.acv-faux-bouton{font-size:.95rem;gap:.45rem;padding-left:1rem;padding-right:1rem;letter-spacing:-.005em}
  .acv-bouton-grand{min-height:3.6rem}
  .acv-faux-bouton{align-self:stretch;justify-content:center}
}