/* ═══════════════════════════════════════════════════════════
   DIGITALCOMMUN — navigation vers les 21 pages (voir pages.js)
   Feuille ADDITIVE : n'écrase aucune règle du template, n'utilise
   que ses tokens (--bone, --ink, --ash, --lime…).
   ═══════════════════════════════════════════════════════════ */

/* ── cartes de la sélection : toute la carte est un lien ── */
.card-door { position: absolute; inset: 0; z-index: 2; border-radius: var(--radius); }
.card-door:focus-visible { outline: 2px solid var(--lime); outline-offset: 6px; }
.card:has(.card-door:hover) .card-img img { transform: scale(1.045); }
.card:has(.card-door) figcaption { transition: color .3s; }
.card:has(.card-door:hover) figcaption { color: var(--lime); }

/* ── bouton MENU dans la barre flottante ── */
.dock-menu {
  background: none; border: 0; color: var(--ink);
  padding: 9px 10px; margin-right: 4px; cursor: pointer;
  font-family: var(--mono); position: relative;
}
.dock-menu::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: 5px;
  height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-inout);
}
.dock-menu:hover::after { transform: scaleX(1); transform-origin: left; }
.dock-menu:focus-visible, .pages-close:focus-visible, .pages-panel a:focus-visible, .footer-map a:focus-visible {
  outline: 2px solid var(--lime); outline-offset: 3px;
}

/* ── panneau des 22 pages ── */
html.pages-lock { overflow: hidden; }
.pages-panel {
  position: fixed; inset: 0; z-index: 150;
  background: var(--bone);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transform: translateY(-2%);
  transition: opacity .45s var(--ease-out), transform .6s var(--ease-out);
}
.pages-panel.open { opacity: 1; transform: none; }
.pages-inner { max-width: 1320px; margin: 0 auto; padding: 96px var(--gutter) 64px; }
.pages-head {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--ink-faint); padding-bottom: 18px; margin-bottom: 40px;
}
.pages-close {
  background: var(--lime); color: var(--lime-ink); border: 0; cursor: pointer;
  padding: 10px 14px; border-radius: var(--radius);
}
.pages-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: clamp(20px, 2.4vw, 36px);
}
.pages-group h2 { margin-bottom: 16px; }
.pages-group ul { display: grid; gap: 10px; }
.pages-group a {
  display: flex; align-items: center; gap: 12px;
  font-size: 16px; line-height: 1.25; letter-spacing: -0.007em;
  padding: 6px; margin: -6px; border-radius: var(--radius);
  transition: background-color .3s;
}
.pages-group a:hover { background: var(--white); }
.pages-group img {
  width: 64px; height: 44px; flex: 0 0 auto;
  object-fit: cover; border-radius: var(--radius);
}

/* ── plan du site dans le footer ── */
.footer-map {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 24px; margin-top: 8vh; text-align: left;
}
.footer-map p { margin-bottom: 12px; }
.footer-map ul { display: grid; gap: 7px; }
.footer-map a { font-size: 15px; position: relative; }
.footer-map a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-inout);
}
.footer-map a:hover::after { transform: scaleX(1); transform-origin: left; }
.footer-map + .footer-bottom { margin-top: 6vh; }

@media (max-width: 1100px) {
  .pages-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-map { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .dock-menu { margin-right: 0; padding: 9px 6px; font-size: 11px; }
  .pages-inner { padding-top: 84px; }
  .pages-grid { grid-template-columns: 1fr 1fr; }
  .footer-map { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
}
@media (max-width: 480px) {
  .pages-grid { grid-template-columns: 1fr; }
  .pages-group a { font-size: 15px; }
  .footer-map a { font-size: 14px; }
}

/* ═══ téléphone en vedette ═══ */
/* barre du haut : le numéro, toujours à portée de doigt */
.dock-phone {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 10px; margin-right: 6px; white-space: nowrap;
  color: var(--ink); font-weight: 500;
}
.dock-phone svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--lime); }
.dock-phone:hover .dp-num, .dock-phone:hover .dp-short { text-decoration: underline; text-underline-offset: 3px; }
.dock-phone .dp-short { display: none; }

/* footer : numéro en grand (c'est le lien .footer-mail du template),
   e-mail en petit juste dessous */
.footer-email {
  display: block; width: max-content; max-width: 100%; margin: 14px auto 0;
  font-size: 19px; letter-spacing: -0.007em; color: var(--ash);
  text-decoration: underline; text-decoration-color: var(--ink-faint);
  text-underline-offset: 4px; transition: color .3s;
}
.footer-email:hover { color: var(--ink); }

