/* ════════════════════════════════════════════════════════════════════════════
   HABILLAGE COMMUN DES PAGES ISSUES DE LA MAQUETTE.

   Les canevas portent leur mise en forme en style en ligne, élément par
   élément. Ce fichier ne contient donc que ce qu'un style en ligne ne sait pas
   exprimer : les polices, les survols, les seuils d'écran, et les animations.
   ════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;
  src:url('../assets/fonts/poppins-300.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/poppins-400.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url('../assets/fonts/poppins-600.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url('../assets/fonts/poppins-700.woff2') format('woff2')}

:root{
  --bc-bleu:#25498A; --bc-jaune:#FDC30E; --bc-anthracite:#14171C;
  --bc-ocre:#8A6200; --bc-magenta:#FF1493;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#ffffff;font-family:'Poppins','Segoe UI',system-ui,sans-serif}
img,svg{max-width:100%}
a{color:var(--bc-bleu);text-decoration:none;transition:color .18s ease}

/* Le contour de focus doit se voir sur le bleu comme sur le blanc. */
:focus-visible{outline:3px solid var(--bc-jaune);outline-offset:3px;border-radius:2px}

.saut-au-contenu{position:absolute;left:-9999px;top:0;z-index:100;background:var(--bc-jaune);
  color:var(--bc-anthracite);padding:.7rem 1.2rem;font-weight:600}
.saut-au-contenu:focus{left:0}

/* ══ SEUIL D'ÉCRAN ═════════════════════════════════════════════════════════
   La maquette basculait entre deux rendus par une mesure de largeur faite en
   JavaScript. Ici c'est une requête de média : le bon rendu est déjà en place
   au premier affichage, sans attendre l'exécution d'un script. */
.dc-petit{display:none !important}
@media (max-width:719px){
  .dc-large{display:none !important}
  .dc-petit{display:flex !important}
}

/* ══ LE MENU DES LANGUES ═══════════════════════════════════════════════════
   Le !important n'est pas une facilité : le panneau porte un display:grid EN
   STYLE EN LIGNE, hérité de la maquette, et un style en ligne l'emporte sur
   toute règle de feuille. Sans lui, le menu des langues s'affiche déplié au
   chargement de chaque page. */
.dc-langues-panneau[hidden]{display:none !important}
.dc-langues-panneau{animation:dc-deplier .18s ease both}

/* ── LE PANNEAU SORTAIT DE L'ÉCRAN SUR TÉLÉPHONE ──────────────────────────
   La maquette l'ancre par la DROITE du bouton, ce qui convient sur un écran
   large où le sélecteur est à droite de la barre. Sur téléphone la barre passe
   à la ligne, le sélecteur se retrouve à gauche, et un panneau de 360 px ancré
   par sa droite déborde alors HORS DE L'ÉCRAN par la gauche : sept langues sur
   treize devenaient illisibles, coupées au bord.

   On l'ancre donc par la gauche et on borne sa largeur à celle de l'écran. Le
   !important est requis : le positionnement vient d'un style en ligne. */
