/* ==========================================================================
   YODIM INC. — feuille de style unique du site corporatif
   16 septembre 2026 · révision 2 : SOMBRE

   ⚠️ UNE SEULE FEUILLE POUR LES 11 PAGES. Chaque page la charge par un chemin
      relatif (assets/, ../assets/, ../../assets/). Une correction de style se
      fait ici, une fois, et les 11 pages suivent. Onze copies auraient dérivé
      à la première retouche.

   ⚠️ LE SITE EST SOMBRE, POINT — plus de variante claire.
      Les couleurs ne sont pas choisies : elles sont RELEVÉES sur la bannière
      du magasin (échantillonnage des pixels, 16 sept.) :
        fond profond   #0a141e → #162e3e  (le dégradé de la bannière)
        cyan de marque #00bfff            (le « YO » de YODiM)
      Le site, l'icône, la bannière et l'app disent ainsi la même chose.
      ⇒ `color-scheme: dark` est déclaré : les champs et barres de défilement
        du navigateur suivent, au lieu de rester blancs sur fond noir.
   ========================================================================== */

:root {
  color-scheme: dark;

  --fond:            #0a141e;   /* relevé : coin haut-gauche de la bannière */
  --fond-doux:       #0d1c27;   /* relevé : centre-gauche */
  --fond-carte:      #112230;   /* relevé : coin bas-gauche */
  --fond-haut:       #162e3e;   /* relevé : coin bas-droit */
  --bordure:         #1e3446;
  --bordure-vive:    #2a4a61;
  --texte:           #eef4f8;
  --texte-doux:      #94a9b8;
  --accent:          #00bfff;   /* relevé : le cyan du logo */
  --accent-vif:      #4fd2ff;
  --accent-sourd:    #0e8fc4;
  --accent-fond:     #0d2836;
  --ombre:           0 1px 2px rgba(0, 0, 0, .5), 0 14px 40px rgba(0, 0, 0, .35);
  --rayon:           14px;
  --largeur:         1120px;
  --prose:           68ch;
}

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

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

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

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

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Enveloppe ─────────────────────────────────────────────────────────── */

.enveloppe {
  width: 100%;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 16px;           /* gouttière de 16px : pas de défilement horizontal au téléphone */
}

/* ── En-tête et navigation ─────────────────────────────────────────────── */

.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 20, 30, .82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--bordure);
}

.entete__rangee {
  position: relative;   /* ancre la nav dépliée du téléphone */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 66px;
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--texte);
}
.marque:hover { text-decoration: none; }

/* L'ICÔNE DE L'APP, la vraie, celle des magasins. */
.marque__icone {
  width: 34px; height: 34px;
  border-radius: 8px;
  flex: 0 0 34px;
}

/* Le mot-symbole reprend la bannière : « YO » cyan, « DiM » blanc. */
.marque__nom {
  font-weight: 800;
  font-size: 1.24rem;
  letter-spacing: -.02em;
  white-space: nowrap;
  line-height: 1;
}
.marque__yo { color: var(--accent); }

.marque__inc {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texte-doux);
  border-left: 1px solid var(--bordure-vive);
  padding-left: 11px;
  line-height: 1;
}

@media (max-width: 460px) {
  .marque__inc { display: none; }   /* au téléphone, l'icône et le nom suffisent */
}

/* ── Le coin droit de l'en-tête : langue + bouton Menu ─────────────────── */

/* ⚠️ `order` PLUTOT QUE DE DEPLACER LE BLOC DANS LE HTML : dans le source, le
   selecteur de langue et le bouton Menu viennent AVANT la navigation, ce qui
   est le bon ordre au clavier et pour un lecteur d'ecran. A l'ecran, on les
   envoie a l'extreme droite. Les deux besoins sont servis sans compromis. */
.entete__droite { display: flex; align-items: center; gap: 10px; order: 3; }
.nav { order: 2; }
.marque { order: 1; }

/* ⚠️ LE SÉLECTEUR DE LANGUE EST UN LIEN, PAS UN SCRIPT. Il mène à la page
   jumelle, qui existe vraiment. Assez large pour rester cliquable au doigt. */
.langue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  padding: 8px 12px;
  border: 1px solid var(--bordure-vive);
  border-radius: 9px;
  background: var(--fond-carte);
  color: var(--texte);
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .06em;
}
.langue:hover {
  text-decoration: none;
  border-color: var(--accent-sourd);
  color: var(--accent);
  background: var(--fond-haut);
}

