/* =========================================================================
   style.css — GlobalStudy
   -------------------------------------------------------------------------
   MÉTHODE : MOBILE-FIRST.
   Tout ce qui est écrit avant les "@media" concerne le TÉLÉPHONE.
   Les blocs "@media (min-width: ...)" en bas du fichier viennent ensuite
   élargir la mise en page pour les tablettes et les ordinateurs.

   Plan du fichier :
   1. Variables de couleur et réglages de base
   2. Outils réutilisables (conteneur, boutons, badges, titres de section)
   3. Header et menu burger
   4. Hero + recherche
   5. Catégories
   6. Opportunités en vedette
   7. Bandeau de chiffres
   8. Pays
   9. Guides
   10. Newsletter
   11. Footer
   12. Media queries (tablette puis ordinateur)
   ========================================================================= */

/* =========================================================================
   1. VARIABLES ET BASE
   ========================================================================= */
:root {
  /* Palette principale */
  --bleu: #2563EB;
  --bleu-fonce: #1D4ED8;
  --bleu-nuit: #0F2A5C;      /* fond du bloc newsletter */
  --bleu-tres-clair: #EFF6FF; /* fonds doux, badges */

  /* Neutres */
  --blanc: #FFFFFF;
  --gris-fond: #F8FAFC;
  --gris-bordure: #E2E8F0;
  --gris-texte: #64748B;
  --noir-texte: #0F172A;

  /* Couleurs des badges de statut */
  --vert: #16A34A;
  --vert-fond: #DCFCE7;
  --orange: #EA580C;
  --orange-fond: #FFEDD5;
  --rouge: #DC2626;
  --rouge-fond: #FEE2E2;
  --info: #2563EB;
  --info-fond: #DBEAFE;

  /* --- Couleurs des 5 grandes catégories ---
     La teinte PLEINE sert de fond aux pastilles rondes de l'accueil, avec
     l'icône en blanc par-dessus (comme sur la maquette).
     La teinte PASTEL (suffixe "-fond") n'est pas utilisée sur l'accueil :
     elle est prête pour les badges de catégorie des autres pages
     (fiches, page de catégorie, calendrier), où un fond doux avec du
     texte foncé sera plus lisible qu'un aplat saturé. */
  --cat-concours: #2563EB;         /* bleu */
  --cat-concours-fond: #DBEAFE;
  --cat-bourses: #15803D;          /* vert */
  --cat-bourses-fond: #DCFCE7;
  --cat-etranger: #6D28D9;         /* violet */
  --cat-etranger-fond: #EDE9FE;
  --cat-formations: #C2410C;       /* orange */
  --cat-formations-fond: #FFEDD5;
  --cat-stages: #0E7490;           /* turquoise */
  --cat-stages-fond: #CFFAFE;

  /* --- Échelle d'espacement ---
     Toutes les marges du site piochent dans ces 6 valeurs, jamais ailleurs.
     C'est ce qui donne une impression d'ordre : les écarts se répondent
     au lieu d'être choisis au hasard. */
  --e1: 8px;
  --e2: 16px;
  --e3: 24px;
  --e4: 32px;
  --e5: 48px;
  --e6: 64px;

  /* --- Arrondis : deux valeurs seulement --- */
  --rayon: 12px;         /* cartes */
  --rayon-large: 16px;   /* grands blocs */

  /* --- Ombres : très légères et identiques partout --- */
  --ombre: 0 1px 2px rgba(15, 23, 42, .06);
  --ombre-forte: 0 6px 16px rgba(15, 23, 42, .10);

  --largeur-max: 1200px;

  /* Durée unique pour toutes les animations */
  --transition: .15s ease;
}

/* Petite remise à zéro : évite les différences entre navigateurs */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* la largeur inclut le padding : bien plus simple */
}

body {
  /* Police système : aucune police à télécharger, donc page plus rapide en 3G */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;      /* jamais moins de 16px pour le corps de texte */
  line-height: 1.6;     /* interlignage aéré : plus confortable à lire */
  color: var(--noir-texte);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;   /* texte un peu plus fin sur Mac */
}

/* --- Hiérarchie des titres ---
   Les titres sont plus serrés que le texte courant (1.2 contre 1.6) :
   c'est ce qui les fait lire comme des blocs et non comme des paragraphes. */
h1, h2, h3 {
  line-height: 1.2;
  letter-spacing: -.01em;
  text-wrap: balance;   /* répartit les mots sur les lignes (navigateurs récents) */
}

/* --- Coupure des mots trop longs ---
   Les titres viennent de la base de données : « télécommunications » ne
   tient pas dans une colonne étroite et débordait de son cadre.
   hyphens: auto le coupe avec un tiret, selon les règles du français
   (c'est l'attribut lang="fr" en haut du document qui indique la langue
   au navigateur — sans lui, aucune coupure).
   hyphenate-limit-chars réserve la coupure aux mots d'au moins douze
   lettres, avec au moins huit lettres avant le tiret et quatre après :
   les mots courants gardent la mise en page habituelle, et un mot long
   se coupe en deux morceaux lisibles plutôt qu'en trois bribes
   (« télécommu-nications » et non « télécom-munica-tions »).
   overflow-wrap reste le filet de sécurité pour ce qu'aucun dictionnaire
   ne sait couper : une adresse web, un sigle, un identifiant. */
