/* =====================================================================
   Marc Bert Communication — page unique.

   Même langage visuel que les plateformes montrées dans le diaporama :
   fond bleu nuit, cartes en dégradé violet, accents bleu clair et jaune
   chaud. Pictogrammes dessinés au trait, aucune bibliothèque, aucune
   police à télécharger — la page s'affiche avant que le réseau réponde.
   ===================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bleu-nuit:     #070d1a;   /* le fond */
  --bleu-profond:  #0c1730;   /* les bandes qui alternent */
  --violet-nuit:   #150c2b;
  --violet:        #3b1f6e;
  --bleu-clair:    #4cc2ff;   /* l'accent froid : liens, pictos, sous-titres */
  --jaune:         #ffc247;   /* l'accent chaud : ce sur quoi on doit cliquer */
  --texte:         #eef2f9;
  --texte-doux:    #9fabc4;
  --bord:          rgba(255, 255, 255, .12);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bleu-nuit);
  color: var(--texte);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.dedans { width: 100%; max-width: 1060px; margin: 0 auto; padding: 0 24px; }

h1, h2, h3 { font-weight: 800; letter-spacing: -.5px; line-height: 1.12; }
h1 { font-size: clamp(34px, 6.4vw, 62px); }
h2 { font-size: clamp(26px, 4vw, 38px); margin-bottom: 16px; }
h3 { font-size: 20px; margin-bottom: 8px; }