.nav { display: flex; align-items: center; gap: 2px; }

.nav a {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 9px;
  font-size: .94rem;
  font-weight: 500;
  color: var(--texte-doux);
}
.nav a:hover { background: var(--fond-carte); color: var(--texte); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--accent); background: var(--accent-fond); }

.nav__bouton {
  display: none;
  border: 1px solid var(--bordure-vive);
  background: var(--fond-carte);
  color: var(--texte);
  border-radius: 9px;
  padding: 9px 13px;
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
}

@media (max-width: 900px) {
  .nav__bouton { display: inline-block; }
  .nav {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px 16px 16px;
    background: var(--fond);
    border-bottom: 1px solid var(--bordure);
  }
  .nav.est-ouverte { display: flex; }
  .nav a { padding: 11px 12px; font-size: 1rem; }
}

/* ── Sections ──────────────────────────────────────────────────────────── */

.section { padding: 64px 0; }
.section--doux { background: var(--fond-doux); }

.section + .section { border-top: 1px solid var(--bordure); }
.section--doux + .section, .section + .section--doux { border-top: 0; }

/* ── Héros ─────────────────────────────────────────────────────────────── */

.heros {
  padding: 78px 0 64px;
  /* Le même dégradé que la bannière, prolongé dans la page. */
  background:
    radial-gradient(1100px 460px at 78% 18%, rgba(0, 191, 255, .10), transparent 62%),
    linear-gradient(160deg, #0a141e 0%, #102534 62%, #162e3e 100%);
  border-bottom: 1px solid var(--bordure);
}
.heros h1 {
  font-size: clamp(2rem, 5.2vw, 3.1rem);
  line-height: 1.12;
  letter-spacing: -.03em;
  margin: 0 0 18px;
  max-width: 20ch;
}
.heros p {
  font-size: clamp(1.05rem, 2.4vw, 1.25rem);
  color: var(--texte-doux);
  max-width: var(--prose);
  margin: 0 0 28px;
}

/* La bannière du magasin, telle quelle, en tête de page. */
.banniere {
  width: 100%;
  border-radius: var(--rayon);
  border: 1px solid var(--bordure-vive);
  box-shadow: var(--ombre);
}

.surtitre {
  display: inline-block;
  margin: 0 0 14px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent-fond);
  color: var(--accent);
  border: 1px solid var(--bordure-vive);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

h1, h2, h3 { letter-spacing: -.022em; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); line-height: 1.2; margin: 0 0 14px; }
h3 { font-size: 1.16rem; line-height: 1.3; margin: 0 0 8px; }

.prose { max-width: var(--prose); }
.prose p { margin: 0 0 18px; }
.prose p:last-child { margin-bottom: 0; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; }
.prose li { margin-bottom: 7px; }
.prose h2 { margin-top: 40px; }
.prose h3 { margin-top: 28px; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }

.introduction {
  font-size: 1.12rem;
  color: var(--texte-doux);
  max-width: var(--prose);
  margin: 0 0 32px;
}

/* ── Grilles et cartes ─────────────────────────────────────────────────── */

.grille { display: grid; gap: 20px; }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }

/* ⚠️ La rangée des quatre captures de téléphone.
   Le but de cette rangée n'est pas de montrer quatre écrans : c'est de rendre
   le FORMAT TÉLÉPHONE évident au premier coup d'œil. Une colonne large
   rendrait l'image trapue et l'effet serait perdu. On force donc des colonnes
   étroites et une gouttière généreuse : l'œil voit quatre rectangles hauts et
   séparés, pas une bande d'images collées. */
.grille--tel {
  grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
  gap: 44px 40px;
}
.grille--alignee { align-items: center; }

.carte {
  background: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 24px;
  box-shadow: var(--ombre);
}
.carte h3 { margin-top: 0; }
.carte p:last-child { margin-bottom: 0; }

/* Le liseré à gauche : c'est la signature visuelle des widgets de l'app. */
.carte--liseree { border-left: 3px solid var(--accent); }

.carte__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  margin-bottom: 12px;
  border-radius: 8px;
  background: var(--accent-fond);
  color: var(--accent);
  font-weight: 700;
  font-size: .92rem;
}

/* Carte-lien : documents, manuels, pages légales. Toute la carte est cliquable. */
.carte-lien {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  background: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  color: var(--texte);
  transition: border-color .15s ease, background .15s ease;
}
.carte-lien:hover {
  text-decoration: none;
  border-color: var(--accent-sourd);
  background: var(--fond-haut);
}
/* L'icone est un SVG en ligne : meme dessin sur toutes les plateformes,
   aucune dependance, et il prend la couleur d'accent par currentColor. */