h1, h2, h3,
.carte-vedette__titre,
.carte-petite__titre,
.carte-similaire__titre,
.carte-guide__titre,
.catalogue-carte__titre,
.resultats__titre {
  -webkit-hyphens: auto;   /* Safari */
  hyphens: auto;
  hyphenate-limit-chars: 12 8 4;
  overflow-wrap: break-word;
}

img { max-width: 100%; display: block; }

/* Un élément marqué "hidden" reste caché, même si une autre règle lui donne
   un display (flex, grid, inline-block…). Sans cette ligne, le JavaScript
   ne pourrait pas masquer ces éléments de façon fiable. */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
/* select et textarea sont indispensables ici : sans eux, le navigateur
   garde ses polices par défaut, et un <textarea> s'affiche en MONOSPACE
   au milieu d'un formulaire écrit en police système. */
button, input, select, textarea { font: inherit; }

/* Texte lu par les lecteurs d'écran mais invisible à l'œil.
   Le "margin: -1px" n'est pas décoratif : sans lui, un élément passé en
   position absolute peut conserver la place qu'il occupait avant et
   pousser la page de plusieurs dizaines de pixels, invisible mais bien
   présent. C'est la recette de référence du projet. */
.visuellement-cache {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Contour visible au clavier : important pour l'accessibilité.
   select et textarea en font partie, sinon les listes déroulantes et les
   zones de texte des formulaires n'ont aucun repère au clavier. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--bleu);
  outline-offset: 2px;
}

/* =========================================================================
   2. OUTILS RÉUTILISABLES
   ========================================================================= */

/* Centre le contenu et garde des marges sur les côtés */
.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0 16px;
}

.section { padding: var(--e5) var(--e2); }

.section__entete {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--e1);
  margin-bottom: var(--e3);
}

.section__surtitre {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bleu);
  margin-bottom: 4px;
}

.section__titre { font-size: 24px; color: #000000; }

/* Les liens doivent rester attrapables au doigt : on leur donne de la
   hauteur avec du padding, sans changer leur apparence. */
.lien-voir-tout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: var(--e1) 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--bleu);
}
.lien-voir-tout:hover { text-decoration: underline; }

/* --- Boutons --- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;          /* taille minimale confortable au doigt */
  padding: 10px 20px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}
.bouton:hover { transform: translateY(-1px); }
.bouton:active { transform: translateY(0); }
.bouton--plein   { background: var(--bleu); color: var(--blanc); }
.bouton--plein:hover { background: var(--bleu-fonce); }
.bouton--contour { background: var(--blanc); color: var(--bleu); border-color: var(--bleu); }
.bouton--contour:hover { background: var(--bleu-tres-clair); }
.bouton--blanc   { background: var(--blanc); color: var(--bleu); }
.bouton--blanc:hover { background: var(--bleu-tres-clair); }

.bouton-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  color: var(--gris-texte);
  transition: background-color var(--transition), color var(--transition);
}
.bouton-icone:hover { background: var(--gris-fond); color: var(--bleu); }

