/* AR Marketing — styles de la bibliothèque de blocs.

   Ces règles ne concernent que les blocs des pages intérieures : en-tête de
   page, texte et visuel, vidéo, rail de réalisations, questions fréquentes,
   chiffres, étapes, tableau, galerie, bandeau, pages légales, page 404 et les
   blocs animés au défilement.

   Elles sont dans un fichier à part pour n'être chargées que sur les pages qui
   les emploient. Une page qui ne s'en sert pas n'a pas à télécharger ni à
   analyser ces 23 Ko avant de s'afficher.

   Généré depuis maquette-blocs.html, ne pas modifier ici. */

/* =============================================================================
   BLOCS DE PAGE INTÉRIEURE
   Ils réutilisent au maximum ce qui existe déjà : la grille, les tons de
   section, les boutons, les cartes, le rail défilant. On n'ajoute ici que ce
   qui manque vraiment.
   ============================================================================= */

/* ---------- 1. en-tête de page ----------
   Une demi-hauteur, pas un hero : sur une page intérieure, le contenu doit
   arriver vite. */
:root .ar-pagehead{position:relative; padding:clamp(80px,10vh,124px) var(--ar-gutter) 0;
  text-align:center;}
:root .ar-pagehead__inner{position:relative; z-index:2; max-width:var(--ar-content);
  margin-inline:auto;}
:root .ar-pagehead .ar-title,
:root .ar-pagehead .ar-lead{margin-inline:auto;}
/* L'accroche se cale sur la largeur du titre, comme dans le hero, et non sur
   une mesure de lecture. Le facteur est mesuré sur la fonte : un titre de page
   long, « POLITIQUE DE CONFIDENTIALITÉ. », occupe 15,6 fois sa taille de
   caractère. On s'en tient à 15, ce qui cadre les deux blocs ensemble quelle
   que soit la largeur de l'écran. */
:root .ar-pagehead .ar-lead{width:100%; max-width:min(100%, calc(var(--ar-fs-h2) * 15));}
:root .ar-pagehead__over{display:block; margin:0 0 16px;
  font-family:var(--ar-font-title); font-size:11.5px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ar-teal);}

/* ---------- 2. texte et visuel ----------
   Deux colonnes réversibles. La classe --flip inverse l'ordre sans toucher au
   balisage, donc on peut alterner d'un bloc à l'autre. */
:root .ar-media{display:grid; grid-template-columns:1fr 1fr; gap:48px;
  align-items:center; margin-top:44px;}
:root .ar-media--flip .ar-media__visual{order:-1;}
:root .ar-media__body h2,
:root .ar-media__body h3{margin:0 0 18px;}
:root .ar-media__body p{margin:0 0 18px; font-size:var(--ar-fs-text); line-height:1.72;
  color:var(--ar-muted);}
:root .ar-media__body p:last-child{margin-bottom:0;}
:root .ar-media__body strong{color:var(--ar-teal); font-weight:700;}
:root .ar-media__visual{position:relative; overflow:hidden;
  border:1px solid var(--ar-border); border-radius:var(--ar-radius);
  background:var(--ar-surface-3);}
:root .ar-media__visual img{width:100%; height:100%; object-fit:cover; display:block;}

/* ---------- 3. vidéo ----------
   L'affiche s'affiche d'abord, la vidéo ne se charge qu'au clic : une page qui
   démarre une lecture toute seule coûte cher en données et agace. */
:root .ar-video{position:relative; margin-top:44px; overflow:hidden;
  aspect-ratio:16/9; border:1px solid var(--ar-border-strong);
  border-radius:var(--ar-radius); background:var(--ar-surface-3);}
:root .ar-video img,
:root .ar-video video,
:root .ar-video iframe{width:100%; height:100%; object-fit:cover; display:block;
  border:0;}
:root .ar-video__play{position:absolute; inset:0; display:grid; place-items:center;
  padding:0; cursor:pointer; background:rgba(1,16,15,.34); border:0;
  transition:background .3s ease;}
