/* Styles propres a index.html.
   Sorti du <style> interne pour que la version anglaise partage
   exactement la meme feuille : un correctif ne se fait qu'une fois.
   Charge APRES jade.css, comme l'etait le bloc interne, donc
   l'ordre de cascade est inchange.
   Les url() portent ../ : dans une feuille CSS elles sont
   resolues depuis ce fichier, pas depuis la page. */
:root{--navy:#112E40; --teal:#2BBBAD; --magenta:#D9127A; --gold:#F1B71C; --lemon:#FFE11B; --mauve:#B43694;
  --off:#F7F8F9; --text:#565657; --line:#E3E8E8; --white:#FFFFFF;
  
  --teal-f:#1B8278; --gold-f:#916B05; --lemon-f:#7A6A00;
  --radius:30px;
  /* Plancher a 36 et non 40 : au telephone, « clairement » — le plus long des
     quatre mots qui tournent — venait toucher la personne du hero. */
  --t1:clamp(36px,5.4vw,78px); --t2:clamp(34px,4.6vw,68px); --t3:clamp(32px,4.2vw,56px);
  --t4:clamp(26px,3vw,44px); --t5:clamp(20px,2vw,24px);
  --r-s:8px; --r-m:20px; --r-pill:999px; --wrap:1200px; --wrap-large:1360px;
  --display:"Big Shoulders Display","Norline rounded","Arial Narrow",sans-serif;
  --body:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --c:var(--gold); --b:var(--magenta); --ink:var(--navy); --hl:var(--magenta);}