/* --- Badges de statut : les couleurs sont posées par le JS via une classe --- */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.badge--ouvert        { background: var(--vert-fond);   color: #14532D; }
.badge--ferme-bientot { background: var(--orange-fond); color: #7C2D12; }
.badge--expire        { background: var(--rouge-fond);  color: #7F1D1D; }
.badge--a-venir       { background: var(--info-fond);   color: #1E3A8A; }
.badge--neutre        { background: var(--gris-fond);   color: var(--gris-texte); border: 1px solid var(--gris-bordure); }
/* Aucune date connue, ni limite ni ouverture estimée (page détail) */
.badge--date-a-confirmer { background: var(--gris-fond); color: #334155; border: 1px solid var(--gris-bordure); }

/* =========================================================================
   CATALOGUE
   ========================================================================= */
.catalogue-intro { padding: var(--e5) 0 var(--e3); background:  #0F2A5C; }
.catalogue-intro p:last-child { margin-top: var(--e1); color: #ffffff; }
.catalogue-section { padding-top: var(--e4); }
.catalogue-filtres { display: grid; grid-template-columns: 1fr; gap: var(--e2); padding: var(--e3); margin-bottom: var(--e4); background: var(--gris-fond); border: 1px solid var(--gris-bordure); border-radius: var(--rayon-large); }
.catalogue-filtres > div { display: flex; flex-direction: column; gap: 5px; }
.catalogue-filtres label { font-size: 13px; font-weight: 700; color: var(--gris-texte); }
.catalogue-filtres input, .catalogue-filtres select { min-height: 44px; width: 100%; padding: 9px 12px; border: 1px solid var(--gris-bordure); border-radius: 8px; background: var(--blanc); color: var(--noir-texte); }
.catalogue-filtres__recherche { grid-column: 1 / -1; }
.catalogue-resultats-entete { align-items: center; }
.catalogue-resultats__nombre { color: var(--gris-texte); }
.catalogue-grille { display: grid; grid-template-columns: 1fr; gap: var(--e2); }
.catalogue-carte { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--blanc); border: 1px solid var(--gris-bordure); border-radius: var(--rayon); box-shadow: var(--ombre); }
.catalogue-carte:hover { border-color: #CBD8EA; box-shadow: var(--ombre-forte); }
.catalogue-carte__image { display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 1; overflow: hidden; background: #DBEAFE; color: var(--bleu); }
.catalogue-carte__image img { width: 100%; height: 100%; object-fit: cover; }
.catalogue-carte__image--vide { display: grid; place-items: center; width: 100%; height: 100%; }
.catalogue-carte__image--vide .icone { width: 30px; height: 30px; opacity: .55; }
.catalogue-carte > :not(.catalogue-carte__image) { margin-left: var(--e2); margin-right: var(--e2); }
.catalogue-carte__haut { display: flex; align-items: center; justify-content: space-between; gap: var(--e1); margin-top: var(--e1); }
.catalogue-carte__categorie { margin-top: var(--e1); font-size: 12px; color: var(--bleu); font-weight: 700; }
.catalogue-carte__titre { margin-top: 2px; font-size: 17px; }
.catalogue-carte__titre a:hover { color: var(--bleu); text-decoration: underline; }
.catalogue-carte__organisme { margin-top: 2px; color: var(--gris-texte); font-size: 13px; }
.catalogue-carte__infos { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: var(--e1) 0; color: var(--gris-texte); font-size: 13px; }
.catalogue-carte__infos li + li { padding-left: 16px; border-left: 1px solid var(--gris-bordure); }
.catalogue-carte__date { display: flex; align-items: center; gap: 6px; padding-top: var(--e1); border-top: 1px solid var(--gris-bordure); font-size: 13px; }
.catalogue-carte .lien-voir-tout { margin-top: auto; padding-bottom: 0; }
.catalogue-vide { padding: var(--e4); text-align: center; color: var(--gris-texte); background: var(--gris-fond); border: 1px dashed var(--gris-bordure); border-radius: var(--rayon); }

@media (min-width: 640px) {
  .catalogue-filtres { grid-template-columns: repeat(3, 1fr); }
  .catalogue-filtres__recherche { grid-column: 1 / -1; }
  .catalogue-grille { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .catalogue-filtres { grid-template-columns: 2fr repeat(3, 1fr) auto; align-items: end; }
  .catalogue-filtres__recherche { grid-column: auto; }
  .catalogue-grille { grid-template-columns: repeat(3, 1fr); }
}


/* =========================================================================
   2 bis. ICÔNES SVG ET DRAPEAUX
   -------------------------------------------------------------------------
   Les icônes sont définies dans index.html sous forme de <symbol> et
   réutilisées avec <svg class="icone"><use href="#icone-xxx"></use></svg>.
   ========================================================================= */

/* La bibliothèque de symboles ne doit jamais s'afficher : elle sert
   uniquement de réservoir de dessins. */
.bibliotheque-icones {
  display: none;
}

/* Réglages communs à toutes les icônes.
   "currentColor" = l'icône prend la couleur du texte autour d'elle :
   une seule définition suffit pour toutes les situations. */
.icone {
  width: 24px;
  height: 24px;
  flex-shrink: 0;              /* l'icône ne s'écrase pas dans un flex */
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

/* Version réduite, pour les lignes de texte */
.icone--petite { width: 16px; height: 16px; }

/* Quelques logos (le X) sont dessinés pleins et non au trait */
.icone--pleine { fill: currentColor; stroke: none; }

/* --- Drapeaux : petites pastilles arrondies de 20px de haut --- */
.drapeau {
  display: inline-block;
  height: 20px;
  width: auto;
  border-radius: 3px;
  /* fin liseré : détache les drapeaux clairs (Japon) d'un fond blanc */
  border: 1px solid var(--gris-bordure);
  object-fit: cover;
  vertical-align: middle;
}

/* =========================================================================
   3. HEADER ET MENU BURGER
   ========================================================================= */
.entete {
  position: sticky;      /* le header reste collé en haut au défilement */
  top: 0;
  z-index: 50;
  background: var(--blanc);
  border-bottom: 1px solid var(--gris-bordure);
}

.entete__contenu {
  display: flex;
  align-items: center;          /* logo, menu et boutons sur la même ligne médiane */
  justify-content: space-between;
  gap: var(--e2);
  min-height: 68px;
  flex-wrap: wrap;
}

.logo { display: flex; align-items: center; gap: 8px; }
.logo__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--bleu);
  color: var(--blanc);      /* l'icône hérite de cette couleur */
}
.logo__icone .icone { width: 22px; height: 22px; }
.logo__texte { display: flex; flex-direction: column; line-height: 1.1; }
.logo__nom { font-size: 19px; color: var(--bleu-nuit); }
.logo__nom--bleu { color: var(--bleu); }
.logo__slogan { font-size: 11px; color: var(--gris-texte); }

/* Bouton burger : affiché uniquement sur mobile */
.burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;   /* 44px : taille minimale confortable au doigt */
  padding: 10px;
  background: none;
  border: 1px solid var(--gris-bordure);
  border-radius: 10px;
  cursor: pointer;
}
.burger__barre {
  display: block;
  height: 2px;
  background: var(--noir-texte);
  border-radius: 2px;
}

/* Quand le menu est ouvert, les trois barres forment une croix.
   On s'appuie sur l'attribut aria-expanded, que le JavaScript met déjà à
   jour pour les lecteurs d'écran : aucune classe supplémentaire à gérer.
   (5px d'écart + 2px d'épaisseur = 7px entre deux barres.) */
.burger__barre { transition: transform var(--transition), opacity var(--transition); }
.burger[aria-expanded="true"] .burger__barre:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__barre:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__barre:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Sur mobile le menu est replié par défaut.
   La classe "navigation--ouverte" est ajoutée/retirée par app.js. */
.navigation {
  display: none;
  width: 100%;
  padding-bottom: 16px;
}
.navigation--ouverte {
  display: block;
  animation: menu-apparition .2s ease-out;
}
@keyframes menu-apparition {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.navigation__liste { display: flex; flex-direction: column; gap: 4px; }
.navigation__dropdown { position: relative; }
.navigation__dropdown details { position: relative; }
.navigation__dropdown summary { list-style: none; cursor: pointer; }
.navigation__dropdown summary::-webkit-details-marker { display: none; }
.navigation__dropdown summary::after {
  display: inline-block;
  margin-left: 8px;
  content: "▾";
  font-size: 12px;
  transition: transform var(--transition);
}
.navigation__dropdown details[open] summary::after { transform: rotate(180deg); }
.navigation__sous-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0 6px 16px;
}
.navigation__sous-menu a {
  display: block;
  padding: 9px 12px;
  color: var(--gris-texte);
  font-size: 14px;
  white-space: nowrap;
}
.navigation__sous-menu a:hover { color: var(--bleu); background: var(--bleu-tres-clair); }
.navigation__lien {
  display: block;
  padding: 14px 4px;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;         /* "Étudier à l'étranger" ne se coupe jamais en deux */
  border-bottom: 1px solid var(--gris-bordure);
  transition: color var(--transition);
}
.navigation__lien:hover { color: var(--bleu); }
.navigation__lien--actif { color: var(--bleu); font-weight: 700; }

.entete__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}
.entete__actions .bouton { flex: 1; }

/* =========================================================================
   4. HERO ET RECHERCHE
   ========================================================================= */
/* Le hero occupe toute la largeur de l'écran : aucun arrondi, aucune marge.
   Seul son CONTENU est ramené à la largeur des autres sections, grâce à la
   classe .conteneur posée sur .hero__grille dans index.html. */
.hero {
  position: relative;
  background: var(--bleu-tres-clair);
  overflow: hidden;
}

/* Courbe blanche qui ferme le bas du bandeau, comme sur la maquette.
   C'est une large ellipse blanche dont seule la partie haute dépasse ;
   le débordement latéral est masqué par le "overflow: hidden" ci-dessus. */
.hero::after {
  content: "";
  position: absolute;
  /* Ellipse très large : sa courbure est douce et régulière sur toute
     la largeur de l'écran, au lieu de remonter brutalement aux extrémités. */
  left: -30%;
  right: -30%;
  bottom: -56px;
  height: 84px;
  background: var(--blanc);
  border-radius: 50%;
  pointer-events: none;
}

/* La grille du hero. Sur téléphone : une seule colonne, photo en haut.
   Sur ordinateur (voir media query) : texte à gauche, photo à droite. */
.hero__grille {
  display: grid;
  gap: var(--e3);
  padding: var(--e4) var(--e2) var(--e5);   /* le bas laisse la place à la courbe */
}

/* z-index : le texte reste au-dessus de la photo une fois celle-ci placée
   en fond sur ordinateur (voir la media query en bas de fichier). */
.hero__contenu { position: relative; z-index: 1; }

/* La photo occupe toute sa colonne et se recadre sans se déformer.
   Le fond bleu pâle reste visible si l'image manque ou charge lentement. */
/* --- La photo est le FOND du bandeau, d'un bord à l'autre de l'écran ---
   Elle est sortie du flux (position: absolute) et se cale sur .hero, qui
   occupe toute la largeur. Le texte est posé par-dessus. */
.hero__media {
  position: absolute;
  inset: 0;                  /* raccourci pour top/right/bottom/left: 0 */
  background: #DCE9FF;       /* couleur de secours si la photo manque */
}
.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;         /* remplit le cadre sans déformer le sujet */
  object-position: 75% center;  /* garde l'étudiante dans le cadre */
  display: block;
}

/* --- Le voile de lisibilité ---
   Sur téléphone, l'écran est étroit : le texte passerait sur le sujet de la
   photo. On pose donc un voile clair assez dense sur toute la surface. La
   photo reste visible en filigrane et le texte foncé reste parfaitement
   lisible (contraste supérieur à 12:1). */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(239, 246, 255, .82);
  pointer-events: none;
}

.badge-hero {
  display: inline-block;
  padding: 6px 14px;
  margin-bottom: var(--e2);
  border-radius: 999px;
  background: var(--bleu-tres-clair);
  border: 1px solid #BFDBFE;
  color: var(--bleu-fonce);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.hero__titre {
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -.02em;
}
.hero__titre--bleu { color: var(--bleu); display: block; }

.hero__sous-titre {
  margin-top: var(--e2);
  font-size: 17px;
  color: #475569;      /* gris de lecture, un cran plus foncé que le gris secondaire */
}

/* --- Barre de recherche --- */
.recherche {
  display: flex;
  align-items: center;
  gap: var(--e1);
  margin-top: var(--e3);
  padding: 6px 6px 6px 14px;
  background: var(--blanc);
  border: 1px solid var(--gris-bordure);
  border-radius: 999px;
  box-shadow: var(--ombre-forte);
  flex-wrap: wrap;
}
.recherche__loupe { color: var(--gris-texte); width: 20px; height: 20px; }
.recherche__champ {
  flex: 1 1 140px;
  min-width: 0;          /* évite que le champ déborde sur petit écran */
  padding: 10px 0;
  border: none;
  background: none;
  font-size: 16px;       /* 16px évite le zoom automatique sur iPhone */
}
.recherche__champ:focus { outline: none; }
.recherche__bouton { flex-shrink: 0; }

/* --- Liste des résultats de recherche (remplie par JS) --- */
.resultats { margin-top: 14px; }
.resultats:empty { display: none; }   /* rien ne s'affiche tant qu'il n'y a pas de recherche */

.resultats__titre {
  font-size: 14px;
  font-weight: 700;
  color: var(--gris-texte);
  margin-bottom: 8px;
}
.resultats__liste {
  background: var(--blanc);
  border: 1px solid var(--gris-bordure);
  border-radius: var(--rayon);
  overflow: hidden;
}
.resultats__element {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e1);
  padding: var(--e2);
  border-bottom: 1px solid var(--gris-bordure);
}
.resultats__element:last-child { border-bottom: none; }
.resultats__nom { font-weight: 600; }
.resultats__nom:hover,
.carte-petite__titre a:hover { color: var(--bleu); text-decoration: underline; }
.resultats__detail { font-size: 14px; color: var(--gris-texte); width: 100%; }

/* --- Les 3 mini-statistiques --- */
.mini-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e4);
  margin-top: var(--e3);
}
.mini-stats__element { display: flex; align-items: center; gap: 10px; }
/* Pas de pastille derrière ces icônes : elles sont posées directement sur
   la photo, comme sur la maquette. Elles sont pleines, donc bien lisibles
   même sans fond. */
.mini-stats__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bleu);
}
.mini-stats__icone .icone { width: 28px; height: 28px; }
.mini-stats__chiffre { font-size: 19px; font-weight: 700; line-height: 1.1; }
/* Gris volontairement plus foncé que le gris secondaire du reste du site :
   ce texte est posé sur la photo, où le fond peut être sombre (les arbres).
   Mesuré à 5,9:1 dans la zone la plus défavorable, au-delà du minimum de
   4,5:1 exigé par le niveau AA. */
