/* ==========================================================================
   CAPMEDIA DIGITAL · agence.css
   Compléments propres au site agence. Tout le reste vient de tokens.css
   et az.css, copiés tels quels depuis l'Academy : ne rien dupliquer ici.
   ========================================================================== */

/* --- Fil d'ariane (blog) -------------------------------------------------- */
.fil-ariane {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--texte-3);
}
.fil-ariane a { color: var(--texte-2); text-decoration: none; }
.fil-ariane a:hover { color: var(--texte); text-decoration: underline; text-underline-offset: 2px; }
.fil-ariane .sep { color: var(--texte-3); }

/* --- En-tête d'article ----------------------------------------------------- */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3);
}

/* --- Corps d'article de blog ---------------------------------------------- */
.article-corps { max-width: var(--colonne-lecture); }
.article-corps > * + * { margin-top: var(--e-4); }
.article-corps h2 {
  font-weight: 600;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.2;
  letter-spacing: var(--ls-h2);
  text-wrap: balance;
  margin-top: var(--e-7);
}
.article-corps h3 {
  font-weight: 600;
  font-size: 19px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin-top: var(--e-6);
}
.article-corps p { font-size: 16px; line-height: 1.6; color: var(--texte-2); }
.article-corps p strong, .article-corps li strong { color: var(--texte); }
.article-corps ul, .article-corps ol {
  padding-left: 1.2em;
  display: grid;
  gap: var(--e-2);
  font-size: 16px;
  line-height: 1.6;
  color: var(--texte-2);
}
.article-corps a { color: var(--action); text-decoration: none; }
.article-corps a:hover { text-decoration: underline; text-underline-offset: 2px; }
.article-corps code {
  font-family: var(--police-mono);
  font-size: 0.88em;
  background: var(--bg-3);
  border-radius: var(--r-1);
  padding: 1px 5px;
}
.article-corps pre code { background: none; padding: 0; font-size: inherit; }
.article-corps .encadre p { margin-top: 0; }
.article-corps .encadre p + p { margin-top: var(--e-3); }

/* --- Cartes d'articles (liste du blog + accueil) --------------------------- */
.carte-article {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.carte-article:hover .t-h3 { text-decoration: underline; text-underline-offset: 3px; }

/* --- Page mentions (l'équivalent local de legal.css, en plus simple) ------- */
.doc-simple { max-width: 760px; }
.doc-simple h2 { margin-top: var(--e-7); }
.bloc-info {
  margin-top: var(--e-4);
  border: 1px solid var(--trait);
  border-radius: var(--r-3);
  background: var(--bg-2);
  padding: var(--e-4) var(--e-5);
}
.bloc-info dl {
  display: grid;
  grid-template-columns: minmax(150px, auto) 1fr;
  gap: var(--e-2) var(--e-4);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}
.bloc-info dt { color: var(--texte-3); }
.bloc-info dd { color: var(--texte); margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .bloc-info dl { grid-template-columns: 1fr; gap: 2px; }
  .bloc-info dd { margin-bottom: var(--e-2); }
}

/* ==========================================================================
   Le langage « produit » de l'accueil : héros typographique géant, mot
   surligné, maquette sous cadre navigateur, grandes cartes arrondies.
   Tokens réels : --bg, --bg-2, --bg-3, --texte(-2/-3), --trait(-fort),
   --action, --voile-*, --ombre-flottant.
   ========================================================================== */

/* L'en-tête : logo à gauche, liens au centre, action à droite */
.entete .nav-liens { margin-inline: auto; gap: 26px; }

.heros-notion { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--e-5); }

/* La rangée d'icônes d'app, façon écran d'accueil de téléphone */
.rangee-tuiles { display: flex; justify-content: center; align-items: center; gap: 14px; }
.tuile-app {
  width: 56px; height: 56px; border-radius: 15px;
  display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  position: relative;
}
/* L'arc : un désordre ordonné. Chaque tuile suit la courbe (--y) et
   s'incline en éventail (--r), puis flotte doucement, en décalé. */
