/* =========================================================================
   /made-in-canada, « Built in Canada. Built to last. »
   ---------------------------------------------------------------------------
   DEPUIS LE 2026-10-15 (demande de Clement Lefebvre). La page reprend la
   maquette de la marque (Josiane Hamelin, canvas Claude Design du 14 octobre,
   export « atlantis-landing-EN ») : seuls la barre haute, la nav et le pied de
   page restent ceux du site. L'ancienne page est mise de cote, intacte, a
   /made-in-canada_betaV1 (canada.css la sert toujours).

   CE QUI CHANGE PAR RAPPORT A LA MAQUETTE, ET POURQUOI
     - Ses styles en ligne sont devenus les classes .mic-* ci-dessous, pour
       qu'on puisse la retoucher et l'enrichir sans fouiller 800 attributs.
       Tout est prefixe : .wrap, .btn, .eyebrow existent deja dans styles.css.
     - Polices : la maquette tirait Archivo 125 % et IBM Plex Mono de Google
       Fonts, ce que le site s'interdit (tokens.css, en tete). Les titres
       prennent Integral CF, la police d'affichage du site, que la maquette
       imitait (« proche du style de l'ancien site ») ; les libelles prennent
       JetBrains Mono, la mono du site ; le texte reste en Archivo.
     - Couleurs : la palette de la maquette, posee en dur. C'est une page de
       campagne a direction artistique fixe (noir, papier, blanc, rouge), elle
       ne suit donc pas la bascule Jour/Nuit, a l'exception du formulaire,
       dont les jetons sont reposes sur sa carte blanche (.mic-form).

   Mouvement : transform et scroll seulement ; prefers-reduced-motion coupe
   le bandeau et le defilement doux des carrousels.
   ========================================================================= */