.mini-stats__libelle { font-size: 14px; color: #334155; }

/* =========================================================================
   5. LES GRANDES CATÉGORIES
   ========================================================================= */
.grille-categories {
  display: grid;
  grid-template-columns: 1fr;   /* une seule colonne sur téléphone */
  gap: var(--e2);
}

/* --- Comportement commun à toutes les cartes cliquables ---
   Une seule règle groupée : même arrondi, même bordure, même ombre, même
   réaction au survol. C'est ce qui rend l'ensemble cohérent. */
.carte-categorie,
.carte-pays,
.carte-guide,
.carte-petite {
  background: var(--blanc);
  border: 1px solid var(--gris-bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}
.carte-categorie:hover,
.carte-pays:hover,
.carte-guide:hover,
.carte-petite:hover {
  transform: translateY(-2px);
  box-shadow: var(--ombre-forte);
  border-color: #CBD8EA;
}
/* La flèche ronde se colore quand on survole la carte qui la contient */
.carte-categorie:hover .fleche,
.carte-pays:hover .fleche,
.carte-guide:hover .fleche {
  background: var(--bleu);
  color: var(--blanc);
}

.carte-categorie {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: var(--e3) var(--e2) var(--e5);
}
/* Pastille de la catégorie : un ROND de couleur pleine, icône en blanc.
   La classe de couleur (ex. "categorie--bourses") est ajoutée par le
   JavaScript à partir du champ "cle" de js/data.js. */
.carte-categorie__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  margin-bottom: var(--e2);
  border-radius: 50%;              /* rond, comme sur la maquette */
  background: var(--bleu);         /* couleur par défaut, remplacée ci-dessous */
  color: var(--blanc);             /* l'icône hérite de cette couleur */
}
.carte-categorie__icone .icone { width: 22px; height: 22px; }

.categorie--concours   { background: var(--cat-concours); }
.categorie--bourses    { background: var(--cat-bourses); }
.categorie--etranger   { background: var(--cat-etranger); }
.categorie--formations { background: var(--cat-formations); }
.categorie--stages     { background: var(--cat-stages); }

.carte-categorie__nom { font-size: 16px; font-weight: 700; margin-bottom: 2px; }
.carte-categorie__compte { font-size: 14px; color: var(--gris-texte); }
.carte-categorie__compte strong { color: var(--noir-texte); }

/* Petite flèche ronde en bas à droite de la carte */
.fleche {
  position: absolute;
  right: 16px; bottom: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--bleu-tres-clair);
  color: var(--bleu);
  transition: background-color .15s, transform .15s;
}