.tuile-app {
  transform: rotate(var(--r, 0deg)) translateY(var(--y, 0px)) scale(var(--s, 1));
  animation: tuile-flotte 4s ease-in-out infinite alternate;
}
.tuile-app:nth-child(1) { --r: -9deg; --y: 16px; animation-delay: 0s; }
.tuile-app:nth-child(2) { --r: -6deg; --y: 6px;  animation-delay: 1.3s; }
.tuile-app:nth-child(3) { --r: -3deg; --y: 0px;  animation-delay: 2.6s; }
.tuile-app:nth-child(4) { --r: 0deg;  --y: -4px; --s: 1.07; animation-delay: 0.6s; }
.tuile-app:nth-child(5) { --r: 3deg;  --y: 0px;  animation-delay: 1.9s; }
.tuile-app:nth-child(6) { --r: 6deg;  --y: 6px;  animation-delay: 3.2s; }
.tuile-app:nth-child(7) { --r: 9deg;  --y: 16px; animation-delay: 0.9s; }
@keyframes tuile-flotte {
  from { transform: rotate(var(--r, 0deg)) translateY(var(--y, 0px)) scale(var(--s, 1)); }
  to   { transform: rotate(var(--r, 0deg)) translateY(calc(var(--y, 0px) - 7px)) scale(var(--s, 1)); }
}
@media (prefers-reduced-motion: reduce) {
  .tuile-app { animation: none; }
}
.tuile-app .badge-notif {
  position: absolute; top: -6px; right: -6px;
  min-width: 20px; height: 20px; border-radius: 10px;
  background: #F64932; color: #fff;
  font: 700 12px/20px var(--police); text-align: center;
  padding-inline: 5px;
  box-shadow: 0 0 0 3px var(--bg);
}

/* Le titre géant et son mot surligné */
.t-geant {
  font: 800 clamp(46px, 8.4vw, 102px) / 1.0 var(--police);
  letter-spacing: -0.035em;
  text-wrap: balance;
  color: var(--texte);
}
.mot-surligne {
  display: inline-flex; align-items: center; gap: 0.18em;
  background: var(--voile-bleu);
  border-radius: 999px;
  padding: 0.06em 0.34em 0.1em 0.22em;
  white-space: nowrap;
  font-weight: 500;
  font-size: 0.88em;
  letter-spacing: -0.02em;
}
.mot-surligne .point {
  width: 0.26em; height: 0.26em; border-radius: 50%;
  background: var(--action); flex: none;
  align-self: center;
}

.heros-notion .t-lead { font-size: 20px; color: var(--texte-2); }

.heros-notion .btn-large { padding: 13px 26px; font-size: 16.5px; font-weight: 600; }
.btn-clair {
  background: var(--voile-bleu);
  color: var(--action);
  border: 0;
}
.btn-clair:hover { filter: brightness(0.96); color: var(--action-survol); }

/* --- La maquette sous cadre navigateur ------------------------------------ */
.cadre-nav {
  width: min(100%, 1020px); margin-inline: auto;
  border-radius: 16px; overflow: hidden;
  background: var(--bg); text-align: left;
  box-shadow: var(--ombre-flottant);
}
.cadre-nav-tete {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid var(--trait);
  background: var(--bg-2);
}
.cadre-nav-tete i { width: 10px; height: 10px; border-radius: 50%; background: var(--trait-fort); }
.cadre-adresse {
  font-size: 12.5px; color: var(--texte-3);
  background: var(--bg); border: 1px solid var(--trait);
  border-radius: 8px; padding: 3px 16px; margin-inline: auto;
}
.maquette { display: grid; grid-template-columns: 215px 1fr; min-height: 360px; }
.maquette-lat {
  border-right: 1px solid var(--trait); background: var(--bg-2);
  padding: 14px 10px; display: flex; flex-direction: column; gap: 2px;
}
.maquette-lat .titre-lat { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texte-3); padding: 6px 8px; }
.maquette-lat span { font-size: 13px; color: var(--texte-2); padding: 5px 8px; border-radius: 6px; }
.maquette-lat span.actif { background: var(--bg); font-weight: 600; color: var(--texte); box-shadow: 0 1px 2px rgba(15, 15, 15, 0.06); }
.maquette-corps { padding: 20px 22px; }
.kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
.kanban .titre-col { font-size: 12px; font-weight: 600; color: var(--texte-2); display: flex; align-items: center; gap: 6px; }
.kanban .titre-col i { width: 8px; height: 8px; border-radius: 50%; }
.tuile {
  border: 1px solid var(--trait);
  border-radius: 8px;
  padding: 9px 11px; font-size: 12.5px; color: var(--texte-2);
  background: var(--bg); margin-top: 8px;
  box-shadow: 0 1px 2px rgba(15, 15, 15, 0.04);
}
@media (max-width: 720px) {
  .maquette { grid-template-columns: 1fr; }
  .maquette-lat { display: none; }
  .kanban { grid-template-columns: 1fr 1fr; }
}

.bande-logos {
  display: flex; justify-content: center; align-items: center;
  gap: clamp(18px, 4vw, 44px); flex-wrap: wrap;
  color: var(--texte-3); font-weight: 700; font-size: 15px;
}