@media (max-width:719px){
  .dc-langues-panneau{
    left:0 !important; right:auto !important;
    width:min(360px,calc(100vw - 32px)) !important;
    grid-template-columns:1fr 1fr !important;
    max-height:60vh !important;
  }
}
/* Sous 380 px, deux colonnes rogneraient les noms les plus longs. */
@media (max-width:379px){
  .dc-langues-panneau{grid-template-columns:1fr !important}
}
@keyframes dc-deplier{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ══ APPARITION AU DÉFILEMENT ══════════════════════════════════════════════
   Le repère est posé dans le HTML (data-anime) et l'état visible est ajouté par
   le script. Conséquence voulue : sans JavaScript, RIEN n'est masqué, parce que
   la règle de départ n'est appliquée que lorsque le script a marqué la page. */
html.dc-anime [data-anime]{opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
html.dc-anime [data-anime].dc-vu{opacity:1;transform:none}

/* ══ BARRE DE NAVIGATION ═══════════════════════════════════════════════════ */
nav[style*="sticky"]{transition:padding .25s ease,box-shadow .25s ease,background-color .25s ease}
nav[style*="sticky"].dc-defile{padding-top:8px !important;padding-bottom:8px !important;
  box-shadow:0 6px 22px rgba(20,23,28,.28)}
nav[style*="sticky"] img{transition:height .25s ease}
nav[style*="sticky"].dc-defile img{height:38px !important}

/* Le trait jaune qui se remplit sous la barre à mesure qu'on descend. */
.dc-progression{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;
  background:var(--bc-jaune);transition:width .1s linear}

/* ── LA BARRE RESTE EN HAUT, QUOI QU'IL ARRIVE AU CADRE ───────────────────
   Le cadre de la maquette est corrigé à la conversion, où `overflow-x:hidden`
   devient `overflow-x:clip` : `hidden` sur un seul axe entraîne l'autre en
   `auto`, ce qui fait du cadre un conteneur de défilement et prive la barre de
   son ancrage à la fenêtre.

   Cette règle est le filet : si une future retouche de la maquette réintroduit
   un rognage sur un ancêtre de la barre, elle la remet hors du flux plutôt que
   de la laisser repartir avec la page. Le rembourrage compense alors la hauteur
   qu'elle n'occupe plus. */
@supports not (overflow-x:clip){
  nav[style*="sticky"]{position:fixed !important;left:0;right:0;top:0}
  nav[style*="sticky"]+*{padding-top:78px}
}

/* ══ LE BANDEAU DE PROPOSITION DE LANGUE ═══════════════════════════════════
   Il est en anthracite, et non aux couleurs de la charte : il n'appartient pas
   à la page, il s'adresse à un visiteur qui n'est peut-être pas au bon endroit.
   Le contraste tranche avec le bleu de la barre qui le suit, de sorte qu'on ne
   le prenne pas pour une partie de la navigation.

   Il occupe une ligne et s'en va. Rien ne se superpose au contenu, rien ne
   masque la barre, et sur téléphone il passe à la ligne au lieu de se rogner. */
.dc-banniere{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;
  background:var(--bc-anthracite);color:#E7EAEE;font-size:13px;line-height:1.4;
  padding:10px max(16px,5cqw);position:relative}
.dc-banniere a{color:var(--bc-jaune);font-weight:600;text-decoration:underline;
  text-underline-offset:2px}
.dc-banniere-fermer{margin-left:auto;background:none;border:none;color:#9AA3AE;
  font-family:inherit;font-size:20px;line-height:1;cursor:pointer;padding:4px 6px;
  min-width:32px;min-height:32px}
@media (hover:hover){.dc-banniere-fermer:hover{color:#ffffff}}
.dc-banniere-fermer:focus-visible{outline:2px solid var(--bc-jaune);outline-offset:1px}

/* ══ LES RÉSEAUX DU PIED DE PAGE ═══════════════════════════════════════════
   Les symboles sont en blanc sur le bleu de la charte, à 9,1:1. Le survol les
   passe en jaune : sur CE fond, le jaune tient 8,2:1, alors qu'il tomberait à
   1,62:1 sur blanc. C'est la seule raison pour laquelle il est employé ici.

   La zone cliquable fait 40 px pour un symbole de 20. */
.dc-reseaux{display:flex;align-items:center;gap:4px}
.dc-reseau{display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;color:#ffffff;opacity:.88;border-radius:2px;
  text-decoration:none;transition:color .18s ease,opacity .18s ease,background-color .18s ease}
@media (hover:hover){
  .dc-reseau:hover{color:var(--bc-jaune);opacity:1;background:rgba(255,255,255,.10)}
}
.dc-reseau:focus-visible{outline:2px solid var(--bc-jaune);outline-offset:2px;opacity:1}

/* ══ SURVOLS AJOUTÉS ═══════════════════════════════════════════════════════
   La maquette n'animait pas les colonnes de fonctionnalités. Le mouvement reste
   discret : trois pixels et une ombre, rien qui déplace le texte sous le
   curseur au point de le rendre difficile à viser. */
section#fonctionnalites>div>div{transition:transform .22s ease,box-shadow .22s ease}
@media (hover:hover){
  section#fonctionnalites>div>div:hover{transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(20,23,28,.10)}
}
section#preuves>div>div>div{transition:transform .22s ease}
@media (hover:hover){section#preuves>div>div>div:hover{transform:translateX(3px)}}

a[style*="border-radius:2px"]{transition:background-color .18s ease,color .18s ease,
  opacity .18s ease,transform .18s ease}
a[style*="border-radius:2px"]:active{transform:translateY(1px)}

/* ══ FAISCEAU BALISTIQUE : LA PROJECTION DES BLOCS ═════════════════════════
   Chaque trajectoire se trace depuis le point de tir vers son point de chute,
   les dix se succèdent, le faisceau s'efface et le cycle reprend.

   ─── C'EST LE CSS QUI ANIME, ET NON LE SCRIPT ────────────────────────────
   Une première version pilotait les dix décalages image par image en
   JavaScript. Le script ne fait plus que MESURER chaque courbe et déclarer sa
   longueur, son sens et son retard ; l'animation, sa boucle et son rythme sont
   décrits ici. Trois raisons : le navigateur peut alors la confier au
   compositeur, elle continue de tourner quand le fil principal est occupé, et
   elle s'interrompt d'elle-même sur un réglage système d'animations réduites.

   ─── LE SENS DU TRACÉ VIENT DU SCRIPT ────────────────────────────────────
   --depart vaut la longueur de la courbe, positive ou NÉGATIVE. Le signe fait
   apparaître le trait par l'un ou l'autre bout, ce qui permet de partir du
   point de tir même quand le fichier décrit la courbe à l'envers. */

/* ══ LE BANDEAU : MONTRER LE DÔME EN ENTIER ════════════════════════════════

   ─── POURQUOI IL ÉTAIT TRONQUÉ, ET POURQUOI CE N'EST PAS UN RÉGLAGE ───────
   La photographie mesure 1600 × 893, et le dôme y occupe 61 % de la hauteur.
   L'image est affichée en « cover », qui remplit le cadre en rognant : la part
   verticale visible vaut le rapport de l'image divisé par celui du cadre. Sur un
   bandeau de 1900 × 450, cela fait 42 %. Le dôme ne peut donc PAS y tenir, quel
   que soit le cadrage choisi : il manque de la hauteur, pas du réglage.

   Le bandeau est donc rendu plus haut. À 1900 × 700, la part visible passe à
   66 %, et le dôme tient. Les bornes évitent les deux excès : jamais moins de
   420 px sur un portable, jamais plus de 720 px sur un grand écran, où un
   bandeau pleine hauteur repousserait tout le contenu hors de vue. */
.dc-bandeau{min-height:clamp(420px,62vh,720px)}
.dc-bandeau{display:flex;align-items:center}
.dc-bandeau>img{object-position:center 45% !important}

/* ══ LE VOILE ══════════════════════════════════════════════════════════════
   Il ne reste que ce qu'il faut pour lire le titre, et rien de plus.

   ─── POURQUOI ON NE PEUT PAS LE SUPPRIMER TOUT À FAIT ─────────────────────
   Le titre est en réserve blanche, et la photographie porte un ciel clair et des
   gradins ocre. Sans voile, le blanc sur ces zones descend sous le seuil de
   lisibilité : le titre ne disparaîtrait pas, il deviendrait pénible, ce qui est
   pire parce que personne ne le signale.

   Le voile est donc réduit au minimum ET complété par une ombre portée sur le
   seul texte. L'ombre ne touche pas la photographie : elle rend le titre lisible
   là où le voile ne l'est plus, ce qui permet d'alléger le voile d'autant.
   Elle ne s'applique évidemment pas au logo, que la charte en dispense. */
.dc-voile{
  background:
    linear-gradient(90deg,
      rgba(20,23,28,.62) 0%,
      rgba(20,23,28,.44) 28%,
      rgba(20,23,28,.10) 54%,
      rgba(20,23,28,0) 72%),
    linear-gradient(180deg,
      rgba(20,23,28,.10) 0%,
      rgba(20,23,28,0) 40%,
      rgba(20,23,28,.34) 100%);
}
.dc-bandeau h1,
.dc-bandeau p{text-shadow:0 2px 16px rgba(20,23,28,.8),0 1px 3px rgba(20,23,28,.75)}

/* ══ LE PANNEAU DE DANGER D'EXPLOSIF ═══════════════════════════════════════
   Posé sur la photographie, en bas à droite, comme un panneau planté sur le
   site. Loin de la colonne de texte et des deux boutons : un élément ANIMÉ
   placé sous l'appel à l'action lui disputerait le regard à l'instant même où
   le visiteur va cliquer.

   ─── LES DÉCALAGES SONT POSITIFS, ET CE N'EST PAS UN DÉTAIL ───────────────
   Le bandeau porte « overflow:hidden ». Un décalage négatif, qui ferait
   déborder le panneau pour l'asseoir sur le bord, le ferait simplement rogner.

   ─── ET IL SE CALE SUR LE BANDEAU, NON SUR LE BLOC DE TEXTE ───────────────
   Sur un écran large, il s'éloigne donc du texte au lieu de le suivre. C'est
   voulu : un panneau est planté sur le terrain, pas accroché au paragraphe.

   ─── LE DÉCALAGE DROIT EST « 5cqw », ET C'EST LE MÊME QUE PARTOUT AILLEURS ─
   La barre de navigation porte « padding:14px 5cqw » et le bandeau
   « padding: … 5cqw ». Le panneau se pose donc sur la MÊME LIGNE VERTICALE que
   le bouton « Demander une démo » de la barre, à toutes les largeurs et sans
   qu'aucune valeur n'ait à être tenue à jour. Un clamp en pixels aurait donné
   un alignement juste à une largeur et faux à toutes les autres.

   L'ombre portée le détache de la roche claire aux heures où la photographie
   est la plus lumineuse. Le liseré noir du panneau y suffirait presque ; elle
   règle le presque. */
.dc-picto-danger{
  position:absolute;
  right:5cqw;
  bottom:clamp(16px,3.2vw,48px);
  width:clamp(72px,9vw,116px);
  height:auto;
  pointer-events:none;
  filter:drop-shadow(0 2px 10px rgba(20,23,28,.55));
}

/* ── L'ALTERNANCE JAUNE-ORANGE ────────────────────────────────────────────
   Trois secondes, en fondu, sur la COULEUR SEULE. Ni l'échelle ni l'opacité ne
   bougent : un panneau de danger qui enfle et se rétracte ressemble à une
   bannière publicitaire, pas à de la signalétique.

   Les deux teintes sont celles des deux fichiers fournis. C'est la feuille de
   style qui porte désormais la seconde, le second fichier n'ayant rien d'autre
   à apporter. */
@keyframes dc-danger{
  from{fill:#f8e628}
  to  {fill:#f39204}
}
.dc-picto-fond{animation:dc-danger 3s ease-in-out infinite alternate}

/* L'ARRÊT N'EST PAS FACULTATIF. Une couleur qui bat en permanence dans le coin
   de l'écran gêne réellement certains lecteurs, et le panneau dit la même chose
   immobile.

   « animation:none » ET NON UNE DURÉE RACCOURCIE. La règle générale de ce même
   bloc raccourcit toutes les durées à .01 ms sans toucher au nombre de cycles :
   une animation « infinite » n'y ralentit pas, elle se met à battre cent fois
   par seconde. Seul le retrait du nom l'arrête vraiment.

   Aucune couleur de repos n'est écrite ici : le polygone a gardé son attribut
   « fill="#f8e628" », qui reprend la main dès que l'animation disparaît. */
@media (prefers-reduced-motion:reduce){
  .dc-picto-fond{animation:none}
}

/* ── SOUS 900 PX, IL RÉTRÉCIT, ET C'EST TOUT ──────────────────────────────
   LE REPLI EN HAUT À DROITE A ÉTÉ ESSAYÉ, MESURÉ, PUIS ABANDONNÉ.
   En haut, le panneau tombe sur le ciel de la photographie, l'endroit le plus
   clair de toute la page, et à trente pixels sous le bouton jaune de la barre
   de navigation : deux jaunes voisins, dont l'un bat. C'est exactement ce qui
   avait fait écarter la place sous les deux boutons.

   En bas, le voile vertical atteint 0,76 puis 0,90 : c'est le fond le plus
   sombre de la page, et le panneau y ressort le mieux. Le seul risque était que
   les deux boutons, passant l'un sous l'autre, viennent occuper ce coin.
   Mesuré dans les treize langues : à 412 px il reste de 91 à 166 px sous eux, à
   360 px de 77 à 144, pour un panneau qui en demande 63. Le coin est libre
   partout, la langue la plus bavarde comprise.

   Reste donc à le rétrécir, un panneau de 116 px occupant le quart de la
   largeur d'un téléphone. La place, elle, ne change pas : moins de règles, et
   rien à retenir d'accord entre deux largeurs. */
@media (max-width:899px){
  .dc-picto-danger{width:clamp(44px,13vw,64px)}
}

/* Sous 900 px le texte prend toute la largeur : un dégradé horizontal laisserait
   sa fin sur la partie claire de la photographie. On revient au voile vertical. */
@media (max-width:899px){
  .dc-voile{
    background:linear-gradient(180deg,
      rgba(20,23,28,.50) 0%,
      rgba(20,23,28,.58) 30%,
      rgba(20,23,28,.76) 70%,
      rgba(20,23,28,.90) 100%);
  }
}

/* ══ LE LOGO ═══════════════════════════════════════════════════════════════
   Le faisceau du symbole est fait de fuseaux PLEINS, très fins, et non de traits :
   il n'y a aucune épaisseur de trait à augmenter. À petite taille, ces fuseaux
   tombent sous le pixel et le lissage les rend inégaux, ce que la charte annonce
   au paragraphe des tailles minimales.

   geometricPrecision demande au navigateur de privilégier la fidélité du tracé
   plutôt que la vitesse. Combiné à la taille d'affichage relevée, le faisceau
   redevient régulier. */
img[src*="Logo_BlastClear"]{shape-rendering:geometricPrecision}

/* ══ LE B DU LOGO, EMPLOYÉ COMME LETTRE ════════════════════════════════════
   Son montant gauche s'incurve et s'évase, à la manière d'une trajectoire, là
   où le B de Poppins a un montant droit. C'est la seule lettre dessinée du
   logotype.

   ─── LA LETTRE RESTE DANS LE TEXTE, SOUS LE DESSIN ────────────────────────
   Le B textuel n'est pas supprimé mais masqué visuellement : il reste dans le
   flux, donc « BlastClear » se copie, se recherche dans la page et s'énonce
   entier par un lecteur d'écran. Le dessin, lui, est marqué décoratif. Un mot
   dont une lettre serait une image sans texte dessous se copierait « lastClear ».

   La hauteur est donnée en em, sur la hauteur de capitale de Poppins : la lettre
   suit alors la taille du titre, qui varie avec la largeur de l'écran. */
.dc-nom{white-space:nowrap}
.dc-b-lettre{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.dc-b{height:.705em;width:auto;vertical-align:baseline;fill:currentColor;
      margin-right:.012em;shape-rendering:geometricPrecision}

/* ── « CLEAR », COMME DANS LE LOGOTYPE ────────────────────────────────────
   Le logo compose « Blast » dans sa couleur dominante et « Clear » en jaune, en
   graisse normale. Le titre reprend les deux.

   Le crénage du titre est ANNULÉ sur ces cinq lettres. Un titre serré à -1,2 px
   convient à du 700, où les pleins sont larges ; appliqué à du 400, il colle les
   fûts du l et du e. Remettre la valeur normale sur le seul mot concerné garde le
   resserrement du reste du titre. */
.dc-clear{font-weight:400;color:var(--bc-jaune);letter-spacing:normal}

/* ══ LE FAISCEAU TENAIT MAL DANS SA SECTION ════════════════════════════════
   La maquette l'étale sur 170 % de la largeur. Le dessin ayant un rapport de
   1,77, cela le rend plus HAUT que large de beaucoup : sur une section de
   1400 px de large, il mesurait 2380 sur 1344, pour une section qui n'en fait
   que 430 de haut. Un tiers du faisceau y entrait, et ce tiers était sa partie
   basse : on voyait des jambes d'arcs sans sommet ni point de départ, coupées
   net au bord supérieur.

   Deux corrections, et la section respire : le faisceau est ramené à une
   largeur qui le fait tenir, et la section reçoit une hauteur minimale. */
.dc-traits{opacity:1;width:118% !important}

/* L'enveloppe couvre la définition ET la comparaison ; le faisceau y monte donc
   derrière le texte au lieu de s'arrêter à la frontière entre les deux. */
.dc-zone-traits>section{position:relative;z-index:1}
.dc-zone-traits>.dc-traits{z-index:0}

.dc-traits path{
  stroke-linecap:round;
  stroke-dasharray:var(--L) var(--L);
  stroke-dashoffset:var(--depart);
  opacity:0;
  animation:dc-projection var(--cycle,7.5s) linear var(--retard,0s) infinite both;
  animation-play-state:paused;
}
/* On ne fait tourner le faisceau que lorsqu'il est à l'écran. */
.dc-traits.dc-tire path{animation-play-state:running}

@keyframes dc-projection{
  /* Le vol : rapide au départ, ralenti à l'approche du point de chute. */
  0%   {stroke-dashoffset:var(--depart);opacity:0;   animation-timing-function:cubic-bezier(.16,.62,.28,1)}
  3%   {opacity:.45;                                 animation-timing-function:cubic-bezier(.16,.62,.28,1)}
  40%  {stroke-dashoffset:0;opacity:.45;             animation-timing-function:linear}
  /* La retombée reste affichée : c'est l'enveloppe que le logiciel calcule. */
  80%  {stroke-dashoffset:0;opacity:.45}
  94%  {stroke-dashoffset:0;opacity:0}
  /* Le retour au départ se fait hors de vue, sinon la courbe s'effacerait
     à rebours et donnerait un bloc qui revient au trou de mine. */
  100% {stroke-dashoffset:var(--depart);opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .dc-traits path{animation:none;stroke-dashoffset:0;opacity:.38}
}

/* ══ CARROUSEL ═════════════════════════════════════════════════════════════
   La bande défile par scroll-snap, ce qui lui donne son glissement natif au
   doigt et à la molette sans une ligne de script. Le script ne fait que
   commander ce même défilement depuis les flèches et les pastilles : il n'y a
   donc qu'un seul mécanisme de déplacement, et pas deux à tenir d'accord. */

.dc-surtitre{font-size:12px;letter-spacing:2px;font-weight:600;color:var(--bc-bleu);
  text-transform:uppercase;margin-bottom:16px}

.dc-carrousel-corps{position:relative}

.dc-bande{display:flex;gap:18px;list-style:none;margin:0;padding:0 0 4px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:thin;scrollbar-color:var(--bc-bleu) #E4E8EC}
.dc-bande::-webkit-scrollbar{height:6px}
.dc-bande::-webkit-scrollbar-thumb{background:var(--bc-bleu);border-radius:3px}
.dc-bande::-webkit-scrollbar-track{background:#E4E8EC}

.dc-vue{flex:0 0 100%;scroll-snap-align:center;min-width:0}
.dc-vue-cadre{aspect-ratio:16/10;border:2px solid var(--bc-bleu);background:#14171C;
  overflow:hidden}
.dc-vue-cadre img{transition:transform 6s ease-out}
.dc-carrousel:hover .dc-vue-cadre img{transform:scale(1.03)}
.dc-vue-legende{margin:12px 0 0;font-size:13px;color:#5A6572;letter-spacing:.2px}

/* Ce qui tient la place d'une capture encore absente. Un cadre vide passerait
   pour une image qui n'a pas chargé ; celui-ci dit ce qu'il attend. */
.dc-vue-attendue{width:100%;height:100%;display:grid;place-content:center;gap:8px;
  text-align:center;padding:24px;color:#C3CBD4;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 14px,transparent 14px 28px),#14171C}
.dc-vue-attendue span{font-size:15px;font-weight:600;color:#EDF0F4;max-width:30ch}
.dc-vue-attendue em{font-style:normal;font-size:12px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--bc-jaune)}

.dc-fleche{position:absolute;top:calc(50% - 34px);transform:translateY(-50%);
  width:44px;height:44px;display:grid;place-content:center;cursor:pointer;
  border:none;border-radius:50%;background:var(--bc-bleu);color:#ffffff;
  box-shadow:0 6px 20px rgba(20,23,28,.28);
  transition:background-color .18s ease,color .18s ease,transform .18s ease,opacity .18s ease}
.dc-fleche--avant{left:-10px}
.dc-fleche--apres{right:-10px}
@media (hover:hover){
  .dc-fleche:hover{background:var(--bc-jaune);color:var(--bc-anthracite);transform:translateY(-50%) scale(1.07)}
}
.dc-fleche[disabled]{opacity:.35;cursor:default}
@media (max-width:719px){.dc-fleche{display:none}}

.dc-pastilles{display:flex;justify-content:center;gap:9px;margin-top:18px}
.dc-pastille{width:9px;height:9px;padding:0;border:none;border-radius:50%;cursor:pointer;
  background:#C3CBD4;transition:background-color .2s ease,width .2s ease}
.dc-pastille[aria-current="true"]{background:var(--bc-jaune);width:26px;border-radius:5px}

/* ══ PAGE DE DEMANDE ═══════════════════════════════════════════════════════ */
.dc-merci[hidden]{display:none}
.dc-merci{animation:dc-deplier .25s ease both}
form select:focus,form input:focus,form textarea:focus{border-color:var(--bc-bleu);outline-offset:1px}
form input,form textarea,form select{font-family:'Poppins','Segoe UI',system-ui,sans-serif}

/* ══ RESPECT DU RÉGLAGE SYSTÈME ════════════════════════════════════════════
   Ce n'est pas une politesse : le mouvement déclenche des malaises chez les
   personnes sujettes aux troubles vestibulaires, et le système le signale. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.dc-anime [data-anime]{opacity:1 !important;transform:none !important;transition:none}
  .dc-bande{scroll-behavior:auto}
  .dc-vue-cadre img,.dc-carrousel:hover .dc-vue-cadre img{transition:none;transform:none}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ══ LA FOSSE EN FILIGRANE ═════════════════════════════════════════════════
   La toile occupe toute la section et passe DERRIÈRE le texte. Elle
   n'intercepte aucun clic : sur téléphone, une toile qui capterait le
   glissement empêcherait de faire défiler la page, ce qui est un prix
   qu'aucun décor ne vaut.

   Sa faible opacité est ce qui en fait un filigrane. Le texte, lui, reste au
   contraste plein : c'est le fond qui s'efface, jamais ce qui se lit. */
.dc-fosse{position:relative;overflow:hidden}
.dc-fosse-toile{position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;opacity:0;transition:opacity .9s ease}
.dc-fosse-toile.dc-vue{opacity:1}
.dc-fosse>*:not(.dc-fosse-toile){position:relative;z-index:1}

/* ── AU PREMIER PLAN ──────────────────────────────────────────────────────
   La même toile change de parent. Elle retrouve ici sa pleine opacité, reçoit
   les clics, et couvre l'écran. Le fond sombre n'est pas décoratif : il donne
   au tracé le contraste qu'un fond clair lui refuse. */
.dc-fosse-plein{position:fixed;inset:0;z-index:80;background:#0C0F14;
  animation:dc-fondu .25s ease both}
.dc-fosse-plein .dc-fosse-toile{position:absolute;inset:0;pointer-events:auto;
  opacity:1;cursor:grab;touch-action:none}
.dc-fosse-plein .dc-fosse-toile:active{cursor:grabbing}
@keyframes dc-fondu{from{opacity:0}to{opacity:1}}

.dc-fosse-fermer{position:absolute;top:16px;right:16px;z-index:3;
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.28);
  color:#ffffff;font-family:inherit;font-weight:600;font-size:14px;
  padding:10px 18px;border-radius:2px;cursor:pointer}
@media (hover:hover){.dc-fosse-fermer:hover{background:rgba(255,255,255,.20)}}

.dc-fosse-aide{position:absolute;left:0;right:0;bottom:14px;z-index:2;
  text-align:center;color:#9AA3AE;font-size:13px;padding:0 16px;
  pointer-events:none}

/* Le bouton d'ouverture reprend le bouton secondaire de la page. */
.dc-fosse-ouvrir{display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--bc-bleu);color:var(--bc-bleu);background:none;
  font-family:inherit;font-weight:600;font-size:15px;padding:10px 20px;
  border-radius:2px;cursor:pointer;min-height:44px}
@media (hover:hover){
  .dc-fosse-ouvrir:hover{background:var(--bc-bleu);color:#ffffff}
}

.dc-fosse-plein button:focus-visible,
.dc-fosse-plein input:focus-visible,
.dc-fosse-ouvrir:focus-visible{outline:2px solid var(--bc-jaune);outline-offset:2px}

/* ══ LE PANNEAU DES CALQUES ════════════════════════════════════════════════
   Chaque tracé répond à une question différente : où est le terrain, jusqu'où
   porte le dôme, où est le tir, où passe le périmètre, et ce qu'aurait donné
   un simple cercle. Les superposer tous rend le dessin illisible ; les éteindre
   un à un est la seule façon de lire une comparaison.

   Ce sont de vraies cases à cocher, non des pastilles : elles se cochent au
   clavier, s'annoncent comme telles, et disent leur état sans qu'on ait à
   deviner ce qu'une couleur veut dire. */
.dc-fosse-calques{position:absolute;left:16px;bottom:16px;z-index:3;
  background:rgba(12,15,20,.82);border:1px solid rgba(255,255,255,.16);
  border-radius:2px;padding:12px 14px;min-width:160px}
.dc-fosse-calques h3{margin:0 0 9px;font-size:11px;letter-spacing:1.4px;
  text-transform:uppercase;color:#9AA3AE;font-weight:600}
.dc-fosse-calques label{display:flex;align-items:center;gap:9px;
  min-height:30px;color:#E7EAEE;font-size:13px;cursor:pointer;white-space:nowrap}
.dc-fosse-calques input{accent-color:var(--bc-jaune);width:15px;height:15px;
  margin:0;cursor:pointer;flex:0 0 auto}
/* La pastille rappelle la couleur du tracé dans la scène. Elle DOUBLE
   l'étiquette, elle ne la remplace pas : seule, elle laisserait un lecteur
   daltonien sans moyen de savoir quelle ligne il éteint. */
.dc-fosse-pastille{width:12px;height:12px;border-radius:50%;flex:0 0 auto;
  box-sizing:border-box}

/* ══ LE CUBE DE VUE ════════════════════════════════════════════════════════
   Il tourne avec la caméra et se clique par la face. Il est bâti en trois
   dimensions CSS, non dessiné dans la toile : ses faces restent alors de vrais
   boutons, atteignables au clavier et énoncés par un lecteur d'écran, ce
   qu'un dessin dans un canevas ne peut pas offrir. */
.dc-fosse-cube-zone{position:absolute;top:16px;left:16px;z-index:3;
  width:104px;height:104px;perspective:460px}
.dc-fosse-cube{position:absolute;inset:0;transform-style:preserve-3d;
  transform:translateZ(-52px)}
.dc-fosse-cube button{position:absolute;left:50%;top:50%;width:62px;height:62px;
  margin:-31px 0 0 -31px;display:flex;align-items:center;justify-content:center;
  background:rgba(37,73,138,.62);border:1px solid rgba(255,255,255,.30);
  color:#ffffff;font-family:inherit;font-size:11px;font-weight:600;
  letter-spacing:.2px;cursor:pointer;backface-visibility:hidden}
@media (hover:hover){
  .dc-fosse-cube button:hover{background:var(--bc-jaune);color:#14171C}
}

@media (max-width:719px){
  .dc-fosse-cube-zone{width:78px;height:78px;top:12px;left:12px}
  .dc-fosse-cube{transform:translateZ(-39px)}
  .dc-fosse-cube button{width:46px;height:46px;margin:-23px 0 0 -23px;font-size:9px}
  .dc-fosse-calques{left:12px;right:12px;bottom:12px;padding:10px 12px;
    display:flex;flex-wrap:wrap;gap:2px 14px;align-items:center}
  .dc-fosse-calques h3{width:100%;margin:0 0 4px}
  .dc-fosse-aide{display:none}
}