/* =========================================================================
   6. OPPORTUNITÉS EN VEDETTE
   ========================================================================= */
.grille-vedette {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e2);
}
.grille-vedette__colonne {
  display: grid;
  gap: var(--e2);
  align-content: start;
}

/* --- La grande carte : la photo occupe tout le fond, le texte est posé
   dessus en blanc. Un voile sombre garantit la lisibilité même si la photo
   est claire. --- */
.carte-vedette {
  position: relative;
  display: flex;
  align-items: flex-end;      /* le texte se cale en bas de la carte */
  min-height: 340px;
  border-radius: var(--rayon-large);
  overflow: hidden;
  background: var(--bleu-nuit);   /* couleur de secours si la photo manque */
  box-shadow: var(--ombre);
}
.carte-vedette__photo {
  position: absolute;
  inset: 0;                   /* raccourci pour top/right/bottom/left: 0 */
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Le voile : transparent en haut, sombre en bas, là où se trouve le texte */
.carte-vedette::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Voile un peu plus dense : sur téléphone la carte est étroite, le texte
     remonte donc plus haut sur la photo. */
  background: linear-gradient(180deg,
              rgba(15, 42, 92, .28) 0%,
              rgba(15, 42, 92, .72) 42%,
              rgba(15, 42, 92, .95) 100%);
}
.carte-vedette__financement {
  position: absolute;
  z-index: 2;
  top: 16px; left: 16px;
  padding: 5px 12px;
  border-radius: 999px;
  color: var(--blanc);
  font-size: 12px;
  font-weight: 700;
}
/* La couleur dépend du type de financement (classe posée par le JS) */
.financement--total   { background: var(--vert); }
.financement--partiel { background: var(--orange); }
.financement--aucun   { background: #475569; }
/* z-index : place le texte au-dessus de la photo et du voile */
.carte-vedette__corps {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 24px;
  color: var(--blanc);
}
.carte-vedette__corps .carte-vedette__pays { color: rgba(255,255,255,.92); }
.carte-vedette__corps .carte-vedette__organisme { color: rgba(255,255,255,.75); }
.carte-vedette__corps .infos { color: rgba(255,255,255,.85); }
.carte-vedette__corps .ligne-date { border-top-color: rgba(255,255,255,.22); }
.carte-vedette__corps .ligne-date__texte { color: var(--blanc); }
.carte-vedette__corps .carte-vedette__type {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.30);
  color: var(--blanc);
}