/* --- Les grandes cartes arrondies ------------------------------------------ */
.grille-notion { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-4); }
.grille-notion .large { grid-column: 1 / -1; }
@media (max-width: 860px) { .grille-notion { grid-template-columns: 1fr; } }

.carte-notion {
  background: var(--bg-2); border-radius: 22px;
  padding: clamp(26px, 3.5vw, 42px);
  display: flex; flex-direction: column; gap: var(--e-3);
  transition: background 0.2s ease;
}
.carte-notion:hover { background: var(--bg-3); }
.carte-notion .sur-titre { font-size: 14.5px; color: var(--texte-3); }
.carte-notion h3 {
  font: 700 clamp(22px, 2.6vw, 30px) / 1.14 var(--police);
  letter-spacing: -0.02em; text-wrap: balance; max-width: 24ch;
  color: var(--texte);
}
.btn-fleche {
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--texte); color: var(--bg);
  display: grid; place-items: center; flex: none;
  transition: transform 0.15s ease;
  text-decoration: none;
}
.carte-notion:hover .btn-fleche, .btn-fleche:hover { transform: translateX(3px); color: var(--bg); }
.visuel-carte { margin-top: auto; padding-top: var(--e-4); }

/* Les mini-maquettes dans les cartes */
.mini-tel {
  width: 158px; border-radius: 24px;
  padding: 12px 12px 16px; background: var(--bg); margin-inline: auto;
  box-shadow: var(--ombre-flottant);
}
.mini-tel .encoche { width: 44px; height: 5px; border-radius: 3px; background: var(--bg-3); margin: 0 auto 10px; }
.mini-ligne { height: 9px; border-radius: 5px; background: var(--bg-3); margin-top: 9px; }
.mini-ligne.l-60 { width: 60%; } .mini-ligne.l-80 { width: 80%; } .mini-ligne.l-40 { width: 40%; }
.mini-bloc { height: 46px; border-radius: 10px; background: var(--voile-bleu); margin-top: 10px; }
.mini-nav { display: flex; justify-content: space-around; margin-top: 12px; }
.mini-nav i { width: 16px; height: 16px; border-radius: 5px; background: var(--bg-3); }
.mini-nav i:first-child { background: var(--action); }

.mini-fenetre {
  border-radius: 14px; background: var(--bg);
  padding: 12px 14px; max-width: 340px; margin-inline: auto;
  box-shadow: var(--ombre-flottant);
}
.mini-fenetre .barre { display: flex; gap: 5px; margin-bottom: 10px; }
.mini-fenetre .barre i { width: 8px; height: 8px; border-radius: 50%; background: var(--trait-fort); }

.mini-bulle {
  border-radius: 14px 14px 14px 4px;
  background: var(--bg); padding: 13px 17px; font-size: 14px; color: var(--texte-2);
  max-width: 330px; box-shadow: var(--ombre-flottant);
}
.mini-bulle strong { color: var(--texte); }
.mini-bulle + .mini-bulle { margin-top: 12px; border-radius: 14px 14px 4px 14px; margin-left: 28px; background: var(--voile-bleu); color: var(--texte); }

