/* Feuille de style de la page JPO Formagroupe.
   Charte reprise du site www.formagroupe.fr : Raleway (titres), Ubuntu (texte),
   bleu #005fab, rouge #cf1b1b, texte #575656. */

@font-face{font-family:Raleway;font-weight:200;font-style:normal;font-display:swap;src:url(polices/raleway-latin-200-normal.woff2) format("woff2")}
@font-face{font-family:Raleway;font-weight:400;font-style:normal;font-display:swap;src:url(polices/raleway-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Raleway;font-weight:700;font-style:normal;font-display:swap;src:url(polices/raleway-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:Ubuntu;font-weight:300;font-style:normal;font-display:swap;src:url(polices/ubuntu-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:Ubuntu;font-weight:400;font-style:normal;font-display:swap;src:url(polices/ubuntu-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Ubuntu;font-weight:700;font-style:normal;font-display:swap;src:url(polices/ubuntu-latin-700-normal.woff2) format("woff2")}

:root{
  --bleu:#005fab;
  --rouge:#cf1b1b;
  --texte:#575656;
  --fonce:#333333;
  --gris:#848484;
  --trait:#e3e3e3;
  --trait-bleu:#c9d6e3;
  --fond-bleu:#f4f8fc;
  --marge:clamp(16px,4vw,40px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:Ubuntu,sans-serif;font-size:16px;line-height:24px;color:var(--texte);background:#fff}
a{color:var(--bleu)}
img,svg{max-width:100%}
[hidden]{display:none!important}

:focus-visible{outline:3px solid #000;outline-offset:2px;box-shadow:0 0 0 5px #fff}

.lien-evitement{position:absolute;left:8px;top:-60px;z-index:10;background:#fff;color:var(--bleu);padding:12px 20px;font-weight:700}
.lien-evitement:focus{top:8px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* En-tête */
.entete{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:8px var(--marge)}
.entete .logo{display:block}
.entete .logo img{display:block;height:96px;width:auto}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px}
.nav a{color:var(--bleu);text-decoration:none;font-size:16px}
.nav a:hover{text-decoration:underline}
.nav a.bouton-rouge{color:#fff;text-decoration:none}

/* Boutons */
.bouton-rouge{display:inline-block;background:var(--rouge);color:#fff;border:1px solid var(--rouge);padding:15px 30px;font:700 14px/20px Ubuntu,sans-serif;text-transform:uppercase;text-decoration:none;cursor:pointer}
.bouton-rouge:hover{background:#a81515;border-color:#a81515}
.bouton-rouge.petit{padding:12px 24px}
.bouton-contour{display:inline-block;background:#fff;color:var(--bleu);border:1px solid var(--bleu);border-radius:30px;padding:15px 30px;font:700 14px/20px Ubuntu,sans-serif;text-transform:uppercase;text-decoration:none}
.bouton-contour:hover{background:var(--fond-bleu)}
.bouton-contour.clair{background:transparent;color:#fff;border-color:#fff}
.bouton-contour.clair:hover{background:rgba(255,255,255,.12)}

/* Bandeau d'accroche */
.accroche{background:var(--bleu);color:#fff;border-radius:0 0 0 clamp(40px,8vw,120px);padding:clamp(32px,6vw,72px) clamp(16px,4vw,64px)}
.accroche .contenu{max-width:1200px;margin:0 auto}
.accroche h1{margin:0;font-family:Raleway,sans-serif;font-size:clamp(32px,6vw,56px);line-height:1.15;text-transform:uppercase;color:#fff}
.accroche h1 .gras{font-weight:700}
.accroche h1 .fin{font-weight:200}
.accroche .intro{max-width:640px;margin:20px 0 0;font-size:18px;line-height:27px;color:#fff}
.accroche .actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:32px}
.prochaine{background:#fff;border-radius:20px;padding:20px 24px;max-width:460px}
.prochaine .etiquette{margin:0;font:700 12px/16px Ubuntu,sans-serif;text-transform:uppercase;color:var(--bleu)}
.prochaine .date{margin:4px 0 0;font-family:Raleway,sans-serif;font-weight:700;font-size:24px;line-height:30px;color:var(--bleu)}
.prochaine .lieux{margin:4px 0 0;font-size:16px;color:var(--texte)}

/* Sections */
.section{padding:clamp(40px,6vw,72px) 0}
.section .cadre{max-width:1200px;margin:0 auto;padding:0 var(--marge)}
.section .cadre.etroit{max-width:880px}
.titre-section{margin:0 0 8px;font-family:Raleway,sans-serif;font-weight:700;font-size:clamp(28px,4vw,40px);line-height:1.25;text-transform:uppercase;color:var(--bleu);text-align:center}
.chapeau{margin:0 auto 32px;max-width:640px;text-align:center;font-size:18px;line-height:27px}
.section.bleu{background:var(--bleu)}
.section.bleu .titre-section,.section.bleu .chapeau{color:#fff}
.section.pale{background:var(--fond-bleu)}

/* Filtres */
.filtres{padding-bottom:24px}
.groupe-filtre{margin-bottom:24px}
.libelle-filtre{margin:0 0 12px;font:700 14px/20px Ubuntu,sans-serif;text-transform:uppercase;color:var(--fonce)}
.pastilles{display:flex;flex-wrap:wrap;gap:12px}
.pastille{font-family:Ubuntu,sans-serif;font-size:14px;font-weight:700;line-height:20px;text-transform:uppercase;padding:12px 24px;border:1px solid var(--bleu);border-radius:30px;cursor:pointer;background:#fff;color:var(--bleu)}
.pastille[aria-pressed="true"]{background:var(--bleu);color:#fff}
.resume{margin:0;font-size:18px;line-height:27px;color:var(--fonce);font-weight:700}
.aucun{margin:8px 0 0;font-size:16px;color:var(--fonce)}

/* Cartes campus */
.grille-campus{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:32px}
.carte{background:#fff;border:1px solid var(--trait);border-radius:20px;overflow:hidden}
.carte .bande{height:10px}
.carte .corps{padding:24px clamp(16px,3vw,32px) 32px}
.carte .ecole{margin:0;font-family:Raleway,sans-serif;font-weight:700;font-size:18px;line-height:24px;text-transform:uppercase}
.carte h3{margin:4px 0 0;font-family:Raleway,sans-serif;font-weight:700;font-size:clamp(24px,3vw,30px);line-height:1.2;color:var(--bleu)}
.carte .presentation{margin:8px 0 20px;font-size:16px}
.carte .rubrique{margin:0 0 4px;font:700 14px/20px Ubuntu,sans-serif;text-transform:uppercase;color:var(--fonce)}
.carte p.valeur{margin:0 0 16px}
.carte ul.formations{margin:0 0 16px;padding:0 0 0 20px}
.carte ul.formations li{margin:0 0 6px}
.carte ul.dates{margin:0 0 8px;padding:0;list-style:none}
.carte ul.dates li{padding:6px 0;border-top:1px solid var(--trait)}
.carte ul.dates strong{color:var(--bleu)}
.carte .note{margin:0 0 24px;font-size:14px;color:var(--texte)}
.carte .boutons{display:flex;flex-wrap:wrap;gap:12px}

/* Calendrier */
.liste-dates{margin:0;padding:0;list-style:none}
.ligne-date{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;padding:20px 0;border-top:1px solid var(--trait-bleu)}
.ligne-date .quand{flex:0 0 150px}
.ligne-date .jour{margin:0;font-family:Raleway,sans-serif;font-weight:700;font-size:32px;line-height:36px;color:var(--bleu)}
.ligne-date .mois{margin:0;font:400 14px/18px Ubuntu,sans-serif;text-transform:uppercase;color:var(--bleu)}
.ligne-date .annee{margin:0;font-size:14px;line-height:18px;color:var(--texte)}
.ligne-date .detail{flex:1 1 320px;min-width:0}
.ligne-date .type{margin:0 0 8px;font-weight:700;color:var(--fonce)}
.ligne-date .reperes{display:flex;flex-wrap:wrap;gap:8px}
.ligne-date .statut{margin:8px 0 0;font-size:14px}
.ligne-date .droite{flex:0 0 auto;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.ligne-date .horaires{margin:0;font-size:14px}
.repere{display:inline-block;border:2px solid;border-radius:10px;padding:4px 10px;font-size:13px;line-height:17px}

/* Formulaire */
.formulaire{background:#fff;border-radius:20px;padding:clamp(20px,4vw,40px)}
.champs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:20px}
.champs .large{grid-column:1 / -1}
.champs label.etiquette{display:block;margin-bottom:6px;font:700 14px/20px Ubuntu,sans-serif;color:var(--fonce)}
.champs input[type=text],.champs input[type=email],.champs input[type=tel],.champs input[type=number],.champs select{width:100%;padding:12px 14px;font:400 16px/24px Ubuntu,sans-serif;color:var(--fonce);background:#fff;border:1px solid var(--gris);border-radius:10px}
.consentement{display:flex;gap:12px;align-items:flex-start}
.consentement input{width:22px;height:22px;margin:2px 0 0;flex:0 0 auto}
.consentement label{font-size:16px;line-height:24px;color:var(--fonce)}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.mention{margin-top:24px;padding:16px 20px;border:1px solid var(--trait);border-radius:10px;background:var(--fond-bleu);font-size:14px;line-height:21px;color:var(--fonce)}
.mention p{margin:0}
.mention .titre-mention{margin:0 0 6px;font-weight:700}
.formulaire .envoi{margin-top:24px}
.formulaire button[disabled]{opacity:.6;cursor:wait}
.etat{margin:12px 0 0;font-size:16px;color:var(--fonce);font-weight:700}
.etat.erreur{color:#a81515}

/* FAQ */
details.question{border-top:1px solid var(--trait);padding:16px 0}
details.question:last-of-type{border-bottom:1px solid var(--trait)}
details.question summary{cursor:pointer;font-family:Raleway,sans-serif;font-weight:700;font-size:18px;line-height:26px;color:var(--bleu)}
details.question p{margin:12px 0 0}

/* Accessibilité */
.bloc-handicap{max-width:1200px;margin:0 auto;padding:0 var(--marge)}
.bloc-handicap .boite{border:1px solid var(--trait);border-radius:20px;padding:24px 32px;max-width:560px}
.bloc-handicap h2{margin:0 0 12px;font-family:Raleway,sans-serif;font-weight:700;font-size:20px;line-height:25px;color:var(--bleu);text-transform:uppercase}
.bloc-handicap p{margin:0 0 8px}

/* Pied de page */
.pied{border-top:1px solid var(--trait);padding:48px 0 32px;background:#fff}
.pied .cadre{max-width:1200px;margin:0 auto;padding:0 var(--marge)}
.pied .adresses{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:24px;margin-bottom:40px;font-size:14px;line-height:20px}
.pied .adresses p{margin:0}
.pied .adresses .nom{margin:0 0 6px;font-weight:700;color:var(--bleu);text-transform:uppercase}
.pied a{color:var(--texte)}
.pied .reseaux{margin:0 0 32px;text-align:center;font-family:Raleway,sans-serif;font-size:18px;line-height:24px;color:var(--bleu)}
.pied .reseaux a{color:var(--bleu);margin-left:12px}
.pied .colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:24px;font-size:14px;line-height:22px}
.pied .colonnes .nom{margin:0 0 8px;font-weight:700;color:var(--bleu);text-transform:uppercase}
.pied .colonnes a{display:block;text-decoration:none}
.pied .colonnes a:hover{text-decoration:underline}
.pied .legal{margin:40px 0 0;text-align:center;font-size:14px}
.pied .legal a{margin:0 16px}

@media (max-width:600px){
  .entete .logo img{height:72px}
  .bouton-rouge,.bouton-contour{width:100%;text-align:center}
  .ligne-date .droite{width:100%}
  .carte .boutons{flex-direction:column}
}
@media print{
  .nav,.filtres,.formulaire,.lien-evitement{display:none!important}
}