/* panneau MENU : appel direct en tête */
.pages-head { gap: 16px; flex-wrap: wrap; }
.pages-phone {
  margin-left: auto; font-size: 17px; font-weight: 500;
  color: var(--lime); white-space: nowrap;
}
.pages-phone:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .dock-phone { margin-right: 0; padding: 9px 6px; font-size: 11px; }
  .footer-email { font-size: 16px; }
}
@media (max-width: 600px) {
  .dock-phone .dp-num { display: none; }
  .dock-phone .dp-short { display: inline; }
}
/* sous 480 px : wordmark + MENU + APPELER — le contact écrit reste dans le
   menu et le footer, l'appel passe avant */
@media (max-width: 480px) {
  .dock .dock-cta { display: none; }
  .dock-phone {
    background: var(--lime); color: var(--lime-ink);
    padding: 9px 12px; border-radius: var(--radius);
  }
  .dock-phone svg { color: var(--lime-ink); }
  .pages-phone { margin-left: 0; width: 100%; order: 3; }
}
/* le libellé du CTA ne se coupe jamais : la barre reste sur une ligne */
.dock .dock-cta { white-space: nowrap; }

/* ═══ manifeste : photo de marketing digital derrière la phrase ═══
   Voile couleur toile, plus dense au centre (là où est le texte) et plus
   léger sur les bords pour laisser vivre la photo. */
.s-fill .pin {
  background:
    radial-gradient(ellipse 70% 62% at 50% 50%, rgba(244, 243, 240, .84) 0%, rgba(244, 243, 240, .70) 55%, rgba(244, 243, 240, .25) 100%),
    url('images/manifeste.jpg') center / cover no-repeat,
    var(--bone);
}

/* ═══════════════════════════════════════════════════════════
   AGRANDISSEMENT (demande client)
   · barre de navigation (« bandeau ») : ×2, textes compris —
     --dk = facteur d'échelle, réduit là où ×2 ne tient pas ;
   · textes de l'accueil : ×1,5.
   ═══════════════════════════════════════════════════════════ */
:root { --dk: 2; }

/* ── barre de navigation ── */
.dock {
  padding: calc(8px * var(--dk)) calc(8px * var(--dk)) calc(8px * var(--dk)) calc(18px * var(--dk));
  gap: calc(6px * var(--dk));
}
.dock-wordmark { font-size: calc(19px * var(--dk)); margin-right: calc(14px * var(--dk)); }
.dock-nav { gap: calc(4px * var(--dk)); margin-right: calc(8px * var(--dk)); }
.dock .dock-link, .dock .dock-menu, .dock .dock-phone, .dock .dock-cta { font-size: calc(12px * var(--dk)); }
.dock .dock-link { padding: calc(9px * var(--dk)) calc(10px * var(--dk)); }
.dock .dock-link::after, .dock .dock-menu::after { left: calc(10px * var(--dk)); right: calc(10px * var(--dk)); bottom: calc(5px * var(--dk)); }
.dock .dock-menu { padding: calc(9px * var(--dk)) calc(10px * var(--dk)); margin-right: calc(4px * var(--dk)); }
.dock .dock-phone { padding: calc(9px * var(--dk)) calc(10px * var(--dk)); margin-right: calc(6px * var(--dk)); gap: calc(7px * var(--dk)); }
.dock .dock-phone svg { width: calc(15px * var(--dk)); height: calc(15px * var(--dk)); }
.dock .dock-cta { padding: calc(10px * var(--dk)) calc(14px * var(--dk)); }
.dock .dock-menu::before { content: none; }

/* écrans moyens : ×2 conservé, les 2 ancres passent dans le MENU */
@media (max-width: 1399px) { .dock .dock-nav { display: none; } }
@media (max-width: 1099px) { :root { --dk: 1.7; } }

/* ── textes de l'accueil ×1,5 ── */
:root { --t-heading: clamp(51px, 6.9vw, 85.5px); }
.mono { font-size: 18px; }
body { font-size: 28.5px; }
.hero-kicker { margin-bottom: 36px; }
.spot-intro { white-space: normal; padding: 0 var(--gutter); line-height: 1.12; }
.fill-text { font-size: clamp(39px, 4.6vw, 70px); width: min(1260px, 88vw); }
.coll-sub { font-size: 28.5px; }
.card figcaption { font-size: 28.5px; line-height: 1.2; }
.mw { font-size: clamp(144px, 24vw, 375px); }
.pstep h3 { font-size: clamp(57px, 6.9vw, 96px); }
.pstep p { font-size: 28.5px; }
.psteps { width: min(840px, 50vw); }
.steps-cta { font-size: clamp(36px, 3.9vw, 51px); }
.q-text { font-size: clamp(37.5px, 4.5vw, 69px); }
.q-name { font-size: 30px; }
.q-fig { font-size: clamp(45px, 4.8vw, 69px); }
.final-text { max-width: min(1400px, 90vw); }
.footer-email { font-size: 28.5px; }
.footer-map a { font-size: 22.5px; }
.pages-group a { font-size: 24px; }
.pages-group img { width: 84px; height: 58px; }
.pages-phone { font-size: 25.5px; }

