/* ganolyk.ca : accueil (v3, 14 octobre 2026). Chargé sur l'accueil seulement, après v10.css.
   Héros « Le prochain niveau. » sur l'escalier (image fournie par Michael, sans texte; le slogan et le H1 sont du vrai texte).
   Grand écran (1200 px et plus) : l'image occupe la droite et se fond dans la page (mur ramené au craie, bord gauche en fondu),
   le texte est à gauche, sur le craie. Téléphone et tablette : le texte d'abord, puis l'image.
   Mouvement : l'image se pose (4,5 s, une seule fois) et le trait corail encercle le prix (v10.js). « Moins d'animations » : rien ne bouge.
   Plus bas : les quatre sites réalisés, en grille. */

/* ---------- Héros ---------- */
.hx{position:relative;background:var(--craie);overflow:hidden}
@supports (overflow:clip){.hx{overflow:clip}}
.hx-in{position:relative;z-index:1;padding-block:clamp(26px,calc(4.4 * var(--vw,1vw)),56px) clamp(30px,calc(4 * var(--vw,1vw)),52px)}
.hx-h1{margin:0 0 clamp(22px,calc(2.4 * var(--vw,1vw)),32px);font-weight:900;letter-spacing:normal;line-height:1}
.hx-slogan{display:block;font-size:clamp(50px,calc(14 * var(--vw,1vw)),76px);font-weight:900;line-height:.9;letter-spacing:-.05em}
.hx-slogan em{font-style:normal;color:var(--corail)}
.hx-quoi{display:block;margin-top:clamp(14px,calc(1.6 * var(--vw,1vw)),22px);font-size:clamp(21px,calc(2.2 * var(--vw,1vw)),33px);font-weight:800;line-height:1.12;letter-spacing:-.025em;max-width:22em;text-wrap:balance}
.hx-prix{font-size:clamp(19px,calc(1.9 * var(--vw,1vw)),25px);font-weight:600;line-height:1.45;color:var(--encre-2);margin:0 0 clamp(26px,calc(3 * var(--vw,1vw)),38px);max-width:29em;text-wrap:pretty}
.hx-prix strong{color:var(--encre);font-weight:800;white-space:nowrap}
/* le cercle autour du prix : un peu d’air de chaque côté pour qu’il ne touche pas « Dès » ni « + taxes » */
.hx-prix .encercle{margin-inline:.42em}
.hx-prix .encercle>.trait{inset:-7px -12px;width:calc(100% + 24px);height:calc(100% + 14px)}
.hx-actions{gap:12px}
.hx-num{padding-left:12px;border-left:1.5px solid rgba(20,18,16,.4)}
.hx-preuve{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin:22px 0 0;font-size:15px;line-height:1.4;color:var(--encre-2)}
.hx-preuve a{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.hx-preuve strong{color:var(--encre);font-weight:800}
.hx-confiance{display:inline-flex;align-items:center;gap:10px;font-weight:700;color:var(--encre)}
.hx-confiance svg{width:22px;height:22px;flex:none}
.hx-fond{display:block;margin:0}
.hx-fond img{display:block;width:100%;height:auto}

/* téléphone : l'escalier recadré, presque carré, après le texte */
@media (max-width:559px){
  .hx-actions .btn{flex:1 1 100%}
  .hx-fond img{aspect-ratio:1/1;object-fit:cover;object-position:50% 36%}
}
@media (max-width:419px){.hx-num{display:none}}
/* tablette et petit portable : l'image entière, sous le texte */
@media (min-width:560px) and (max-width:1199px){
  .hx-texte{max-width:760px}
  .hx-fond img{aspect-ratio:3/2;object-fit:cover}
}
@media (min-width:1024px) and (max-width:1199px){.hx-slogan{font-size:96px}}
/* grand écran : le texte à gauche, l'escalier à droite, fondu dans le craie */
@media (min-width:1200px){
  .hx{display:flex;align-items:center;min-height:clamp(620px,calc(100svh - var(--entete) - 150px),820px)}
  .hx-in{width:100%}
  .hx-texte{grid-column:1/8}
  /* l’image dépasse un peu sous le héros : le plancher gris du photo-montage reste caché, l’escalier descend hors champ */
  .hx-fond{position:absolute;top:0;right:0;height:110%;z-index:0}
  .hx-fond img{height:100%;width:auto;max-width:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%);mask-image:linear-gradient(90deg,transparent 0,#000 26%)}
  .hx-slogan{font-size:clamp(76px,calc(7.4 * var(--vw,1vw)),112px)}
}
@media (prefers-reduced-motion:no-preference){
  .hx-fond img{transform-origin:70% 40%;animation:hx-pose 4.5s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes hx-pose{from{transform:scale(1.06)}to{transform:scale(1)}}

/* ---------- Les sites (« Voyez avant de décider. ») : mêmes fiches que le portfolio, voir .grille-sites dans v10.css (22 oct. 2026) ---------- */

/* Cellulaire et tablette : escalier collé au texte */
/* Le haut de la photo (un mur presque de la couleur de la page) s’efface en 18 px : plus de coupure. La boule commence plus bas,
   elle reste nette. L’image remonte de 14 px sous la dernière ligne : la boule arrive juste sous le texte. */
@media (max-width:1199px){
  .hx-in{padding-bottom:0}
  .hx-fond{margin-top:-14px}
  .hx-fond img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18px);mask-image:linear-gradient(180deg,transparent 0,#000 18px)}
}

/* Avis Google en direct (15 oct. 2026) */
/* Les avis écrits dans la page restent la base (Google, les IA, sans JavaScript). Quand /api/avis.php répond, assets/js/avis.js
   remplace la note et les avis par ceux de Google, avec ce que Google exige : l'attribution « Google Maps » (texte Roboto ou
   sans-serif, 400, blanc, #1F1F1F ou #5E5E5E selon le fond, 12 à 16 px, une seule ligne, jamais traduit, dans le même bloc que
   le contenu), l'auteur (photo, nom, profil), un lien vers chaque avis et la façon dont les avis sont choisis. */
.gm-attrib{font-family:Roboto,sans-serif;font-weight:400;font-style:normal;letter-spacing:normal;text-transform:none;font-size:13px;line-height:1.2;color:#5E5E5E;white-space:nowrap;text-decoration:none}
.avis-source .gm-attrib{font-size:14px}
.gm-tiers{font-family:Roboto,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#5E5E5E}
.gm-tiers a{color:inherit;text-underline-offset:3px}
.avis-attrib{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.etoiles-n{background:linear-gradient(90deg,var(--corail) var(--n,100%),var(--beton) var(--n,100%));-webkit-background-clip:text;background-clip:text;color:transparent}
@media (forced-colors:active){.etoiles-n{background:none;color:CanvasText}}
.hx-preuve a:hover>.hx-note{text-decoration:underline;text-decoration-color:var(--corail);text-underline-offset:3px}

/* Le mur d'avis (15 oct. 2026, 2e version) : la note dans un bloc foncé, puis une carte blanche par avis.
   Grand écran : 3 colonnes (4 avec les 3 avis écrits); tablette : 2 colonnes; cellulaire : on glisse d'une carte à l'autre.
   Les cartes d'une même rangée ont la même hauteur; l'auteur est toujours en bas. Plus le texte est court, plus il est gros. */
.avis-mur{display:grid;gap:var(--gout);align-items:stretch}
.avis-mur:focus-visible{outline:3px solid var(--corail);outline-offset:6px}
.avis-resume{display:flex;flex-direction:column;align-items:flex-start;gap:20px;min-width:0;padding:clamp(24px,calc(2.6 * var(--vw,1vw)),36px);background:var(--encre);color:var(--craie);border-top:4px solid var(--corail)}
/* la note et les étoiles côte à côte quand il y a la place, l'une sous l'autre sinon */
.avis-score{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.avis-moyenne{margin:0;line-height:.8}
.avis-moyenne strong{display:block;font-size:clamp(72px,calc(6.4 * var(--vw,1vw)),100px);font-weight:900;letter-spacing:-.05em}
.avis-score-txt{display:grid;gap:8px;min-width:0}
.avis-resume .etoiles{font-size:22px}
.avis-selon{margin:0;font-size:17px;line-height:1.35;max-width:22ch}
.avis-tous{display:inline-flex;align-items:center;gap:10px;margin-top:auto;min-height:48px;padding:12px 18px;background:var(--craie);color:var(--encre);border:2px solid var(--craie);font-weight:700;font-size:16px;line-height:1.15;text-decoration:none;box-shadow:0 3px 0 #000;transition:transform .12s ease,box-shadow .12s ease,background-color .2s ease,border-color .2s ease}
.avis-tous:hover{background:var(--jaune);border-color:var(--jaune)}
.avis-tous:active{transform:translateY(2px);box-shadow:0 1px 0 #000}
.avis-tous:focus-visible{outline-color:var(--jaune)}
.avis-sources{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:-8px 0 0}
.avis-resume .gm-attrib,.avis-resume .gm-tiers{color:#FFFFFF}

.avis-carte{display:flex;flex-direction:column;min-width:0;margin:0;padding:clamp(22px,calc(2.2 * var(--vw,1vw)),30px);background:#fff;border:1px solid var(--encre);box-shadow:0 3px 0 var(--encre)}
.avis-carte .etoiles{font-size:18px}
.avis-carte blockquote{margin:16px 0 0}
.avis-carte blockquote p{margin:0;font-weight:700;font-size:clamp(19px,calc(1.45 * var(--vw,1vw)),22px);line-height:1.32;letter-spacing:-.01em;word-break:break-word;overflow-wrap:anywhere}
.avis-carte.avis-court blockquote p{font-weight:800;font-size:clamp(23px,calc(2 * var(--vw,1vw)),30px);line-height:1.14;letter-spacing:-.02em}
.avis-carte.avis-long blockquote p{font-weight:500;font-size:17px;line-height:1.55;letter-spacing:0}
.avis-sans-texte{margin:14px 0 0;font-size:16px;line-height:1.5;color:var(--encre-2)}
.avis-carte figcaption{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:24px}
.avis-photo,.avis-initiale{width:44px;height:44px;border-radius:50%;flex:none;object-fit:cover;background:var(--craie-2)}
.avis-initiale{display:grid;place-items:center;font-weight:800;font-size:18px;line-height:1;color:var(--encre)}
.avis-qui{display:grid;gap:2px;min-width:0;font-size:16px;line-height:1.35}
.avis-qui strong{font-weight:800;font-size:17px;color:var(--encre);word-break:break-word;overflow-wrap:anywhere}
.avis-nom{color:inherit;text-decoration:none}
.avis-nom:hover strong,.avis-nom:focus-visible strong{text-decoration:underline;text-decoration-color:var(--corail);text-underline-offset:3px}
.avis-quand{font-size:14px;line-height:1.45;color:var(--encre-2)}
.avis-quand a{color:inherit;text-decoration:underline;text-decoration-color:var(--beton);text-underline-offset:3px;white-space:nowrap}
.avis-quand a:hover,.avis-quand a:focus-visible{color:var(--encre);text-decoration-color:var(--corail)}
.avis-g blockquote p::before{content:"«\00a0"}
.avis-g blockquote p::after{content:"\00a0»"}
html[lang^="en"] .avis-g blockquote p::before{content:"“"}
html[lang^="en"] .avis-g blockquote p::after{content:"”"}
.avis-outils{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;margin:10px 0 0;font-size:14px;line-height:1.4;color:var(--encre-2)}
.avis-bouton{font:inherit;font-weight:700;color:var(--encre);background:none;border:0;padding:4px 0;cursor:pointer;text-decoration:underline;text-decoration-color:var(--corail);text-underline-offset:3px}
.avis-bouton[hidden]{display:none}
.avis-bouton:focus-visible{outline:2px solid var(--encre);outline-offset:3px}
.avis-glisser{display:none;align-items:center;gap:8px;margin:14px 0 0;font-size:15px;font-weight:700;line-height:1.3;color:var(--encre-2)}
.avis-glisser svg{width:20px;height:20px;color:var(--corail)}
.avis-source{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 28px;margin:28px 0 0;font-size:14px;line-height:1.5;color:var(--encre-2)}
.avis-source>span:first-child{flex:1 1 30ch;max-width:80ch}

/* cellulaire : un carrousel qu'on glisse au doigt, la carte suivante dépasse pour montrer qu'il y en a d'autres */
@media (max-width:699px){
  .avis-mur{grid-auto-flow:column;grid-auto-columns:min(86%,360px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--marge);margin-inline:calc(var(--marge) * -1);padding:2px var(--marge) 10px;scrollbar-width:none}
  .avis-mur::-webkit-scrollbar{display:none}
  .avis-mur>*{scroll-snap-align:start}
  .avis-glisser{display:flex}
}
@media (min-width:700px){
  .avis-mur{grid-template-columns:repeat(2,minmax(0,1fr))}
  .avis-mur[data-nombre="2"]>.avis-resume,.avis-mur[data-nombre="4"]>.avis-resume{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:28px}
  .avis-mur[data-nombre="2"]>.avis-resume .avis-tous,.avis-mur[data-nombre="4"]>.avis-resume .avis-tous{margin:0 0 0 auto}
  .avis-mur[data-nombre="2"]>.avis-resume .avis-sources,.avis-mur[data-nombre="4"]>.avis-resume .avis-sources{flex-basis:100%}
}
@media (min-width:1024px){
  .avis-mur{grid-template-columns:repeat(3,minmax(0,1fr))}
  .avis-mur[data-nombre="1"],.avis-mur[data-nombre="3"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .avis-mur[data-nombre="2"]>.avis-resume,.avis-mur[data-nombre="4"]>.avis-resume{grid-column:auto;flex-direction:column;flex-wrap:nowrap;align-items:flex-start}
  .avis-mur[data-nombre="4"]>.avis-resume{grid-row:span 2}
  .avis-mur[data-nombre="2"]>.avis-resume .avis-tous,.avis-mur[data-nombre="4"]>.avis-resume .avis-tous{margin:auto 0 0}
}
@media (min-width:1280px){
  .avis-mur[data-nombre="3"]{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (prefers-reduced-motion:no-preference){
  .avis-direct>.avis-carte,.avis-source{animation:avis-entree .6s var(--ease) both}
  .avis-direct>.avis-carte:nth-child(3){animation-delay:.06s}
  .avis-direct>.avis-carte:nth-child(4){animation-delay:.12s}
  .avis-direct>.avis-carte:nth-child(5){animation-delay:.18s}
  .avis-direct>.avis-carte:nth-child(6){animation-delay:.24s}
  @keyframes avis-entree{from{opacity:0;transform:translateY(10px)}}
}