.mic{
  --mic-rouge:       #C5202A;   /* « American Beauty », catalogue 2026 */
  --mic-rouge-hover: #A51A23;
  --mic-noir:        #0D0D0D;
  --mic-encre:       #1C1C1C;
  --mic-papier:      #F3F2EF;
  --mic-blanc:       #FFFFFF;
  --mic-filet:       #D9D6D0;
  --mic-filet-2:     #E4E1DB;
  --mic-gris:        #4A4A4A;
  --mic-gris-2:      #5A5A5A;
  --mic-gris-3:      #3A3A3A;
  --mic-pad:         clamp(64px, 9vw, 128px);

  background:var(--mic-papier);
  color:var(--mic-encre);
  font-family:var(--font-sans);
  min-width:0;
}
.mic *, .mic *::before, .mic *::after{ box-sizing:border-box; }
.mic a{ color:var(--mic-rouge); }
.mic a:hover{ color:#9E1820; }
.mic :focus-visible{ outline:2px solid var(--mic-rouge); outline-offset:2px; }
/* Le sprite des symboles (erable, fleches, lecture) : hors flux, sans attribut
   style, que la CSP de l'administration bloque quand son ecran hubspot-apercu
   rend cette page (garde du 2026-10-15). */
.mic-sprite{ position:absolute; }
.mic img{ max-width:100%; height:auto; }   /* width/height en attributs : la place reservee, pas la taille */
.mic h1, .mic h2, .mic h3, .mic p, .mic blockquote, .mic figure, .mic ul, .mic ol{ margin:0; }

.mic-wrap{ max-width:var(--container, 1320px); margin:0 auto; padding-inline:clamp(16px, 4vw, 48px); }

/* --- Sections, en alternance noir / papier / blanc ------------------------ */
.mic-s{ position:relative; }
.mic-s--noir{ background:var(--mic-noir); color:#fff; }
.mic-s--papier{ background:var(--mic-papier); color:var(--mic-encre); }
.mic-s--blanc{ background:var(--mic-blanc); color:var(--mic-encre); }
.mic-s__in{ padding-block:var(--mic-pad); display:flex; flex-direction:column; gap:clamp(40px, 5vw, 64px); }
.mic-s__head{ display:flex; flex-direction:column; gap:20px; max-width:820px; }
.mic-s__head--duo{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap:24px 64px; align-items:end; max-width:none;
}
.mic-s__head--barre{ flex-direction:row; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:24px; max-width:none; }
.mic-s__head--barre > div:first-child{ display:flex; flex-direction:column; gap:20px; max-width:820px; }
.mic-grille2{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap:clamp(36px, 5vw, 80px); align-items:center;
}

/* --- Typographie --------------------------------------------------------- */
.mic-disp{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  letter-spacing:-0.005em; line-height:.98; overflow-wrap:break-word;
  /* Pas de cesure : en capitales, « CA-NADA » et « FRON-TIERE » se lisaient mal
     en francais. Un mot trop long pour sa case passe a la ligne entier. */
}
.mic-h1{ font-size:clamp(34px, 3.7vw, 58px); }
.mic-ligne{ display:block; overflow:hidden; padding-bottom:.04em; }
.mic-ligne > span{ display:inline-block; }
.mic-h2{ font-size:clamp(28px, 4.2vw, 56px); }
.mic-h3{ font-size:20px; line-height:1.08; }
.mic-mono{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.12em; }
.mic-eyebrow{
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.14em;
  font-size:12px; font-weight:600; color:var(--mic-rouge);
}
.mic-lede{ font-size:18px; line-height:1.6; color:var(--mic-gris); max-width:38em; }
.mic-s--noir .mic-lede{ color:#C9C9C9; }
.mic-rouge{ color:var(--mic-rouge); }
.mic-erable{ width:14px; height:14px; flex:none; fill:currentColor; }

/* --- Boutons et liens ---------------------------------------------------- */
.mic-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:0 22px;
  font-family:var(--font-mono); font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; border:1.5px solid transparent; border-radius:0; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s, transform .25s cubic-bezier(.2, .7, .2, 1);
}
.mic .mic-btn--rouge{ background:var(--mic-rouge); color:#fff; border-color:var(--mic-rouge); }
.mic .mic-btn--rouge:hover{ background:var(--mic-rouge-hover); border-color:var(--mic-rouge-hover); color:#fff; }
.mic .mic-btn--ligne{ background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }
.mic .mic-btn--ligne:hover{ background:#fff; color:var(--mic-noir); border-color:#fff; }
.mic .mic-btn--sombre{ background:transparent; color:var(--mic-noir); border-color:var(--mic-noir); }
.mic .mic-btn--sombre:hover{ background:var(--mic-noir); color:#fff; }
.mic .mic-btn--blanc{ background:#fff; color:var(--mic-noir); border-color:#fff; }
.mic .mic-btn--blanc:hover{ background:var(--mic-noir); color:#fff; border-color:var(--mic-noir); }
.mic-btns{ display:flex; flex-wrap:wrap; gap:12px; }

.mic .mic-lnk{
  font-family:var(--font-mono); font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; color:var(--mic-rouge);
}
.mic .mic-lnk:hover{ text-decoration:underline; text-underline-offset:5px; color:#9E1820; }
.mic .mic-lnk--blanc{ color:#fff; text-decoration:underline; text-decoration-color:var(--mic-rouge); text-underline-offset:5px; }
.mic .mic-lnk--blanc:hover{ color:#fff; text-decoration-color:#fff; }

/* =========================================================================
   HERO
   ========================================================================= */
.mic-hero__in{ padding-block:clamp(48px, 7vw, 104px); }
.mic-hero__copy{ display:flex; flex-direction:column; gap:28px; min-width:0; }
.mic-hero__copy .mic-eyebrow{ display:flex; align-items:center; gap:10px; }
.mic-hero__lede{ max-width:33em; font-size:clamp(17px, 1.4vw, 20px); line-height:1.6; color:#CFCFCF; }
.mic .mic-hero__delai{
  display:inline-flex; align-items:center; gap:12px; align-self:flex-start;
  padding:12px 16px; border:1px solid var(--mic-gris-3);
  color:#E6E6E6; text-decoration:none; font-size:14px; line-height:1.4;
}
.mic .mic-hero__delai:hover{ color:#fff; border-color:#6A6A6A; }
.mic-point{ width:8px; height:8px; background:var(--mic-rouge); border-radius:50%; flex:none; }
.mic-hero__planif{ color:#fff; text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--mic-rouge); }
.mic-hero__photo{ min-width:0; }
/* 4:5 comme la maquette, mais jamais plus haut que l'ecran sous la nav :
   au-dela, la photo est recadree (object-fit), le titre reste en vue. */
.mic-hero__photo img{ display:block; width:100%; aspect-ratio:4 / 5; max-height:max(420px, calc(100svh - 240px)); object-fit:cover; }

/* --- Bandeau defilant ---------------------------------------------------- */
.mic-bandeau{ background:var(--mic-rouge); color:#fff; overflow:hidden; padding-block:16px; }
.mic-bandeau__piste{ display:flex; width:max-content; animation:mic-bandeau 48s linear infinite; }
.mic-bandeau__lot{ display:flex; align-items:center; gap:28px; padding-right:28px; }
.mic-bandeau__txt{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:20px; white-space:nowrap; }
.mic-bandeau .mic-erable{ width:20px; height:20px; }
@keyframes mic-bandeau{ to{ transform:translateX(-50%); } }

/* =========================================================================
   01 · BUILT CANADIAN
   ========================================================================= */
.mic-cartes{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap:2px; background:var(--mic-filet); border:2px solid var(--mic-filet);
}
.mic-carte{ background:#fff; padding:32px 24px; display:flex; flex-direction:column; gap:14px; min-height:280px; }
.mic-carte__num{ font-size:12px; font-weight:600; color:var(--mic-rouge); }
.mic-carte p{ font-size:16px; line-height:1.6; color:var(--mic-gris); }
.mic-carte .mic-lnk{ margin-top:auto; }
.mic-note{ margin-top:calc(14px - clamp(40px, 5vw, 64px)); font-size:12px; line-height:1.6; color:var(--mic-gris-2); }

/* --- Bande Fitness 365 ---------------------------------------------------- */
.mic-f365{ background:var(--mic-noir); color:#fff; }
.mic-vedettes__in{ padding-block:clamp(40px, 5vw, 72px); display:flex; flex-direction:column; gap:clamp(28px, 3vw, 40px); }
.mic-vedette{ display:grid; grid-template-columns:auto minmax(0, 1fr); gap:16px 28px; align-items:start; }
.mic-vedette[hidden]{ display:none; }

/* Les onglets des gyms : le nom, la ville, et une barre qui se remplit au fil
   des photos du gym affiche (canada-v5.js, --mic-progres de 0 a 1). */
.mic-vedettes__tete{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.mic-onglets{ display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; min-width:0; flex:1; }
.mic-onglets::-webkit-scrollbar{ display:none; }
.mic-onglet{
  flex:1 0 140px; display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  padding:10px 0 12px; background:none; border:0; cursor:pointer; text-align:left; color:#8A8A8A;
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.1em; transition:color .2s;
}
.mic-onglet__nom{ font-size:11px; font-weight:600; }
.mic-onglet__ville{ font-size:10px; }
.mic-onglet:hover, .mic-onglet[aria-selected="true"]{ color:#fff; }
.mic-onglet:focus-visible{ outline:2px solid var(--mic-rouge); outline-offset:2px; }
.mic-onglet__progres{ align-self:stretch; height:2px; margin-top:6px; background:#2A2A2A; overflow:hidden; }
.mic-onglet__progres span{ display:block; height:100%; background:var(--mic-rouge); transform:scaleX(var(--mic-progres, 0)); transform-origin:left; }
.mic-onglet[aria-selected="false"] .mic-onglet__progres span{ transform:scaleX(0); transition:none; }
.mic-lecture{
  flex:none; display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 14px;
  border:1.5px solid rgba(255,255,255,.4); background:transparent; color:#fff; cursor:pointer;
  font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
}
.mic-lecture:hover{ background:#fff; color:var(--mic-noir); }
.mic-lecture[hidden]{ display:none; }

/* Le compte a rebours jusqu'au gym suivant : une ligne pleine largeur sous les
   photos, remplie image par image par canada-v5.js (transform seulement), et le
   nom du gym qui vient. En pause (survol, focus, bouton, hors ecran), elle se
   fige et grisonne : on voit que rien ne bougera tant que la souris est la. */
.mic-suivant{ display:flex; align-items:center; gap:20px; }
.mic-suivant__piste{ flex:1; height:3px; background:#2A2A2A; overflow:hidden; }
.mic-suivant__ligne{ display:block; height:100%; background:var(--mic-rouge); transform:scaleX(0); transform-origin:left; transition:background-color .3s; }
.mic-vedettes.is-pause .mic-suivant__ligne{ background:#8A8A8A; }
.mic-suivant__btn{
  flex:none; display:inline-flex; align-items:baseline; gap:8px; padding:8px 0; background:none; border:0; cursor:pointer;
  color:#A9A9A9; font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
}
.mic-suivant__btn strong{ color:#fff; font-weight:600; }
.mic-suivant__btn:hover strong{ text-decoration:underline; text-decoration-color:var(--mic-rouge); text-underline-offset:4px; }
.mic-suivant[hidden]{ display:none; }
@media (max-width:560px){ .mic-suivant{ flex-direction:column; align-items:stretch; gap:8px; } .mic-suivant__btn{ align-self:flex-end; } }
.mic-lecture svg{ width:14px; height:14px; fill:currentColor; }
.mic-lecture__jouer{ display:none; }
.mic-lecture[aria-pressed="true"] .mic-lecture__pause{ display:none; }
.mic-lecture[aria-pressed="true"] .mic-lecture__jouer{ display:block; }
.mic-guillemet{ font-family:var(--font-display); font-weight:800; font-size:96px; line-height:.75; color:var(--mic-rouge); }
.mic-f365 blockquote{ font-size:clamp(20px, 2.2vw, 28px); line-height:1.4; font-weight:500; }
.mic-vedette__qui{ margin-top:20px !important; font-size:12px; line-height:1.6; color:#A9A9A9; }
.mic-f365 .mic-lnk{ display:inline-block; margin-top:18px; }
.mic-f365__galerie{ grid-column:1 / -1; display:flex; flex-direction:column; gap:16px; margin-top:24px; min-width:0; }
.mic-f365__barre{ display:flex; justify-content:space-between; align-items:center; gap:16px; }
.mic-f365__titre{ font-size:11px; font-weight:600; color:#A9A9A9; }

/* --- Carrousels (Fitness 365, meilleurs vendeurs) ------------------------- */
.mic-piste{
  list-style:none; margin:0; padding:0; display:flex; gap:12px;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; overscroll-behavior-x:contain;
  scrollbar-width:none;
}
.mic-piste::-webkit-scrollbar{ display:none; }
.mic-piste--photos > li{ flex:0 0 clamp(160px, 20%, 240px); aspect-ratio:1 / 1; scroll-snap-align:start; background:var(--mic-encre); }
.mic-piste--photos img{ display:block; width:100%; height:100%; object-fit:cover; }
.mic-nav{ display:flex; gap:8px; }
.mic-fleche{
  width:48px; height:48px; padding:0; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.6); background:transparent; color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.mic-fleche svg{ width:20px; height:20px; fill:currentColor; }
.mic-fleche:hover:not(:disabled){ background:#fff; color:var(--mic-noir); }
.mic-fleche--sombre{ width:56px; height:56px; border-color:var(--mic-noir); color:var(--mic-noir); }
.mic-fleche--sombre svg{ width:22px; height:22px; }
.mic-fleche--sombre:hover:not(:disabled){ background:var(--mic-noir); color:#fff; }
.mic-fleche:disabled{ opacity:.3; cursor:default; }

/* =========================================================================
   02 · BUILT TO LAST
   ========================================================================= */
.mic-preuve__in{ padding-block:var(--mic-pad); }
.mic-preuve__copy{ display:flex; flex-direction:column; gap:28px; min-width:0; }
.mic-chiffres{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap:28px 32px; }
.mic-chiffre{ border-top:2px solid var(--mic-encre); padding-top:16px; display:flex; flex-direction:column; gap:8px; }
.mic-chiffre__val{ font-size:32px; color:var(--mic-rouge); }
.mic-chiffre p:last-child{ font-size:15px; line-height:1.55; color:var(--mic-gris-3); }
.mic-preuve__photo{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.mic-preuve__photo img{ display:block; width:100%; aspect-ratio:1 / 1; object-fit:cover; object-position:62% 50%; }
.mic-preuve__photo figcaption{ font-size:15px; line-height:1.55; color:var(--mic-gris-3); }
.mic-legende{ display:block; font-size:11px; font-weight:600; color:var(--mic-rouge); margin-bottom:6px; }

/* =========================================================================
   03 · BUILT TO BE NOTICED
   ========================================================================= */
.mic-trois{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap:32px; }
.mic-argument{ border-top:1px solid var(--mic-gris-3); padding-top:22px; display:flex; flex-direction:column; gap:12px; }
.mic-argument p{ font-size:16px; line-height:1.6; color:#BDBDBD; }
.mic-grande-citation{ padding:clamp(28px, 4vw, 56px); background:var(--mic-rouge); color:#fff; display:flex; flex-direction:column; gap:24px; }
.mic-grande-citation blockquote{ font-size:clamp(22px, 3vw, 42px); line-height:1.06; }
.mic-grande-citation figcaption{ display:flex; flex-direction:column; gap:8px; font-size:17px; line-height:1.55; }
.mic-grande-citation .mic-mono{ font-size:12px; font-weight:600; }

/* Les declarations qui tournent : toutes empilees dans la meme case (grille),
   pour que l'aplat garde la hauteur de la plus longue et ne saute pas. Sans
   JavaScript, l'attribut hidden ne laisse que la premiere ; avec, canada-v5.js
   pose .is-js et .is-active. */
.mic-citations__pile{ display:grid; }
.mic-citation{ grid-area:1 / 1; display:flex; flex-direction:column; gap:24px; margin:0; }
.mic-citations.is-js .mic-citation{
  visibility:hidden; opacity:0; transform:translateY(14px);
  transition:opacity .45s ease, transform .6s cubic-bezier(.2, .7, .2, 1), visibility 0s .6s;
}
.mic-citations.is-js .mic-citation.is-active{ visibility:visible; opacity:1; transform:none; transition-delay:.15s, .15s, 0s; }
.mic-citations__pied{ display:flex; align-items:center; gap:14px; margin-top:8px; }
.mic-citations__pied[hidden]{ display:none; }
.mic-citations__compte{ font-size:12px; font-weight:600; min-width:4.5em; }
.mic-citations__piste{ flex:1; height:3px; background:rgba(0,0,0,.28); overflow:hidden; }
.mic-citations__ligne{ display:block; height:100%; background:#fff; transform:scaleX(0); transform-origin:left; transition:background-color .3s; }
.mic-citations.is-pause .mic-citations__ligne{ background:rgba(255,255,255,.45); }
.mic-fleche--blanc{ width:40px; height:40px; border-color:rgba(255,255,255,.7); }
.mic-fleche--blanc svg{ width:18px; height:18px; }
.mic-fleche--blanc:hover:not(:disabled){ background:#fff; color:var(--mic-rouge); }
.mic-lecture--rouge{ border-color:rgba(255,255,255,.6); }
.mic-lecture--rouge:hover{ background:#fff; color:var(--mic-rouge); }
@media (max-width:560px){
  .mic-citations__pied{ flex-wrap:wrap; }
  .mic-citations__piste{ order:-1; flex-basis:100%; }
  .mic-citations__compte{ margin-right:auto; }
}

/* =========================================================================
   RELAIS : nous joindre, ou s'inscrire a l'infolettre (avant les meilleurs
   vendeurs). Le formulaire est celui de /new-arrivals (memes nl-*), habille ici :
   contact.css, qui le stylait la-bas, n'est pas chargee par cette page.
   ========================================================================= */
.mic-relais__in{
  padding-block:clamp(56px, 7vw, 96px);
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap:clamp(40px, 5vw, 72px);
}
.mic-relais__parler, .mic-relais__nl{ display:flex; flex-direction:column; gap:20px; min-width:0; }
.mic-relais__nl{ background:var(--mic-papier); padding:clamp(24px, 3vw, 40px); }
.mic-relais__h2{ font-size:clamp(24px, 2.8vw, 38px); line-height:1.02; }
/* La photo sous « parlez a un expert » : elle prend toute la hauteur libre de la
   colonne (la grille etire les deux colonnes a la hauteur de l'infolettre). */
.mic-relais__photo{ position:relative; flex:1 1 auto; min-height:260px; margin:12px 0 0; overflow:hidden; background:var(--mic-noir); }
.mic .mic-relais__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 45%; }
.mic-relais__photo figcaption{
  position:absolute; left:0; bottom:0; padding:10px 14px; z-index:1;
  background:rgba(13,13,13,.78); color:#fff; font-size:10px; font-weight:600;
}
@media (max-width:900px){ .mic-relais__photo{ flex:none; aspect-ratio:4 / 3; min-height:0; } }
.mic-relais__texte{ font-size:17px; line-height:1.6; color:var(--mic-gris); max-width:34em; }
.mic .mic-relais__tel{ display:inline-flex; align-items:baseline; gap:12px; flex-wrap:wrap; color:var(--mic-encre); text-decoration:none; }
.mic-relais__tel .mic-mono{ font-size:11px; font-weight:600; color:var(--mic-gris-2); }
.mic-relais__tel .mic-disp{ font-size:22px; }
.mic .mic-relais__tel:hover .mic-disp{ color:var(--mic-rouge); }

.mic-nl__form{ display:flex; flex-direction:column; gap:14px; }
.mic-nl__form[hidden]{ display:none; }
.mic-nl__ligne{ display:flex; gap:0; }
.mic-nl__input{
  flex:1; min-width:0; font-family:var(--font-sans); font-size:16px; padding:12px 14px; min-height:48px;
  border:1.5px solid #CFCBC4; border-right:0; background:#fff; color:var(--mic-encre); border-radius:0;
}
.mic-nl__input:focus{ outline:2px solid var(--mic-rouge); outline-offset:1px; border-color:var(--mic-rouge); }
.mic-nl__case{ display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.5; color:var(--mic-gris-3); }
.mic-nl__case input{ margin-top:3px; width:16px; height:16px; accent-color:var(--mic-rouge); flex:none; }
.mic-nl__expediteur{ font-size:11px; line-height:1.5; color:var(--mic-gris-2); }
.mic-nl__erreur{ font-size:14px; color:var(--mic-rouge); }
.mic-nl__erreur[hidden], .mic-nl__ok[hidden]{ display:none; }
.mic-nl__ok{ font-size:16px; line-height:1.5; padding:14px 16px; background:#fff; border-left:3px solid var(--mic-rouge); }
@media (max-width:420px){
  .mic-nl__ligne{ flex-direction:column; gap:10px; }
  .mic-nl__input{ border-right:1.5px solid #CFCBC4; }
}

/* =========================================================================
   LE SCEAU, a cheval entre la section blanche (02) et la noire (03)
   ========================================================================= */
.mic-sceau{
  position:absolute; left:50%; top:0; z-index:3;
  width:clamp(120px, 12.5vw, 176px); aspect-ratio:1 / 1;
  transform:translate(-50%, -50%);
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.35));
}
.mic-sceau svg{ display:block; width:100%; height:100%; overflow:visible; }
.mic-sceau__disque{ fill:#fff; stroke:var(--mic-rouge); stroke-width:3; }
.mic-sceau__texte{
  font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.08em; fill:var(--mic-encre);
}
.mic-sceau__couronne{ transform-origin:80px 80px; }
html.motion .mic-sceau__couronne{ animation:mic-sceau-tour 40s linear infinite; }
@keyframes mic-sceau-tour{ to{ transform:rotate(360deg); } }
/* Sur telephone, le haut de la section (64 px) ne laisse pas la place a la moitie
   basse du sceau : un peu d'air pour qu'il ne touche pas le surtitre. */
.mic-s:has(> .mic-sceau) > .mic-s__in{ padding-top:max(var(--mic-pad), 112px); }
@media (prefers-reduced-motion: reduce){ .mic-sceau__couronne{ animation:none !important; } }

/* =========================================================================
   04 · BEST SELLERS
   ========================================================================= */
.mic-piste--produits{ gap:20px; }
.mic-produit{ flex:0 0 min(84%, 400px); scroll-snap-align:start; background:#fff; display:flex; flex-direction:column; min-width:0; }
/* La case de la machine : le rendu 3D detoure, POSE AU SOL avec son ombre (calculee
   par tools/ombres-machines.py : une ombre de contact sous chaque pied et une ombre
   douce sur l'emprise au sol, dans l'axe de la machine), sur un fond clair en
   degrade (le numero du modele en filigrane derriere est retire depuis le
   2026-10-16). Les machines sont
   noires : sur le noir de la maquette, elles disparaissaient. L'ombre etant dans
   l'image, la machine ne decolle pas au survol : elle grandit un peu depuis le sol. */
.mic .mic-produit__media{
  position:relative; display:block; aspect-ratio:1 / 1; overflow:hidden; isolation:isolate; container-type:inline-size;
  background:radial-gradient(120% 90% at 50% 38%, #FFFFFF 0%, #F3F2EF 55%, #E4E1DB 100%);
}
/* PLUS DE FILIGRANE (2026-10-16, Clement Lefebvre : « enlever le [numero]
   derriere la machine, plus besoin ») : le numero du modele en grand, gris
   sur le fond, est retire de la page ; il reste ecrit sous la photo. */
.mic-produit__scene{ position:absolute; inset:11% 6% 7%; z-index:1; }
/* « .mic » devant : sinon « .mic img{ height:auto } » gagne, et la machine reste
   collee en haut de sa scene au lieu de poser ses pieds sur la ligne de sol. */
.mic .mic-produit__machine{
  position:absolute; inset:0; display:block; width:100%; height:100%;
  object-fit:contain; object-position:50% 100%;
  transform-origin:50% 100%; transition:transform .5s cubic-bezier(.2, .7, .2, 1);
}
.mic .mic-produit__media:hover .mic-produit__machine, .mic-produit:hover .mic-produit__machine{ transform:scale(1.04); }
.mic-produit__rang{ position:absolute; z-index:2; top:18px; left:18px; font-size:11px; font-weight:600; color:#fff; background:var(--mic-rouge); padding:6px 10px; }
.mic-produit__corps{ padding:26px 24px 28px; display:flex; flex-direction:column; gap:14px; flex:1; }
.mic-produit__meta{ font-size:11px; color:var(--mic-gris-2); }
.mic .mic-produit__nom a{ color:inherit; text-decoration:none; }
.mic .mic-produit__nom a:hover{ text-decoration:underline; text-decoration-color:var(--mic-rouge); text-underline-offset:4px; }
.mic-produit__pourquoi{ font-size:11px; font-weight:600; color:var(--mic-rouge); }
.mic-produit ul{ padding-left:18px; display:flex; flex-direction:column; gap:8px; font-size:15px; line-height:1.5; color:var(--mic-gris-3); }
.mic-produit__charge{ margin-top:auto !important; padding-top:14px; border-top:1px solid var(--mic-filet-2); font-size:13px; color:var(--mic-gris); }
.mic-piste__pied{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 32px; }
.mic-progres{ flex:1 1 240px; max-width:520px; height:3px; background:var(--mic-filet); position:relative; }
.mic-progres span{ position:absolute; left:0; top:0; bottom:0; width:55%; background:var(--mic-rouge); transition:width .2s; }

/* =========================================================================
   05 · OUR STORY + FIC
   ========================================================================= */
.mic-histoire__in{ padding-block:var(--mic-pad); display:flex; flex-direction:column; gap:clamp(48px, 6vw, 80px); }
.mic-histoire__photo{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.mic-histoire__photo img{ display:block; width:100%; aspect-ratio:4 / 3; object-fit:cover; }
.mic-histoire__photo figcaption{ font-size:11px; color:#A9A9A9; }
.mic-histoire__copy{ display:flex; flex-direction:column; gap:24px; min-width:0; }
.mic-histoire__copy > p:not([class]){ font-size:18px; line-height:1.65; color:#CFCFCF; }
.mic-histoire__citation{ display:flex; flex-direction:column; gap:10px; padding-top:24px; border-top:1px solid var(--mic-gris-3); }
.mic-histoire__citation blockquote{ font-size:20px; line-height:1.5; font-weight:500; }
.mic-histoire__citation figcaption{ font-size:12px; color:#A9A9A9; }
.mic-frise{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap:0 24px; position:relative;
}
.mic-frise::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--mic-gris-3); transform-origin:left; }
/* La frise (reprise le 2026-10-15) : chaque annee en grand chiffre DETOURE, la
   derniere (aujourd'hui) pleine en rouge ; au survol, l'annee se remplit et son
   point grossit. La periode des annees 80 et 90 s'ecrit « ’80 → ’90 » (avant :
   « 80s–90s », que les capitales rendaient en « 80S–90S »). */
.mic-frise li{ position:relative; padding:30px 0 8px; display:flex; flex-direction:column; gap:12px; }
.mic-frise li::before{
  content:""; position:absolute; top:-6px; left:0; width:11px; height:11px; background:var(--mic-rouge); border-radius:50%;
  box-shadow:0 0 0 4px var(--mic-noir); transition:scale .3s cubic-bezier(.3, 1.4, .5, 1);
}
.mic-frise__an{
  font-size:clamp(34px, 3.4vw, 48px); line-height:1; letter-spacing:-.01em; white-space:nowrap;
  color:#fff; transition:color .3s ease;
}
@supports (-webkit-text-stroke:1px #fff){
  .mic-frise__an{ color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.8); }
  .mic-frise li:hover .mic-frise__an{ color:var(--mic-rouge); -webkit-text-stroke-color:var(--mic-rouge); }
  .mic-frise__maintenant .mic-frise__an{ color:var(--mic-rouge); -webkit-text-stroke-color:var(--mic-rouge); }
}
.mic-frise li:hover::before{ scale:1.5; }   /* « scale » et non transform : l'animation d'apparition tient deja transform */
.mic-frise__an--plage{
  display:flex; align-items:flex-end; gap:.18em; font-size:clamp(28px, 2.6vw, 38px);
  height:clamp(34px, 3.4vw, 48px);   /* la hauteur des autres annees : les descriptions restent alignees */
}
.mic-frise__fleche{ font-family:var(--font-sans); font-weight:700; font-size:.7em; color:var(--mic-rouge); -webkit-text-stroke:0; }
.mic-frise li > span:last-child{ font-size:15px; line-height:1.55; color:#BDBDBD; }

.mic-fic__in{ padding-block:var(--mic-pad); }
/* L'affiche Commanditaire Or, refaite en HTML. Chaque cote est celui du visuel
   officiel de 1080 px, converti en cqw (1080 px = 100cqw) : x / 10,8. */
.mic-fic-affiche{
  position:relative; width:100%; max-width:560px; aspect-ratio:1 / 1; overflow:hidden;
  container-type:inline-size; background:#FCFCFC;
  --fic-rouge:#C32033;
}
.mic-fic-affiche p{ margin:0; position:absolute; }
.mic-fic-affiche__noir{ position:absolute; left:0; right:0; top:0; height:78.7cqw; background:#000; overflow:hidden; }
.mic-fic-affiche__erable{ position:absolute; left:5.56cqw; top:6.11cqw; width:8.98cqw; height:9.63cqw; fill:var(--fic-rouge); }
.mic-fic-affiche__statut{
  left:18.8cqw; top:10.46cqw; white-space:nowrap;
  font-family:var(--font-sans); font-weight:700; text-transform:uppercase; font-size:2.18cqw; line-height:1;
  letter-spacing:.024em; color:#fff;
}
.mic-fic-affiche__statut span{ color:var(--fic-rouge); margin:0 .5em; }
/* Le visuel est compose en Oswald, que le site ne sert pas (polices hebergees ici,
   voir tokens.css) : l'Antonio du site, plus etroit et aux capitales plus hautes,
   prend la hauteur de capitale du visuel (64 px sur 1080) et sa largeur (700 px)
   par un leger etirement horizontal et un peu d'interlettrage. */
.mic-fic-affiche__titre{
  left:5.49cqw; top:21.6cqw; white-space:nowrap; transform:scaleX(1.12); transform-origin:0 0;
  font-family:'Antonio', 'Oswald', var(--font-sans); font-weight:700; text-transform:uppercase;
  font-size:6.88cqw; line-height:1.21; letter-spacing:.046em; color:#fff;
}
.mic-fic-affiche__titre span{ color:#B72331; }
/* Meme chose pour le texte : Work Sans dans le visuel, Archivo ici, meme hauteur de
   capitale (19 px) ; l'interlettrage rend la largeur des lignes du visuel. */
.mic-fic-affiche__fr, .mic-fic-affiche__en{
  left:5.37cqw; white-space:nowrap; font-family:var(--font-sans); font-weight:400; font-size:2.75cqw; line-height:1.178; letter-spacing:.06em;
}
.mic-fic-affiche__fr{ top:47.58cqw; color:#fff; }
.mic-fic-affiche__en{ top:60.57cqw; color:#C8C8C8; }
.mic-fic-affiche__a{
  position:absolute; left:59.08cqw; top:24.36cqw; width:71.65cqw; height:63.12cqw;
  background:var(--fic-rouge);
  -webkit-mask:url('/assets/img/logo-mark-white.png') center / 100% 100% no-repeat;
          mask:url('/assets/img/logo-mark-white.png') center / 100% 100% no-repeat;
}
.mic-fic-affiche__bas{ position:absolute; left:0; right:0; top:78.7cqw; bottom:0; background:#FCFCFC; }
.mic .mic-fic-affiche__bas img{ position:absolute; left:4.63cqw; top:6.02cqw; width:87.04cqw; height:auto; }
.mic-fic__copy{ display:flex; flex-direction:column; gap:24px; min-width:0; }
.mic-fic__citation{ padding:28px; background:var(--mic-papier); display:flex; flex-direction:column; gap:14px; }
.mic-fic__citation blockquote{ font-size:19px; line-height:1.55; color:var(--mic-encre); font-weight:500; }
.mic-fic__citation figcaption{ font-size:12px; color:var(--mic-gris-2); }
/* La signature FIC : le logo du Conseil, un trait, puis le statut et le lien. */
.mic-fic__signature{ display:flex; align-items:center; gap:clamp(20px, 2.4vw, 32px); padding-top:24px; border-top:1px solid var(--mic-filet-2); }
.mic .mic-fic__logo{ flex:none; width:clamp(72px, 7vw, 96px); height:auto; }
.mic-fic__signature-texte{ display:flex; flex-direction:column; gap:8px; padding-left:clamp(20px, 2.4vw, 32px); border-left:1px solid var(--mic-filet-2); }
.mic-fic__signature-texte p:not(.mic-fic__statut){ font-size:15px; line-height:1.55; color:var(--mic-gris); }
.mic-fic__statut{ font-size:11px; font-weight:600; color:var(--mic-rouge); }

/* =========================================================================
   06 · CANADIAN STRENGTH STORIES
   ========================================================================= */
.mic-videos{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap:20px; }
/* Les videos : la miniature officielle servie d'ici, un bouton de lecture, la duree ;
   le nom et le lieu en dessous (les miniatures Strength Stories portent leur propre
   titre en bas a gauche, on ne le recouvre pas). Au clic, canada-v5.js remplace
   l'image par le lecteur youtube-nocookie, dans le meme cadre 16:9. */
.mic-video{ margin:0; display:flex; flex-direction:column; gap:16px; min-width:0; }
.mic-video__ecran{ position:relative; aspect-ratio:16 / 9; background:var(--mic-noir); overflow:hidden; }
.mic .mic-video__ecran img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2, .7, .2, 1), opacity .3s; }
.mic-video__ecran iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.mic-video__jouer{
  position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
  width:76px; height:76px; border-radius:50%; background:var(--mic-rouge); border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px -8px rgba(0,0,0,.6);
  transition:transform .3s cubic-bezier(.3, 1.4, .5, 1), background .2s;
}
.mic-video__jouer svg{ width:28px; height:28px; margin-left:4px; fill:#fff; }
.mic-video__jouer:hover, .mic-video__jouer:focus-visible{ background:var(--mic-rouge-hover); transform:translate(-50%, -50%) scale(1.1); }
.mic-video__jouer:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
.mic-video__ecran:hover img{ transform:scale(1.04); }
.mic-video__duree{ position:absolute; right:12px; bottom:12px; padding:4px 8px; background:rgba(0,0,0,.75); color:#fff; font-size:11px; font-weight:600; }
.mic-video figcaption{ display:flex; flex-direction:column; gap:6px; }
.mic-video__type{ font-size:11px; font-weight:600; color:var(--mic-rouge); }
.mic-video__lieu{ font-size:11px; color:var(--mic-gris-2); }
.mic-video__cas{ margin-top:6px; }
.mic-temoignages{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap:20px; }
.mic-temoignage{ background:#fff; padding:28px; display:flex; flex-direction:column; gap:18px; }
.mic-temoignage .mic-guillemet{ font-size:56px; line-height:.6; }
.mic-temoignage blockquote{ font-size:17px; line-height:1.6; color:var(--mic-encre); flex:1; }
.mic-temoignage figcaption{ display:flex; align-items:center; gap:14px; padding-top:18px; border-top:1px solid var(--mic-filet-2); }
.mic-initiales{
  width:48px; height:48px; border-radius:50%; background:var(--mic-filet-2); color:var(--mic-encre);
  display:flex; align-items:center; justify-content:center; flex:none; font-size:13px; font-weight:600;
}
.mic-qui{ display:flex; flex-direction:column; gap:3px; }
.mic-qui strong{ font-size:15px; }
.mic-qui__role{ font-size:13px; color:var(--mic-gris-2); }
.mic-qui__lieu{ font-size:10px; font-weight:600; color:var(--mic-rouge); }
.mic-trad{ font-size:10px; color:var(--mic-gris-2); }
.mic-trad:empty{ display:none; }

/* --- Logos des gyms ------------------------------------------------------
   Depuis le 2026-10-16 : le logo (gris, la couleur pleine au survol), le nom
   en petit, la ville. Les deux gyms sans logo gardent leur nom en grand. */
.mic-gyms__in{ padding-block:clamp(64px, 8vw, 112px); gap:clamp(32px, 4vw, 48px); }
.mic-gyms{
  list-style:none; margin:0; padding:0;
  /* Cinq colonnes au plus, comme la maquette a 1240 px : 20 cases, 4 rangees
     pleines. En pleine largeur, auto-fit en ouvrait six et laissait un trou.
     Deux au moins sur telephone, au lieu d'une pile de vingt cases. */
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, max(150px, calc((100% - 4px) / 5))), 1fr));
  gap:1px; background:var(--mic-filet-2); border:1px solid var(--mic-filet-2);
}
.mic-gyms > li{ background:#fff; min-height:150px; display:flex; }
.mic .mic-gym{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:20px 14px 16px; text-align:center; color:var(--mic-gris-3); text-decoration:none;
}
/* La case du logo a une hauteur fixe : les noms et les villes s'alignent d'une
   case a l'autre, quel que soit le format du logo (large ou carre). */
.mic-gym__logo{ display:flex; align-items:center; justify-content:center; width:100%; height:58px; margin-bottom:6px; }
.mic .mic-gym__logo img{
  display:block; width:auto; height:auto; max-width:80%; max-height:100%;
  opacity:.58; transition:opacity .25s ease;
}
.mic a.mic-gym:hover .mic-gym__logo img, .mic a.mic-gym:focus-visible .mic-gym__logo img{ opacity:1; }
.mic-gym__nom{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:11px; line-height:1.15; letter-spacing:.02em; color:var(--mic-gris-3);
}
.mic-gym__nom--seul{ font-size:15px; display:flex; align-items:center; min-height:58px; margin-bottom:6px; }
.mic-gym__lieu{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--mic-gris-2); }
.mic a.mic-gym:hover .mic-gym__nom{ color:var(--mic-rouge); }
.mic-gyms > li.mic-gyms__toi{ background:var(--mic-rouge); }
.mic .mic-gyms__toi a{
  flex:1; display:flex; align-items:center; justify-content:center; padding:16px; text-align:center;
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.12em;
  color:#fff; text-decoration:none; font-size:12px; font-weight:600;
}
.mic .mic-gyms__toi a:hover{ background:var(--mic-rouge-hover); color:#fff; }

/* =========================================================================
   07 · HOW TO BUY + DELAI
   ========================================================================= */
.mic-etapes{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap:16px; }
.mic-etape{ background:#fff; padding:28px 24px; display:flex; flex-direction:column; gap:14px; }
.mic-etape__num{ font-size:52px; line-height:.9; color:var(--mic-rouge); }
.mic-etape .mic-h3{ font-size:17px; line-height:1.12; }
.mic-etape p{ font-size:15px; line-height:1.6; color:var(--mic-gris); }

/* LES ETAPES QUI SE PRESENTENT TOUR A TOUR (2026-10-15, demande de Clement Lefebvre).
   Sur ordinateur, la rangee passe en flex : a l'ecran, canada-v5.js met en avant
   l'etape 1 (.is-active : elle s'elargit, son chiffre grossit, les autres
   s'estompent), puis la 2... jusqu'a la 5, revient aux cinq cases egales, et
   recommence. Au survol (ou au focus), c'est la carte visee qui s'agrandit, et le
   cycle attend. EXCEPTION ASSUMEE a la regle « transform et opacity seulement » de
   la passe de mouvement : l'effet EST la largeur des cartes (flex-grow). Cinq
   cartes, et la hauteur de la rangee est figee par le script (la plus haute des
   six dispositions), pour que rien ne saute sous la section. Sur telephone, les
   cartes restent empilees et immobiles. */
@media (min-width:900px){
  .mic-etapes{ display:flex; align-items:stretch; }
  .mic-etape{ flex:1 1 0; min-width:0; }
  .mic-etapes.is-pret .mic-etape{
    transition:flex-grow .8s cubic-bezier(.2, .7, .2, 1), opacity .5s ease, transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease;
  }
  .mic-etapes.is-actif .mic-etape{ opacity:.55; }
  .mic-etapes.is-actif .mic-etape.is-active{
    flex-grow:2.3; opacity:1; transform:translateY(-6px); box-shadow:0 22px 40px -24px rgba(0,0,0,.35);
  }
  .mic-etape__num{ display:inline-block; transform-origin:0 100%; transition:transform .6s cubic-bezier(.3, 1.4, .5, 1); }
  .mic-etape.is-active .mic-etape__num{ transform:scale(1.35); }
  .mic-etape.is-active::after{ transform:scaleX(1); }
}
@media (min-width:900px) and (prefers-reduced-motion: reduce){
  .mic-etapes.is-pret .mic-etape, .mic-etape__num{ transition:none !important; }
}
.mic-appel{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px; }
.mic-appel p{ font-size:15px; color:var(--mic-gris); }
.mic .mic-appel p a{ color:var(--mic-encre); font-weight:600; }

.mic-delai__in{ padding-block:var(--mic-pad); align-items:start; }
.mic-delai__copy{ display:flex; flex-direction:column; gap:24px; min-width:0; }
.mic-delai__grand{ font-size:clamp(64px, 8vw, 108px); line-height:.85; color:var(--mic-rouge); }
.mic-delai__unite{ font-size:.3em; color:#fff; margin-left:.15em; }
.mic-delai__h2{ font-size:clamp(26px, 3.2vw, 42px); }
.mic-delai__copy > p:not([class]){ font-size:18px; line-height:1.65; color:#CFCFCF; }
.mic-delai__copy img{ display:block; width:100%; aspect-ratio:16 / 10; object-fit:cover; margin-top:8px; }

.mic-planif{ background:#fff; color:var(--mic-encre); padding:clamp(24px, 3vw, 40px); display:flex; flex-direction:column; gap:22px; min-width:0; }
.mic-planif__tete{ display:flex; flex-direction:column; gap:10px; }
.mic-planif__h3{ font-size:clamp(22px, 2.2vw, 28px); line-height:1.02; }
.mic-champ{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.mic-champ label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--mic-gris); font-weight:600; }
.mic-champ input{
  font-family:var(--font-sans); font-size:16px; padding:12px 14px; min-height:48px;
  border:1.5px solid #CFCBC4; background:#fff; color:var(--mic-encre); border-radius:0; width:100%;
}
.mic-champ input:focus{ outline:2px solid var(--mic-rouge); outline-offset:1px; border-color:var(--mic-rouge); }
.mic-puces{ display:flex; flex-wrap:wrap; gap:8px; }
.mic-puce{
  min-height:44px; padding:0 14px; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.12em;
  font-size:12px; font-weight:600; cursor:pointer; border:1.5px solid #CFCBC4; background:#fff; color:var(--mic-encre);
}
.mic-puce[aria-pressed="true"]{ background:var(--mic-rouge); color:#fff; border-color:var(--mic-rouge); }
.mic-resultat{ background:var(--mic-papier); padding:24px; display:flex; flex-direction:column; gap:10px; }
.mic-resultat__label{ font-size:11px; font-weight:600; color:var(--mic-gris); }
.mic-resultat__date{ font-size:clamp(20px, 2.2vw, 28px); line-height:1; color:var(--mic-rouge); margin:6px 0 10px !important; }
.mic-resultat p:not([class]){ font-size:15px; line-height:1.55; color:var(--mic-gris-3); }
.mic .mic-resultat a{ color:var(--mic-encre); font-weight:600; }
.mic-echeancier{ display:flex; flex-direction:column; gap:12px; }
.mic-echeancier__barre{ display:flex; height:12px; gap:3px; }
.mic-echeancier__barre span:first-child{ flex:20; background:var(--mic-rouge); }   /* le delai : 20 semaines */
.mic-echeancier__barre span:last-child{ flex:2; background:var(--mic-encre); }    /* l'installation : 2 semaines */
.mic-echeancier__dates{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:14px; line-height:1.4; }
.mic-echeancier__dates > div{ display:flex; flex-direction:column; gap:4px; }
.mic-echeancier__dates > div:last-child{ text-align:right; }
.mic-echeancier__dates .mic-mono{ font-size:10px; font-weight:600; color:var(--mic-gris-2); }
.mic-planif__note{ font-size:13px; line-height:1.55; color:var(--mic-gris-2); }
[data-mic-si][hidden]{ display:none !important; }

/* =========================================================================
   08 · BUY LOCAL
   ========================================================================= */
.mic-distribs{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap:20px; }
.mic-distrib{ border:1.5px solid var(--mic-encre); padding:32px 28px; display:flex; flex-direction:column; gap:16px; }
.mic-distrib__region{ font-size:11px; font-weight:600; color:var(--mic-rouge); }
.mic-distrib__nom{ font-size:26px; line-height:1; }
/* Le bandeau du logo, en tete de carte : noir, logo en blanc, lien vers le site du
   distributeur. Il deborde du rembourrage de la carte pour en prendre toute la largeur. */
.mic .mic-distrib__logo{
  position:relative; display:flex; align-items:center; justify-content:center;
  margin:-32px -28px 8px; height:clamp(112px, 10vw, 136px); background:var(--mic-noir); overflow:hidden;
}
.mic .mic-distrib__logo::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--mic-rouge);
  transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.2, .7, .2, 1);
}
.mic .mic-distrib__logo img{ display:block; width:auto; height:auto; max-width:68%; max-height:52%; transition:transform .5s cubic-bezier(.2, .7, .2, 1); }
.mic .mic-distrib__logo:hover img, .mic .mic-distrib__logo:focus-visible img{ transform:scale(1.06); }
.mic .mic-distrib__logo:hover::after, .mic .mic-distrib__logo:focus-visible::after{ transform:scaleX(1); }
.mic .mic-distrib__logo:focus-visible{ outline:2px solid var(--mic-rouge); outline-offset:2px; }
.mic-distrib p:not(.mic-distrib__region){ font-size:15px; line-height:1.6; color:var(--mic-gris); }
.mic-distrib .mic-lnk{ margin-top:auto; }
.mic-ailleurs{ font-size:16px; line-height:1.6; color:var(--mic-gris-3); }
.mic-ailleurs a{ font-weight:600; }
.mic-detaillants{
  background:var(--mic-rouge); color:#fff; padding:clamp(28px, 4vw, 56px);
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap:24px 56px; align-items:center;
}
.mic-detaillants > div{ display:flex; flex-direction:column; gap:14px; }
.mic-detaillants > div:last-child{ gap:20px; align-items:flex-start; }
.mic-detaillants__h3{ font-size:clamp(22px, 2.8vw, 36px); line-height:1.02; }
.mic-detaillants p{ font-size:17px; line-height:1.6; }
.mic-detaillants .mic-mono{ font-size:12px; font-weight:600; }

/* =========================================================================
   SOUMISSION (le vrai formulaire du site, celui de /get-a-quote)
   ========================================================================= */
.mic-soum{ overflow:hidden; }
.mic-soum__erable{ position:absolute; right:-140px; top:-80px; width:560px; height:606px; opacity:.08; fill:var(--mic-rouge); pointer-events:none; }
.mic-soum__in{ position:relative; padding-block:var(--mic-pad); align-items:start; }
.mic-soum__copy{ display:flex; flex-direction:column; gap:24px; min-width:0; }
.mic-puces-carrees{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; font-size:16px; line-height:1.5; }
.mic-puces-carrees li{ display:flex; gap:14px; align-items:baseline; }
.mic-puces-carrees li::before{ content:""; width:8px; height:8px; background:var(--mic-rouge); flex:none; transform:translateY(-2px); }
.mic-contact{ display:flex; flex-direction:column; gap:6px; padding-top:24px; border-top:1px solid var(--mic-gris-3); }
.mic-contact .mic-mono{ font-size:11px; font-weight:600; color:#A9A9A9; }
.mic .mic-contact__tel{ font-size:24px; color:#fff; text-decoration:none; }
.mic .mic-contact__courriel{ color:#fff; font-size:16px; }

/* La carte blanche. Les pieces de soumission-envoi.css (case d'accord,
   erreurs, mention) lisent les jetons du theme : ils sont reposes ici en
   clair, sinon le mode Nuit ecrirait blanc sur blanc. */
.mic-form{
  --fg:#1C1C1C; --fg-2:#3A3A3A; --fg-3:#4A4A4A; --fg-4:#5A5A5A;
  --rule:#1C1C1C; --rule-2:#CFCBC4; --rule-3:#E4E1DB;
  --surface:#fff; --surface-2:#F3F2EF; --bg:#fff;
  --accent:#C5202A; --accent-fg:#fff;
  background:#fff; color:var(--mic-encre); padding:clamp(24px, 3vw, 40px); min-width:0;
}
.mic-form__h3{ font-size:clamp(20px, 2vw, 26px); line-height:1.02; margin-bottom:18px !important; }
.mic-form .apply__form{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap:18px; max-width:none; }
.mic-form .apply__field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.mic-form .apply__field--full{ grid-column:1 / -1; }
.mic-form .apply__label{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mic-gris); font-weight:600;
}
.mic-form .apply__field:focus-within .apply__label{ color:var(--mic-rouge); }
.mic-form .apply__input{
  font-family:var(--font-sans); font-size:16px; padding:12px 14px; min-height:48px;
  border:1.5px solid #CFCBC4; background:#fff; color:var(--mic-encre); border-radius:0; width:100%;
}
.mic-form .apply__input:focus{ outline:2px solid var(--mic-rouge); outline-offset:1px; border-color:var(--mic-rouge); }
.mic-form .scase, .mic-form .serreur, .mic-form .sjoint, .mic-form .senvoi{ grid-column:1 / -1; }
.mic-form .serreur{ color:var(--mic-rouge); }
.mic-form .senvoi .mic-btn{ width:100%; }
.mic-form .smention{ color:var(--mic-gris-2); }
.mic .mic-form .smention a{ color:var(--mic-encre); }

/* =========================================================================
   MOUVEMENT (2026-10-15, demande de Clement Lefebvre : « que la page soit
   vivante », apparitions au defilement et chiffres qui comptent).
   ---------------------------------------------------------------------------
   Memes regles que la passe de mouvement du site (MOTION-PASS.md) :
     - transform et opacity seulement, aucune propriete de mise en page ;
     - l'etat « cache avant apparition » n'existe que sous html.motion, que
       main.js pose tot et JAMAIS sous prefers-reduced-motion : sans JavaScript
       ou en mouvement reduit, tout est visible et immobile ;
     - une apparition est une animation unique (pas une transition), pour que
       son delai d'echelonnement ne fuie pas dans les survols.
   canada-v5.js pose .mic-rv (et une variante) sur les blocs, leur delai
   (--mic-delai) et .is-in quand ils entrent a l'ecran. Le hero, lui, s'anime
   au chargement : il est deja a l'ecran.
   ========================================================================= */
.mic{ --mic-ease:cubic-bezier(.2, .7, .2, 1); --mic-ease-pop:cubic-bezier(.3, 1.4, .5, 1); }

@keyframes mic-monte{ from{ opacity:0; transform:translateY(28px); } to{ opacity:1; transform:none; } }
@keyframes mic-ligne{ from{ transform:translateY(105%); } to{ transform:none; } }
@keyframes mic-fondu{ from{ opacity:0; } to{ opacity:1; } }
@keyframes mic-photo{ from{ opacity:0; transform:scale(1.12); } to{ opacity:1; transform:none; } }
@keyframes mic-volet{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes mic-pop{ from{ opacity:0; transform:scale(.3); } to{ opacity:1; transform:none; } }
@keyframes mic-gauche{ from{ opacity:0; transform:translateX(-24px); } to{ opacity:1; transform:none; } }
@keyframes mic-pouls{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(3.2); opacity:0; } }
@keyframes mic-carte-photo{ from{ opacity:0; transform:translateY(24px) scale(.94); } to{ opacity:1; transform:none; } }

/* --- Le hero, au chargement --------------------------------------------- */
html.motion .mic-hero__copy > *{ animation:mic-monte .8s var(--mic-ease) both; }
html.motion .mic-hero__copy > :nth-child(1){ animation-delay:.05s; }
html.motion .mic-hero__copy > :nth-child(2){ animation:none; }
html.motion .mic-hero__copy > :nth-child(3){ animation-delay:.55s; }
html.motion .mic-hero__copy > :nth-child(4){ animation-delay:.7s; }
html.motion .mic-hero__copy > :nth-child(5){ animation-delay:.85s; }
html.motion .mic-ligne > span{ animation:mic-ligne .9s var(--mic-ease) both; }
html.motion .mic-ligne:nth-child(1) > span{ animation-delay:.15s; }
html.motion .mic-ligne:nth-child(2) > span{ animation-delay:.3s; }
html.motion .mic-hero__photo{ overflow:hidden; }
html.motion .mic-hero__photo img{ animation:mic-photo 1.4s var(--mic-ease) .1s both; }
/* Le point rouge du delai bat doucement : la seule boucle de la page, avec le bandeau. */
.mic-point{ position:relative; }
html.motion .mic-point::after{
  content:""; position:absolute; inset:0; border-radius:50%; background:var(--mic-rouge);
  animation:mic-pouls 2s ease-out 1.6s infinite;
}

/* --- Apparition au defilement : la base ------------------------------------ */
html.motion .mic-rv{ opacity:0; }
html.motion .mic-rv.is-in{ opacity:1; animation:mic-monte .75s var(--mic-ease) var(--mic-delai, 0ms) both; }
/* Les photos : fondu et recul lent, dans leur cadre. */
html.motion .mic-rv--photo{ opacity:1; overflow:hidden; }
html.motion .mic-rv--photo img{ opacity:0; }
html.motion .mic-rv--photo.is-in{ animation:none; }
html.motion .mic-rv--photo.is-in img{ animation:mic-photo 1.3s var(--mic-ease) var(--mic-delai, 0ms) both; }
/* Les aplats rouges (grande citation, bande detaillants) : un volet qui s'ouvre
   de gauche a droite, puis leur contenu qui monte. */
html.motion .mic-rv--volet{ opacity:1; position:relative; isolation:isolate; background:transparent; }
html.motion .mic-rv--volet::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--mic-rouge);
  transform:scaleX(0); transform-origin:left;
}
html.motion .mic-rv--volet > *{ opacity:0; }
html.motion .mic-rv--volet.is-in{ animation:none; }
html.motion .mic-rv--volet.is-in::before{ animation:mic-volet .8s var(--mic-ease) both; transform:none; }
html.motion .mic-rv--volet.is-in > *{ animation:mic-monte .7s var(--mic-ease) both; }
html.motion .mic-rv--volet.is-in > :nth-child(1){ animation-delay:.35s; }
html.motion .mic-rv--volet.is-in > :nth-child(2){ animation-delay:.5s; }
/* Les carrousels : la piste entiere entre, ses cases en cascade (une case hors
   ecran a l'horizontale ne serait jamais « vue » par l'observateur). */
html.motion .mic-rv--piste{ opacity:1; }
html.motion .mic-rv--piste > li{ opacity:0; }
html.motion .mic-rv--piste.is-in{ animation:none; }
html.motion .mic-rv--piste.is-in > li{ animation:mic-carte-photo .8s var(--mic-ease) both; }
html.motion .mic-rv--piste.is-in > li:nth-child(2){ animation-delay:.08s; }
html.motion .mic-rv--piste.is-in > li:nth-child(3){ animation-delay:.16s; }
html.motion .mic-rv--piste.is-in > li:nth-child(4){ animation-delay:.24s; }
html.motion .mic-rv--piste.is-in > li:nth-child(5){ animation-delay:.32s; }
html.motion .mic-rv--piste.is-in > li:nth-child(n+6){ animation-delay:.4s; }
/* La frise : le filet se trace, puis chaque annee arrive avec son point. */
html.motion .mic-rv--frise{ opacity:1; }
html.motion .mic-rv--frise::before{ transform:scaleX(0); }
html.motion .mic-rv--frise > li{ opacity:0; }
html.motion .mic-rv--frise > li::before{ transform:scale(0); }
html.motion .mic-rv--frise.is-in{ animation:none; }
html.motion .mic-rv--frise.is-in::before{ animation:mic-volet 1.4s var(--mic-ease) both; transform:none; }
html.motion .mic-rv--frise.is-in > li{ animation:mic-gauche .7s var(--mic-ease) calc(var(--i, 0) * 180ms + 150ms) both; }
html.motion .mic-rv--frise.is-in > li::before{ animation:mic-pop .5s var(--mic-ease-pop) calc(var(--i, 0) * 180ms + 150ms) both; transform:none; }
/* Les sourcils rouges : un trait qui se dessine devant, une fois le bloc entre. */
html.motion .mic-rv--sourcil{ position:relative; padding-left:34px; }
html.motion .mic-rv--sourcil::before{
  content:""; position:absolute; left:0; top:50%; width:22px; height:2px; margin-top:-1px;
  background:var(--mic-rouge); transform:scaleX(0); transform-origin:left;
}
html.motion .mic-rv--sourcil.is-in::before{ animation:mic-volet .5s var(--mic-ease) calc(var(--mic-delai, 0ms) + .35s) both; transform:none; }
/* La barre de l'echeancier se remplit a chaque nouvelle date. */
html.motion .mic-echeancier__barre span{ transform-origin:left; }
html.motion .mic-echeancier__barre.is-anim span:first-child{ animation:mic-volet .9s var(--mic-ease) both; }
html.motion .mic-echeancier__barre.is-anim span:last-child{ animation:mic-volet .4s var(--mic-ease) .8s both; }
/* Les chiffres qui comptent ne doivent pas faire danser la ligne. */
[data-mic-compte]{ font-variant-numeric:tabular-nums; }

/* --- Gyms en vedette : le changement de gym -------------------------------- */
@keyframes mic-sortie{ to{ opacity:0; transform:translateY(-12px); } }
html.motion .mic-vedette.is-sortie{ animation:mic-sortie .35s ease-in both; }
html.motion .mic-vedette.is-entree .mic-guillemet,
html.motion .mic-vedette.is-entree .mic-vedette__texte > *,
html.motion .mic-vedette.is-entree .mic-f365__barre{ animation:mic-monte .6s var(--mic-ease) both; }
html.motion .mic-vedette.is-entree .mic-vedette__texte > :nth-child(2){ animation-delay:.08s; }
html.motion .mic-vedette.is-entree .mic-vedette__texte > :nth-child(3){ animation-delay:.16s; }
html.motion .mic-vedette.is-entree .mic-f365__barre{ animation-delay:.2s; }
html.motion .mic-vedette.is-entree .mic-piste > li{ animation:mic-carte-photo .7s var(--mic-ease) both; }
html.motion .mic-vedette.is-entree .mic-piste > li:nth-child(2){ animation-delay:.06s; }
html.motion .mic-vedette.is-entree .mic-piste > li:nth-child(3){ animation-delay:.12s; }
html.motion .mic-vedette.is-entree .mic-piste > li:nth-child(4){ animation-delay:.18s; }
html.motion .mic-vedette.is-entree .mic-piste > li:nth-child(n+5){ animation-delay:.24s; }

/* --- Survols : les cartes se soulevent, un filet rouge les souligne ------ */
.mic-carte, .mic-temoignage, .mic-etape, .mic-distrib, .mic-produit{ position:relative; transition:transform .35s var(--mic-ease), box-shadow .35s var(--mic-ease); }
.mic-carte::after, .mic-temoignage::after, .mic-etape::after, .mic-produit::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--mic-rouge);
  transform:scaleX(0); transform-origin:left; transition:transform .45s var(--mic-ease);
}
@media (hover:hover){
  .mic-carte:hover, .mic-temoignage:hover, .mic-etape:hover, .mic-distrib:hover, .mic-produit:hover{
    transform:translateY(-6px); box-shadow:0 22px 40px -24px rgba(0,0,0,.35); z-index:1;
  }
  .mic-carte:hover::after, .mic-temoignage:hover::after, .mic-etape:hover::after, .mic-produit:hover::after{ transform:scaleX(1); }
  .mic-gym{ transition:color .2s, transform .3s var(--mic-ease); }
  .mic a.mic-gym:hover{ transform:scale(1.06); }
  .mic-piste--photos img{ transition:transform .6s var(--mic-ease); }
  .mic-piste--photos li{ overflow:hidden; }
  .mic-piste--photos li:hover img{ transform:scale(1.07); }
  .mic .mic-btn:hover{ transform:translateY(-2px); }
}

/* =========================================================================
   Mouvement reduit
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  .mic-citations.is-js .mic-citation{ transition:none !important; transform:none !important; }
  .mic-bandeau__piste{ animation:none; }
  .mic-piste{ scroll-behavior:auto; }
  .mic-produit__machine{ transition:none; }
  .mic .mic-produit__media:hover .mic-produit__machine, .mic-produit:hover .mic-produit__machine{ transform:none; }
  .mic-carte, .mic-temoignage, .mic-etape, .mic-distrib, .mic-produit,
  .mic-carte::after, .mic-temoignage::after, .mic-etape::after, .mic-produit::after,
  .mic-gym, .mic-video__jouer, .mic .mic-video__ecran img, .mic .mic-distrib__logo img, .mic .mic-distrib__logo::after, .mic-piste--photos img, .mic-btn{ transition:none !important; }
  .mic-video__ecran:hover img{ transform:none; }
  .mic-carte:hover, .mic-temoignage:hover, .mic-etape:hover, .mic-distrib:hover, .mic-produit:hover,
  .mic a.mic-gym:hover, .mic-piste--photos li:hover img, .mic .mic-btn:hover{ transform:none !important; }
}

/* ========================================================================== *
 * LUMIERES (2026-10-15) : les quatre scenes WebGL de canada-lumieres.js, mises *
 * au point dans le labo /proto/made-in-canada-hero-3d-111416-ec20. Partout, la  *
 * photo HTML garde sa place et ne se cache (visibility, pas opacity : les       *
 * animations d'entree la tiennent) qu'une fois le WebGL pret ; sans WebGL, elle *
 * reste.                                                                        *
 * ========================================================================== */
/* Le hero : un canevas plein cadre sous le texte, et celui des etincelles. */
.mic-fx-hero{ overflow:hidden; isolation:isolate; }
.mic-fx-gl{ position:absolute; inset:0; width:100%; height:100%; z-index:0; display:block; }
.mic-fx-hero .mic-hero__in{ position:relative; z-index:1; }
.mic-fx-hero.is-gl .mic-hero__photo img{ visibility:hidden; }
.mic-fx-etincelles{ position:absolute; inset:0; width:100%; height:100%; z-index:0; display:block; pointer-events:none; }
.mic-fx-hero.is-sans-gl .mic-fx-gl,
.mic-fx-hero.is-sans-gl .mic-fx-etincelles{ display:none; }
/* L'atelier et l'acier : le WebGL se pose sur la photo. */
.mic-fx-atelier, .mic-fx-acier{ position:relative; overflow:hidden; }
.mic-fx-atelier__gl, .mic-fx-acier__gl{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; }
.mic-fx-atelier.is-gl img, .mic-fx-acier.is-gl img{ visibility:hidden; }
.mic-fx-atelier.is-sans-gl .mic-fx-atelier__gl, .mic-fx-acier.is-sans-gl .mic-fx-acier__gl{ display:none; }
/* La photo du « Delai » : sa marge passe a l'enveloppe, pour que le canevas la couvre exactement. */
.mic-fx-atelier--delai{ margin-top:8px; }
.mic-delai__copy .mic-fx-atelier--delai img{ margin-top:0; }
/* Les gyms : un seul canevas, deplace sur la piste du gym affiche ; il laisse passer
   clics et defilement. */
.mic-fx-gyms__galerie{ position:relative; }
.mic-fx-gyms__gl{ position:absolute; left:0; top:0; display:block; pointer-events:none; z-index:1; }
.mic-fx-gyms__galerie.is-gl .mic-piste--photos li.is-gl img{ visibility:hidden; }