/* ── écrans étroits (≤ 900 px) : mêmes rapports sur les tailles mobiles ── */
@media (max-width: 900px) {
  :root { --dk: 1.6; --t-heading: clamp(40.5px, 9.9vw, 60px); }
  .dock { padding: calc(11px * var(--dk) / 1.6 * 1.25) 12px calc(11px * var(--dk) / 1.6 * 1.25) 16px; gap: 10px; }
  .dock-wordmark { font-size: calc(17px * var(--dk)); margin-right: 0; }
  .dock .dock-menu, .dock .dock-phone, .dock .dock-cta { font-size: calc(11px * var(--dk)); }
  .dock .dock-menu, .dock .dock-phone { padding: calc(9px * var(--dk)) calc(6px * var(--dk)); margin-right: 0; }
  .dock .dock-cta { padding: calc(9px * var(--dk)) calc(12px * var(--dk)); }
  .dock .dock-nav { display: none; }
  body { font-size: 25.5px; }
  .hero-title { font-size: clamp(36px, 10.5vw, 60px); }
  .hero-kicker { font-size: 15px; }
  .fill-text { font-size: clamp(30px, 8.1vw, 42px); width: auto; max-width: none; padding: 0 var(--gutter); }
  .coll-title { font-size: clamp(40.5px, 10.5vw, 57px); }
  .coll-sub { font-size: 25.5px; }
  .card figcaption { font-size: 22.5px; }
  .mw { font-size: clamp(60px, 19.5vw, 102px); }
  .pstep h3 { font-size: clamp(48px, 13.5vw, 69px); }
  .pstep p { font-size: 25.5px; }
  .psteps { width: auto; }
  .steps-cta { font-size: clamp(25.5px, 7.8vw, 39px); }
  .q-text { font-size: clamp(30px, 8.4vw, 45px); }
  .q-name { font-size: 25.5px; }
  .q-fig { font-size: clamp(39px, 11.1vw, 54px); }
  .final-text { max-width: none; }
  .footer-mail { font-size: clamp(39px, 12.6vw, 66px); }
  .footer-email { font-size: 24px; }
  .footer-map a { font-size: 21px; }
  .spot-intro { font-size: clamp(34.5px, 9.3vw, 51px); }
}
@media (max-width: 600px) { :root { --dk: 1.4; } }
@media (max-width: 480px) {
  :root { --dk: 1.3; }
  .mono { font-size: 15px; }
  .card figcaption { font-size: 19.5px; }
  .hero-kicker { font-size: 13px; }
}
/* très petits téléphones : la barre doit tenir sur une ligne, APPELER entier */
@media (max-width: 360px) {
  :root { --dk: 1.12; }
  .dock { padding-left: 12px; padding-right: 8px; gap: 6px; }
}

