/* =========================================================
   SNK Foundation — Bourse Académique d'Innovation 2026
   Reproduction du web design (maquette 1366 x 9929 px)

   Repères de la maquette
   ----------------------
   Couleurs : rouge #e50e19 · orange #ffab24 · gris #f2f2f2
   Police   : Poppins (400 / 500 / 600 / 700 / 800 + italique)
   Contenu  : colonne utile de 1200 px centrée
   Échelles : h1 56/64,5 · h2 60/66 · h3 32/43 · corps 22-23/35
   ========================================================= */

:root{
  --snk-red:#e50e19;
  --snk-orange:#ffab24;
  --snk-grey:#f2f2f2;
  --snk-ink:#000;
}

*,*::before,*::after{box-sizing:border-box}

html{font-size:100%}

body{
  margin:0;
  background:#fff;
  color:var(--snk-ink);
  font-family:'Poppins',system-ui,sans-serif;
  font-size:1.4375rem;        /* 23px */
  line-height:2.1875rem;      /* 35px */
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{margin:0;padding:0;list-style:none}

/* colonne utile : 1200 px de contenu, marges de 83 px sur 1366 px */
.shell{
  width:100%;
  max-width:78rem;
  margin-inline:auto;
  padding-inline:1.5rem;
}

/* placeholders images : aplats noirs aux proportions de la maquette */
.ph{
  display:block;
  width:100%;
  background:#000;
}

/* ---------------------------------------------------------
   Typographie
   --------------------------------------------------------- */
.h-section{
  margin:0;
  font-weight:800;
  font-size:3.75rem;          /* 60px */
  line-height:4.125rem;       /* 66px */
  text-transform:uppercase;
}
.h-section--light{color:#fff}
.h-section--indent{padding-left:.3125rem}

.h-lead{
  margin:0;
  font-weight:800;
  font-size:2rem;             /* 32px */
  line-height:2.6875rem;      /* 43px */
  text-transform:uppercase;
}

.txt{margin:0 0 2.25rem}      /* 36px : une ligne vide */
.txt:last-child{margin-bottom:0}
.txt--justify{
  text-align:justify;
  font-size:1.375rem;         /* 22px dans les blocs justifiés */
}
.txt:has(+ .list-dot),
.txt:has(+ .list-plain){margin-bottom:1.875rem}

.txt-sm{
  margin:0 0 1.4375rem;
  font-size:1.3125rem;        /* 21px */
  line-height:1.4375rem;      /* 23px */
}
.txt-sm.txt--justify{font-size:1.3125rem}

.list-dot{margin:0 0 2.25rem}
.list-dot:last-child{margin-bottom:0}
.list-dot li{position:relative;padding-left:1.125rem}
.list-dot li::before{content:"•";position:absolute;left:0;top:0}
.list-plain{margin:0}

.rule{
  height:0;
  margin:0;
  border:0;
  border-top:.125rem solid var(--snk-ink);
  opacity:1;
}

/* =========================================================
   EN-TÊTE
   ========================================================= */
.site-header{background:var(--snk-red)}

.shell--head{
  display:flex;
  align-items:center;
  gap:1.5rem;
  /* padding-top:3.125rem;       /* 50px */
  /* padding-bottom:3.5625rem;   57px */ */
}

.ph-brand-head{
  width:14.5rem;              /* 232 x 111 */
  height:6.9375rem;
  margin-left:-1.0625rem;
}

.nav-main{margin-left:auto}
.nav-main ul{
  display:flex;
  align-items:center;
  gap:4.0625rem;              /* 65px */
}
.nav-main a{
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  color:#fff;
  font-size:1.3125rem;        /* 21px */
  font-weight:600;
  line-height:1;
  white-space:nowrap;
}
.nav-main a:hover{opacity:.82}
.nav-main .bi-chevron-down{font-size:.875rem}
.nav-search .bi-search{font-size:1.3125rem}

.nav-burger{
  display:none;
  margin-left:auto;
  padding:0;
  background:none;
  border:0;
  color:#fff;
  font-size:2.25rem;
  line-height:1;
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  /* padding-top:7.0625rem;      113px de blanc au-dessus du bandeau */
}
.hero__band{
  background:var(--snk-orange);
  padding:4.75rem 0 3rem;     /* 76 / 48 */
}
.hero__title{
  position:relative;
  z-index:2;
  max-width:42.5rem;          /* 680px : évite tout retour à la ligne */
  margin:0;
  color:#fff;
  font-size:3.5rem;           /* 56px */
  line-height:4.03125rem;     /* 64,5px */
  font-weight:800;
}
.hero__media{
  position:absolute;
  right:0;
  bottom:0;
  z-index:1;
  width:53.44%;               /* 730 / 1366 */
}
.hero__media .ph{aspect-ratio:730/544}

/* =========================================================
   GRILLE « SOMMAIRE + CONTENU »
   ========================================================= */
.grid-side{
  display:grid;
  grid-template-columns:30.4% 68.6%;
  gap:1%;
  align-items:start;
}

/* ------------------------- sommaire ------------------------- */
.toc{padding-top:4.375rem}    /* aligne « Sur cette page » sur le titre */

.toc__label{
  margin:0 0 .625rem;
  font-size:.9375rem;         /* 15px */
  line-height:1.0625rem;      /* 17px */
}
.toc__list{
  max-width:18.1875rem;
  font-size:.9375rem;
  line-height:1.0625rem;
}
.toc__list li{margin-bottom:.875rem}
.toc__list a{
  text-decoration:underline;
  text-underline-offset:.1875rem;
  text-decoration-thickness:.0625rem;
}
.toc__list a:hover{color:var(--snk-orange)}

/* ---------------- bouton « formulaire » du sommaire ---------------- */
.cta-inline{
  display:flex;
  align-items:center;
  gap:1.4375rem;              /* 23px */
  margin-top:3.625rem;        /* 58px */
}
.cta-inline__dot{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:2.6875rem;            /* 43px */
  height:2.6875rem;
  border-radius:50%;
  background:var(--snk-orange);
  color:#fff;
  font-size:1.125rem;
}
.cta-inline__pill{
  display:grid;
  place-items:center;
  width:13.9375rem;           /* 223 x 61 */
  min-height:3.8125rem;
  padding:.5rem 1.125rem;
  border-radius:1.9375rem;
  background:var(--snk-orange);
  color:#fff;
  text-align:center;
  font-size:.8125rem;         /* 13px */
  line-height:1rem;
  font-weight:600;
}
.cta-inline:hover .cta-inline__pill,
.cta-inline:hover .cta-inline__dot{filter:brightness(.94)}

/* ------------------------- partage ------------------------- */
.share{margin-top:3.125rem}   /* 50px */
.share__label{
  margin:0 0 .5rem;
  font-size:.9375rem;
  line-height:1.0625rem;
}
.share__row{display:flex;align-items:center;gap:1rem}
.socials{display:flex;align-items:center;gap:.3125rem}
.socials a{display:grid;place-items:center;font-size:1.4375rem;line-height:1}
.socials a:hover{color:var(--snk-orange)}
.share__handle{font-size:1.375rem;line-height:1}

/* =========================================================
   INTRODUCTION
   ========================================================= */
.intro{padding:3.75rem 0 2.5rem}
.intro__body .h-lead{margin:3.6875rem 0 0}      /* 59px sous le filet */
.intro__body .txt{margin-top:1.6875rem}         /* 27px */
.intro__body .txt + .txt{margin-top:2.3125rem}  /* 37px */
.intro__body .rule--last{margin-top:5.625rem}   /* 90px */

/* =========================================================
   NOS PARTENAIRES
   ========================================================= */
.partners{
  background:var(--snk-grey);
  padding:3.5rem 0 7.3125rem;                   /* 56 / 117 */
}
.partners .grid-side{row-gap:2.4375rem}         /* 39px */
.partners__head{grid-column:2;margin-bottom:-.4375rem}
.partners__text{padding-top:.9375rem}

.ph-partner-1{width:9.1875rem;height:9.375rem}  /* 147 x 150 */
.ph-partner-2{width:12.25rem;height:12.9375rem} /* 196 x 207 */

/* =========================================================
   GRILLE « IMAGE + TEXTE »  (636 + 36 + 528)
   ========================================================= */
.grid-media{
  display:grid;
  grid-template-columns:53% 44%;
  gap:3%;
  align-items:start;
}
.media{margin:0}

/* =========================================================
   POURQUOI CETTE BOURSE
   ========================================================= */
.why{padding-top:3.5rem}                        /* 56px */
.why .grid-media{margin-top:4rem}               /* 64px */
.why .grid-media__text .txt{font-size:1.3125rem}
.why .grid-media__text .txt + .txt{margin-top:2.75rem}
.ph-why{aspect-ratio:636/732;border-radius:2rem;margin-top:.4375rem}
.rule--wide{margin-top:5.625rem}                /* 90px */

/* =========================================================
   PRISE EN CHARGE (collage de trois visuels)
   ========================================================= */
.care{padding:4.25rem 0 4.5rem}                 /* 68 / 72 */
.care .grid-media{margin-top:4.625rem}          /* 74px */
.care .txt:has(+ .list-dot){margin-bottom:0}

.collage{
  position:relative;
  margin:.3125rem 0 0;
  aspect-ratio:636/604;
}
.collage .ph{
  position:absolute;
  border-radius:1.5rem;
  overflow:hidden;
}
.collage .ph img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.collage__main{left:15.3%;top:0;width:62.9%;aspect-ratio:400/604;z-index:3}
.collage__back{
  left:-1.7%;top:17%;width:43.2%;aspect-ratio:275/448;
  background:rgba(0,0,0,.35);z-index:1;
}
.collage__front{
  left:58%;top:14.7%;width:41.8%;aspect-ratio:266/462;
  background:rgba(0,0,0,.35);z-index:2;
}
.collage__back img,
.collage__front img{opacity:.5}

/* =========================================================
   CITATION
   ========================================================= */
.pull{
  background:var(--snk-grey);
  padding:4.1875rem 0 4.5rem;                   /* 67 / 72 */
}
.pull__text{
  max-width:59.5rem;                            /* 952px */
  margin:0 auto;
  text-align:center;
  font-size:2.5625rem;                          /* 41px */
  line-height:3.0625rem;                        /* 49px */
  font-weight:400;
  font-style:italic;
}

/* =========================================================
   FILIÈRES
   ========================================================= */
.fields{padding:4rem 0 4.625rem}                /* 64 / 74 */
.fields .h-section{margin-bottom:4rem}
.fields .grid-media__text{padding-top:3.0625rem}

.stack{margin:0;display:grid;gap:2.25rem}
.ph-field-1{width:92.5%;aspect-ratio:588/280;border-radius:1.5rem}
.ph-field-2{width:92.5%;aspect-ratio:588/284;border-radius:1.5rem}

/* =========================================================
   OBJECTIFS DU PROGRAMME
   ========================================================= */
.goals{position:relative}
.goals__panel{
  width:min(90.34%,calc(50% + 34.5rem));
  padding:8.8125rem 0 6.375rem;                 /* 141 / 102 */
  background:var(--snk-orange);
  border-radius:0 6.25rem 6.25rem 0;
}
.goals__text{width:47.5%;color:#fff}            /* 570 / 1200 */
.goals__text .h-section{margin-bottom:2.6875rem}
.goals__text .txt-sm{margin-bottom:1.4375rem}
.goals__text .list-plain{margin-bottom:0}
.goals__media{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  width:51.4%;                                  /* 702 / 1366 */
}
.goals__media .ph{aspect-ratio:702/544;border-radius:1.5rem;overflow:hidden}
.goals__media .ph img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* =========================================================
   CONDITIONS D'ÉLIGIBILITÉ
   ========================================================= */
.eligibility{padding-bottom:3.875rem}
.rule--top{margin:6.6875rem 0 3.5625rem}        /* 107 / 57 */
.eligibility .txt{margin-top:1.75rem}           /* 28px */
.eligibility .txt,
.eligibility .list-dot,
.folder .txt,
.folder .list-dot,
.apply > .shell > .txt{max-width:73.125rem}      /* 1170px : mêmes retours à la ligne */

/* =========================================================
   DOSSIER DE CANDIDATURE
   ========================================================= */
.folder{
  background:var(--snk-grey);
  padding:4.1875rem 0 5.1875rem;                /* 67 / 83 */
}
.folder .txt{margin-top:3.5625rem}              /* 57px */
.folder .txt:has(+ .list-dot){margin-bottom:2.1875rem}

/* =========================================================
   CONCOURS EN CINQ ÉTAPES
   ========================================================= */
.contest{padding-top:4.5rem}                    /* 72px */
.grid-contest{
  display:grid;
  grid-template-columns:54.4% 37.85%;
  gap:4.75%;
  align-items:start;
}
.ph-contest{aspect-ratio:653/780;border-radius:1.5rem;margin-top:.4375rem}
.contest__text .h-section{margin-bottom:2.375rem}

/* =========================================================
   COMMENT POSTULER
   ========================================================= */
.apply{padding:5.6875rem 0 5.8125rem}           /* 91 / 93 */
.apply .h-section{margin-bottom:1.5625rem}

.apply__cta{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-top:4.8125rem;                         /* 77px */
}
.apply__dot{
  display:grid;
  place-items:center;
  width:3.5rem;                                 /* 56px */
  height:3.5rem;
  border-radius:50%;
  background:var(--snk-orange);
  color:#fff;
  font-size:1.5rem;
}
.btn-pill{
  display:grid;
  place-items:center;
  width:31.6875rem;                             /* 507 x 110 */
  min-height:6.875rem;
  margin-top:1.5625rem;
  padding:1rem 2rem;
  border-radius:3.4375rem;
  background:var(--snk-orange);
  color:#fff;
  text-align:center;
  font-size:1.75rem;                            /* 28px */
  line-height:2.1875rem;
  font-weight:600;
}
.btn-pill:hover{filter:brightness(.94)}

.apply__closing{
  max-width:62.5rem;                            /* 1000px */
  margin:3.375rem auto 0;                       /* 54px */
  text-align:center;
}
.h-closing{
  margin:2.6875rem 0 2.3125rem;                 /* 43 / 37 */
  font-size:1.9375rem;                          /* 31px */
  line-height:2.1875rem;
  font-weight:700;
}
.apply__closing .txt:last-of-type{margin-top:2.375rem}

/* =========================================================
   PIED DE PAGE
   ========================================================= */
.site-footer{
  background:var(--snk-red);
  color:#fff;
  padding:3.4375rem 0 7.125rem;                 /* 55 / 114 */
}
.grid-footer{
  display:grid;
  grid-template-columns:50% 1fr;
  align-items:start;
}
.ph-brand-foot{
  width:21.1875rem;                             /* 339 x 155 */
  height:9.6875rem;
  margin:.3125rem 0 0 .8125rem;
}

.site-footer__info{font-size:1.5rem;line-height:2.375rem}  /* 24 / 38 */
.contact li{display:flex;align-items:baseline;gap:.6875rem}
.contact .bi{flex:0 0 auto;font-size:1.25rem}
.share__row--foot{margin-top:.875rem}
.site-footer__tag{margin:1.5rem 0 0}

/* =========================================================
   RESPONSIVE — mise à l'échelle proportionnelle de la maquette
   ========================================================= */
@media (min-width:1200px){
  /* comme dans la maquette, ce titre déborde légèrement la colonne */
  .h-section--nowrap{white-space:nowrap}
}

@media (max-width:1399.98px){
  .nav-main ul{gap:2.75rem}
}

@media (max-width:1199.98px){
  html{font-size:87.5%}
  .nav-main ul{gap:2rem}
}

@media (max-width:991.98px){
  html{font-size:81.25%}

  .nav-main{display:none}
  .nav-burger{display:block}
  .shell--head{padding-top:2rem;padding-bottom:2rem}

  .hero{padding-top:0}
  .hero__title{max-width:none;font-size:3.25rem;line-height:1.15}
  .hero__band{padding-bottom:3rem}
  .hero__media{position:static;width:100%;margin-top:2.5rem}

  .grid-side,
  .grid-media,
  .grid-contest{grid-template-columns:1fr;gap:2.5rem}

  .toc{padding-top:0;order:2}
  .intro__body{order:1}
  .toc__list{max-width:none}

  .partners__head{grid-column:1;margin-bottom:0}
  .partners__text{padding-top:0}

  .why .grid-media,
  .care .grid-media,
  .fields .grid-media{margin-top:2.5rem}
  .fields .h-section{margin-bottom:2.5rem}
  .fields .grid-media__text{padding-top:0}
  .ph-field-1,.ph-field-2{width:100%}

  .goals__panel{width:100%;border-radius:0;padding:4rem 0}
  .goals__text{width:100%}
  .goals__media{
    position:static;
    transform:none;
    width:100%;
    margin-top:2.5rem;
    padding-inline:1.5rem;
  }

  .h-section{font-size:3rem;line-height:1.1}
  .pull__text{font-size:2rem;line-height:1.3}
  .btn-pill{width:100%;max-width:31.6875rem}
}

@media (max-width:767.98px){
  html{font-size:75%}

  .why,.care,.fields,.contest,.apply,
  .partners,.folder,.pull{padding-top:3rem;padding-bottom:3rem}
  .eligibility{padding-bottom:3rem}
  .rule--top{margin:3rem 0 2rem}
  .rule--wide{margin-top:3rem}
  .intro__body .rule--last{margin-top:3rem}
  .folder .txt{margin-top:2.25rem}

  .grid-footer{grid-template-columns:1fr;gap:2.5rem}
  .site-footer{padding:3rem 0}
  .ph-brand-foot{margin-left:0}
}

@media (max-width:575.98px){
  html{font-size:68.75%}
  .hero__title{font-size:2.75rem}
  .h-section{font-size:2.5rem}
  .h-lead{font-size:1.75rem}
  .share__row{flex-wrap:wrap;gap:.75rem}
}