.btn-blanc{background:#fff;color:var(--navy);box-shadow:0 8px 20px rgba(17,46,64,.14);padding:16px 28px}
@media (hover:hover){.btn-blanc:hover{background:#fff;box-shadow:0 12px 26px rgba(17,46,64,.2)}}
.btn-fantome{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.55);color:var(--ink,var(--navy));padding:16px 28px;box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
@media (hover:hover){.btn-fantome:hover{background:rgba(255,255,255,.38);border-color:rgba(255,255,255,.8)}}
.btn .fleche{width:18px;height:18px;flex:none;transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.btn-blanc:hover .fleche,.btn-navy:hover .fleche,.btn-teal:hover .fleche{transform:translateX(4px)}
.btn-fantome:hover .fleche{transform:translate(3px,-3px)}
.hero{position:relative;padding-block:0;
  --plateau:#F7B633; --plateau-img:url("../images/hero-01-vetements.webp");
  /* valeur de depart, comme pour la plaque : sans elle le premier rendu
     attendrait le script et le hero s'afficherait sans personne. */
  --plateau-figure:url("../images/figures/fig-01.webp");
  background:var(--plateau);color:var(--ink,var(--navy));
  background-image:var(--plateau-img);background-repeat:no-repeat;background-position:right center;background-size:cover;
  transition:background-color .45s cubic-bezier(.2,.7,.3,1),color .45s cubic-bezier(.2,.7,.3,1)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr);min-height:clamp(500px,48vw,700px);align-content:center;
  padding-block:clamp(48px,5vw,72px)}
.hero-txt{max-width:min(56%,680px)}
.hero .eyebrow{color:currentColor;opacity:.72}
.hero h1{font-size:var(--t1);font-weight:900;margin-top:14px}
.hero h1 .hl{display:inline-block;color:var(--navy);--pastille:var(--lemon);
  transition:opacity .25s cubic-bezier(.2,.7,.3,1),transform .25s cubic-bezier(.2,.7,.3,1)}
.hero .lead{margin-top:22px;font-size:17.5px;max-width:46ch;color:currentColor;opacity:.9}
.hero .lead .breve{display:none}
.hero-ctas{display:flex;flex-wrap:wrap;gap:16px;margin-top:28px}
.hero-ctas .court{display:none}
.slider-nav{display:flex;align-items:center;gap:16px;margin-top:34px;flex-wrap:wrap}
.slider-nav button{width:44px;height:44px;border-radius:50%;border:2px solid currentColor;background:transparent;color:inherit;
  font:700 19px/1 var(--body);cursor:pointer;transition:transform .25s cubic-bezier(.2,.7,.3,1)}
/* currentColor se resolvia DESPUES de que la segunda regla cambiara `color`:
   fondo y simbolo acababan del mismo color de placa y el boton desaparecia al
   pasar el raton. Se nombra la tinta en vez de heredarla. */
/* Les deux fleches doivent se lire pareil, toujours en contour. Un survol
   qui remplit le disque en fait deux boutons differents des que la souris
   en touche un, et en tactile l'etat reste colle sur le dernier touche.
   Le survol agrandit donc l'anneau au lieu de le remplir. */
@media (hover:hover){.slider-nav button:hover{transform:scale(1.09)}}
.count{font:900 34px/1 var(--display)}
.slide-label{font-size:12.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;opacity:.8;max-width:16ch}
.dots i{width:22px;height:5px;border-radius:8px;background:currentColor;opacity:.35;transition:opacity .25s cubic-bezier(.2,.7,.3,1),width .25s cubic-bezier(.2,.7,.3,1)}
.dots i.on{opacity:1;width:40px}
@media (max-width:1100px){
  .hero{padding-bottom:0;
    /* Sans voile : la figure est detouree, elle se pose directement sur l'aplat.
       Elle deborde de 90 px a droite pour degager la colonne de gauche au
       texte — le hero large la recadre pareil. */
    background-image:var(--plateau-figure);
    /* La taille suit la HAUTEUR du hero, pas sa largeur. Calee sur la largeur,
       la figure grandissait avec l'ecran : sur un telephone large sa tete
       montait jusqu'au sur-titre et le texte sombre se posait sur ses cheveux
       sombres. Calee sur la hauteur, son sommet reste a la meme place quelle
       que soit la largeur. */
    background-size:auto 80%;
    background-position:right -90px bottom;
    background-repeat:no-repeat}
  .hero-txt{max-width:none}
  .hero .lead{max-width:54%}
  .hero .lead .longue{display:none}
  .hero .lead .breve{display:inline}
  .hero .wrap{min-height:0;padding-top:24px}
  /* Les deux boutons cote a cote, comme sur grand ecran. A pleine largeur ils
     font 370 px pour 343 de disponible : on reprend les 27 px qui manquent sur
     le rembourrage lateral, 28 -> 18. */
  /* Empiles, chacun a sa largeur : ils restent a gauche et mordent a peine sur
     la figure, au lieu de barrer toute la largeur. Le rembourrage reprend sa
     valeur de grand ecran, puisqu'il n'y a plus a economiser. */
  /* nowrap est indispensable : la regle de base porte flex-wrap:wrap, et en
     colonne avec une hauteur contrainte le second bouton partait former une
     deuxieme colonne, hors de l'ecran. */
  .hero-ctas{flex-direction:column;align-items:flex-start;gap:12px;flex-wrap:nowrap}
  .hero .hero-ctas .btn{width:auto;white-space:nowrap}
  .hero-ctas .long{display:none}
  .hero-ctas .court{display:inline}
  .hero-ctas .btn-blanc .fleche{display:none}
  .hero-ctas .btn-blanc{gap:0}
  /* Le bouton secondaire est translucide : pose sur la personne, on voyait
     son corps au travers. On lui donne le fond de la section, il garde son
     contour et reste second sans laisser passer l'image. */
  .hero-ctas .btn-fantome{background:var(--plateau)}
  .slide-label{display:none}
  /* Au telephone on intervertit : les fleches montent, les boutons descendent
     tout en bas. Les boutons tombent alors sur l'aplat plutot que sur le
     torse, et les fleches, petites, tiennent la ou ils etaient. */
  .hero-txt{display:flex;flex-direction:column}
  /* Le compteur monte sur sa propre ligne. A trois de front — fleche,
     compteur, fleche — la seconde fleche finit a 170 px, et la figure
     commence a 131 : son anneau tombait sur la personne et se lisait plein a
     cote de l'autre, posee sur l'aplat. Les deux fleches seules s'arretent a
     114 px, bien avant la figure, sans la recadrer davantage. */
  .hero-txt .slider-nav{order:1;margin-top:24px;gap:5px}
  /* Fleche, compteur, fleche sur une seule ligne, comme sur grand ecran. Pour
     que les trois tiennent avant la figure, qui commence a 131 px (125 a 320),
     l'anneau descend a 32 px et le chiffre a 22. La zone tactile, elle, reste
     a 44 px : un ::after centre l'elargit sans toucher a la mise en page. */
  .hero .slider-nav button{width:32px;height:32px;font-size:15px;line-height:15px;position:relative}
  .hero .slider-nav button::after{content:"";position:absolute;top:50%;left:50%;
    width:44px;height:44px;transform:translate(-50%,-50%)}
  .hero .slider-nav .count{font-size:22px;min-width:28px}
  .hero .slider-nav .dots{display:none}
  .hero-txt .hero-ctas{order:2;margin-top:22px}
}
@media (min-width:641px) and (max-width:1100px){
  /* Passe le telephone, caler sur la largeur donnerait une image plus haute que
     la section : a 1100 px elle depassait de 199 px et la personne se faisait
     decapiter. Au-dela on cale sur la hauteur. */
  .hero{background-size:auto 78%}
}
@keyframes logos{to{transform:translateX(calc(-50% - 28px))}}
.sec-head.solo h2{font-size:var(--t3);max-width:15ch}
.svc h3{font-size:36px;font-weight:800;min-height:0}
.svc{border-top:5px solid var(--c);padding-top:24px}
@media (min-width:901px){
  .services{grid-template-rows:auto auto 1fr auto;column-gap:36px;row-gap:0}
  .svc{grid-template-rows:subgrid;grid-row:span 4;gap:0}
  .svc .frame{margin-bottom:24px}
  .svc h3{margin-bottom:14px}
  .svc p{margin-bottom:22px;align-self:start}
}
.prod .pcat{font:700 12px/1 var(--body);letter-spacing:1.6px;text-transform:uppercase;color:var(--ct,var(--c))}
.sect img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% var(--op,22%)}
.sect::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--c);z-index:2}
.faq-list summary::after{content:"+";font:900 34px/.7 var(--display);color:var(--teal)}
@media (max-width:640px){
  /* Deux boutons empiles de largeurs differentes, ca se voit tout de suite.
     Chaque groupe devient une colonne a la largeur du plus large, et toutes
     les rangees prennent la hauteur de la plus haute : meme reglage que
     l'en-tete de l'accueil, applique partout. */
  .ctas,.hero-ctas,.page-hero.studio .ctas,.service .ctas,.bande-fin .ctas{
    display:grid;grid-template-columns:minmax(0,max-content);grid-auto-rows:1fr;
    gap:12px;justify-content:start}
  .ctas .btn,.hero-ctas .btn,.page-hero.studio .ctas .btn,
  .service .ctas .btn,.bande-fin .ctas .btn{width:100%;justify-content:center}
  /* La fleche est masquee sur le bouton blanc de l'en-tete : sans garde-fou
     il perd les 3 px du chevron et les deux pastilles n'ont plus la meme
     hauteur. */
  .hero-ctas .btn{min-height:54px}

  /* Le sur-titre tenait sur deux lignes avant meme que le titre commence, et
     « Quebec » repetait le « a Ascot Corner » du chapeau deux lignes plus bas.
     Au telephone il garde la categorie et laisse tomber le lieu : une ligne. */
  .hero .eyebrow .lieu{display:none}
  .services{gap:40px;max-width:none}
  .svc{grid-template-columns:124px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:20px;row-gap:8px;padding-top:16px}
  .svc .frame{grid-column:1;grid-row:1/4;aspect-ratio:auto;align-self:stretch}
  .svc .frame.photo img{border-radius:14px}
  .svc h3{font-size:23px;min-height:0;line-height:1.12}
  .svc p{font-size:15px}
  .svc a.more{font-size:15px;align-self:start}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}