/* ═══════════════════════════════════════════════════════════
   NUAGE DU HERO — vignettes agrandies (×1,5) et recomposées en
   cadre autour du titre, toujours SOUS la barre de navigation.
   Le titre est recentré dans l'espace visible sous la barre.
   Orientations : 1 P · 2 P · 3 L · 4 P · 5 L · 6 L · 7 P · 8 P · 9 P · 10 L
   (P = portrait 2:3, L = paysage 3:2). Les positions sont celles du
   repos ; au chargement le moteur les resserre de 16 % vers le centre
   et les réduit à 0,74 — les marges ci-dessous en tiennent compte.
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
  .s-hero .hero-copy { padding-top: 112px; }   /* titre centré sous la barre */
  .s-hero .floaters {
    /* hauteur maximale d'une vignette de la rangée haute / basse : calculée pour
       que, une fois resserrée vers le centre par le moteur (16 %, échelle 0,74),
       elle s'arrête au-dessus (au-dessous) du titre */
    --h:  max(calc(53.2vh - 242px), 70px);
    --h2: max(calc(51.5vh - 248px), 70px);
    /* largeur maximale d'un portrait sur le côté du titre (même logique) */
    --side: min(max(calc(56.3vw - 538px), calc(13.4vw - 15px)), calc(36vh - 60px));
  }
  .floaters .fl:nth-child(n) { width: var(--sw); }
  /* rangée haute (sous la barre) : portrait · paysage · portrait */
  .floaters .fl:nth-child(2)  { --sw: calc(var(--h) * 0.646); top: 128px; left: calc(50% - var(--h) * 1.373 - 2.5vw); }
  .floaters .fl:nth-child(3)  { --sw: calc(var(--h) * 1.455); top: 128px; left: calc(50% - var(--h) * 0.727); }
  .floaters .fl:nth-child(4)  { --sw: calc(var(--h) * 0.646); top: 128px; left: calc(50% + var(--h) * 0.727 + 2.5vw); }
  /* rangée basse : portrait · paysage · portrait */
  .floaters .fl:nth-child(8)  { --sw: calc(var(--h2) * 0.646); top: auto; bottom: 1.5vh; left: calc(50% - var(--h2) * 1.373 - 2.5vw); }
  .floaters .fl:nth-child(10) { --sw: calc(var(--h2) * 1.455); top: auto; bottom: 1.5vh; left: calc(50% - var(--h2) * 0.727); }
  .floaters .fl:nth-child(9)  { --sw: calc(var(--h2) * 0.646); top: auto; bottom: 1.5vh; left: calc(50% + var(--h2) * 0.727 + 2.5vw); }
  /* de part et d'autre du titre : portraits, légèrement débordants */
  .floaters .fl:nth-child(1)  { --sw: calc(var(--side) * 0.95); left: -3%; top: calc(50% + 56px - var(--sw) * 0.75); }
  .floaters .fl:nth-child(7)  { --sw: calc(var(--side) * 0.95); left: calc(103% - var(--sw)); top: calc(50% + 56px - var(--sw) * 0.75); }
  /* coins : paysages (haut droit, bas gauche) */
  .floaters .fl:nth-child(5)  { --sw: min(calc(var(--h) * 1.3), calc(44vw - var(--h) * 1.373)); left: calc(98.5% - var(--sw)); top: 128px; }
  .floaters .fl:nth-child(6)  { --sw: min(calc(var(--h2) * 1.3), calc(44vw - var(--h2) * 1.373)); left: 1.5%; top: auto; bottom: 1.5vh; }
}

/* ── Nuage du hero sur mobile et tablette : mosaïque de 4 rangées
   (2 au-dessus du titre, 2 en dessous), proportions des photos
   conservées. --t = hauteur d'une rangée, calculée pour rester entre
   la barre et le titre une fois le nuage resserré par le moteur. ── */
@media (max-width: 900px) {
  .s-hero .hero-copy { padding-top: 56px; }
  .s-hero .floaters {
    --t: max(min(calc(23.2vh - 92px), calc(32.5vw - 6px)), 40px);
    --g: 8px;
  }
  .floaters .fl:nth-child(n) { width: var(--sw); top: auto; bottom: auto; }
  /* proportions : portrait 2:3 → largeur = 0,667 × rangée ; paysage 3:2 → 1,5 × rangée */
  .floaters .fl:nth-child(1), .floaters .fl:nth-child(2), .floaters .fl:nth-child(4),
  .floaters .fl:nth-child(7), .floaters .fl:nth-child(8), .floaters .fl:nth-child(9) { --sw: calc(var(--t) * 0.667); }
  .floaters .fl:nth-child(3), .floaters .fl:nth-child(5),
  .floaters .fl:nth-child(6), .floaters .fl:nth-child(10) { --sw: calc(var(--t) * 1.5); }

  /* au-dessus : rangée 1 (portrait · paysage · portrait), rangée 2 (portrait · paysage) */
  .floaters .fl:nth-child(2) { top: 84px; left: calc(50% - var(--t) * 1.417 - var(--g)); }
  .floaters .fl:nth-child(3) { top: 84px; left: calc(50% - var(--t) * 0.75); }
  .floaters .fl:nth-child(4) { top: 84px; left: calc(50% + var(--t) * 0.75 + var(--g)); }
  .floaters .fl:nth-child(1) { top: calc(84px + var(--t) + var(--g)); left: calc(50% - var(--t) * 1.083 - var(--g) / 2); }
  .floaters .fl:nth-child(5) { top: calc(84px + var(--t) + var(--g)); left: calc(50% - var(--t) * 0.417 + var(--g) / 2); }

  /* en dessous : rangée 3 (paysage · portrait), rangée 4 (portrait · paysage · portrait) */
  .floaters .fl:nth-child(6)  { bottom: calc(2vh + var(--t) + var(--g)); left: calc(50% - var(--t) * 1.083 - var(--g) / 2); }
  .floaters .fl:nth-child(7)  { bottom: calc(2vh + var(--t) + var(--g)); left: calc(50% + var(--t) * 0.417 + var(--g) / 2); }
  .floaters .fl:nth-child(8)  { bottom: 2vh; left: calc(50% - var(--t) * 1.417 - var(--g)); }
  .floaters .fl:nth-child(10) { bottom: 2vh; left: calc(50% - var(--t) * 0.75); }
  .floaters .fl:nth-child(9)  { bottom: 2vh; left: calc(50% + var(--t) * 0.75 + var(--g)); }
}