:root .ar-video__play:hover{background:rgba(1,16,15,.16);}
:root .ar-video__play span{display:grid; place-items:center; width:84px; height:84px;
  border-radius:50%; background:var(--ar-teal); color:#01201C;
  box-shadow:0 18px 44px -12px rgba(0,0,0,.8);
  transition:transform .3s var(--ar-ease);}
:root .ar-video__play:hover span{transform:scale(1.08);}
:root .ar-video.is-playing .ar-video__play{display:none;}
:root .ar-video__note{margin:12px 0 0; font-size:12.5px; color:var(--ar-soft);
  text-align:center;}

/* ---------- 4. rail de réalisations ----------
   Même mécanique que le rail d'avis : le module est unique, il suffit de poser
   la structure. */
:root .ar-works{margin-top:40px;}
:root .ar-work{flex:0 0 min(420px,82%); scroll-snap-align:start;
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--ar-border); border-radius:var(--ar-radius);
  background:var(--ar-surface-1);
  transition:border-color .35s ease, transform .35s ease;}
:root .ar-work:hover{border-color:var(--ar-border-active); transform:translateY(-4px);}
:root .ar-work__visual{aspect-ratio:16/10; overflow:hidden; background:var(--ar-surface-3);}
:root .ar-work__visual img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s var(--ar-ease);}
:root .ar-work:hover .ar-work__visual img{transform:scale(1.04);}
:root .ar-work__body{display:flex; flex-direction:column; flex:1; padding:26px 26px 28px;}
:root .ar-work__tag{display:inline-block; margin-bottom:12px; padding:5px 12px;
  border-radius:999px; background:var(--ar-surface-3); color:var(--ar-teal);
  font-family:var(--ar-font-title); font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; align-self:flex-start;}
:root .ar-work__title{margin:0 0 10px; font-size:var(--ar-fs-h3); line-height:1.25;}
:root .ar-work__text{margin:0 0 20px; font-size:var(--ar-fs-text); line-height:1.68;
  color:var(--ar-muted);}
:root .ar-work__meta{display:flex; gap:18px; flex-wrap:wrap; margin-top:auto;
  padding-top:18px; border-top:1px solid var(--ar-border);
  font-size:12.5px; color:var(--ar-soft);}
:root .ar-work__meta b{display:block; color:var(--ar-ink); font-size:14.5px;}

/* ---------- 5. accordéon ----------
   Bâti sur details et summary : l'ouverture, le clavier et l'accessibilité
   viennent du navigateur. Le script ne sert qu'à refermer les voisines. */
:root .ar-faq{margin-top:38px; display:grid; gap:12px;}
:root .ar-faq details{overflow:hidden;
  border:1px solid var(--ar-border); border-radius:16px;
  background:var(--ar-surface-1);
  transition:border-color .3s ease, background .3s ease;}
:root .ar-faq details[open]{border-color:var(--ar-border-active);
  background:var(--ar-surface-2);}
:root .ar-faq summary{position:relative; display:block; cursor:pointer;
  padding:22px 62px 22px 26px; list-style:none;
  font-family:var(--ar-font-title); font-size:var(--ar-fs-h3);
  line-height:1.35; color:var(--ar-ink);}
:root .ar-faq summary::-webkit-details-marker{display:none;}
:root .ar-faq summary::after{content:""; position:absolute; right:26px; top:50%;
  width:11px; height:11px; margin-top:-8px;
  border-right:2px solid var(--ar-teal); border-bottom:2px solid var(--ar-teal);
  transform:rotate(45deg); transition:transform .3s ease;}
:root .ar-faq details[open] summary::after{margin-top:-3px; transform:rotate(-135deg);}
:root .ar-faq__answer{padding:0 26px 24px; font-size:var(--ar-fs-text); line-height:1.72;
  color:var(--ar-muted);}
:root .ar-faq__answer p{margin:0 0 14px;}
:root .ar-faq__answer p:last-child{margin-bottom:0;}
:root .ar-faq__answer strong{color:var(--ar-teal); font-weight:700;}

/* ---------- 6. chiffres clés ---------- */
:root .ar-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
  margin-top:40px;}
:root .ar-stat{padding:30px 26px 32px; text-align:center;
  border:1px solid var(--ar-border); border-radius:var(--ar-radius);
  background:var(--ar-surface-1);}
