@media (hover: hover) { .page-contact main .btn--blanc:hover, .page-faq main .btn--blanc:hover { background: var(--jaune); } }

/* ---------- les bulles de BD : un corps arrondi, un trait d'encre, une queue et une ombre pleine décalée */
.bulle { --fond: #fff; --encre: var(--nuit); --trait: var(--nuit); --ombre: var(--nuit);
  position: relative; display: inline-block; max-width: 100%; padding: 14px 20px 15px; background: var(--fond); color: var(--encre);
  border: 3px solid var(--trait); border-radius: 26px; filter: drop-shadow(5px 5px 0 var(--ombre)); overflow-wrap: anywhere; }
/* la queue : un triangle d'encre, puis le même en couleur de fond, rentré de 3 px sur ses deux côtés jusqu'à la pointe,
   et remonté de 3 px pour effacer le trait du bas : sur fond noir, où l'encre disparaît, il reste une queue entière */
.bulle::before, .bulle::after { content: ""; position: absolute; width: 34px; }
.bulle::before { top: 100%; height: 28px; background: var(--trait); }
.bulle::after { top: calc(100% - 3px); height: 21px; background: var(--fond); }
.bulle--blitz::before { left: 18px; clip-path: polygon(0 28px, 12px 0, 34px 0); }
.bulle--blitz::after { left: 18px; clip-path: polygon(16.6px 0, 33px 0, 7.6px 20.8px); }
.bulle--vous { --fond: var(--rouge); --encre: #fff; }
.bulle--vous::before { right: 18px; clip-path: polygon(34px 28px, 22px 0, 0 0); }
.bulle--vous::after { right: 18px; clip-path: polygon(17.4px 0, 1px 0, 26.4px 20.8px); }
/* « en train d'écrire » : la bulle se réduit à trois points, puis claque avec le texte */
.bulle.est-ecrit { width: 92px; height: 50px; color: transparent; }
.bulle.est-ecrit > :not(.bulle__points) { visibility: hidden; }
.bulle__points { position: absolute; left: 50%; top: 50%; display: flex; gap: 7px; translate: -50% -50%; }
.bulle__points i { width: 10px; height: 10px; border-radius: 50%; background: var(--nuit); animation: points .7s ease-in-out infinite; }
.bulle__points i:nth-child(2) { animation-delay: .12s; }
.bulle__points i:nth-child(3) { animation-delay: .24s; }
@keyframes points { 0%, 100% { translate: 0 0; opacity: .35; } 40% { translate: 0 -6px; opacity: 1; } }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-scene { position: relative; isolation: isolate; padding: 34px 0 clamp(90px, 10vw, 150px); overflow-x: clip; }
.contact-scene__fond { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.contact-scene__rayons { position: absolute; inset: -10% -10% 30% 20%;
  background: repeating-conic-gradient(from 8deg at 62% 22%, rgba(255, 0, 77, .13) 0 5deg, transparent 5deg 15deg);
  -webkit-mask: radial-gradient(closest-side at 62% 22%, #000 10%, transparent 100%); mask: radial-gradient(closest-side at 62% 22%, #000 10%, transparent 100%); }
.contact-scene__trame { position: absolute; inset: 0; background: radial-gradient(rgba(246, 246, 247, .05) 1.5px, transparent 2px) 0 0 / 14px 14px;
  -webkit-mask: linear-gradient(#000, transparent 70%); mask: linear-gradient(#000, transparent 70%); }

.contact-grille { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, 410px); column-gap: clamp(40px, 5vw, 96px); align-items: start; }
.contact-tete { grid-column: 1 / -1; position: relative; z-index: 1; padding-bottom: clamp(30px, 3.4vw, 50px); }
.contact-tete__titre { position: relative; z-index: 1; max-width: 1000px; font-size: clamp(44px, 6vw, 96px); }
.contact-tete__sous { max-width: 560px; margin-top: 18px; color: var(--gris); font-size: clamp(18px, 1.4vw, 21px); line-height: 1.45; }
.contact-tete__collant { position: absolute; z-index: 0; right: clamp(0px, 3vw, 60px); top: -6px; width: clamp(150px, 15vw, 230px); height: auto; rotate: 9deg; pointer-events: none; }

/* ---------- la planche : une feuille de papier déchirée, retenue par deux rubans */
.planche { position: relative; isolation: isolate; min-width: 0; padding: 30px clamp(18px, 2.6vw, 38px) 38px; color: var(--nuit); }
.planche::before, .planche::after { content: ""; position: absolute; inset: 0; z-index: -1;
  clip-path: polygon(0% 1%, 7% 0%, 15% .8%, 24% .1%, 33% .9%, 42% .2%, 51% .8%, 60% 0%, 69% .9%, 78% .3%, 87% 1%, 94% .1%, 100% .7%, 99.5% 18%, 100% 37%, 99.3% 56%, 100% 76%, 99.4% 99.2%, 92% 100%, 83% 99.1%, 74% 99.9%, 64% 99%, 55% 99.8%, 45% 99%, 36% 99.9%, 26% 99.1%, 17% 99.9%, 8% 99%, 0% 99.7%, .6% 79%, 0% 58%, .7% 37%, 0% 18%); }
.planche::before { background: radial-gradient(rgba(23, 23, 26, .09) 1.3px, transparent 1.7px) 0 0 / 11px 11px, var(--papier); }
.planche::after { z-index: -2; background: #000; opacity: .45; translate: 12px 14px; }
.planche__ruban { position: absolute; z-index: 2; width: clamp(96px, 9vw, 140px); height: auto; pointer-events: none; }
.planche__ruban--a { left: -26px; top: -14px; rotate: -24deg; }
.planche__ruban--b { right: -22px; top: -10px; rotate: 18deg; }

.planche__tete { margin: 0 0 28px; padding: 26px 0 18px; border-bottom: 3px solid var(--nuit); }
.planche__nom { position: relative; width: fit-content; font: 900 clamp(30px, 3vw, 42px)/.9 var(--titre); text-transform: uppercase; letter-spacing: .01em; }
.planche__nom::after { content: ""; position: absolute; z-index: -1; left: -.12em; right: -.14em; bottom: .02em; height: .36em; background: var(--jaune); rotate: -1.5deg; }
.planche :focus-visible { outline-color: var(--rouge); }

/* ---------- le formulaire */
.formulaire { display: grid; gap: 26px; margin: 0; }
.formulaire__rangee { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 24px 22px; }
.champ { min-width: 0; margin: 0; padding: 0; border: 0; }
.champ__etiquette { display: block; margin-bottom: 9px; padding: 0; font: 700 16px/1.25 var(--titre); text-transform: uppercase; letter-spacing: .03em; }
.champ__etiquette small { font: 500 14px/1.25 var(--titre); text-transform: none; letter-spacing: 0; color: #4A4A52; }
.champ__saisie { display: block; width: 100%; min-height: 54px; padding: 12px 15px; border: 3px solid var(--nuit); border-radius: var(--r); background: #fff; color: var(--nuit); font: 500 18px/1.35 var(--titre);
  box-shadow: 4px 4px 0 var(--nuit); transition: box-shadow .12s; }
@media (hover: hover) { .champ__saisie:hover { box-shadow: 4px 4px 0 var(--rouge); } }
.champ__saisie:focus-visible { outline: 3px solid transparent; box-shadow: 6px 6px 0 var(--rouge); }
.champ__saisie[aria-invalid="true"] { border-color: var(--rouge-fonce); box-shadow: 4px 4px 0 var(--rouge-fonce); }
textarea.champ__saisie { min-height: 150px; resize: vertical; }
.champ__saisie--liste { padding-right: 44px; cursor: pointer; -webkit-appearance: none; appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 5.5l5 5 5-5' fill='none' stroke='%2317171A' stroke-width='2.6'/%3E%3C/svg%3E") right 14px center / 16px no-repeat; }
.champ__aide { margin-top: 11px; font: 500 15px/1.4 var(--titre); color: #4A4A52; }
.champ__oups { display: flex; align-items: flex-start; gap: 7px; margin-top: 11px; color: var(--rouge-fonce); font: 600 15px/1.35 var(--titre); }
.champ__oups:empty { display: none; }
.champ__oups i { flex: none; font-size: 18px; margin-top: 1px; }

/* les besoins : des rubans à cocher */
.formulaire__etiquettes { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 3px; }
.etiquette { position: relative; display: inline-flex; cursor: pointer; rotate: var(--e, 0deg); }
.etiquette:nth-child(3n+1) { --e: -1.2deg; }
.etiquette:nth-child(3n+2) { --e: .9deg; }
.etiquette:nth-child(4n) { --e: -.4deg; }
.etiquette input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.etiquette__ruban { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 4px 17px 3px; background: var(--nuit); color: #fff; font: 800 14px/1.15 var(--titre); letter-spacing: .1em; text-transform: uppercase; text-align: left;
  clip-path: polygon(0 6%, 2% 0, 98% 4%, 100% 0, 100% 96%, 98% 100%, 2% 94%, 0 100%); transition: background .12s, color .12s; }
@media (hover: hover) { .etiquette:hover .etiquette__ruban { background: var(--jaune); color: var(--nuit); } }
.etiquette:has(input:checked) .etiquette__ruban { background: var(--rouge-fonce); color: #fff; }
.etiquette:has(input:checked) .etiquette__ruban::before { content: "✓"; font-size: 15px; }
.etiquette:has(input:focus-visible) { outline: 3px solid var(--rouge); outline-offset: 3px; }

.formulaire__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; padding-top: 4px; }
.formulaire__note { flex: 1 1 220px; font: 500 14px/1.4 var(--titre); color: #4A4A52; }
.formulaire__note a { --hl: var(--rouge); --hl-texte: #fff; }

/* ---------- la confirmation : « Reçu. On vous revient vite. » */
.envoye { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; min-height: 460px; padding: 50px 10px 20px; text-align: center; }
.envoye__rayons { position: absolute; inset: -4% -4%; z-index: -2; pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 50% 46%, rgba(255, 0, 77, .18) 0 7deg, transparent 7deg 18deg);
  -webkit-mask: radial-gradient(closest-side at 50% 46%, #000 30%, transparent 100%); mask: radial-gradient(closest-side at 50% 46%, #000 30%, transparent 100%); animation: tourne 40s linear infinite; }
@keyframes tourne { to { rotate: 360deg; } }
.envoye__eclat { position: absolute; z-index: -1; left: 50%; top: 44%; width: min(560px, 120%); height: auto; translate: -50% -50%; rotate: -8deg; opacity: .95; pointer-events: none; }
.envoye__bulle { position: relative; max-width: 470px; padding: 30px 32px 28px; background: #fff; border: 4px solid var(--nuit); border-radius: 46% 54% 50% 50% / 50% 46% 54% 50%; filter: drop-shadow(8px 8px 0 var(--nuit)); }
.envoye__gros { font: 900 clamp(30px, 3.6vw, 50px)/.95 var(--titre); text-transform: uppercase; }
.envoye__gros em { display: block; color: var(--rouge-fonce); font-style: normal; }
.envoye__gros:focus { outline: none; }
.envoye__detail { margin-top: 14px; font: 500 17px/1.45 var(--titre); }
.envoye__detail a { --hl: var(--rouge); --hl-texte: #fff; font-weight: 700; }
.envoye__encore { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 0; background: none; color: var(--nuit); font: 600 13px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
@media (hover: hover) { .envoye__encore:hover { color: var(--rouge-fonce); } }

/* ---------- les coordonnées, à côté de la planche */
.coord { position: sticky; top: 112px; min-width: 0; }
.coord__titre { font: 800 clamp(23px, 1.9vw, 30px)/1.08 var(--titre); text-transform: uppercase; letter-spacing: .005em; }
.coord__titre em { display: block; margin-top: 6px; color: var(--jaune); font-style: normal; }
.coord__liste { display: grid; gap: 4px; margin: 26px 0 0; }
.coord__lien { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 6px 0; color: var(--blanc); text-decoration: none; }
.coord__lien > i { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r); background: var(--charbon); color: var(--jaune); font-size: 21px; transition: background .12s, color .12s; }
.coord__lien span, .coord__lien address { display: flex; flex-direction: column; gap: 3px; font: 600 19px/1.3 var(--titre); font-style: normal; }
.coord__lien small { font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.coord__lien--grand span { font: 900 clamp(28px, 2.4vw, 36px)/1 var(--titre); }
.coord__lien--adresse address { font-size: 17px; font-weight: 500; }
@media (hover: hover) { a.coord__lien:hover span { color: var(--jaune); } }
@media (hover: hover) { a.coord__lien:hover > i { background: var(--jaune); color: var(--nuit); } }

/* la carte de Jonquière, dessinée à partir des rues réelles */
.plan { margin: 30px 0 0; }
.plan__papier { position: relative; aspect-ratio: 900 / 700; rotate: 1deg; filter: drop-shadow(9px 10px 0 #000); }
.plan__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  background: radial-gradient(rgba(246, 246, 247, .05) 1.4px, transparent 1.8px) 0 0 / 12px 12px, var(--charbon);
  clip-path: polygon(0% 2%, 8% 0%, 17% 1.4%, 27% .3%, 38% 1.8%, 49% .2%, 60% 1.5%, 71% 0%, 82% 1.6%, 92% .3%, 100% 1.4%, 99.3% 22%, 100% 45%, 99.2% 70%, 100% 98.6%, 91% 100%, 80% 98.5%, 69% 99.8%, 58% 98.4%, 47% 99.7%, 36% 98.5%, 25% 99.8%, 14% 98.6%, 5% 99.7%, 0% 98.4%, .8% 74%, 0% 49%, .7% 24%); }
.plan__svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.plan__svg .plan__parc { fill: rgba(23, 23, 26, .55); stroke: none; }
.plan__eau { stroke: #45454F; stroke-width: 13; }
.plan__ruisseau { stroke: #3F3F48; stroke-width: 2.4; }
.plan__rue { stroke: #4E4E58; stroke-width: 1.7; }
.plan__artere { stroke: #8E8E99; stroke-width: 3.2; }
.plan__boul { stroke: var(--papier); stroke-width: 5.5; }
.plan__harvey { stroke: var(--rouge); stroke-width: 10; stroke-dasharray: 1; }
.plan__nom { position: absolute; z-index: 1; padding: 4px 6px 3px; background: var(--nuit); color: var(--papier); font: 600 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; translate: -50% -50%; pointer-events: none; }
.plan__nom--harvey { left: 33%; top: 54%; rotate: 11deg; background: var(--rouge-fonce); color: #fff; }
.plan__nom--royaume { left: 45%; top: 17%; rotate: 11deg; }
.plan__nom--hubert { left: 22.6%; top: 75%; rotate: -78deg; }
.plan__nom--riviere { left: 7.6%; top: 27%; rotate: -70deg; }
.plan__repere { position: absolute; z-index: 2; left: 56%; top: 50%; width: 0; height: 0; }
.plan__repere img { position: absolute; max-width: none; left: -22px; bottom: -14px; width: 44px; height: auto; transform-origin: 50% 100%; }
.plan__repere .dymo { position: absolute; left: 26px; bottom: 24px; font-size: 11px; rotate: -3deg; background: var(--rouge-fonce); }
.plan__onde { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border: 3px solid var(--jaune); border-radius: 50%; animation: onde 1.8s ease-out infinite; }
@keyframes onde { from { scale: .3; opacity: 1; } to { scale: 2.2; opacity: 0; } }
.plan__legende { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 18px; }
.plan__itineraire { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--jaune); font: 700 17px/1 var(--bouton); letter-spacing: .06em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 5px; }
@media (hover: hover) { .plan__itineraire:hover { color: var(--blanc); } }
.plan__legende small { font: 500 11px/1.3 var(--mono); color: var(--gris); }

/* ---------- soutien à distance : trois cases de BD sur fond rouge */
.adistance { position: relative; isolation: isolate; padding: calc(var(--biais) + clamp(60px, 7vw, 110px)) 0 calc(var(--biais) + 90px); background: var(--rouge); color: var(--nuit); overflow-x: clip;
  clip-path: polygon(0 0, 100% var(--biais), 100% 100%, 0 100%); scroll-margin-top: 0; }
.adistance__fond { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-conic-gradient(from 190deg at 8% 0%, rgba(23, 23, 26, .08) 0 4deg, transparent 4deg 12deg); }
.adistance__tete { display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; gap: 24px clamp(30px, 5vw, 80px); margin-bottom: clamp(44px, 5vw, 70px); }
.adistance__sur { margin-bottom: 12px; font: 700 13px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--nuit); }
.adistance .titre { color: var(--nuit); font-size: clamp(42px, 5vw, 80px); }
.adistance .titre em { color: #fff; }
.adistance__intro { justify-self: end; max-width: 540px; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.5; color: var(--nuit); }

.adistance__cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(26px, 3vw, 44px); margin: 0; padding: 0; list-style: none; counter-reset: none; }
.vignette { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 0 clamp(18px, 2vw, 26px) 28px; background: #fff; border: 4px solid var(--nuit); box-shadow: 10px 10px 0 var(--nuit); }
.vignette:nth-child(1) { rotate: -1deg; }
.vignette:nth-child(2) { rotate: .7deg; margin-top: 26px; }
.vignette:nth-child(3) { rotate: -.5deg; }
.vignette__num { position: absolute; z-index: 2; left: -4px; top: -4px; display: grid; place-items: center; min-width: 48px; height: 48px; border: 4px solid var(--nuit); background: var(--jaune); font: 900 26px/1 var(--titre); }
.vignette__image { position: relative; align-self: stretch; display: grid; place-items: center; height: clamp(170px, 15vw, 220px); margin: 0 calc(-1 * clamp(18px, 2vw, 26px)) 8px; border-bottom: 4px solid var(--nuit); overflow: hidden;
  background: radial-gradient(rgba(255, 0, 77, .22) 2.2px, transparent 2.6px) 0 0 / 12px 12px, var(--papier); }
.vignette__image img { position: absolute; left: 12%; top: 12%; width: 76%; height: 76%; max-width: none; object-fit: contain; rotate: -6deg; }
.vignette:nth-child(3) .vignette__image img { rotate: 8deg; }
.vignette__son { position: absolute; right: 14px; top: 14px; font: 900 italic clamp(24px, 2.2vw, 32px)/1 var(--titre); text-transform: uppercase; color: #fff; -webkit-text-stroke: 1.5px var(--nuit); text-shadow: 3px 3px 0 var(--nuit); rotate: 10deg; }
.vignette__son--jaune { color: var(--jaune); right: auto; left: 64px; rotate: -8deg; }
.vignette__titre { font: 900 clamp(22px, 1.9vw, 28px)/1 var(--titre); text-transform: uppercase; }
.vignette__texte { font-size: 17px; line-height: 1.5; color: #2A2A30; }
.vignette__texte a { --hl: var(--rouge); --hl-texte: #fff; font-weight: 700; }
.vignette__bouton { margin-top: 6px; }
.vignette__fichier { font: 500 12px/1 var(--mono); letter-spacing: .06em; color: #55555F; }

.contact-rapide { display: none; }
/* ---------- contact : tablette et mobile */
@media (max-width: 1080px) {
  .contact-grille { grid-template-columns: minmax(0, 1fr); }
  .coord { position: static; margin-top: 70px; max-width: 640px; }
}
@media (max-width: 860px) {
  .adistance__tete { grid-template-columns: minmax(0, 1fr); }
  .adistance__cases { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
  .vignette:nth-child(2) { margin-top: 0; }
}
@media (max-width: 640px) {
  .contact-scene { padding-top: 18px; }
  .contact-tete__sous { padding-right: 0; }
  .contact-tete__collant { width: 66px; right: 6px; top: 82px; bottom: auto; }
  /* appeler, écrire, s'y rendre : trois gestes à portée de pouce, avant même le formulaire */
  .contact-rapide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
  .contact-rapide a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 66px; border: 2px solid var(--charbon-2); border-radius: var(--r); background: var(--charbon); color: var(--blanc); font: 700 15px/1 var(--titre); text-decoration: none; }
  .contact-rapide a:active { background: var(--jaune); color: var(--nuit); }
  .contact-rapide i { font-size: 22px; color: var(--jaune); }
  .contact-rapide a:active i { color: inherit; }
  .coord__lien small { font-size: 12px; }
  .plan__legende small { font-size: 12px; }
  .contact-tete__titre { font-size: clamp(40px, 11.8vw, 56px); }
  /* la planche passe pleine largeur ; les cases gardent leurs 22 px de marge */
  .planche { margin: 0 -22px; padding: 26px 22px 30px; }
  .planche__ruban--a { left: -6px; width: 92px; }
  .planche__ruban--b { right: -4px; width: 92px; }
  .etiquette__ruban { font-size: 13px; padding: 4px 13px 3px; }
  .formulaire__actions .btn { width: 100%; }
  .envoye__bulle { padding: 26px 20px 24px; border-radius: 30px; }
  .plan__nom--royaume, .plan__nom--riviere { display: none; }
  .adistance__cases { gap: 34px; }
}

/* ==========================================================================
   FAQ : les questions en bulles qui s'ouvrent, la réponse de Blitz claque
   ========================================================================== */
.faq-tete { position: relative; isolation: isolate; padding: 34px 0 clamp(50px, 6vw, 90px); overflow-x: clip; }
.faq-tete__fond { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 80% 46%, rgba(250, 239, 93, .07) 0 5deg, transparent 5deg 15deg), radial-gradient(rgba(246, 246, 247, .05) 1.5px, transparent 2px) 0 0 / 14px 14px;
  -webkit-mask: radial-gradient(120% 90% at 80% 46%, #000 30%, transparent 85%); mask: radial-gradient(120% 90% at 80% 46%, #000 30%, transparent 85%); }
.faq-tete__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 440px); gap: 30px clamp(30px, 5vw, 80px); align-items: center; }
.faq-tete__titre { font-size: clamp(44px, 6vw, 96px); }
.faq-tete__sous { max-width: 600px; margin-top: 18px; color: var(--gris); font-size: clamp(18px, 1.4vw, 21px); line-height: 1.45; }

/* la recherche : une bulle à remplir */
.faq-cherche { max-width: 600px; margin-top: 34px; }
.faq-cherche__libelle { display: block; margin-bottom: 10px; font: 600 13px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--jaune); }
.faq-cherche__boite { position: relative; filter: drop-shadow(6px 6px 0 var(--rouge)); }
.faq-cherche__boite > i { position: absolute; left: 20px; top: 50%; translate: 0 -50%; font-size: 24px; color: var(--nuit); pointer-events: none; }
.faq-cherche__champ { width: 100%; height: 64px; padding: 0 60px 0 56px; border: 3px solid var(--nuit); border-radius: 20px; background: var(--blanc); color: var(--nuit); font: 500 19px/1 var(--titre); -webkit-appearance: none; appearance: none; }
.faq-cherche__champ::placeholder { color: #6E6E78; }
.faq-cherche__champ::-webkit-search-cancel-button { display: none; }
.faq-cherche__champ:focus-visible { outline: 3px solid var(--jaune); outline-offset: 3px; }
.faq-cherche__effacer { position: absolute; right: 10px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--nuit); color: #fff; font-size: 18px; cursor: pointer; }
@media (hover: hover) { .faq-cherche__effacer:hover { background: var(--rouge); } }
.faq-cherche__etat { min-height: 1.3em; margin-top: 14px; font: 600 13px/1.3 var(--mono); letter-spacing: .06em; color: var(--gris); }


/* la bouche qui pose les questions */
.faq-bouche { position: relative; height: clamp(380px, 34vw, 500px); }
.faq-bouche__img { position: absolute; left: 14%; bottom: 0; width: clamp(200px, 19vw, 280px); height: auto; rotate: -10deg; }
.faq-bouche__bulle { position: absolute; padding: 14px 22px 13px; border: 3px solid var(--nuit); border-radius: 50%; background: #fff; color: var(--nuit); font: 900 clamp(18px, 1.7vw, 25px)/1 var(--titre); text-transform: uppercase; white-space: nowrap;
  filter: drop-shadow(5px 5px 0 var(--rouge)); animation: flotte 3.6s ease-in-out infinite; }
.faq-bouche__bulle::before, .faq-bouche__bulle::after { content: ""; position: absolute; left: 26%; width: 26px; }
.faq-bouche__bulle::before { top: calc(100% - 2px); height: 22px; background: var(--nuit); clip-path: polygon(0 22px, 9px 0, 26px 0); }
.faq-bouche__bulle::after { top: calc(100% - 5px); height: 15px; background: #fff; clip-path: polygon(13.5px 0, 24.9px 0, 7.4px 14.8px); }
.faq-bouche__bulle--a { left: 0; top: 4%; rotate: -8deg; }
.faq-bouche__bulle--b { right: 0; top: 18%; rotate: 7deg; animation-delay: -1.2s; background: var(--jaune); filter: drop-shadow(5px 5px 0 #000); }
.faq-bouche__bulle--b::after { background: var(--jaune); }
@keyframes flotte { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

/* les questions : un mur de bulles qui parlent toutes en même temps, les thèmes écrits en gros entre elles.
   Une bulle touchée ouvre sa réponse juste en dessous, sur toute la largeur, et le mur se replace autour. */
.faq-liste { padding: clamp(30px, 4vw, 60px) 0 clamp(70px, 8vw, 120px); }
.faq-liste__grille { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 40px clamp(48px, 4.4vw, 64px); align-items: start; }
.faq-mur { grid-column: 1; grid-row: 1; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 30px 20px; min-width: 0; }

/* les thèmes en étiquettes, à droite du mur : elles suivent au défilement, et celle du thème où l'on est s'avance */
.faq-themes { grid-column: 2; grid-row: 1; position: sticky; top: 112px; z-index: 5; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 6px 0 0; }
.faq-themes__titre { font: 600 13px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--jaune); }
.faq-themes__liste { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.faq-themes a { position: relative; display: inline-flex; align-items: center; min-height: 36px; background: none; text-decoration: none; transition: translate .3s var(--claque), rotate .3s var(--claque); }
.faq-themes a[hidden] { display: none; }
.faq-themes a:nth-child(odd) { rotate: -1.2deg; }
.faq-themes a:nth-child(even) { rotate: 1deg; }
.faq-themes .dymo { font-size: 13px; padding: .62em .9em .56em; }
.faq-themes .dymo--rouge { background: var(--rouge-fonce); }
.faq-themes .dymo--jaune { background: var(--jaune); color: var(--nuit); }
.faq-themes a[aria-current] { translate: -14px 0; rotate: -2.5deg; }
/* l'éclair de Blitz pointe l'étiquette du thème en cours */
.faq-themes a::before { content: ""; position: absolute; left: -30px; top: 50%; width: 22px; height: 23px; translate: 0 -50%; background: url(../../_commun/logos/blitz-eclair-jaune.svg) center / contain no-repeat; opacity: 0; scale: .4; transition: opacity .15s, scale .3s var(--claque); }
.faq-themes a[aria-current]::before { opacity: 1; scale: 1; }
.faq-themes a:focus-visible { outline: 3px solid var(--jaune); outline-offset: 3px; }
.faq-mot { flex: none; margin: 4px 10px; font: 900 clamp(48px, 6.6vw, 108px)/.86 var(--titre); text-transform: uppercase; letter-spacing: -.005em; rotate: var(--rot); text-shadow: 5px 5px 0 #000; scroll-margin-top: 110px; }
/* chaque thème commence sa propre ligne : il ne s'assoit jamais à côté d'une question du thème d'avant */
.faq-saut { flex: 0 0 100%; height: 0; }
.faq-saut:has(+ .faq-mot[hidden]) { display: none; }
.faq-mot--rouge { color: var(--rouge); }
.faq-mot--blanc { color: var(--blanc); }
.faq-mot--jaune { color: var(--jaune); }
.faq-b { --ombre: #000; max-width: min(100%, 460px); margin-bottom: 24px; font-weight: 700; line-height: 1.15; text-align: left; cursor: pointer; rotate: var(--rot); scroll-margin-top: 110px; transition: background .12s, color .12s; }
.faq-b--l { padding: 16px 24px 17px; font-size: clamp(22px, 2.2vw, 32px); }
.faq-b--m { font-size: clamp(19px, 1.6vw, 24px); }
.faq-b--s { font-size: clamp(16px, 1.25vw, 19px); }
.faq-b--blanc { --fond: var(--blanc); --encre: var(--nuit); }
@media (hover: hover) { .faq-b--rouge:hover { --fond: var(--blanc); --encre: var(--nuit); } .faq-b--blanc:hover { --fond: var(--rouge); --encre: #fff; } }
.faq-b:focus-visible { outline: 3px solid var(--jaune); outline-offset: 5px; }
.faq-b[aria-expanded="true"] { --fond: var(--nuit); --encre: var(--jaune); --trait: var(--jaune); --ombre: var(--rouge); rotate: 0deg; }
.faq-b mark { padding: 0 .08em; border-radius: 3px; background: var(--jaune); color: var(--nuit); }
.faq-b[aria-expanded="true"] mark { background: var(--rouge); color: #fff; }

.faq-r { display: flex; flex: 0 0 100%; justify-content: center; align-items: flex-end; gap: 16px; padding: 0 0 34px; }
.faq-r[hidden] { display: none; }
.faq-r__visage { flex: none; width: clamp(76px, 7vw, 104px); height: auto; margin-bottom: -30px; rotate: -6deg; filter: drop-shadow(4px 5px 0 #000); }
.faq-r__corps { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; max-width: 680px; }
/* pendant que la personne « écrit », la place de la réponse est déjà réservée (rien ne saute ensuite) :
   seule une petite bulle de trois points paraît, en bas à gauche, là où la réponse va claquer */
.faq-r__bulle.est-attente { visibility: hidden; }
.faq-r__points { position: absolute; left: 0; bottom: 0; width: 92px; height: 50px; padding: 0; --fond: var(--jaune); --ombre: #000; }
.faq-r__points[hidden] { display: none; }
.faq-r__qui { font: 600 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.faq-r__qui b { color: var(--jaune); font-weight: 600; }
.faq-r__bulle { --fond: var(--jaune); --ombre: #000; padding: 18px 24px 19px; font: 500 clamp(18px, 1.35vw, 20px)/1.5 var(--titre); }
.faq-r__bulle a { --hl: var(--rouge); --hl-texte: #fff; font-weight: 700; }
::view-transition-group(*) { animation-duration: .38s; animation-timing-function: cubic-bezier(.3, 1.3, .5, 1); }

.faq-rien { display: flex; flex-direction: column; align-items: flex-start; gap: 34px; padding-top: 60px; }
.faq-rien__bulle { display: flex; align-items: flex-end; gap: 12px; }
.faq-rien__bulle::before { content: ""; flex: none; width: 46px; height: 47px; margin-bottom: -28px; background: url(../../_commun/logos/blitz-eclair-jaune.svg) center / contain no-repeat; rotate: -8deg; }
.faq-rien .bulle { --fond: var(--jaune); --ombre: #000; max-width: 560px; font: 600 19px/1.4 var(--titre); }

/* pas trouvé votre réponse? : une planche claire avant le pied de page */
.faq-fin { position: relative; isolation: isolate; padding: calc(var(--biais) + clamp(60px, 7vw, 100px)) 0 calc(var(--biais) + 90px); color: var(--nuit);
  background: radial-gradient(rgba(23, 23, 26, .09) 1.3px, transparent 1.7px) 0 0 / 11px 11px, var(--papier);
  clip-path: polygon(0 var(--biais), 100% 0, 100% 100%, 0 100%); overflow-x: clip; }
.faq-fin__grille { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: 30px clamp(30px, 5vw, 80px); }
.faq-fin__image { position: relative; justify-self: center; width: clamp(220px, 24vw, 340px); }
.faq-fin__bulle { width: 100%; height: auto; rotate: -7deg; }
.faq-fin__point { position: absolute; left: 50%; top: 44%; translate: -50% -50%; font: 900 clamp(90px, 10vw, 150px)/1 var(--titre); color: var(--rouge); rotate: 8deg; -webkit-text-stroke: 3px var(--nuit); text-shadow: 6px 6px 0 var(--nuit); }
.faq-fin .titre { color: var(--nuit); font-size: clamp(44px, 6vw, 96px); }
.faq-fin .titre em { color: var(--rouge-fonce); }
.faq-fin__sous { max-width: 520px; margin-top: 18px; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.45; }
.faq-fin__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 32px; }
.faq-fin__tel { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--nuit); font: 800 22px/1 var(--titre); text-decoration: none; }
@media (hover: hover) { .faq-fin__tel:hover { color: var(--rouge-fonce); text-decoration: underline; text-underline-offset: 4px; } }
.faq-fin :focus-visible { outline-color: var(--rouge-fonce); }

/* ---------- FAQ : tablette et mobile */
@media (max-width: 1000px) {
  .faq-liste__grille { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .faq-mur, .faq-themes { grid-column: 1; grid-row: auto; }
  /* les étiquettes deviennent une bande qu'on fait glisser du doigt, collée sous le menu ; celle du thème en cours se place à l'écran */
  .faq-themes { top: var(--faq-haut, 64px); margin: 0 calc(-1 * max(var(--gouttiere), env(safe-area-inset-left, 0px))); padding: 10px max(var(--gouttiere), env(safe-area-inset-left, 0px)) 12px; background: var(--nuit); box-shadow: 0 3px 0 var(--charbon-2); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .faq-themes::-webkit-scrollbar { display: none; }
  .faq-themes__titre { display: none; }
  .faq-themes__liste { flex-direction: row; flex-wrap: nowrap; gap: 8px; }
  .faq-themes a { flex: none; }
  .faq-themes a[aria-current] { translate: none; rotate: 0deg; }
  .faq-themes a::before { left: 0; right: 0; top: auto; bottom: -8px; width: auto; height: 3px; translate: none; background: var(--jaune); }
  .faq-mot, .faq-b { scroll-margin-top: 150px; }
}
@media (max-width: 900px) {
  .faq-tete__grille { grid-template-columns: minmax(0, 1fr); }
  .faq-bouche { height: 250px; max-width: 420px; width: 100%; justify-self: center; }
  .faq-bouche__img { width: 150px; left: 32%; }
  .faq-fin__grille { grid-template-columns: minmax(0, 1fr); }
  .faq-fin__image { width: 200px; justify-self: start; margin-left: 20px; }
}
@media (max-width: 640px) {
  .faq-tete { padding-top: 18px; }
  .faq-tete__titre { font-size: clamp(40px, 11.6vw, 56px); }
  .faq-cherche__champ { font-size: 17px; height: 60px; }
  .faq-bouche__bulle { padding: 11px 16px 10px; }
  .faq-mur { gap: 22px 12px; }
  /* une seule bulle par ligne : elles alternent de gauche à droite pour garder le brouhaha */
  .faq-b { max-width: 88%; }
  .faq-b:nth-of-type(odd) { margin-right: auto; }
  .faq-b:nth-of-type(even) { margin-left: auto; }
  .faq-mot { font-size: clamp(32px, 9.2vw, 60px); }
  .faq-b--l { font-size: 22px; }
  .faq-b--m { font-size: 19px; }
  .faq-b--s { font-size: 17px; }
  .faq-r { gap: 10px; }
  .faq-r__visage { width: 60px; }
  .faq-rien__bulle::before { width: 32px; height: 33px; margin-bottom: -24px; }
  .faq-r__bulle { padding: 15px 17px 16px; font-size: 17px; }
}