/* Wintg Académie (24 oct. 2026) : par-dessus le site.css de wintg.group. Tailles en rem. */

/* En-tête : logo Wintg + pastille, la recherche au milieu, le compte à droite */
.ac-barre { display: flex; align-items: center; gap: 1.25rem; }
.ac-marque { display: flex; align-items: center; gap: .625rem; flex: none; text-decoration: none; }
.ac-marque img { width: clamp(6.5rem, 8vw, 8.5rem); height: auto; }
.ac-puce { display: inline-block; padding: .3125rem .75rem; border-radius: 999rem; background: var(--orange); color: var(--cacao); font: 400 .8125rem/1 var(--petit); letter-spacing: .06em; }
.ac-recherche { flex: 1; display: flex; align-items: center; gap: .625rem; max-width: 34rem; margin-inline: auto; padding: .6875rem 1.125rem; border-radius: 999rem; background: var(--surface); border: .0625rem solid var(--bordure-sombre); transition: border-color .25s var(--mouvement); }
.ac-recherche:focus-within { border-color: var(--orange); }
.ac-recherche svg, .ac-flottante svg { flex: none; width: 1.125rem; height: 1.125rem; fill: none; stroke: var(--argile); stroke-width: 2; stroke-linecap: round; }
.ac-recherche input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--blanc); font: 400 1rem/1.2 var(--titre); }
.ac-recherche input::placeholder, .ac-flottante input::placeholder { color: var(--argile); }
.ac-recherche input::-webkit-search-cancel-button, .ac-flottante input::-webkit-search-cancel-button { display: none; }
.ac-connexion { flex: none; min-height: 0; padding: .75rem 1.375rem; font-size: 1rem; }
.ac-compte { position: relative; flex: none; }
.ac-compte__bouton { display: flex; align-items: center; gap: .625rem; padding: .3125rem .875rem .3125rem .3125rem; border-radius: 999rem; border: .0625rem solid var(--bordure-sombre); background: transparent; color: var(--blanc); font: 400 .9375rem/1 var(--titre); cursor: pointer; }
.ac-compte__bouton span { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--orange); color: var(--cacao); }
.ac-compte__menu { position: absolute; right: 0; top: calc(100% + .5rem); z-index: 60; display: grid; min-width: 15rem; padding: .5rem; border-radius: 1.25rem; background: var(--blanc-pur); box-shadow: 0 1rem 2.5rem rgba(23, 19, 16, .3); }
.ac-compte__menu[hidden] { display: none; }
.ac-compte__menu p { padding: .5rem .75rem; font: 400 .8125rem/1.3 var(--petit); color: var(--taupe); overflow-wrap: anywhere; }
.ac-compte__menu a, .ac-compte__menu button { display: block; width: 100%; padding: .75rem; border: 0; border-radius: .75rem; background: none; color: var(--cacao); font: 400 1rem/1.2 var(--titre); text-align: left; text-decoration: none; cursor: pointer; }
.ac-compte__menu a:hover, .ac-compte__menu button:hover { background: var(--orange-pale); }

/* La recherche flottante, en bas au centre */
.ac-flottante { position: fixed; z-index: 55; left: 50%; bottom: 1.25rem; display: flex; align-items: center; gap: .625rem; width: min(calc(100% - 2rem), 34rem); padding: .4375rem .4375rem .4375rem 1.125rem; border-radius: 999rem; background: rgba(23, 19, 16, .94); -webkit-backdrop-filter: blur(.75rem); backdrop-filter: blur(.75rem); box-shadow: 0 1rem 2.5rem rgba(23, 19, 16, .35); transform: translate(-50%, 160%); opacity: 0; pointer-events: none; transition: transform .45s var(--mouvement), opacity .3s var(--mouvement); }
.ac-flottante.visible { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.ac-flottante input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--blanc); font: 400 1rem/1.2 var(--titre); }
.ac-flottante button { flex: none; padding: .6875rem 1.125rem; border: 0; border-radius: 999rem; background: var(--orange); color: var(--cacao); font: 400 .9375rem/1 var(--titre); cursor: pointer; }

/* La tête */
.ac-tete { display: grid; justify-items: start; gap: 1.25rem; padding-block: clamp(3rem, 7vw, 6rem); }
.ac-tete h1, .ac-fiche h1 { font-size: clamp(2.5rem, 5.2vw, 5.5rem); line-height: 1.04; letter-spacing: -.01em; max-width: 16ch; }
.ac-tete__chapeau { max-width: 44ch; font-size: clamp(1.0625rem, 1.4vw, 1.375rem); line-height: 1.5; color: var(--argile); }

