/* ==========================================================================
   Feuille de style du site FIL
   ========================================================================== */

/* --------------------------------------------------------------------------
   Charte graphique FIL (janvier 2013)
   -------------------------------------------------------------------------- */
:root {
  /* Les cinq couleurs de la charte : valeurs RVB écrites dans le document */
  --fil-jaune: #ffdd0b;       /* R255 V221 B11  */
  --fil-bleu: #68c6e1;        /* R104 V198 B225 */
  --fil-framboise: #e85253;   /* R232 V82  B83  */
  --fil-mauve: #9e8dbe;       /* R158 V141 B190 */
  --fil-vert: #8fb417;        /* R143 V180 B23  */

  /* Tons neutres : relevés sur le logo et les fonds de la charte */
  --fil-noir: #161316;
  --fil-ardoise: #4c5761;         /* gris des fonds sombres (valeur relevée, approximative) */
  --fil-ardoise-clair: #55606b;
  --fil-blanc: #ffffff;

  /* Tons de la maquette web (fond sombre), relevés sur le fond de page fourni */
  --fond: #555555;
  --fond-panneau: #616161;
  --fond-pied: #333333;
  --texte: #f4f4f2;
  --texte-attenue: #d5d5d5;
  --filet: #8d8d8d;

  /* Couleurs des cartes de l'accueil : teinte moyenne de chaque fond (bloc_bleu.png,
     bloc_jaune.png, bloc_rouge.png). Le menu reprend les mêmes pour ses barres. */
  --bleu-carte: #56b8d7;
  --jaune-carte: #d6c14f;
  --rouge-carte: #c04852;

  /* Une couleur par univers, comme sur les gouttes de la charte */
  --couleur-francais: var(--fil-bleu);
  --couleur-immersion: var(--fil-jaune);
  --couleur-loisirs: var(--fil-framboise);

  /* Bouton d'action : framboise un peu plus soutenu que celui de la charte,
     pour que le texte blanc reste lisible (contraste de 4,65 pour 1). */
  --couleur-action: #d43c3f;
  --couleur-action-survol: #c23235;
  --couleur-texte-sur-action: var(--fil-blanc);

  /* Polices : St Ryde pour les titres (police de la charte),
     Helvetica Neue pour le texte courant (maquette web de 2013) */
  --police-titres: "St Ryde", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --police-texte: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* St Ryde Regular : police de la charte (fonderie Stereotypes).
   Seul le style Regular est fourni : les titres restent donc en graisse 400,
   sans gras ni italique simulés par le navigateur. */
@font-face {
  font-family: "St Ryde";
  src: url("../fonts/st-ryde-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

/* À la souris ou au pavé tactile, la page ne dépasse plus son début ni sa fin : pas d'effet
   élastique qui laisse voir le fond au-dessus de l'en-tête ou sous le pied de page.
   Sur les écrans tactiles, le geste « tirer pour actualiser » est conservé. */
@media (hover: hover) and (pointer: fine) {
  html {
    overscroll-behavior-y: none;
  }
}

body {
  margin: 0;
  /* La page occupe au moins toute la hauteur de la fenêtre et le pied de page est poussé en bas :
     sur une page courte, il n'y a plus de fond visible sous le bandeau du pied. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  /* Fond de page : la texture de la maquette, répétée, et le halo clair derrière le logo.
     Le halo suit le logo : son centre est calculé à partir du bord gauche du contenu. */
  background-color: var(--fond);
  background-image:
    radial-gradient(
      ellipse clamp(15rem, 42vw, 25rem) clamp(12rem, 34vw, 20rem)
      at calc(max(1rem, 50% - 30rem) + clamp(5.85rem, 16.2vw, 11.756rem)) calc(2rem + clamp(2.99rem, 8.27vw, 5.996rem)),
      rgba(255, 255, 255, 0.123) 0%,
      rgba(255, 255, 255, 0.118) 12%,
      rgba(255, 255, 255, 0.102) 25%,
      rgba(255, 255, 255, 0.08) 37%,
      rgba(255, 255, 255, 0.058) 50%,
      rgba(255, 255, 255, 0.037) 62%,
      rgba(255, 255, 255, 0.02) 75%,
      rgba(255, 255, 255, 0) 100%
    ),
    url("../images/fond-texture.png");
  background-repeat: no-repeat, repeat;
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: 1rem;
  line-height: 1.5;
}

h1, h2, h3 {
  font-family: var(--police-titres);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.2;
  margin: 0;
}

p {
  margin: 0 0 1em;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--fil-jaune);
  outline-offset: 3px;
}

.conteneur {
  width: min(100% - 2rem, 60rem);
  margin-inline: auto;
}

.lien-evitement {
  position: absolute;
  left: 1rem;
  top: -4rem;
  padding: 0.5rem 1rem;
  background: var(--fil-blanc);
  color: var(--fil-noir);
  z-index: 10;
}

.lien-evitement:focus {
  top: 1rem;
}

/* --------------------------------------------------------------------------
   En-tête : logo, bouton « Réserver », menu principal
   -------------------------------------------------------------------------- */
.entete {
  display: grid;
  /* le logo prend sa largeur ; les drapeaux et le bouton se partagent le reste, alignés à droite */
  grid-template-columns: auto minmax(0, 1fr);
  /* largeur du logo : sert aussi à caler le bouton « Réserver » sur la signature */
  --largeur-logo: clamp(13rem, 36vw, 26.125rem);   /* 26,125 rem = 418 px, taille du logo du site d'origine */
  align-items: start;
  gap: 1rem;
  padding-top: 1.25rem;
}

.entete__logo img {
  display: block;
  width: var(--largeur-logo);
  /* Logo du site actuel, redessiné en vectoriel d'après francais_immersion_loisirs.png :
     le contour des pétales, leur dégradé et l'ombre douce du lettrage sont dans les
     fichiers logo-fil-blanc.svg et logo-fil-compact-blanc.svg. */
}

/* Petits écrans : logo compact, sans la signature devenue illisible */
@media (max-width: 30rem) {
  .entete__logo img {
    width: 8.5rem;
  }
}

/* Drapeaux calés sur le bord droit de la page, bouton « Réserver » en dessous.
   Le bas du bouton s'aligne sur le bas des lettres de la signature « FRANÇAIS · IMMERSION ·
   LOISIRS » du logo : la colonne prend la hauteur du logo, le bouton est poussé en bas, et la
   marge du bas vaut la distance entre le pied des lettres et le bas du logo. Dans le dessin du
   logo (418 x 192), ce pied est à 129,95 : la marge vaut donc (192 - 129,95) / 418 de la largeur. */
.entete__action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  align-self: stretch;
  gap: 0.3rem;
  padding-bottom: calc(var(--largeur-logo) * 0.148445);
}

.entete__action .bouton-reserver {
  margin-top: auto;
}

/* Petites tablettes : le logo est plus petit, il faut resserrer drapeaux et bouton
   pour que le bouton puisse remonter jusqu'au pied des lettres */
@media (min-width: 30.01rem) and (max-width: 43.5rem) {
  .entete__action {
    gap: 0.1rem;
  }

  .entete__action .langues__liste {
    margin-top: -0.3rem;
  }

  .entete__action .bouton-reserver {
    padding-block: 0.5em;
  }
}

/* Téléphone : le logo compact n'a pas de signature, le bouton reste simplement sous les drapeaux */
@media (max-width: 30rem) {
  .entete__action {
    align-self: start;
    gap: 0.55rem;
    padding: 0.5rem 0 0;
  }

  .entete__action .bouton-reserver {
    margin-top: 0;
  }
}

/* Sélecteur de langue : un drapeau par langue */
.langues__liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.15rem;
  list-style: none;
  /* la zone cliquable dépasse de 0,3rem autour de chaque drapeau : ce retrait aligne
     le bord du dernier drapeau sur le bord droit de la page */
  margin: 0 -0.3rem 0 0;
  padding: 0;
}