:root .ar-stat__num{display:block; font-family:var(--ar-font-title);
  font-size:clamp(2.1rem,3.4vw,2.9rem); line-height:1; letter-spacing:-.02em;
  color:var(--ar-teal);}
:root .ar-stat:nth-child(2n) .ar-stat__num{color:var(--ar-pink);}
:root .ar-stat__label{display:block; margin-top:12px; font-size:16.5px;
  line-height:1.5; color:var(--ar-muted);}

/* ---------- 7. étapes numérotées ---------- */
:root .ar-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  margin-top:40px;}
:root .ar-steps--4{grid-template-columns:repeat(4,1fr);}
:root .ar-stepcard{position:relative; padding:28px 26px 30px;
  border:1px solid var(--ar-border); border-radius:var(--ar-radius);
  background:var(--ar-surface-1);}
:root .ar-stepcard__num{display:inline-grid; place-items:center; width:34px; height:34px;
  margin-bottom:16px; border-radius:50%;
  background:var(--ar-surface-3); color:var(--ar-teal);
  font:700 14px/1 var(--ar-font-title);}
:root .ar-stepcard:nth-child(2n) .ar-stepcard__num{color:var(--ar-pink);}
:root .ar-stepcard__title{margin:0 0 10px; font-size:var(--ar-fs-h3); line-height:1.3;}
:root .ar-stepcard__text{margin:0; font-size:var(--ar-fs-text); line-height:1.68;
  color:var(--ar-muted);}

/* ---------- 8. tableau ----------
   Il déborde horizontalement plutôt que de se tasser : sur un petit écran,
   mieux vaut faire glisser que rendre illisible. */
:root .ar-tablewrap{margin-top:40px; overflow-x:auto; scrollbar-width:thin;
  border:1px solid var(--ar-border); border-radius:var(--ar-radius);
  background:var(--ar-surface-1);}
:root .ar-table{width:100%; min-width:620px; border-collapse:collapse;
  font-size:var(--ar-fs-text);}
:root .ar-table th,
:root .ar-table td{padding:16px 20px; text-align:left;
  border-bottom:1px solid var(--ar-border);}
:root .ar-table thead th{position:sticky; top:0; z-index:1;
  background:var(--ar-surface-3); color:var(--ar-ink);
  font-family:var(--ar-font-title); font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;}
:root .ar-table tbody th{color:var(--ar-ink); font-weight:700;}
:root .ar-table td{color:var(--ar-muted);}
:root .ar-table tbody tr:last-child th,
:root .ar-table tbody tr:last-child td{border-bottom:0;}
:root .ar-table tbody tr:hover{background:var(--ar-surface-2);}
:root .ar-table .ar-yes{color:var(--ar-teal); font-weight:700;}
:root .ar-table .ar-no{color:var(--ar-soft);}

/* ---------- 9. galerie ---------- */
:root .ar-gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
  margin-top:40px;}
:root .ar-gallery figure{margin:0; overflow:hidden;
  border:1px solid var(--ar-border); border-radius:18px;
  background:var(--ar-surface-3); aspect-ratio:4/3;}
:root .ar-gallery figure:first-child{grid-column:span 2; grid-row:span 2;
  aspect-ratio:auto;}
:root .ar-gallery img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s var(--ar-ease), filter .5s ease;
  filter:saturate(.92);}
:root .ar-gallery figure:hover img{transform:scale(1.04); filter:saturate(1);}

/* ---------- 10. bandeau d'appel à l'action ---------- */
:root .ar-band{position:relative; overflow:hidden; margin-top:44px;
  padding:52px 44px; text-align:center;
  border:1px solid var(--ar-border-strong); border-radius:var(--ar-radius);
  background:
    radial-gradient(80% 140% at 20% 0%, rgba(53,196,157,.12), transparent 62%),
    radial-gradient(70% 130% at 84% 100%, rgba(240,71,155,.1), transparent 62%),
    var(--ar-surface-1);}
:root .ar-band__title{margin:0 auto 14px; max-width:24ch;
  font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.18;}