/* La liste des formations */
.ac-liste { max-width: 80rem; margin-inline: auto; width: 100%; box-sizing: border-box; }
.ac-liste__tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.ac-liste__tete h2 { display: flex; align-items: baseline; gap: .625rem; font-size: clamp(1.625rem, 2.4vw, 2.25rem); font-weight: 400; color: var(--cacao); }
.ac-liste__tete h2 small { font: 400 .875rem/1 var(--petit); color: var(--orange-profond); }
.ac-filtres { display: inline-flex; gap: .25rem; padding: .25rem; border-radius: 999rem; background: var(--blanc-pur); border: .0625rem solid var(--filet); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.ac-filtres button { flex: none; padding: .5625rem 1rem; border: 0; border-radius: 999rem; background: transparent; color: var(--taupe); font: 400 .9375rem/1 var(--petit); cursor: pointer; }
.ac-filtres button[aria-pressed="true"] { background: var(--cacao); color: var(--blanc); }
.ac-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.ac-carte { display: flex; flex-direction: column; border-radius: 1.5rem; overflow: hidden; background: var(--blanc-pur); border: .0625rem solid var(--filet); color: var(--cacao); text-decoration: none; transition: transform .35s var(--mouvement), box-shadow .35s var(--mouvement); }
.ac-carte[hidden] { display: none; }
.ac-carte:hover { transform: translateY(-.3125rem); box-shadow: 0 1.25rem 2.5rem -1.25rem rgba(58, 28, 10, .35); }
.ac-carte__image { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--nuit); }
.ac-carte__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--mouvement); }
.ac-carte:hover .ac-carte__image img { transform: scale(1.04); }
.ac-carte__sans { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 1.25rem; background: var(--nuit) url("/academie/static/img/motif-trait-blanc.svg") 0 0 / 20rem; color: var(--blanc); font-size: 1.375rem; line-height: 1.2; }
.ac-carte__corps { display: grid; gap: .5rem; padding: 1.125rem 1.25rem 1.375rem; }
.ac-carte__meta { display: flex; align-items: center; gap: .625rem; font: 400 .8125rem/1 var(--petit); color: var(--taupe); }
.ac-carte__meta b { padding: .3125rem .625rem; border-radius: 999rem; background: var(--orange-pale); color: var(--orange-profond); font-weight: 400; }
.ac-carte strong { font-weight: 400; font-size: 1.3125rem; line-height: 1.25; }
.ac-carte__resume { color: var(--taupe); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ac-vide { display: grid; justify-items: center; gap: 1rem; padding: 4rem 1rem; color: var(--taupe); text-align: center; font-size: 1.125rem; }
.ac-vide img { width: 3rem; }
.ac-vide a { color: var(--orange-profond); }

/* Une formation */
.ac-fiche { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.ac-fiche__texte { display: grid; gap: 1.25rem; justify-items: start; }
.ac-fiche__meta { display: flex; gap: .5rem; }
.ac-fiche__meta span { padding: .4375rem .875rem; border-radius: 999rem; background: rgba(255, 248, 239, .1); color: var(--orange); font: 400 .875rem/1 var(--petit); }
.ac-fiche__image { position: relative; aspect-ratio: 16 / 9; border-radius: 1.25rem; overflow: hidden; border: .0625rem solid var(--bordure-sombre); }
.ac-fiche__image img { width: 100%; height: 100%; object-fit: cover; }
.ac-contenu { max-width: 50rem; margin-inline: auto; width: 100%; box-sizing: border-box; }
.ac-texte { color: var(--cacao); font-size: 1.1875rem; line-height: 1.75; }

/* La connexion : bulle sur ordinateur, feuille sur téléphone */
.ac-connexion-boite { position: fixed; inset: 0; z-index: 80; }
.ac-connexion-boite[hidden] { display: none; }
.ac-connexion-voile { position: absolute; inset: 0; background: rgba(23, 19, 16, .45); }
.ac-bulle { position: absolute; top: 5.5rem; right: max(1rem, var(--bord)); display: grid; gap: 1.125rem; width: 24rem; padding: 1.5rem; border-radius: 1.5rem; background: var(--blanc-pur); box-shadow: 0 1.25rem 3rem rgba(23, 19, 16, .35); animation: ac-bulle .35s var(--mouvement); }
.ac-bulle::before { content: ""; position: absolute; top: -.5rem; right: 2.5rem; width: 1rem; height: 1rem; background: var(--blanc-pur); transform: rotate(45deg); border-radius: .1875rem; }
@keyframes ac-bulle { from { opacity: 0; transform: translateY(-.625rem) scale(.97); } to { opacity: 1; transform: none; } }
.ac-bulle__tete { display: flex; align-items: center; gap: .875rem; }
.ac-bulle__tete img { width: 2.5rem; height: 2.5rem; }
.ac-bulle__tete div { display: grid; gap: .1875rem; }
.ac-bulle__tete strong { font-weight: 400; font-size: 1.375rem; color: var(--cacao); }
.ac-bulle__tete small { font: 400 .8125rem/1.2 var(--petit); color: var(--taupe); }
.ac-etape { display: none; gap: .875rem; }
[data-etape="chargement"] [data-etape-bloc="chargement"], [data-etape="email"] [data-etape-bloc="email"], [data-etape="code"] [data-etape-bloc="code"] { display: grid; }
.ac-animations { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1.25rem 0 .5rem; }
.ac-anim { display: block; width: 4.5rem; height: 4.5rem; }
.ac-animations i { width: 2.5rem; height: .125rem; border-radius: 1rem; background: linear-gradient(90deg, var(--filet), var(--orange), var(--filet)); background-size: 200% 100%; animation: ac-lien 1.2s linear infinite; }
@keyframes ac-lien { to { background-position: -200% 0; } }
.ac-etape__texte { color: var(--taupe); line-height: 1.5; text-align: left; }
[data-etape-bloc="chargement"] .ac-etape__texte { text-align: center; }
.ac-etape__texte b { font-weight: 400; color: var(--cacao); overflow-wrap: anywhere; }
.ac-champ { width: 100%; box-sizing: border-box; padding: .9375rem 1.125rem; border-radius: 1rem; border: .0625rem solid var(--filet); background: var(--blanc); color: var(--cacao); font: 400 1.0625rem/1.2 var(--titre); outline: 0; }
.ac-champ:focus { border-color: var(--orange); }
.ac-champ--code { text-align: center; font-size: 1.75rem; letter-spacing: .5em; padding-left: 1.5rem; }
.ac-erreur { min-height: 1rem; color: #B32E1A; font: 400 .875rem/1.3 var(--petit); }
.ac-erreur:empty { display: none; }
.ac-plein { width: 100%; }
.ac-lien { justify-self: center; padding: .25rem; border: 0; background: none; color: var(--orange-profond); font: 400 .9375rem/1 var(--titre); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.ac-fermer { padding: .875rem; border-radius: 999rem; border: .0625rem solid var(--filet); background: transparent; color: var(--cacao); font: 400 1rem/1 var(--titre); cursor: pointer; }
.ac-bulle.envoi { opacity: .7; pointer-events: none; }

/* Pied et message */
.ac-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin: 0 var(--bord) var(--bord); padding: 1.75rem var(--dedans) 5.5rem; border-radius: var(--rayon); background: var(--nuit); color: var(--argile); font: 400 .875rem/1.4 var(--petit); }
.ac-pied nav { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; }
.ac-pied a { color: var(--blanc); text-decoration: none; }
.ac-pied a:hover { color: var(--orange); }
.ac-toast { position: fixed; z-index: 95; left: 50%; top: 1.25rem; transform: translateX(-50%); padding: .75rem 1.25rem; border-radius: 999rem; background: var(--cacao); color: var(--blanc); font: 400 .9375rem/1 var(--petit); }
.ac-toast[hidden] { display: none; }

@media (max-width: 1000px) {
  .ac-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ac-fiche { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .ac-barre { gap: .75rem; }
  .ac-recherche { display: none; }
  .ac-marque { margin-right: auto; }
  .ac-connexion { padding: .6875rem 1.125rem; font-size: .9375rem; }
  .ac-compte__bouton b { display: none; }
  .ac-compte__bouton { padding-right: .3125rem; }
}
@media (max-width: 640px) {
  .ac-grille { grid-template-columns: minmax(0, 1fr); }
  .ac-bulle { top: auto; right: 0; left: 0; bottom: 0; width: 100%; box-sizing: border-box; max-height: 70vh; padding: 1.5rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom)); border-radius: 1.5rem 1.5rem 0 0; animation-name: ac-feuille; }
  .ac-bulle::before { display: none; }
  @keyframes ac-feuille { from { transform: translateY(100%); } to { transform: none; } }
  .ac-pied { flex-direction: column; text-align: center; }
  .ac-pied nav { justify-content: center; }
}