.langues__drapeau {
  position: relative;
  display: block;
  padding: 0.3rem 0.3rem 0.45rem;   /* agrandit la zone cliquable et laisse la place du soulignement */
}

.langues__drapeau img {
  display: block;
  width: 1.5rem;
  height: 1rem;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(22, 19, 22, 0.45);
}

/* langue de la page affichée : soulignée en blanc */
.langues__drapeau[aria-current]::after,
a.langues__drapeau:hover::after {
  content: "";
  position: absolute;
  left: 0.3rem;
  right: 0.3rem;
  bottom: 0.05rem;
  height: 0.16rem;
  border-radius: 0.08rem;
  background: var(--fil-blanc);
}

/* au survol d'une autre langue disponible : soulignement plus discret */
a.langues__drapeau:not([aria-current]):hover::after {
  background: var(--filet);
}

/* langue dont les pages ne sont pas encore en ligne : drapeau en couleurs, mais sans lien */
.langues__drapeau--bientot {
  cursor: default;
}

/* Téléphone : deux rangées de trois drapeaux au-dessus du bouton */
@media (max-width: 30rem) {
  .langues__liste {
    max-width: 6.9rem;
  }
}

.bouton-reserver {
  display: inline-block;
  padding: 0.6em 1.4em;
  border-radius: 0.4em;
  background-color: var(--couleur-action);
  color: var(--couleur-texte-sur-action);
  font-weight: 700;
  text-decoration: none;
}

.bouton-reserver:hover {
  background-color: var(--couleur-action-survol);
}

/* Variante plus grande, pour le bouton de la page « Réservez un séjour » */
.bouton-reserver--principal {
  padding: 0.85em 1.8em;
  font-size: 1.15rem;
}

.menu {
  grid-column: 1 / -1;
}

.menu__bouton {
  display: none;
  width: 100%;
  padding: 0.7rem 1rem;
  border: 2px solid var(--texte);
  border-radius: 0.4em;
  background: none;
  color: var(--texte);
  font: 700 1rem var(--police-texte);
  text-align: left;
  cursor: pointer;
}

.menu__liste,
.sous-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu__entree > a {
  display: block;
  padding: 0.6rem 0.25rem;
  border-bottom: 0.8rem solid var(--couleur-entree, var(--filet));
  color: var(--texte);
  font-weight: 700;
  text-decoration: none;
}

.menu__entree > a:hover,
.menu__entree--active > a,
.menu__entree > a[aria-current="page"] {
  color: var(--couleur-libelle, var(--couleur-entree, var(--texte)));
}