.carte-vedette__haut {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.carte-vedette__pays { font-size: 14px; font-weight: 600; color: var(--gris-texte); }
.carte-vedette__type {
  padding: 3px 10px;
  border-radius: 6px;
  background: var(--gris-fond);
  border: 1px solid var(--gris-bordure);
  font-size: 12px;
  font-weight: 600;
  color: var(--gris-texte);
}
.carte-vedette__titre { font-size: 20px; }
.carte-vedette__organisme { font-size: 14px; color: var(--gris-texte); margin-top: 2px; }

/* Petites informations avec icône : niveau, domaine, éligibilité */
.infos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1) var(--e2);
  margin: var(--e2) 0;
  font-size: 14px;
  color: var(--gris-texte);
}
.infos__element { display: flex; align-items: center; gap: 5px; }

.ligne-date {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e1);
  padding-top: var(--e2);
  border-top: 1px solid var(--gris-bordure);
  font-size: 14px;
}
.ligne-date__texte { color: var(--noir-texte); }
.ligne-date__texte strong { font-weight: 700; }

.carte-vedette__pied { margin-top: var(--e3); text-align: right; }

/* --- Les deux petites cartes --- */
.carte-petite { padding: var(--e2); }
.carte-petite__haut {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.carte-petite__titre { font-size: 17px; }
.carte-petite__organisme { font-size: 14px; color: var(--gris-texte); }

/* Vignette de la petite carte */
.carte-petite__vignette {
  width: 100%;
  height: 96px;
  margin-top: 16px;
  border-radius: 10px;
  object-fit: cover;
  background: #DCE9FF;        /* couleur de secours */
  display: block;
}

/* =========================================================================
   7. BANDEAU DE CHIFFRES CLÉS
   ========================================================================= */
.bandeau-chiffres {
  margin: var(--e1) 0 var(--e2);
  padding: var(--e3) var(--e2);
  background: var(--gris-fond);
  border: 1px solid var(--gris-bordure);
  border-radius: var(--rayon-large);
}
.bandeau-chiffres__titre {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 17px;
  font-weight: 700;
}
.bandeau-chiffres__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--bleu);
  color: var(--blanc);
}
.bandeau-chiffres__icone .icone { width: 22px; height: 22px; }
.bandeau-chiffres__liste {
  display: grid;
  grid-template-columns: repeat(2, 1fr);  /* 2 colonnes sur téléphone */
  gap: 16px;
}
.bandeau-chiffres__chiffre { font-size: 22px; font-weight: 700; line-height: 1.1; }
.bandeau-chiffres__libelle { font-size: 14px; color: var(--gris-texte); }

/* =========================================================================
   8. EXPLOREZ PAR PAYS
   ========================================================================= */
.grille-pays {
  display: grid;
  grid-template-columns: repeat(2, 1fr);  /* 2 cartes par ligne sur téléphone */
  gap: var(--e2);
}
/* flex + colonne : toutes les cartes d'une rangée prennent la même hauteur,
   et le bloc de texte occupe l'espace restant sous la photo. */
.carte-pays {
  display: flex;
  flex-direction: column;
}

.carte-pays__image {
  display: block;
  width: 100%;
  height: 96px;
  object-fit: cover;
  background: #DCE9FF;        /* couleur de secours */
}
.carte-pays__corps {
  display: block;
  position: relative;
  flex: 1;                       /* occupe toute la hauteur restante */
  padding: var(--e2) var(--e2) var(--e4);
}
.carte-pays__nom {
  display: flex;
  align-items: center;
  gap: var(--e1);
  font-size: 16px;
  font-weight: 700;
}
.carte-pays__compte { display: block; font-size: 14px; color: var(--gris-texte); }
/* Sur les cartes pays, plus petites, la flèche est légèrement réduite */
.carte-pays .fleche { right: 12px; bottom: 12px; width: 26px; height: 26px; }