:root .ar-band p{margin:0 auto 26px; max-width:52ch; font-size:var(--ar-fs-text);
  line-height:1.66; color:var(--ar-muted);}

/* =============================================================================
   BLOCS ANIMÉS AU DÉFILEMENT
   Tous fonctionnent sur le même principe : un conteneur plus haut que l'écran,
   une scène collante à l'intérieur, et une variable --p qui vaut 0 à l'entrée
   et 1 à la sortie. Le script ne fait que calculer --p ; c'est le CSS qui
   décide de ce qu'on en fait. Aucun effet ne s'applique si le visiteur a
   demandé moins d'animations.
   ============================================================================= */

/* ---------- 11. vidéo qui prend l'écran ----------
   Elle démarre au tiers de la largeur et s'ouvre en grand. La section est plus
   haute que l'écran pour laisser au geste le temps d'exister. */
:root .ar-grow{position:relative; height:220vh;}
:root .ar-grow__stage{position:sticky; top:0; height:100vh;
  display:grid; place-items:center; padding-inline:var(--ar-gutter);}
:root .ar-grow__frame{position:relative; overflow:hidden;
  width:min(var(--ar-content), calc(46% + 54% * var(--p,0)));
  aspect-ratio:16/9;
  border:1px solid var(--ar-border-strong);
  border-radius:calc(26px - 14px * var(--p,0));
  background:var(--ar-surface-3);
  box-shadow:0 40px 90px -40px rgba(0,0,0,calc(.4 + .5 * var(--p,0)));}
:root .ar-grow__frame img,
:root .ar-grow__frame video{width:100%; height:100%; object-fit:cover; display:block;}
:root .ar-grow__legend{position:absolute; left:0; right:0; bottom:26px; text-align:center;
  font-size:14.5px; color:var(--ar-soft); opacity:calc(1 - var(--p,0));}

/* ---------- 12. vidéo qui déborde du texte ----------
   Deux colonnes au départ, une seule à l'arrivée : la colonne de texte se
   referme pendant que le visuel prend toute la largeur. */
:root .ar-widen{position:relative; height:240vh;}
:root .ar-widen__stage{position:sticky; top:0; min-height:100vh;
  display:grid; align-content:center; padding-block:80px;}
:root .ar-widen__grid{display:grid; gap:calc(44px * (1 - var(--p,0)));
  grid-template-columns:calc((48% - 22px) * (1 - var(--p,0))) 1fr;
  align-items:center;}
:root .ar-widen__text{min-width:0; opacity:calc(1 - var(--p,0) * 1.6);
  transform:translateX(calc(-40px * var(--p,0)));}
:root .ar-widen__text h2{margin:0 0 18px;}
:root .ar-widen__text p{margin:0 0 16px; font-size:var(--ar-fs-text); line-height:1.72;
  color:var(--ar-muted);}
:root .ar-widen__media{position:relative; overflow:hidden; aspect-ratio:16/9;
  border:1px solid var(--ar-border-strong);
  border-radius:calc(22px - 10px * var(--p,0));
  background:var(--ar-surface-3);}
:root .ar-widen__media img,
:root .ar-widen__media video{width:100%; height:100%; object-fit:cover; display:block;}

/* ---------- 13. galerie en parallaxe ----------
   Chaque image se déplace un peu plus lentement que la page. L'image est plus
   grande que son cadre, c'est ce qui donne la place au décalage. */
:root .ar-para{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  margin-top:40px;}
:root .ar-para figure{position:relative; margin:0; overflow:hidden;
  border:1px solid var(--ar-border); border-radius:20px;
  background:var(--ar-surface-3); aspect-ratio:3/4;}
:root .ar-para figure:nth-child(3n+2){margin-top:52px;}
:root .ar-para img{position:absolute; inset:-14% 0; width:100%; height:128%;
  object-fit:cover; display:block;
  transform:translate3d(0, calc(var(--y,0) * 1px), 0);
  will-change:transform;}

/* ---------- 14. chiffres qui se comptent ---------- */
:root .ar-count__num{font-variant-numeric:tabular-nums;}