.carte-lien__icone {
  flex: 0 0 22px;
  width: 22px; height: 22px;
  margin-top: 3px;
  color: var(--accent);
}
.carte-lien strong { display: block; font-size: 1rem; }
.carte-lien span {
  display: block;
  font-size: .87rem;
  color: var(--texte-doux);
  line-height: 1.45;
}

/* ── Boutons ───────────────────────────────────────────────────────────── */

.boutons { display: flex; flex-wrap: wrap; gap: 12px; }

.bouton {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 10px;
  font-weight: 600;
  font-size: .97rem;
  border: 1px solid transparent;
}
.bouton:hover { text-decoration: none; }
.bouton--plein { background: var(--accent); color: #06121b; }
.bouton--plein:hover { background: var(--accent-vif); }
.bouton--creux { border-color: var(--bordure-vive); color: var(--texte); background: var(--fond-carte); }
.bouton--creux:hover { background: var(--fond-haut); border-color: var(--accent-sourd); }

/* ── Liste de faits (Qui nous sommes, Contact) ─────────────────────────── */

.faits { margin: 0; padding: 0; }
.faits div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--bordure);
}
.faits div:first-child { border-top: 1px solid var(--bordure); }
.faits dt {
  flex: 0 0 210px;
  font-weight: 600;
  font-size: .87rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.faits dd { flex: 1 1 260px; margin: 0; }

@media (max-width: 560px) {
  .faits dt { flex-basis: 100%; }
}

/* ── Nouvelles ─────────────────────────────────────────────────────────── */

.entree { padding: 26px 0; border-bottom: 1px solid var(--bordure); }
.entree:first-of-type { border-top: 1px solid var(--bordure); }
.entree__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.entree__date {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.etiquette {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent-fond);
  color: var(--accent);
  border: 1px solid var(--bordure-vive);
  font-size: .76rem;
  font-weight: 700;
}
.entree h3 { margin: 0 0 8px; }
.entree p { margin: 0; color: var(--texte-doux); max-width: var(--prose); }

/* ── FAQ ───────────────────────────────────────────────────────────────── */

.question {
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--fond-carte);
  padding: 18px 22px;
  margin-bottom: 12px;
}
.question > summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.question > summary::-webkit-details-marker { display: none; }
.question > summary::after {
  content: "+";
  float: right;
  color: var(--accent);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1;
}
.question[open] > summary::after { content: "\2212"; }
.question > p { margin: 14px 0 0; color: var(--texte-doux); max-width: var(--prose); }

/* ── Captures d'écran ──────────────────────────────────────────────────── */

.capture { margin: 0; }
.capture img {
  width: 100%;
  border-radius: var(--rayon);
  border: 1px solid var(--bordure-vive);
  box-shadow: var(--ombre);
}
.capture figcaption {
  margin-top: 10px;
  font-size: .87rem;
  color: var(--texte-doux);
  line-height: 1.45;
}

/* ⚠️ Une capture de téléphone fait presque deux fois sa largeur en hauteur.
   Dans une grille de trois, elle imposerait une colonne démesurée. On borne
   la hauteur et on centre : l'image garde ses proportions, la page respire. */
.capture--tel img {
  max-height: 700px;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
}
.capture--tel figcaption { text-align: center; }

/* Une phrase qui annonce la rangée de téléphones, avant les images. */
.chapeau-captures {
  max-width: var(--prose);
  margin: 0 0 28px;
  color: var(--texte-doux);
}

/* Le logo n'est pas une capture : on le pose au centre d'un cadre, à sa
   taille native. Étiré sur toute la colonne, il serait flou. */
.vitrine-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--fond-carte);
  box-shadow: var(--ombre);
}
.vitrine-logo img {
  width: 200px; height: 200px;
  border-radius: 34px;
}

/* ── Emplacement d'image à remplacer ───────────────────────────────────── */

.cadre-image {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: 24px;
  border: 2px dashed var(--bordure-vive);
  border-radius: var(--rayon);
  background: var(--fond-doux);
  color: var(--texte-doux);
  font-size: .88rem;
  text-align: center;
}

/* ── Pied de page ──────────────────────────────────────────────────────── */

.pied {
  border-top: 1px solid var(--bordure);
  background: #07101a;
  padding: 48px 0 36px;
  font-size: .92rem;
}