/* =========================================================================
   9. GUIDES PRATIQUES
   ========================================================================= */
.grille-guides {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e2);
}
.carte-guide {
  display: flex;
  flex-direction: column;
}

.carte-guide__image {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
  background: #DCE9FF;        /* couleur de secours */
}
.carte-guide__corps {
  display: block;
  position: relative;
  flex: 1;
  padding: var(--e2) var(--e2) var(--e5);
}
.carte-guide__titre { display: block; font-size: 16px; font-weight: 700; line-height: 1.35; }
.carte-guide__sous-titre { display: block; font-size: 14px; color: var(--gris-texte); margin-top: 4px; }

/* =========================================================================
   10. NEWSLETTER
   ========================================================================= */
.newsletter {
  margin: var(--e1) 0 var(--e5);
  padding: var(--e3) var(--e2);
  background: var(--bleu-nuit);
  border-radius: var(--rayon-large);
  color: var(--blanc);
}
.newsletter__texte { display: flex; gap: 14px; align-items: flex-start; }
.newsletter__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--bleu);
  color: var(--blanc);
}
.newsletter__titre { font-size: 19px; }
.newsletter__description {
  font-size: 14px;
  color: #C7D8F5;   /* bleu très clair : bon contraste sur le fond bleu nuit */
  margin-top: 4px;
}
.newsletter__bouton { display: inline-flex; margin-top: var(--e2); }

.newsletter__formulaire { margin-top: 18px; }
.newsletter__ligne { display: flex; flex-wrap: wrap; gap: 8px; }
.newsletter__champ {
  flex: 1 1 180px;
  min-width: 0;
  padding: 11px 14px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
}
.newsletter__case {
  display: flex;
  align-items: center;
  gap: var(--e1);
  min-height: 44px;
  margin-top: var(--e1);
  font-size: 15px;
  cursor: pointer;
}
.newsletter__case input { width: 20px; height: 20px; accent-color: var(--bleu); }

/* Message de confirmation affiché par JS */
.newsletter__message {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #86EFAC;   /* vert clair, lisible sur fond bleu nuit */
}
.newsletter__message:empty { display: none; }

/* =========================================================================
   11. FOOTER
   ========================================================================= */
.pied {
  background: var(--bleu-nuit);
  border-top: 1px solid var(--gris-bordure);
  padding: 28px 0 20px;
}
.pied__contenu { display: flex; flex-direction: column; gap: 22px; }