/* ---------- 15. rail épinglé ----------
   Le rail sort de la page à droite et défile horizontalement pendant que la
   page descend. La hauteur de la section fabrique la distance parcourue. */
:root .ar-pin{position:relative;}
:root .ar-pin__stage{position:sticky; top:0; height:100vh; overflow:hidden;
  display:grid; align-content:center;}
:root .ar-pin__head{max-width:var(--ar-content); margin:0 auto 34px;
  padding-inline:var(--ar-gutter);}
:root .ar-pin__head .ar-title{margin:0;}
:root .ar-pin__track{display:flex; gap:22px; padding-inline:max(var(--ar-gutter),
  calc((100vw - var(--ar-content)) / 2));
  transform:translate3d(calc(var(--x,0) * -1px), 0, 0); will-change:transform;}
:root .ar-pin__card{flex:0 0 min(400px, 76vw); overflow:hidden;
  border:1px solid var(--ar-border); border-radius:var(--ar-radius);
  background:var(--ar-surface-1);}
:root .ar-pin__card img{width:100%; aspect-ratio:16/10; object-fit:cover; display:block;}
:root .ar-pin__body{padding:24px 26px 26px;}
:root .ar-pin__title{margin:0 0 10px; font-size:var(--ar-fs-h3); line-height:1.3;}
:root .ar-pin__text{margin:0; font-size:var(--ar-fs-text); line-height:1.68; color:var(--ar-muted);}
:root .ar-pin__bar{position:absolute; left:0; right:0; bottom:44px;
  max-width:var(--ar-content); margin-inline:auto;
  height:2px; background:var(--ar-border);}
:root .ar-pin__bar span{display:block; height:100%; width:calc(var(--p,0) * 100%);
  background:linear-gradient(90deg, var(--ar-teal), var(--ar-pink));}

/* ---------- 16. sommaire de page guide ----------
   Le sommaire reste à l'écran, la section lue s'allume, et l'adresse de la
   page suit. Chaque titre devient ainsi partageable. */
:root .ar-guide{display:grid; grid-template-columns:260px 1fr; gap:56px;
  align-items:start; margin-top:44px;}
:root .ar-toc{position:sticky; top:calc(var(--ar-head) + 28px);}
:root .ar-toc__title{margin:0 0 16px;
  font-family:var(--ar-font-title); font-size:11px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ar-soft);}
:root .ar-toc ol{margin:0; padding:0; list-style:none; counter-reset:toc;}
:root .ar-toc li{counter-increment:toc;}
:root .ar-toc a{position:relative; display:block; padding:9px 0 9px 30px;
  font-size:16.5px; line-height:1.45; color:var(--ar-muted);
  text-decoration:none; transition:color .25s ease;}
:root .ar-toc a::before{content:counter(toc,decimal-leading-zero);
  position:absolute; left:0; top:9px;
  font-family:var(--ar-font-title); font-size:11px; color:var(--ar-soft);
  transition:color .25s ease;}
:root .ar-toc a::after{content:""; position:absolute; left:-14px; top:12px; bottom:12px;
  width:2px; border-radius:2px; background:var(--ar-teal);
  transform:scaleY(0); transform-origin:top; transition:transform .3s ease;}
:root .ar-toc a:hover{color:var(--ar-ink);}
:root .ar-toc a.is-current{color:var(--ar-ink);}
:root .ar-toc a.is-current::before{color:var(--ar-teal);}
:root .ar-toc a.is-current::after{transform:scaleY(1);}
:root .ar-guide__body > section{scroll-margin-top:calc(var(--ar-head) + 28px);
  padding-bottom:44px;}
:root .ar-guide__body h2{margin:0 0 16px;}
:root .ar-guide__body p{margin:0 0 16px; font-size:var(--ar-fs-text); line-height:1.76;
  color:var(--ar-muted);}
:root .ar-guide__body p:last-child{margin-bottom:0;}
:root .ar-guide__body strong{color:var(--ar-teal); font-weight:700;}