.pied__marque {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 26px;
}
.pied__marque img { width: 38px; height: 38px; border-radius: 9px; }

/* ⚠️ Le pied porte le MÊME bloc de marque que l'en-tête : « <logo> YODiM ·
   Applications Inc. ». Deux différences assumées : au pied, la raison sociale
   ne disparaît JAMAIS au téléphone (c'est la pièce qu'Apple vient lire), et
   elle est un cran plus grande, parce qu'elle n'a plus à cohabiter avec sept
   onglets de navigation. */
.pied__marque .marque__inc {
  display: inline-block;
  font-size: .68rem;
  padding-left: 12px;
}

.pied__colonnes {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-bottom: 34px;
}
.pied h4 {
  margin: 0 0 10px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: 7px; }
.pied a { color: var(--texte); }
.pied a:hover { color: var(--accent); }

/* ⚠️ LE BLOC LÉGAL EST LA PIÈCE QUI TRAVAILLE POUR L'INSCRIPTION APPLE.
   La raison sociale doit être identique, au caractère près, à celle du
   D-U-N-S et de l'incorporation. Il est répété sur les 11 pages. */
.pied__legal {
  padding-top: 24px;
  border-top: 1px solid var(--bordure);
  color: var(--texte-doux);
  line-height: 1.75;
}
.pied__legal strong { color: var(--texte); }

.aller-au-contenu { position: absolute; left: -9999px; }
.aller-au-contenu:focus {
  left: 16px; top: 10px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--accent);
  color: #06121b;
  border-radius: 8px;
}

/* ══════════════════════════════════════════════════════════════════════════
   LES PAGES JURIDIQUES — politique de confidentialité, conditions d'utilisation

   ⚠️ LE TEXTE DE CES DEUX PAGES N'EST PAS DE MOI. Il vient des pages déjà en
      ligne, dont l'URL est déclarée dans Play Console. Il arrive avec SES
      propres classes — .card, .warn, .legalcaps — et un tableau. Ces classes
      venaient d'une feuille claire ; on les redéfinit ici pour le thème sombre
      du site AU LIEU de retoucher le HTML juridique. Modifier le texte pour
      qu'il s'adapte au site aurait été le contraire de ce qu'il faut faire.
   ══════════════════════════════════════════════════════════════════════════ */

.sous-titre-juridique {
  display: block;
  margin-top: 6px;
  font-size: .62em;
  font-weight: 500;
  color: var(--texte-doux);
}
.version-juridique {
  margin: -14px 0 34px;
  color: var(--texte-doux);
  font-size: .92rem;
}
.prose--juridique h2 {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--bordure);
  font-size: 1.22rem;
  scroll-margin-top: 16px;
}
.prose--juridique h2:first-of-type { border-top: 0; padding-top: 0; }
.prose--juridique ul { padding-left: 22px; }
.prose--juridique li { margin: 10px 0; }

/* L'encadré de synthèse (« En résumé. ») et les blocs d'adresse. */
.prose--juridique .card {
  background: var(--fond-carte);
  border: 1px solid var(--bordure-vive);
  border-radius: var(--rayon);
  padding: 16px 20px;
  margin: 22px 0;
}
.prose--juridique .card p:first-child { margin-top: 0; }
.prose--juridique .card p:last-child { margin-bottom: 0; }

/* ⚠️ La consigne de sécurité sur le volume. Elle DOIT rester visuellement
   distincte : c'est le seul endroit du site où un avertissement peut éviter
   un dommage auditif. Ambre, pas cyan — un avertissement qui a la couleur du
   reste n'avertit plus. */
.prose--juridique .card.warn {
  background: #2a2317;
  border-color: #b58a3a;
}
.prose--juridique .card.warn strong { color: #e0b458; }

/* Les paragraphes en majuscules (exclusion de garanties, limitation de
   responsabilité). Ils restent lisibles mais ne crient pas. */
.prose--juridique .legalcaps {
  font-size: .9rem;
  color: var(--texte-doux);
  line-height: 1.6;
}

/* Le tableau des autorisations. `display:block` + overflow pour qu'il défile
   au téléphone au lieu d'élargir la page. */
.prose--juridique table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  font-size: .94rem;
  display: block;
  overflow-x: auto;
}
.prose--juridique th,
.prose--juridique td {
  border: 1px solid var(--bordure);
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
}
.prose--juridique th {
  background: var(--fond-carte);
  font-weight: 600;
  color: var(--texte);
}