.pied__liste { display: flex; flex-wrap: wrap; gap: 4px var(--e3); font-size: 15px; }
.pied__liste a { display: inline-block; padding: 8px 0; color: #ffffff; transition: color var(--transition); }
.pied__liste a:hover { color: #ffffff; text-decoration: underline; }
.pied__liste--legal { margin-top: var(--e2); color: #ffffff; font-size: 14px; }

.reseaux { display: flex; gap: 10px; }
.reseaux a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;     /* 44px : taille minimale confortable au doigt */
  border-radius: 50%;
  background: var(--blanc);
  border: 1px solid var(--gris-bordure);
  color: var(--bleu);
  transition: background-color .15s, color .15s, border-color .15s;
}
.reseaux .icone { width: 18px; height: 18px; }
.reseaux a:hover { background: var(--bleu); color: var(--blanc); border-color: var(--bleu); }

.pied__bas {
  margin-top: var(--e3);
  padding-top: var(--e2);
  border-top: 1px solid var(--gris-bordure);
  font-size: 14px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* =========================================================================
   12. MEDIA QUERIES
   On part du téléphone (ci-dessus) et on élargit progressivement.
   ========================================================================= */

/* ---------- Tablette : à partir de 640px ---------- */
@media (min-width: 640px) {
  .section__titre { font-size: 26px; }
  .hero__titre { font-size: 40px; }
  .hero__grille { min-height: 380px; }
  /* Écran plus large : le voile s'allège et se concentre à gauche */
  .hero__media::after {
    background: linear-gradient(90deg,
                rgba(239, 246, 255, .95) 0%,
                rgba(239, 246, 255, .80) 40%,
                rgba(239, 246, 255, .25) 75%,
                rgba(239, 246, 255, .10) 100%);
  }

  .grille-categories { grid-template-columns: repeat(2, 1fr); }
  .grille-guides     { grid-template-columns: repeat(2, 1fr); }
  .grille-pays       { grid-template-columns: repeat(3, 1fr); }

  .bandeau-chiffres__liste { grid-template-columns: repeat(4, 1fr); }

  .newsletter { padding: 28px; }
  .pied__bas { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ---------- Ordinateur : à partir de 1024px ---------- */
@media (min-width: 1024px) {

  /* --- Hero : texte à gauche, photo collée au bord droit de l'écran ---
     La photo sort de la grille : elle est positionnée par rapport à la section
     entière (.hero), ce qui lui permet de toucher le bord droit de l'écran,
     alors que le texte reste aligné sur les autres sections. */
  .hero__grille {
    grid-template-columns: 1fr;      /* une seule colonne : celle du texte */
    align-items: center;
    /* La hauteur suit la LARGEUR de l'écran (38vw), au lieu d'être figée en
       pixels : le cadre garde ainsi des proportions proches du format de la
       photo (3,1:1) quelle que soit la taille de l'écran.
       clamp() borne le résultat : jamais moins de 460px (sinon le texte ne
       tiendrait plus), jamais plus de 620px (sinon le bandeau serait géant). */
    min-height: clamp(460px, 32vw, 620px);
    padding: var(--e5) var(--e2);
  }

  /* "top" ancre le HAUT de la photo en haut du cadre : s'il reste de la
     hauteur à rogner sur un très grand écran, elle est prise en bas (le
     feuillage) et jamais sur le visage de l'étudiante. */
  .hero__image { object-position: center top; }

  /* Sur grand écran, le voile devient un dégradé horizontal : opaque à gauche
     (là où se trouve le texte), transparent à droite (là où se trouve
     l'étudiante). La photo se dévoile donc progressivement, sans coupure. */
  .hero__media::after {
    /* Voile allégé : on doit VOIR le ciel et la ville derrière le texte.
       Deux dégradés superposés :
       - le premier, horizontal, protège la colonne de texte à gauche ;
       - le second, vertical, renforce légèrement le haut, là où le titre
         est le plus large ; le bas reste plus dégagé, ce qui laisse
         apparaître les toits et les arbres. */
    background:
      linear-gradient(90deg,
                rgba(239, 246, 255, .74) 0%,
                rgba(239, 246, 255, .68) 30%,
                rgba(239, 246, 255, .42) 55%,
                rgba(239, 246, 255, .08) 78%,
                rgba(239, 246, 255, 0) 100%),
      linear-gradient(180deg,
                rgba(239, 246, 255, .30) 0%,
                rgba(239, 246, 255, .10) 55%,
                rgba(239, 246, 255, 0) 100%);
  }

  /* Le texte ne doit jamais passer sous la photo : on le limite à un peu
     moins de la moitié de l'écran (46vw), avec un maximum de 620px. */
  .hero__contenu { max-width: min(660px, 52vw); }
  .hero__titre { font-size: 46px; }
  .recherche { max-width: 600px; flex-wrap: nowrap; }
  .resultats { max-width: 600px; }
  .mini-stats { gap: 34px; margin-top: 30px; }

  /* --- Grilles : la mise en page complète de la maquette --- */
  .section { padding: var(--e5) var(--e2); }
  .grille-categories { grid-template-columns: repeat(5, 1fr); }
  .grille-pays       { grid-template-columns: repeat(6, 1fr); }
  .grille-guides     { grid-template-columns: repeat(4, 1fr); }

  /* 1 grande carte à gauche, la colonne des 2 petites à droite */
  .grille-vedette { grid-template-columns: 1.15fr 1fr; gap: var(--e3); }
  /* 1fr 1fr : les deux petites cartes se partagent exactement la hauteur
     de la grande carte, les trois finissent donc alignées. */
  .grille-vedette__colonne { grid-template-rows: 1fr 1fr; align-content: stretch; }
  .carte-vedette { min-height: 100%; }
  .carte-vedette__corps { padding: 28px; }

  /* La petite carte passe en deux colonnes : texte à gauche, vignette à droite */
  .carte-petite {
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 16px;
    align-items: center;
  }
  .carte-petite__vignette { margin-top: 0; height: 100%; min-height: 110px; }

  /* --- Newsletter en ligne --- */
  .newsletter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 32px;
  }
  .newsletter__texte { flex: 1; }
  .newsletter__bouton { margin-top: 0; flex-shrink: 0; }
  .newsletter__formulaire { margin-top: 0; width: 380px; flex-shrink: 0; }
  .newsletter__ligne { flex-wrap: nowrap; }

  /* --- Footer sur une ligne --- */
  .pied__contenu { flex-direction: row; align-items: center; justify-content: space-between; }
  .pied__navigation { flex: 1; text-align: center; }
  .pied__liste { justify-content: center; }
}

/* ---------- Menu complet : à partir de 1152px ----------
   Le menu bascule PLUS TARD que le reste de la page (1152px au lieu de 1024px)
   parce qu'il lui faut plus de place : sept liens, deux boutons et le logo sur
   une seule ligne. En dessous, le menu burger reste affiché — c'est confortable
   sur tablette et cela évite que "Étudier à l'étranger" passe à la ligne. */
@media (min-width: 1152px) {
  .burger { display: none; }

  .entete__contenu { flex-wrap: nowrap; min-height: 72px; }

  .navigation {
    display: flex;              /* toujours visible sur ordinateur */
    align-items: center;
    justify-content: space-between;
    gap: var(--e3);
    width: auto;
    flex: 1;
    padding-bottom: 0;
  }
  .navigation__liste {
    flex-direction: row;
    gap: 24px;
    margin-left: var(--e3);
  }
  .navigation__dropdown details[open] .navigation__sous-menu,
  .navigation__sous-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: -12px;
    z-index: 60;
    min-width: 210px;
    padding: 8px;
    background: var(--blanc);
    border: 1px solid var(--gris-bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre-forte);
  }
  .navigation__lien {
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    font-size: 15px;
  }
  .navigation__lien--actif { border-bottom-color: var(--bleu); }
  .entete__actions { margin-top: 0; gap: 14px; }
  .entete__actions .bouton { flex: none; }
}


/* Respecte le réglage système "réduire les animations" */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}