@media(max-width:940px){
  :root .ar-guide{grid-template-columns:1fr; gap:26px;}
  :root .ar-toc{position:static;}
  :root .ar-toc ol{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;}
  :root .ar-toc li{flex:none;}
  :root .ar-toc a{padding:8px 14px; border:1px solid var(--ar-border);
    border-radius:999px; white-space:nowrap;}
  :root .ar-toc a::before,:root .ar-toc a::after{display:none;}
  :root .ar-toc a.is-current{border-color:var(--ar-teal); color:var(--ar-teal);}
}
@media(max-width:880px){
  :root .ar-grow{height:auto;}
  :root .ar-grow__stage{position:static; height:auto; padding-block:0;}
  :root .ar-grow__frame{width:100%; border-radius:16px;}
  :root .ar-grow__legend{position:static; margin-top:12px; opacity:1;}
  :root .ar-widen{height:auto;}
  :root .ar-widen__stage{position:static; min-height:0; padding-block:0;}
  :root .ar-widen__grid{grid-template-columns:1fr; gap:24px;}
  :root .ar-widen__text{opacity:1; transform:none;}
  :root .ar-para{grid-template-columns:repeat(2,1fr); margin-top:26px;}
  :root .ar-para figure:nth-child(3n+2){margin-top:0;}
  :root .ar-pin__stage{position:static; height:auto; overflow-x:auto;
    scroll-snap-type:x mandatory; padding-bottom:8px;}
  :root .ar-pin__track{transform:none;}
  :root .ar-pin__card{scroll-snap-align:start;}
  :root .ar-pin__bar{display:none;}
}
@media(max-width:620px){
  :root .ar-para{grid-template-columns:1fr;}
}

/* ---------- 17. page de texte légal ----------
   Une colonne étroite, parce qu'un texte juridique se lit en ligne courte, et
   une hiérarchie sobre. Rien de décoratif : ces pages doivent être claires. */
:root .ar-legal{max-width:760px; margin:40px auto 0;}
:root .ar-legal h2{margin:44px 0 14px; font-size:var(--ar-fs-h3); line-height:1.25;}
:root .ar-legal h2:first-child{margin-top:0;}
:root .ar-legal h3{margin:26px 0 10px; font-size:var(--ar-fs-h4,1.1rem); line-height:1.3;
  color:var(--ar-teal);}
:root .ar-legal p{margin:0 0 14px; font-size:var(--ar-fs-text); line-height:1.76; color:var(--ar-muted);}
:root .ar-legal ul{margin:0 0 18px; padding:0; list-style:none;}
:root .ar-legal li{position:relative; padding:6px 0 6px 20px; font-size:var(--ar-fs-text);
  line-height:1.7; color:var(--ar-muted);}
:root .ar-legal li::before{content:""; position:absolute; left:0; top:15px;
  width:6px; height:6px; border-radius:50%; background:var(--ar-teal);}
:root .ar-legal a{font:inherit; color:var(--ar-teal); text-decoration:underline;
  text-underline-offset:3px;}
/* le rappel du panneau de cookies, posé au fil du texte */
:root .ar-legal button{font:inherit; padding:0; border:0; background:none; cursor:pointer;
  color:var(--ar-teal); text-decoration:underline; text-underline-offset:3px;}
:root .ar-legal strong{color:var(--ar-ink); font-weight:700;}
:root .ar-legal__date{margin:0 0 34px; padding-bottom:22px;
  border-bottom:1px solid var(--ar-border);
  font-size:14.5px; color:var(--ar-soft);}