/* Barres du menu : bleu, jaune et rouge sont ceux des cartes de l'accueil */
.menu__entree--accueil { --couleur-entree: #c9cbce; }
.menu__entree--concept { --couleur-entree: var(--bleu-carte); }
.menu__entree--sejour { --couleur-entree: var(--jaune-carte); }
/* Le rouge de la carte est trop sombre pour un texte sur le fond gris (contraste de 1,5 pour 1) :
   la barre le prend, le libellé survolé ou actif garde le framboise de la charte, plus clair. */
.menu__entree--programme { --couleur-entree: var(--rouge-carte); --couleur-libelle: var(--fil-framboise); }
.menu__entree--groupes { --couleur-entree: var(--fil-vert); }
.menu__entree--contact { --couleur-entree: var(--fil-mauve); }

/* Entrée « Accueil » : la petite maison */
.menu__maison {
  width: 1.25rem;
  height: 1.125rem;
  vertical-align: -0.15em;
}

.menu__mot {
  margin-left: 0.6rem;
}

.sous-menu a {
  display: block;
  padding: 0.5rem 0.25rem 0.5rem 1.25rem;
  color: var(--texte-attenue);
  text-decoration: none;
}

.sous-menu a:hover,
.sous-menu a[aria-current="page"] {
  color: var(--texte);
  text-decoration: underline;
}

/* Petits écrans : le menu se replie derrière un bouton quand JavaScript est actif */
@media (max-width: 51.99rem) {
  .js .menu__bouton {
    display: block;
  }

  .js .menu__liste {
    display: none;
  }

  .js .menu--ouvert .menu__liste {
    display: block;
    margin-top: 0.5rem;
  }

  .menu {
    margin-bottom: 1rem;
  }
}

/* Grands écrans : menu en ligne, aligné à droite, sous-menus déroulants */
@media (min-width: 52rem) {
  .menu__liste {
    display: flex;
    justify-content: flex-end;
    gap: 0.25rem;               /* petit espace entre les rectangles de couleur */
  }

  .menu__entree {
    position: relative;
  }

  .menu__entree > a {
    padding: 0.5rem 1.1rem 0.55rem;
    white-space: nowrap;
  }

  .menu__mot {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .sous-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 5;
    min-width: 16rem;
    padding: 0.4rem 0;
    background: var(--fil-blanc);
    box-shadow: 0 0.4rem 1rem rgba(22, 19, 22, 0.35);
  }

  .menu__entree:hover > .sous-menu,
  .menu__entree:focus-within > .sous-menu {
    display: block;
  }

  .sous-menu a {
    padding: 0.55rem 1rem;
    color: var(--fil-noir);
  }

  .sous-menu a:hover,
  .sous-menu a[aria-current="page"] {
    color: var(--fil-noir);
    background: #ecedee;
    text-decoration: none;
  }
}

/* --------------------------------------------------------------------------
   Accueil : carrousel de photos, chacune avec sa bulle d'accroche
   -------------------------------------------------------------------------- */
.carrousel {
  position: relative;
}

/* La piste défile horizontalement : au doigt, au clavier, ou avec les commandes */
.carrousel__piste {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.carrousel__piste::-webkit-scrollbar {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .carrousel__piste {
    scroll-behavior: smooth;
  }
}

.diapo {
  position: relative;
  flex: 0 0 100%;
  margin: 0;
  scroll-snap-align: start;
}

.diapo__photo {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 2;
  /* sur téléphone, la photo garde assez de hauteur pour que la bulle tienne dedans */
  min-height: 14.5rem;
  object-fit: cover;
  object-position: 50% var(--cadrage, 78%);
}

/* Cadrage vertical de chaque photo provisoire */
.diapo--groupe { --cadrage: 79%; }

/* Plage et Collioure : le haut de la photo est du ciel ou de la mer, la bulle s'y pose */
.diapo--plage {
  --cadrage: 30%;
  --bulle-haut: 1rem;
  --bulle-bas: auto;
}

.diapo--collioure {
  --cadrage: 20%;
  --bulle-haut: 1rem;
  --bulle-bas: auto;
}

/* Photos sans bulle d'accroche (4 à 7) : le cadrage garde les visages */
.diapo--gpe1 { --cadrage: 70%; }
.diapo--gpe3 { --cadrage: 60%; }
.diapo--mer { --cadrage: 40%; }
.diapo--super { --cadrage: 50%; }

/* Bulle d'accroche : bulle du site actuel (slogan1.png, slogan2.png, slogan3.png), redessinée en
   vectoriel. Le fond (images/slider/slogan*.svg) reprend sa forme, son dégradé et sa transparence ;
   le texte est du vrai texte, blanc avec un halo sombre, posé ligne par ligne comme sur l'image. */
.accroche__petale {
  container-type: inline-size;
  position: absolute;
  /* la bulle est translucide : elle se pose entièrement sur la photo, en bas à droite.
     Une photo peut la placer ailleurs avec --bulle-haut et --bulle-bas (voir plus bas). */
  top: var(--bulle-haut, auto);
  right: 4%;
  bottom: var(--bulle-bas, 0.7rem);
  width: clamp(10.75rem, 24%, 14.5rem);
  aspect-ratio: 172 / 138;
  margin: 0;
  background: var(--bulle) center / 100% 100% no-repeat;
  color: var(--fil-blanc);
  font-family: var(--police-titres);
}

.accroche__petale--mauve { --bulle: url("../images/slider/slogan1.svg"); }
.accroche__petale--jaune { --bulle: url("../images/slider/slogan2.svg"); }
.accroche__petale--bleu { --bulle: url("../images/slider/slogan3.svg"); }

/* Les mesures --y (haut du texte) et --x (début de chaque ligne) sont en pixels de l'image
   d'origine, large de 172 pixels : elles suivent la taille de la bulle (unité cqi). */
.accroche__texte {
  position: absolute;
  inset: 0;
  padding-top: calc(var(--y, 40) / 172 * 100cqi);
  font-size: 1.3rem;
  font-size: calc(21.6 / 172 * 100cqi);
  line-height: 0.97;
  text-shadow:
    0 0 0.14em rgba(0, 0, 0, 0.34),
    0 0 0.38em rgba(0, 0, 0, 0.5);
}

.accroche__ligne {
  display: block;
  padding-left: calc(var(--x, 30) / 172 * 100cqi);
  white-space: nowrap;
}

/* Puces du carrousel : affichées seulement quand JavaScript est actif */
.carrousel__commandes {
  display: none;
}

.js .carrousel__commandes {
  display: block;
}

.carrousel__barre {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: flex;
  align-items: center;
  padding: 0.15rem 0.35rem;
  border-radius: 999px;
  background: rgba(22, 19, 22, 0.62);
}

.carrousel__point {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.carrousel__point::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  border: 2px solid var(--fil-blanc);
  border-radius: 50%;
}

.carrousel__point[aria-current="true"]::before {
  background: var(--fil-blanc);
}

/* Téléphone : bulle plus petite ; sur les photos de la plage et de Collioure, elle reste
   dans le ciel pour ne cacher aucun visage */
@media (max-width: 35.99rem) {
  .accroche__petale {
    width: 7.5rem;
  }

  .diapo--plage,
  .diapo--collioure {
    --bulle-haut: 0.5rem;
  }
}

@media (min-width: 52rem) {
  .accroche__petale {
    bottom: var(--bulle-bas, 1rem);
  }
}

.titre-accueil {
  padding: 1.5rem 0 1.4rem;
  border-bottom: 1px dotted var(--filet);
  font-size: clamp(1.5rem, 3.6vw, 2.25rem);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Accueil : les trois univers
   -------------------------------------------------------------------------- */
.univers {
  display: grid;
  grid-template-columns: minmax(0, 22rem);
  justify-content: center;
  gap: 3rem 1.75rem;
  margin-block: 3.5rem 3rem;
}

/* Trois cartes côte à côte dès que chacune peut rester carrée et lisible */
@media (min-width: 62rem) {
  .univers {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Carte carrée. Les tailles de texte suivent la largeur de la carte (unité cqi),
   pour que le contenu tienne dans le carré sur téléphone comme sur grand écran. */
.carte {
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 1 / 1;
  padding: 1rem 1rem 0.85rem;
  /* Fond de carte du site actuel (bloc_bleu.png, bloc_jaune.png, bloc_rouge.png) : un dégradé
     plus clair au centre, étiré à la taille de la carte. La couleur unie sert de repli tant que
     l'image n'est pas chargée. */
  background: var(--couleur-carte) var(--fond-carte, none) center / 100% 100% no-repeat;
  color: var(--fil-noir);
}

/* Ombre portée sous la carte : shadow_slider.png du site actuel, étirée à la largeur de la carte */
.carte::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 0.9rem;
  background: url("../images/shadow_slider.png") center top / 100% 100% no-repeat;
  pointer-events: none;
}

.carte--francais {
  --couleur-carte: var(--bleu-carte);
  --fond-carte: url("../images/bloc_bleu.png");
}

.carte--immersion {
  --couleur-carte: var(--jaune-carte);
  --fond-carte: url("../images/bloc_jaune.png");
}

/* Carte Loisirs : texte noir comme les deux autres (choix de FIL). Sur ce rouge sombre, le
   contraste est de 3,1 à 4,2 pour 1, sous le seuil de 4,5 recommandé pour un texte courant. */
.carte--loisirs {
  --couleur-carte: var(--rouge-carte);
  --fond-carte: url("../images/bloc_rouge.png");
}

/* Galet de la carte : galet du site actuel, redessiné en vectoriel (images/icones/galet-*.svg) */
.carte__goutte {
  position: absolute;
  top: -2.2rem;
  right: -0.95rem;             /* moins que la marge de la page (1rem) : pas de défilement horizontal sur téléphone */
  width: 5.75rem;
  height: auto;
}

.carte__titre {
  padding-right: 4.25rem;
  font-size: 1.6rem;
  font-size: clamp(1.45rem, 10cqi, 1.9rem);
}

.carte__photo {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 1;
  object-fit: cover;
  object-position: 50% var(--cadrage, 50%);
  margin: 0.6rem 0 0.65rem;
}

/* Cadrage vertical de chaque photo */
.carte--francais .carte__photo { --cadrage: 20%; }
.carte--immersion .carte__photo { --cadrage: 20%; }
.carte--loisirs .carte__photo { --cadrage: 30%; }

.carte__texte {
  flex: 1;
  margin: 0 0 0.4rem;
  font-size: 0.82rem;
  font-size: clamp(0.8rem, 5cqi, 1rem);
  line-height: 1.38;
}

.carte__texte strong {
  display: block;
  margin-bottom: 0.2rem;
}

.carte .lien-suite {
  font-size: 0.82rem;
  font-size: clamp(0.8rem, 5cqi, 1rem);
}

.lien-suite {
  align-self: flex-end;
  font-weight: 700;
  text-decoration: none;
}

.lien-suite::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-left: 0.5em;
  border-top: 0.16em solid currentColor;
  border-right: 0.16em solid currentColor;
  transform: rotate(45deg) translateY(-0.08em);
}

.lien-suite:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Bas de page : six rubriques, puis bandeau
   -------------------------------------------------------------------------- */
.rubriques {
  display: grid;
  gap: 2.25rem 1.75rem;
  margin-block: 3.5rem 4rem;
}

@media (min-width: 36rem) {
  .rubriques {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 52rem) {
  .rubriques {
    grid-template-columns: repeat(3, 1fr);
  }
}

.rubrique__titre {
  padding-bottom: 0.5rem;
  border-bottom: 1px dotted var(--filet);
  font-size: 1.3rem;
}

.rubrique__liens {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
}

.rubrique__liens a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* même hauteur pour tous les liens, avec ou sans galet : les lignes restent alignées d'une rubrique à l'autre */
  min-height: 2.55rem;
  padding: 0.3rem 0;
  color: var(--texte-attenue);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.rubrique__liens a::after {
  content: "";
  flex: none;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.3em;
  border-top: 0.16em solid currentColor;
  border-right: 0.16em solid currentColor;
  transform: rotate(45deg);
}

.rubrique__liens a:hover {
  color: var(--fil-bleu);
}

/* Lien signalé par un galet (contact, réservation, téléchargement) :
   le galet prend la place du chevron, à droite. */
.rubrique__liens .rubrique__lien-goutte::after {
  content: none;
}

.rubrique__goutte {
  flex: none;
  width: 2.5rem;
  height: auto;
  margin-block: -0.2rem;
  margin-right: -0.2rem;       /* le dessin garde une marge à droite pour son ombre */
}

body > footer {
  margin-top: auto;
}

.pied {
  padding: 1.5rem 0 2.5rem;
  background: var(--fond-pied);
  color: var(--texte-attenue);
  font-size: 0.85rem;
}

.pied__contenu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
}

.pied p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   Pages intérieures
   -------------------------------------------------------------------------- */
.page {
  margin: 0 0 1rem;
  padding: 2rem clamp(1rem, 4vw, 2.25rem) 2.5rem;
  background: var(--fond-panneau);
}

.page h1 {
  margin-bottom: 1.5rem;
  font-size: clamp(1.7rem, 4vw, 2.3rem);
}

.page p {
  max-width: 42rem;
}

/* Liens vers un document PDF : une étiquette « PDF » s'ajoute toute seule après le lien
   (remplace l'icône pdf.png du site actuel). Elle est aussi lue par les lecteurs d'écran. */
.page a[href$=".pdf" i]:not(.document)::after {
  content: "PDF";
  display: inline-block;
  margin-left: 0.45em;
  padding: 0.05em 0.4em;
  border: 1px solid currentColor;
  border-radius: 0.25em;
  font-size: 0.72em;
  font-weight: 700;
  line-height: 1.3;
  vertical-align: 0.12em;
}

/* Texte réservé aux lecteurs d'écran (précise la destination des liens « En savoir plus ») */
.masque {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Page Concept et méthode (d'après la capture du site actuel)
   Titre de rubrique avec galet, titre en capitales bleues, photos cerclées de blanc.
   -------------------------------------------------------------------------- */
.page--concept {
  --bleu-titre: var(--fil-bleu);
}

.page--concept p {
  max-width: none;
}

.page__rubrique {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 1.5rem;
  max-width: none;
}

.page__rubrique img {
  width: clamp(3.2rem, 8vw, 5rem);
  height: auto;
  flex: none;
}

.page__rubrique span {
  font-family: var(--police-titres);
  font-size: clamp(2rem, 5vw, 2.9rem);
  line-height: 1.1;
  color: var(--bleu-titre);
}

.page--concept h1 {
  margin: 0 0 1.25rem;
  font-family: var(--police-texte);
  font-size: clamp(1.15rem, 3vw, 1.5rem);
  text-transform: uppercase;
  color: var(--bleu-titre);
}

.page--concept h2 {
  margin: 2.25rem 0 1.25rem;
  font-family: var(--police-texte);
  font-size: clamp(1rem, 2.4vw, 1.1rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--bleu-titre);
}

.page--concept h1 + h2 {
  margin-top: 0;
}

.page--concept h3 {
  margin: 1.75rem 0 0.75rem;
  font-family: var(--police-texte);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--bleu-titre);
}

/* Photo à côté du texte : elle est flottante, le texte l'entoure puis reprend toute la largeur */
.bloc-texte {
  display: flow-root;
  margin: 0 0 1em;
}

.bloc-texte > .photo {
  float: left;
  width: 16rem;
  margin: 0.25rem 1.75rem 1rem 0;
}

.bloc-texte--droite > .photo {
  float: right;
  margin: 0.25rem 0 1rem 1.75rem;
}

.bloc-texte--large > .photo {
  width: 19rem;
}

.photo {
  margin: 0;
  padding: 4px;
  background: var(--fil-blanc);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.photo img {
  display: block;
  width: 100%;
}

@media (max-width: 40rem) {
  .bloc-texte > .photo,
  .bloc-texte--droite > .photo,
  .bloc-texte--large > .photo {
    float: none;
    width: 100%;
    max-width: 16rem;
    margin: 0 0 1rem;
  }
}

/* --------------------------------------------------------------------------
   Page Concept : photos de tailles différentes
   -------------------------------------------------------------------------- */
/* Galerie de trois photos : largeurs et hauteurs différentes, alignées sur le bas */
.galerie {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.15fr;
  gap: 1.25rem;
  align-items: end;
  margin: 1.25rem 0 0.5rem;
}

.galerie .photo img {
  height: var(--hauteur-photo, 12rem);
  object-fit: cover;
}

.photo--jeux { --hauteur-photo: 11rem; }
.photo--jeux img { object-position: 50% 0; }
.photo--odeur { --hauteur-photo: 14rem; }
.photo--landart { --hauteur-photo: 12.5rem; }

/* Photo portrait à droite du passeport : le texte suivant l'entoure */
.photo--flottant {
  float: right;
  width: 11rem;
  margin: 0.25rem 0 1rem 1.75rem;
}

@media (max-width: 40rem) {
  .galerie {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .galerie .photo {
    max-width: none;
  }

  .galerie .photo img {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .photo--flottant {
    float: none;
    margin: 0 0 1rem;
    max-width: 11rem;
  }
}

/* --------------------------------------------------------------------------
   Page « Pourquoi parler français aujourd'hui ? » : tailles de photos
   -------------------------------------------------------------------------- */
@media (min-width: 40.01rem) {
  .bloc-texte > .photo--xs { width: 9rem; }
  .bloc-texte > .photo--s { width: 13rem; }
  .bloc-texte > .photo--m { width: 15rem; }
  .bloc-texte > .photo--l { width: 17rem; }
  .bloc-texte > .photo--xl { width: 20rem; }
}

@media (max-width: 40rem) {
  .bloc-texte > .photo--xs { max-width: 9rem; }
}

/* Dans la liste des raisons, le titre qui suit une photo ne remonte pas contre le bord */
.page--pourquoi .bloc-texte__corps > h3:first-child {
  margin-top: 0.25rem;
}

/* --------------------------------------------------------------------------
   Page « Démarche qualité FIL » : labels, agréments et partenaires
   Mêmes titres bleus que les autres pages Concept ; logos cliquables sur des cartouches blancs.
   -------------------------------------------------------------------------- */
/* Logos : cartouche blanc de hauteur fixe, le logo garde ses proportions */
.logos {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin: 0.25rem 0 1rem;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 5.5rem;
  padding: 0.6rem 0.9rem;
  background: var(--fil-blanc);
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.logo img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Logos hauts (labels, TSJ, Le Noell, Pyrénées-Orientales) : cartouche plus haut */
.logo--haut { height: 7.5rem; }

.logo:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 3px var(--fil-bleu), 0 3px 8px rgba(0, 0, 0, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  .logo { transition: none; }
  .logo:hover { transform: none; }
}

/* Liste des agréments : puces bleues */
.liste-agrements {
  margin: 0 0 1em;
  padding-left: 1.2rem;
}

.liste-agrements li {
  margin-bottom: 0.5em;
}

.liste-agrements li::marker {
  color: var(--bleu-titre);
}

/* Blocs « logo à gauche, texte à droite » : labels, agréments et partenaires */
.partenaires {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}

.partenaire {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
  margin-bottom: 1.25rem;
}

.partenaire > .logo {
  width: 100%;
}

.partenaire__texte > :last-child {
  margin-bottom: 0;
}

.partenaire--sans-logo > .partenaire__texte {
  grid-column: 2;
}

/* Bandes de photos entre deux parties : même hauteur, largeur selon le format de chaque photo */
.bande-photos {
  display: flex;
  gap: 1.25rem;
  /* --largeur-bande (dans la page) limite la largeur : les bandes riches en photos en portrait ne deviennent pas trop hautes */
  max-width: var(--largeur-bande, none);
  margin: 2rem auto;
}

.bande-photos .photo {
  flex: var(--ratio, 1.33) 1 0;
  min-width: 0;
}

/* Bande de deux photos : centrée et moins large, pour garder une hauteur proche de la bande de trois */
.bande-photos--deux {
  max-width: 32rem;
  margin-inline: auto;
}

@media (max-width: 40rem) {
  .partenaire {
    grid-template-columns: 1fr;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
  }

  .partenaire > .logo {
    justify-self: start;
    width: auto;
    min-width: 8rem;
    max-width: 12rem;
  }

  .partenaire--sans-logo > .partenaire__texte {
    grid-column: 1;
  }

  .bande-photos {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .bande-photos .photo {
    flex: none;
    width: 100%;
  }

  .bande-photos,
  .bande-photos--deux {
    max-width: none;
  }

  /* photo en portrait : pas plus large que nécessaire sur téléphone */
  .bande-photos .photo--portrait {
    max-width: 14rem;
  }
}

/* --------------------------------------------------------------------------
   Pages Séjour : même mise en page que les pages Concept (classe page--concept),
   titres dans le jaune de la carte Immersion et de la barre « Séjour » du menu.
   -------------------------------------------------------------------------- */
.page--sejour {
  --bleu-titre: var(--jaune-carte);
}

/* Titre d'un bloc logo + texte (Lieu de séjour : sites touristiques) */
.partenaire__texte h4 {
  margin: 0 0 0.4rem;
  font-family: var(--police-texte);
  font-size: 1rem;
  font-weight: 700;
  color: var(--bleu-titre);
}

.partenaire__texte h4 a {
  color: inherit;
}

/* Phrase mise en avant dans la couleur des titres de la page (ex. dernière phrase de Lieu de séjour) */
.texte-couleur {
  color: var(--bleu-titre);
}

/* --------------------------------------------------------------------------
   Carte Google Maps : elle ne se charge qu'au clic (cookies de Google)
   -------------------------------------------------------------------------- */
.carte-maps {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 20rem;
  margin: 2rem 0 0.5rem;
  padding: 1.5rem 1rem;
  text-align: center;
  background: var(--fond-pied);
  border: 4px solid var(--fil-blanc);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.carte-maps p {
  margin: 0;
  max-width: 32rem;
}

.carte-maps__texte {
  font-weight: 700;
  color: var(--bleu-titre);
}

.carte-maps__bouton {
  padding: 0.6rem 1.25rem;
  border: 0;
  border-radius: 4px;
  background: var(--bleu-titre);
  color: var(--fil-noir);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.carte-maps__bouton:hover {
  filter: brightness(1.1);
}

.carte-maps__info {
  font-size: 0.85rem;
  color: var(--texte-attenue);
}

.carte-maps--chargee {
  display: block;
  padding: 0;
  min-height: 0;
  background: none;
}

.carte-maps--chargee iframe {
  display: block;
  width: 100%;
  height: 24rem;
  border: 0;
}

@media (max-width: 40rem) {
  .carte-maps--chargee iframe { height: 18rem; }
}

/* --------------------------------------------------------------------------
   Mode sombre / mode clair (bouton sous les drapeaux, pour les malvoyants)
   Le site est sombre par défaut ; le choix du visiteur est gardé dans son navigateur
   (clé « fil-theme », écrite par js/main.js, lue dans l'en-tête de chaque page).
   Mode clair : fond clair, texte noir (contraste de 15 à 18 pour 1), titres en bleu et en jaune
   assombris (7,5 et 7 pour 1 sur blanc), contour de focus bleu foncé.
   -------------------------------------------------------------------------- */
:root { color-scheme: dark; }

html[data-theme="clair"] {
  color-scheme: light;
  --fond: #e9ecee;
  --fond-panneau: #ffffff;
  --texte: #161316;
  --texte-attenue: #3a3a3a;
  --filet: #555555;
}

/* Logo : lettrage blanc sur fond sombre, lettrage noir sur fond clair */
.logo-fond-clair { display: none; }
html[data-theme="clair"] .logo-fond-sombre { display: none; }
html[data-theme="clair"] .logo-fond-clair { display: block; }

/* Bouton : visible seulement avec JavaScript */
.theme-bouton {
  display: none;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.6rem;
  border: 2px solid currentColor;
  border-radius: 0.4em;
  background: none;
  color: var(--texte);
  font: 700 0.8rem/1.3 var(--police-texte);
  cursor: pointer;
}

.js .theme-bouton { display: inline-flex; }

.theme-bouton:hover {
  background: var(--texte);
  color: var(--fond);
}

.theme-bouton__icone { flex: none; }

/* Fond de page : sans texture ni halo */
html[data-theme="clair"] body {
  background-image: none;
}

html[data-theme="clair"] a:focus-visible,
html[data-theme="clair"] button:focus-visible {
  outline-color: #00479e;
}

/* En-tête et menu */
html[data-theme="clair"] .langues__drapeau[aria-current]::after,
html[data-theme="clair"] a.langues__drapeau:hover::after {
  background: var(--texte);
}

html[data-theme="clair"] .langues__drapeau img {
  box-shadow: 0 0 0 1px rgba(22, 19, 22, 0.6);
}

html[data-theme="clair"] .menu__entree > a:hover,
html[data-theme="clair"] .menu__entree--active > a,
html[data-theme="clair"] .menu__entree > a[aria-current="page"] {
  color: var(--texte);
  text-decoration: underline;
}

html[data-theme="clair"] .sous-menu {
  border: 1px solid var(--filet);
}

/* Pages Concept et Séjour : titres plus foncés pour rester lisibles sur fond blanc */
html[data-theme="clair"] .page--concept { --bleu-titre: #0a5c75; }
html[data-theme="clair"] .page--sejour { --bleu-titre: #6b5800; }

html[data-theme="clair"] .photo {
  box-shadow: 0 0 0 1px rgba(22, 19, 22, 0.35), 0 1px 4px rgba(0, 0, 0, 0.3);
}

html[data-theme="clair"] .logo {
  box-shadow: 0 0 0 1px rgba(22, 19, 22, 0.35), 0 1px 4px rgba(0, 0, 0, 0.3);
}

html[data-theme="clair"] .logo:hover {
  box-shadow: 0 0 0 3px #00479e, 0 3px 8px rgba(0, 0, 0, 0.4);
}

html[data-theme="clair"] .carte-maps {
  background: var(--fil-blanc);
  border-color: var(--filet);
  color: var(--texte);
}

html[data-theme="clair"] .carte-maps__bouton {
  background: var(--bleu-titre);
  color: var(--fil-blanc);
}

html[data-theme="clair"] .carte-maps__info { color: var(--texte-attenue); }

/* Bas de page : les rubriques suivent le fond clair, le bandeau reste sombre */
html[data-theme="clair"] .rubrique__liens a:hover {
  color: var(--texte);
  text-decoration: underline;
}

html[data-theme="clair"] .pied {
  background: var(--fil-noir);
  color: #e6e6e6;
}

/* Petites tablettes et téléphones : bouton plus compact, pour que « Réserver » reste en bas de la colonne */
@media (max-width: 43.5rem) {
  .theme-bouton {
    padding: 0.1rem 0.45rem;
    font-size: 0.72rem;
  }
}

/* Quatrième niveau de titre (noms des membres de l'équipe) : gras, même couleur que les titres de la page */
.page--concept h4 {
  margin: 1.5rem 0 0.4rem;
  font-family: var(--police-texte);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--bleu-titre);
}

.bloc-texte__corps > h4:first-child {
  margin-top: 0.25rem;
}

/* Bloc photo + texte court : la photo et le texte sont côte à côte, le texte centré en hauteur
   (au lieu d'un texte flottant qui laisserait un grand vide sous lui) */
@media (min-width: 40.01rem) {
  .bloc-texte--centre {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 1.75rem;
    align-items: center;
  }

  .bloc-texte--centre > .photo {
    float: none;
    margin: 0.25rem 0 1rem;
  }

  .bloc-texte--centre.bloc-texte--droite {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .bloc-texte--centre.bloc-texte--droite > .photo {
    order: 2;
  }
}

/* Liste à puces dans le texte d'une page (documents à télécharger, façons de venir) : puces dans la couleur des titres */
.liste-texte {
  margin: 0 0 1em;
  padding-left: 1.2rem;
}

.liste-texte li {
  margin-bottom: 0.6em;
}

.liste-texte li::marker {
  color: var(--bleu-titre);
}

/* --------------------------------------------------------------------------
   Questions fréquentes : questions repliables (details / summary), sans JavaScript
   -------------------------------------------------------------------------- */
.faq-question {
  border-bottom: 1px solid rgba(128, 128, 128, 0.45);
}

.faq-question > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0.25rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.faq-question > summary::-webkit-details-marker {
  display: none;
}

.faq-question > summary::after {
  content: "+";
  flex: none;
  font-size: 1.4em;
  line-height: 1;
  color: var(--bleu-titre, currentColor);
}

.faq-question[open] > summary::after {
  content: "−";
}

.faq-question > summary:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

.faq-question__reponse {
  padding: 0 0.25rem 1rem;
}

.faq-question__reponse > :first-child {
  margin-top: 0;
}

.faq-question + p {
  margin-top: 1.25rem;
}

/* --------------------------------------------------------------------------
   Page Programme et tarifs : titres dans le rouge de la carte / de la barre du menu
   -------------------------------------------------------------------------- */
.page--programme {
  --bleu-titre: #ff9090;
}

html[data-theme="clair"] .page--programme { --bleu-titre: #a3202a; }

.page--programme .texte-couleur a {
  color: inherit;
}

/* Plannings de la page Programme : pleine largeur, un clic pour agrandir */
.planning {
  margin: 1.5rem 0;
}

.planning a {
  display: block;
  cursor: zoom-in;
}

.planning img {
  display: block;
  width: 100%;
  height: auto;
  border: 4px solid var(--fil-blanc);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

/* Titre de la page Programme laissé dans la couleur du texte (pas de rouge) */
.page--programme .titre-neutre {
  color: var(--texte);
}

/* --------------------------------------------------------------------------
   Page Groupes scolaires : titres dans le vert de la barre du menu
   -------------------------------------------------------------------------- */
.page--groupes {
  --bleu-titre: #a6cc2b;
}

html[data-theme="clair"] .page--groupes { --bleu-titre: #4d6600; }

.liste-texte ul {
  margin-top: 0.6em;
  padding-left: 1.2rem;
}

/* Galet en haut à droite du titre de page, comme sur les cartes de l'accueil ; .galet--miroir le retourne */
.page__rubrique--droite {
  flex-direction: row-reverse;
  justify-content: space-between;
}

.galet--miroir {
  transform: scaleX(-1);
}

/* --------------------------------------------------------------------------
   Page Contact : titres dans le violet de la barre du menu
   -------------------------------------------------------------------------- */
.page--contact {
  --bleu-titre: #c3b6e0;
}

html[data-theme="clair"] .page--contact { --bleu-titre: #5b4a85; }

.page--contact address {
  margin: 1.5rem 0;
  font-style: normal;
}

.texte-petit {
  margin-top: 3rem;
  font-size: 0.85rem;
}

.texte-petit h2 {
  font-size: 1rem;
}

/* Sommaire en ancres (page Réserver) et citations de confirmation */
.sommaire {
  margin: 1.5rem 0 2rem;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--bleu-titre);
  background: rgba(128, 128, 128, 0.15);
}

.sommaire ul {
  margin: 0;
  padding-left: 1.2rem;
  columns: 2 16rem;
}

.page--contact blockquote {
  margin: 1.5rem 0;
  padding-left: 1.25rem;
  border-left: 4px solid var(--bleu-titre);
  font-style: italic;
}

.page--contact h3[id] {
  scroll-margin-top: 1rem;
}

/* Petit bouton « Réserver » à côté d'une ligne de liste (page Contact) */
.bouton-reserver--liste {
  margin-left: 0.75rem;
  padding: 0.25em 0.9em;
  font-size: 0.95rem;
  white-space: nowrap;
}

/* Réseaux sociaux : une icône ronde par réseau (pied de page) */
.reseaux {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
}

.reseaux__lien {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--texte);
  color: var(--fond);
  transition: transform 0.15s;
}

.reseaux__lien:hover {
  transform: scale(1.08);
  background: var(--fil-bleu);
}

.reseaux__lien:focus-visible {
  outline: 3px solid var(--fil-jaune);
  outline-offset: 3px;
}

.reseaux__lien svg {
  display: block;
}

/* --------------------------------------------------------------------------
   Page Jeunes français : titres en gris, comme l'entrée « Accueil » du menu
   -------------------------------------------------------------------------- */
.page--jeunes {
  --bleu-titre: #d3d5d8;
}

html[data-theme="clair"] .page--jeunes { --bleu-titre: #4a4d52; }

/* Page Témoignages : liste des réseaux avec icône ronde à gauche de chaque texte */
.liste-reseaux {
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
}

.liste-reseaux li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.liste-reseaux li > .reseaux__lien {
  flex: none;
}

.liste-reseaux p {
  margin: 0.4rem 0 0;
}

.reseaux__suite {
  display: inline-block;
  margin-top: 0.8rem;
  color: var(--texte-attenue);
  font-size: 0.9rem;
  font-weight: 700;
}

.reseaux__suite:hover {
  color: var(--fil-bleu);
}

/* --------------------------------------------------------------------------
   Page « Découvrez FIL en vidéo ! » : aperçu cliquable, la vidéo YouTube ne se charge qu'au clic
   -------------------------------------------------------------------------- */
.video-yt {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 48rem;
  margin: 1.5rem 0 0.5rem;
  background: var(--fond-pied) center / cover no-repeat;
  border: 4px solid var(--fil-blanc);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.video-yt__bouton {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  width: 100%;
  padding: 1rem;
  border: 0;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.video-yt__bouton:hover { background: rgba(0, 0, 0, 0.2); }

.video-yt__lecture {
  display: block;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--bleu-titre) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231a171b' d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") center / 60% no-repeat;
}

.video-yt__info {
  max-width: 28rem;
  font-size: 0.85rem;
  font-weight: 400;
  text-align: center;
}

.video-yt iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-yt--chargee { background: #000; }

/* Page Téléchargement : liste de documents en accès rapide */
.documents {
  margin: 1rem 0 1.5rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.75rem;
}

.document {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--filet);
  border-radius: 0.6rem;
  background: var(--fond-panneau);
  color: var(--texte);
  text-decoration: none;
}

.document:hover,
.document:focus-visible {
  border-color: var(--bleu-titre);
  box-shadow: 0 0 0 2px var(--bleu-titre);
}

.document__type {
  flex: none;
  min-width: 5.5rem;
  padding: 0.3rem 0.5rem;
  border-radius: 0.4rem;
  background: var(--couleur-action);
  color: var(--couleur-texte-sur-action);
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
}

.document__texte {
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.document__aide {
  color: var(--texte-attenue);
  font-size: 0.9rem;
}

@media (max-width: 30rem) {
  .document {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}