/* --- La rangée « découvrir » ----------------------------------------------- */
.titre-decouvrir { font-size: 17px; color: var(--texte-3); margin-bottom: var(--e-3); }
.rangee-decouvrir { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: var(--e-3); }
.carte-decouvrir {
  border: 1px solid var(--trait-fort); border-radius: 16px;
  padding: var(--e-4); min-height: 185px;
  display: flex; flex-direction: column; gap: var(--e-3);
  text-decoration: none; color: var(--texte); background: var(--bg);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.carte-decouvrir:hover { box-shadow: 0 6px 20px rgba(15, 15, 15, 0.08); transform: translateY(-2px); text-decoration: none; }
.icone-ronde { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none; }
.carte-decouvrir strong { font-size: 17px; line-height: 1.3; letter-spacing: -0.01em; margin-top: auto; }
.carte-decouvrir strong .fleche { white-space: nowrap; }

/* --- Le filigrane géant et le footer en verre dépoli ----------------------
   Le nom de la maison, immense, à cheval sur la ligne du footer : la moitié
   haute respire sur la page, la moitié basse passe DERRIÈRE le verre dépoli
   qui la floute. Le bloc réserve exactement la hauteur de la moitié visible.
   ========================================================================== */
.bloc-pied {
  --filigrane: clamp(64px, 12.5vw, 210px);
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--filigrane) * 0.42);
  isolation: isolate;
}
.filigrane-zone {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  user-select: none;
  line-height: 0;
}
.filigrane-zone span {
  display: block;
  font: 800 var(--filigrane) / 0.84 var(--police);
  letter-spacing: -0.05em;
  white-space: nowrap;
  color: var(--texte);
  opacity: 0.1;
}
.pied {
  position: relative;
  z-index: 1;
  background: color-mix(in srgb, var(--bg) 42%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
  border-top: 1px solid var(--trait);
}
@supports not (backdrop-filter: blur(1px)) {
  .pied { background: var(--bg-2); }
}

/* En sombre, le filigrane a besoin d'un cran de présence en plus. */
[data-theme="dark"] .filigrane-zone span { opacity: 0.17; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .filigrane-zone span { opacity: 0.17; }
}

/* ==========================================================================
   LA VITRINE DES APPLICATIONS
   Le squircle Apple (rayon 22.5 % du côté), son reflet de verre, sa grille,
   et l'en-tête de page produit. Une seule pièce visuelle, trois tailles.
   ========================================================================== */

/* --- L'icône : un carré arrondi façon iOS, posé et brillant ---------------- */
.icone-app {
  --taille-icone: 96px;
  position: relative;
  isolation: isolate;
  flex: none;
  display: block;
  width: var(--taille-icone);
  height: var(--taille-icone);
  border-radius: 22.5%;               /* le squircle Apple */
  overflow: hidden;
  background: var(--bg-3);
  box-shadow:
    0 0 0 1px rgba(15, 15, 15, 0.06),
    0 2px 5px rgba(15, 15, 15, 0.10),
    0 10px 26px rgba(15, 15, 15, 0.16);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.icone-app img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
/* Le dégradé de survol : une lumière qui bascule, jamais un aplat */
.icone-app::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.22), rgba(0, 0, 0, 0.12));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
/* Le reflet : la moitié haute prend le jour, comme une icône de l'App Store */
.icone-app::after {
  content: "";
  position: absolute;
  inset: 0 0 50% 0;
  z-index: 2;
  border-radius: inherit;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.32) 0%,
    rgba(255, 255, 255, 0.10) 58%,
    rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

/* Trois tailles, une seule variable */
.icone-app-p { --taille-icone: 56px; }
.icone-app-m { --taille-icone: 96px; }
.icone-app-g { --taille-icone: 128px; }

/* --- Le lien d'application : icône, nom, une ligne de pitch ---------------- */
.lien-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--e-3);
  padding: var(--e-4) var(--e-3);
  border-radius: 18px;
  text-decoration: none;
  color: var(--texte);
  transition: background 0.18s ease;
}
.lien-app:hover { background: var(--bg-2); text-decoration: none; color: var(--texte); }
.lien-app:hover .icone-app,
.icone-app-lien:hover .icone-app {
  transform: scale(1.06);
  box-shadow:
    0 0 0 1px rgba(15, 15, 15, 0.06),
    0 4px 10px rgba(15, 15, 15, 0.12),
    0 16px 34px rgba(15, 15, 15, 0.20);
}
.lien-app:hover .icone-app::before,
.icone-app-lien:hover .icone-app::before { opacity: 1; }
.lien-app:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--anneau); }
.lien-app .nom-app {
  font-weight: 600;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--texte);
}
.lien-app .pitch-app {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--texte-2);
  max-width: 26ch;
}

/* --- La grille des applications -------------------------------------------- */
.grille-apps-icones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: var(--e-4);
}
@media (max-width: 640px) {
  .grille-apps-icones { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* La rangée compacte, pour la bande de preuve de l'accueil */
.rangee-apps {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: clamp(10px, 2.5vw, 26px);
}
.rangee-apps .lien-app { padding: var(--e-3) var(--e-2); gap: var(--e-2); }
.rangee-apps .lien-app .nom-app { font-size: 14px; }
.rangee-apps .lien-app .pitch-app { font-size: 12.5px; max-width: 18ch; }

/* --- L'en-tête d'une page produit : grande icône à gauche ------------------ */
.entete-app {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3.5vw, 36px);
  flex-wrap: wrap;
}
.entete-app .infos-app {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  flex: 1 1 340px;
  min-width: 0;
}
.entete-app .infos-app h1 {
  font: 700 clamp(32px, 4.6vw, 52px) / 1.08 var(--police);
  letter-spacing: -0.03em;
  color: var(--texte);
}
@media (max-width: 560px) {
  .icone-app-g { --taille-icone: 104px; }
}

/* --- L'état « bientôt » des boutons de téléchargement ---------------------- */
.boutons-stores { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; }
.boutons-stores .btn[aria-disabled="true"] {
  opacity: 0.6;
  pointer-events: none;
  transform: none;
}