/* ce qu'il reste à renseigner, impossible à manquer et facile à retrouver */
/* ---------- petits écrans ---------- */
@media(max-width:1000px){
  :root .ar-stats{grid-template-columns:repeat(2,1fr);}
  :root .ar-steps,:root .ar-steps--4{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:880px){
  :root .ar-pagehead{padding-top:52px;}
  :root .ar-media{grid-template-columns:1fr; gap:26px; margin-top:26px;}
  :root .ar-media--flip .ar-media__visual{order:0;}
  :root .ar-video,:root .ar-works,:root .ar-faq,:root .ar-stats,:root .ar-steps,:root .ar-tablewrap,
  :root .ar-gallery,:root .ar-band{margin-top:26px;}
  :root .ar-gallery{grid-template-columns:repeat(2,1fr);}
  :root .ar-gallery figure:first-child{grid-column:span 2; grid-row:auto;
    aspect-ratio:4/3;}
  :root .ar-band{padding:34px 22px;}
}
@media(max-width:620px){
  :root .ar-stats,:root .ar-steps,:root .ar-steps--4{grid-template-columns:1fr;}
  :root .ar-legal{margin-top:26px;}
  :root .ar-legal h2{margin-top:34px;}
  :root .ar-work{flex:0 0 88%;}
  :root .ar-faq summary{padding:18px 52px 18px 20px;}
  :root .ar-faq__answer{padding:0 20px 20px;}
  :root .ar-video__play span{width:64px; height:64px;}
}
/* ---------- 18. page 404 ---------- */
/* Le principe : une page qui n'existe pas est dessinée comme un plan qu'on
   n'a jamais construit. Le site parle déjà ce langage dans son hero, on le
   reprend ici au lieu d'inventer un décor d'erreur qui ne ressemblerait à
   rien du reste. */
:root .ar-404{position:relative; display:grid; place-items:center;
  min-height:calc(100svh - var(--ar-head,0px)); overflow:hidden;}
:root .ar-404__grille{position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(53,196,157,.055) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(53,196,157,.055) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 45%, #000 40%, transparent 100%);}
:root .ar-404__inner{position:relative; display:grid; gap:12px; justify-items:center;
  text-align:center; padding-block:40px;}

:root .ar-404__plan{width:min(760px, 92%); height:auto; display:block;}
:root .ar-404__digit{fill:none; stroke:var(--ar-teal); stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:var(--len,900); stroke-dashoffset:var(--len,900);
  animation:ar-404-draw 1.5s cubic-bezier(.33,1,.68,1) forwards; animation-delay:var(--d,0s);}
:root .ar-404__digit--fant{stroke:rgba(53,196,157,.22); stroke-width:1.4;
  stroke-dasharray:5 7; stroke-dashoffset:0; animation:none;}
@keyframes ar-404-draw{to{stroke-dashoffset:0;}}
/* le point de rupture : c'est là que l'adresse s'est perdue */
:root .ar-404__rupture{fill:var(--ar-pink); animation:ar-404-bat 2.4s ease-in-out infinite;}
@keyframes ar-404-bat{0%,100%{opacity:1; r:5;} 50%{opacity:.45; r:7;}}
:root .ar-404__halo{fill:none; stroke:var(--ar-pink); stroke-width:1.2; opacity:.5;
  animation:ar-404-onde 2.4s ease-out infinite;}
@keyframes ar-404-onde{0%{r:6; opacity:.55;} 100%{r:26; opacity:0;}}

:root .ar-404__ref{margin:0; font:400 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.18em; color:rgba(53,196,157,.78);}
:root .ar-404__title{margin:14px 0 0; font-family:var(--ar-font-title);
  font-size:var(--ar-fs-h2); line-height:1.08; letter-spacing:-.02em;
  text-transform:uppercase; color:var(--ar-ink);}
:root .ar-404__text{margin:14px 0 0; max-width:52ch; font-size:var(--ar-fs-text); line-height:1.62;
  color:var(--ar-muted);}
:root .ar-404__actions{display:flex; gap:12px; flex-wrap:wrap; justify-content:center;
  margin-top:28px;}
:root .ar-404__links{display:flex; gap:10px 26px; flex-wrap:wrap; justify-content:center;
  margin-top:30px; padding-top:22px; border-top:1px solid var(--ar-border);
  width:min(560px, 100%);}
:root .ar-404__links a{font-size:15px; color:var(--ar-soft); transition:color .25s ease;}
:root .ar-404__links a:hover{color:var(--ar-teal);}

@media(max-width:620px){
  :root .ar-404__plan{width:100%;}
  :root .ar-404__links{gap:8px 18px;}
}
@media(prefers-reduced-motion:reduce){
  :root .ar-404__digit{stroke-dashoffset:0; animation:none;}
  :root .ar-404__rupture,:root .ar-404__halo{animation:none;}
  :root .ar-404__halo{display:none;}
}