a { color: var(--bleu-clair); }
strong { color: #fff; }

.petit { font-size: 14px; color: var(--texte-doux); }
.intro { max-width: 64ch; color: var(--texte-doux); margin-bottom: 34px; }

/* Les pictogrammes prennent la couleur du texte qui les entoure : ils
   suivent le thème sans qu'on ait à les régler un par un. */
svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- En-tête ---------- */
.entete {
  position: sticky; top: 0; z-index: 20;
  background: rgba(7, 13, 26, .9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bord);
}
.entete-dedans {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; height: 64px;
}
.marque {
  display: flex; align-items: center; gap: 10px;
  color: #fff; text-decoration: none;
  font-weight: 800; font-size: 16px; letter-spacing: .6px;
}
.marque svg { width: 24px; height: 24px; color: var(--jaune); }
.marque em { font-style: normal; color: var(--texte-doux); font-weight: 500; }
.entete nav { display: flex; gap: 22px; flex-wrap: wrap; }
.entete nav a { color: var(--texte-doux); text-decoration: none; font-size: 15px; }
.entete nav a:hover { color: #fff; }
.entete nav .lien-contact { color: var(--jaune); font-weight: 700; }

/* ---------- Accroche ---------- */
.heros {
  padding: 86px 0 74px;
  background:
    radial-gradient(circle at 18% 0%, rgba(76, 194, 255, .13) 0, transparent 52%),
    radial-gradient(circle at 82% 8%, rgba(255, 194, 71, .10) 0, transparent 50%),
    linear-gradient(165deg, #070d1a 0%, #150c2b 52%, #241145 100%);
  border-bottom: 1px solid var(--bord);
}
.surtitre {
  color: var(--bleu-clair); font-size: 14px; font-weight: 700;
  letter-spacing: 2.4px; text-transform: uppercase; margin-bottom: 16px;
}
/* Un nom composé ne se coupe pas à son trait d'union : sur téléphone,
   la ligne des lieux passait à « COLOMBIE- » puis « BRITANNIQUE ». */
.insecable { white-space: nowrap; }

.heros h1 { margin-bottom: 20px; }
.heros h1 .fin { color: var(--jaune); }
.accroche { font-size: 20px; max-width: 58ch; margin-bottom: 32px; }

.boutons { display: flex; gap: 12px; flex-wrap: wrap; }
.bouton {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; padding: 13px 24px; border-radius: 10px;
  border: 1px solid var(--bord); color: var(--texte);
  font-size: 16px; font-family: inherit; line-height: normal;
  background: transparent; cursor: pointer;
}
.bouton svg { width: 19px; height: 19px; flex: none; }
.bouton:hover { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .3); }
.bouton-fort { background: var(--jaune); border-color: var(--jaune); color: #1b1030; font-weight: 700; }
.bouton-fort:hover { background: #ffd473; border-color: #ffd473; }

/* ---------- Bandes ---------- */
.bande { padding: 74px 0; border-bottom: 1px solid var(--bord); }
.bande-sombre { background: var(--bleu-profond); }
.bande-contact {
  background:
    radial-gradient(circle at 78% 0%, rgba(255, 194, 71, .10) 0, transparent 58%),
    linear-gradient(180deg, #150c2b 0%, #070d1a 100%);
}

/* ---------- Services ---------- */
.services {
  list-style: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.carte {
  background: linear-gradient(180deg, rgba(59, 31, 110, .40) 0%, rgba(12, 23, 48, .40) 100%);
  border: 1px solid var(--bord); border-radius: 14px;
  padding: 26px 26px 28px;
}
.carte svg { width: 30px; height: 30px; color: var(--jaune); margin-bottom: 14px; }
.carte h3 { color: #fff; }
.carte p { font-size: 15.5px; color: var(--texte-doux); line-height: 1.6; }

/* =====================================================================
   Les vidéos de la chaîne Odysee
   ---------------------------------------------------------------------
   Une vignette est un BOUTON, pas un lien : le clic ne quitte pas la
   page, il remplace la vignette par le lecteur, au même endroit et à la
   même taille. D'où le rapport 16/9 imposé au cadre — sans lui, la
   grille sauterait au moment où l'iframe prend la place de l'image.
   ===================================================================== */

.videos {
  list-style: none;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 26px 22px; margin-bottom: 34px;
}

.video-bouton {
  display: block; width: 100%; padding: 0; cursor: pointer;
  position: relative; aspect-ratio: 16 / 9;
  border: 1px solid var(--bord); border-radius: 12px; overflow: hidden;
  background: #0c1730;
}
.video-bouton img, .video-sans-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-sans-image { background: linear-gradient(160deg, #1b1038 0%, #0c1730 100%); }
.video-bouton:hover, .video-bouton:focus-visible { border-color: var(--jaune); }

/* Le triangle de lecture. Il s'éclaire au survol du cadre entier, pas
   seulement de lui-même : la cible du clic, c'est toute la vignette. */
.video-jouer {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(7, 13, 26, .34); transition: background .2s;
}
.video-jouer svg {
  width: 58px; height: 58px; padding: 15px;
  border-radius: 50%; box-sizing: border-box;
  background: rgba(7, 13, 26, .72); border: 1px solid rgba(255, 255, 255, .28);
  fill: var(--jaune); stroke: none;
  transition: background .2s, border-color .2s, transform .2s;
}
.video-bouton:hover .video-jouer { background: rgba(7, 13, 26, .12); }
.video-bouton:hover .video-jouer svg { background: rgba(7, 13, 26, .88); border-color: var(--jaune); transform: scale(1.07); }

/* Le lecteur prend exactement la place de la vignette. */
.video-bouton iframe { display: block; width: 100%; height: 100%; border: 0; }

.video-titre { margin-top: 12px; font-weight: 700; font-size: 16px; color: var(--texte); line-height: 1.35; }
.video-date { font-size: 14px; color: var(--texte-doux); }

/* Rien à montrer : plutôt que d'afficher une grille vide, on renvoie à
   la chaîne. Arrive si le script de rafraîchissement n'a jamais tourné. */
.videos:empty { display: none; }

/* ---------- Contact ---------- */
.contacts { list-style: none; display: grid; gap: 14px; max-width: 62ch; margin-bottom: 30px; }
.contacts li {
  display: flex; align-items: center; gap: 16px;
  border: 1px solid var(--bord); border-radius: 12px;
  background: rgba(255, 255, 255, .035);
  padding: 16px 20px;
}
.contacts li:hover { border-color: rgba(255, 194, 71, .45); }
.contacts svg { width: 24px; height: 24px; flex: none; color: var(--bleu-clair); }
.contact-quoi { display: block; font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--texte-doux); }
.contacts a { color: #fff; text-decoration: none; font-size: 19px; font-weight: 700; }
.contacts a:hover { color: var(--jaune); }

/* ---------- Pied ---------- */
.pied { padding: 40px 0 56px; }
.pied p + p { margin-top: 8px; }

@media (max-width: 620px) {
  body { font-size: 16px; }
  .bande { padding: 54px 0; }
  .heros { padding: 58px 0 52px; }
  .entete-dedans { height: auto; padding: 12px 0; flex-direction: column; align-items: flex-start; gap: 10px; }
  .entete nav { gap: 16px; }
  /* Quatre lieux, dont un nom composé qu'on refuse de couper : à
     2,4 px d'interlettrage, « MEXIQUE » tombait seul sur une 3e ligne. */
  .surtitre { letter-spacing: 1.4px; font-size: 13px; }
  .contacts li { align-items: flex-start; }
}

/* =====================================================================
   Le diaporama des réalisations
   ---------------------------------------------------------------------
   Six écrans empilés au même endroit par la grille : le bloc prend la
   hauteur du plus grand, sans hauteur fixe à deviner. On ne fait varier
   que l'opacité — une transition sur « display » n'existe pas, et une
   sur « height » ferait sauter toute la page à chaque changement.
   ===================================================================== */

.diaporama { margin: 0; max-width: 960px; }

.diapo-ecran {
  position: relative;
  border-radius: 14px;
  border: 1px solid var(--bord);
  background: #000;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}

.diapo-pellicule { display: grid; list-style: none; }
.diapo {
  grid-area: 1 / 1;                /* tout le monde au même endroit */
  opacity: 0; visibility: hidden;
  transition: opacity .55s ease, visibility 0s .55s;
}
.diapo[data-actif] { opacity: 1; visibility: visible; transition: opacity .55s ease; }
@media (prefers-reduced-motion: reduce) { .diapo { transition: none; } }

.diapo img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
  background: #0c1730;
}

/* Le texte vit sous l'image, dans le même bloc : il change avec elle. */
.diapo-mot { padding: 20px 22px 24px; background: rgba(255, 255, 255, .045); }
.diapo-marque {
  font-size: 12.5px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--bleu-clair); margin-bottom: 6px;
}
.diapo-titre {
  font-weight: 800; letter-spacing: -.3px; line-height: 1.2;
  font-size: clamp(19px, 2.5vw, 24px);
  color: var(--jaune); margin-bottom: 9px;
}
.diapo-texte { font-size: 15.5px; color: var(--texte-doux); max-width: 74ch; }
.diapo-texte + .diapo-texte { margin-top: 9px; }
.diapo-texte strong { color: var(--texte); font-weight: 600; }

/* ---------- Les flèches ---------- */
.diapo-fleche {
  position: absolute; top: 0; bottom: 0; width: 62px;
  display: flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; color: #fff;
  background: linear-gradient(90deg, rgba(0, 0, 0, .6), transparent);
  opacity: 0; transition: opacity .25s;
}
.diapo-avant { left: 0; }
.diapo-apres { right: 0; background: linear-gradient(270deg, rgba(0, 0, 0, .6), transparent); }
.diapo-fleche svg { width: 30px; height: 30px; stroke-width: 2.4; }
.diapo-ecran:hover .diapo-fleche, .diapo-fleche:focus-visible { opacity: 1; }
/* Sur écran tactile il n'y a pas de survol : les flèches restent visibles. */
@media (hover: none) { .diapo-fleche { opacity: .85; } }

/* ---------- La barre du dessous ---------- */
.diapo-barre {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 14px; flex-wrap: wrap;
}
/* Les points rétrécissent au lieu de déborder : à six écrans sur un
   téléphone, une largeur fixe sortait du cadre. */
.diapo-points { display: flex; gap: 8px; flex: 1 1 200px; justify-content: flex-end; }
.diapo-point {
  flex: 0 1 38px; min-width: 14px; height: 6px;
  padding: 0; border: 0; border-radius: 99px;
  background: rgba(255, 255, 255, .22); cursor: pointer;
  transition: background .25s;
}
.diapo-point:hover { background: rgba(255, 255, 255, .42); }
.diapo-point[aria-selected="true"] { background: var(--jaune); }

.diapo-pause {
  display: inline-flex; align-items: center; gap: 9px;
  background: transparent; border: 0; padding: 4px 2px; cursor: pointer;
  color: var(--texte-doux); font: inherit; font-size: 14px;
}
.diapo-pause:hover { color: #fff; }
/* Deux barres = en marche (le bouton arrête) ; un triangle = à l'arrêt. */
.diapo-pause-icone {
  width: 11px; height: 12px; flex: none;
  border-left: 3px solid currentColor; border-right: 3px solid currentColor;
}
.diapo-pause[aria-pressed="true"] .diapo-pause-icone {
  border: 0; width: 0; height: 0;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  border-left: 11px solid currentColor;
}

/* Sans JavaScript : pas de commandes qui ne répondent à rien. */
.diaporama.sans-js .diapo-fleche,
.diaporama.sans-js .diapo-barre { display: none; }

@media (max-width: 620px) {
  .diapo-mot { padding: 16px 16px 20px; }
  .diapo-texte { font-size: 15px; }
  /* Le libellé disparaît à l'œil mais RESTE dans la page : avec
     « display: none », le bouton n'aurait plus de nom du tout pour un
     lecteur d'écran — un bouton muet sur téléphone. */
  .diapo-pause-mot {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}