/* ------------------------------------------------------------------
   jade.css trae versiones de componentes que esta página no usa: su
   hero es un carrusel, no una placa fija. Estas líneas devuelven a la
   portada lo suyo. Valores leídos del render original, no inventados.
   ------------------------------------------------------------------ */
.hero{overflow:visible}
.hero .wrap{gap:normal;align-items:normal}
.hero h1{white-space:normal}
.hero h1 .hl{will-change:auto}
.hero-ctas .btn{padding:16px 28px;font-size:15px}
.slider-nav{padding-bottom:0}
.slider-nav button{font-size:19px;line-height:19px;display:block;place-items:normal}
/* Le numero suivait le navy en dur alors que les fleches suivent --ink :
   sur les plaques magenta et violette il restait sombre sur sombre,
   contraste 2,62. Il suit maintenant la meme encre que les fleches. */
.count{color:var(--ink,var(--navy));font-family:var(--display);font-weight:900;font-size:34px;
  /* centre, pas start : la regle mobile plus bas redonne une largeur
     minimale de 28 px au compteur, et avec text-align:start le chiffre se
     collait a la fleche de gauche en laissant tout le jeu a droite. */
  line-height:34px;font-variant-numeric:normal;min-width:auto;text-align:center}
.slide-label{color:var(--navy)}
.dots i{position:static;overflow:visible}
.dots i.on{background:var(--navy)}
.dots i.on::after{content:none}
/* las tarjetas de secteurs no reaccionan al ratón: no son clicables */
.sect img{transition:none}
.sect::before{transform:none;transform-origin:50% 50%;transition:none}
.sect:hover img{transform:none}