/*
Theme Name: AR Marketing
Theme URI: https://amelieredouin.fr
Description: Thème enfant de Twenty Twenty-Five pour AR Marketing. Toute la mise
  en forme du site vit ici. Les valeurs de base (couleurs, échelle des titres,
  rayons, courbes) sont déclarées une seule fois dans :root : c'est le seul
  endroit à toucher pour faire évoluer l'ensemble du site.
Author: Amélie Redouin
Template: twentytwentyfive
Version: 1.1.0
Text Domain: armarketing
*/

/*
 * NOTE D'INTÉGRATION — le :root devant chaque sélecteur
 *
 * WordPress génère ses propres règles sous la forme « :root :where(...) ».
 * :root est une pseudo-classe : ces règles pèsent donc autant qu'une classe,
 * alors que :where() ne pèse rien. Sans ce préfixe, mes règles se retrouvaient
 * à égalité avec les siennes, et c'est l'ordre d'impression — non garanti — qui
 * tranchait. D'où les marges annulées et les titres remis en capitales.
 *
 * Le préfixe est appliqué à toutes les règles d'un coup : leur hiérarchie entre
 * elles est donc exactement celle de la maquette, elles passent simplement
 * toutes au-dessus de ce que WordPress génère. C'est ce qui permet de n'avoir
 * aucun !important dans ce fichier, hors le cas de la citation.
 */

/* ---------- polices ---------- */
/* Les fichiers sont réduits aux seuls caractères latins et à la ponctuation
   utile, puis compressés au format woff. Les originaux complets restent dans
   le dossier fonts/ à la racine du projet. Deux fichiers au lieu de quatre,
   52 Ko au lieu de 388 : c'est la première chose que le navigateur attend
   avant d'afficher un texte, donc la première à alléger. */
@font-face{
  font-family:"Berlin Sans FB Demi"; font-weight:700; font-style:normal; font-display:swap;
  src:url("assets/fonts/brlnsdb.woff") format("woff");
}
/* League Spartan en variable : un seul fichier couvre toutes les graisses de
   100 à 900, au lieu d'un fichier par graisse. */
@font-face{
  font-family:"League Spartan"; font-weight:100 900; font-style:normal; font-display:swap;
  src:url("assets/fonts/leaguespartan.woff") format("woff");
}

:root{
  --ar-bg:#011717; --ar-surface-1:#082C27; --ar-surface-2:#0C3B34; --ar-surface-3:#04211F;
  --ar-grid-color:rgba(10,58,55,.55); --ar-grid-lit:rgba(53,196,157,.6);
  --ar-grid-cell:calc(100vw / 22.42); --ar-grid-line:5%;
  --ar-border:rgba(234,245,241,.11); --ar-border-strong:rgba(234,245,241,.20);
  --ar-border-active:rgba(53,196,157,.45);
  --ar-ink:#F2FAF7; --ar-text:#C9DCD6; --ar-muted:#9FB6AF; --ar-soft:#8EA29C;
  /* Rose de texte : le rose de marque descend à 4,34 de contraste sur le
     fond des cartes, en deçà des 4,5 exigés. Celui-ci passe partout, et le
     rose d'origine reste pour les aplats, les pastilles et les boutons. */
  --ar-teal:#35C49D; --ar-pink:#F0479B; --ar-pink-text:#F371B2; --ar-pink-deep:#A8215F; --ar-teal-deep:#0E5D4B;
  /* Deux piles distinctes. Le Demi n'existe qu'en graisse 700 : tant qu'il
     était en tête de la pile unique, tous les paragraphes du site étaient
     rendus en gras, d'où le manque de lisibilité. */
  /* Le texte courant passe en League Spartan : plus ouverte et plus lisible en
     petites tailles que le Berlin Sans, qui reste la signature des titres. */
  --ar-font:"League Spartan","Berlin Sans FB","Poppins",system-ui,sans-serif;
  --ar-font-title:"Berlin Sans FB Demi","Berlin Sans FB","Poppins",system-ui,sans-serif;
  --ar-font-quote:"Playfair Display",Georgia,"Iowan Old Style","Times New Roman",serif;
  /* largeur de contenu : elle s'élargit sur les grands écrans au lieu de
     laisser des marges énormes de chaque côté */
  --ar-content:min(1280px, 92vw); --ar-gutter:24px; --ar-radius:20px;
  --ar-ease:cubic-bezier(.2,.7,.2,1); --ar-head:0px;

  /* Échelle des titres. Deux tailles seulement pour le niveau 3 : celle d'un
     titre de bloc, qui ouvre une zone de contenu, et celle d'un titre de carte,
     qui vit à l'intérieur d'une grille. Aucun niveau n'est plus gros que celui
     qui le précède. */
  --ar-fs-h1:clamp(2.2rem,5.2vw,4.6rem);
  --ar-fs-h2:clamp(1.8rem,3.5vw,3.1rem);
  --ar-fs-h3:clamp(1.18rem,1.6vw,1.5rem);
  /* le libellé d'un onglet n'est pas un titre mais une commande : il a sa
     propre taille, volontairement en dessous des titres de contenu */
  --ar-fs-label:clamp(1.02rem,1.25vw,1.18rem);
  /* Le texte courant : une seule valeur pour tout le site. Chaque
     paragraphe, chaque élément de liste, chaque cellule de tableau s'y
     réfère. C'est le seul endroit à changer pour agrandir ou réduire le
     texte partout, sans avoir à courir après des valeurs éparpillées. */
  --ar-fs-text:18px;
  /* L'espace entre l'en-tête d'une section et son contenu. Deux valeurs :
     après une accroche, et après un titre seul. La seconde vaut la première
     plus la place qu'aurait occupée l'accroche, 18 px de marge et une ligne
     de 30 px, pour que toutes les sections respirent pareil. */
  --ar-espace-bloc:56px;
  --ar-espace-titre:104px;
}
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;} html{scroll-behavior:smooth;}
body{
  /* League Spartan a un œil large et un chasse serré : un demi-point de moins
     et un cheveu d'interlettrage la rendent plus reposante en paragraphe. */
  font-family:var(--ar-font); font-weight:400; letter-spacing:.006em;
  color:var(--ar-text);
  background-color:var(--ar-bg);
  background-image:
    linear-gradient(90deg,  var(--ar-grid-color) 0 var(--ar-grid-line), transparent var(--ar-grid-line)),
    linear-gradient(180deg, var(--ar-grid-color) 0 var(--ar-grid-line), transparent var(--ar-grid-line));
  background-size:var(--ar-grid-cell) var(--ar-grid-cell);
  background-repeat:repeat; background-attachment:fixed;
}
/* height:auto est indispensable maintenant que chaque image porte ses
   dimensions réelles : sans lui, une image rétrécie par max-width
   garderait la hauteur déclarée et se déformerait. */
img{max-width:100%; height:auto; display:block;}
/* picture n'est qu'un aiguillage de format : display:contents le rend
   transparent pour la mise en page, l'image reste l'enfant direct de ce
   qui l'entoure et toutes les règles écrites pour elle continuent de
   s'appliquer. */
picture{display:contents;}
/* Les décors portent l'attribut hidden : un mode lecture les écarte, et sans
   feuille de style ils ne s'affichent pas. Ici on leur rend leur display, donc
   sur le site rien ne change. C'est la seule règle du fichier dont l'ordre
   compte : elle doit rester au-dessus des règles de chaque décor. */
:root .ar-lamp[hidden],:root .ar-glow[hidden],:root .ar-hero__deco[hidden],:root .ar-panel__media[hidden],
:root .ar-args__thread[hidden],:root .ar-argdeco[hidden],:root .ar-argmark[hidden]{display:block;}
:root .ar-footer__mark[hidden]{display:flex;}
/* Classes produites par WordPress à partir de la palette du thème et des
   réglages d'alignement. On les redéclare ici pour que la maquette montre
   exactement ce que le site affichera. */
.has-vert-color{color:var(--ar-teal);}
.has-rose-color{color:var(--ar-pink-text);}
.has-text-align-left{text-align:left;}
.has-text-align-center{text-align:center;}
.has-text-align-right{text-align:right;}
h1,h2,h3,h4{color:var(--ar-ink); margin:0; font-family:var(--ar-font-title);}
/* tout ce qui doit rester dessiné au Demi : libellés, chiffres, signatures */
:root .ar-btn,:root .ar-nav,:root .ar-tab__badge,:root .ar-review__who b,
:root .ar-portrait__sign b,:root .ar-slider__btn,:root .ar-waycard__num,:root .ar-footer h3,
:root .ar-footer__baseline,:root .ar-trust{font-family:var(--ar-font-title);}
:root main,:root .ar-header,:root .ar-footer{position:relative; z-index:1;}

/* =============================================================================
   REMISE À ZÉRO DE L'HÉRITAGE WORDPRESS
   Le thème parent applique sa propre typographie et ses propres espacements aux
   titres, listes, paragraphes et boutons. On les annule dans nos zones, et
   seulement là. Tout passe par :where(), qui ne pèse rien : nos règles de
   composant reprennent donc la main sans surenchère.
   ============================================================================= */
:root :where(main,.ar-header,.ar-footer) :where(h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dd,figure,figcaption,blockquote,article,aside,section){
  margin:0; padding:0; max-width:none;
  text-transform:none; letter-spacing:normal; font-style:normal;
}
:root :where(main,.ar-header,.ar-footer) :where(ul,ol){list-style:none;}
/* Les liens, eux, ne peuvent pas passer par :where() seul. WordPress leur
   applique sa propre typographie avec une règle qui pèse une classe, et un
   :where() ne pèse rien : à égalité, c'est l'ordre d'écriture qui tranchait,
   et un lien au fil d'un paragraphe ressortait plus gros que le texte autour.
   En gardant le sélecteur a hors du :where(), la règle pèse un cheveu de plus
   et un lien redevient ce qu'il doit être : du texte comme le reste. */
:root :where(main,.ar-header,.ar-footer) a{
  font:inherit; letter-spacing:inherit; text-decoration:none; color:inherit;
}
:root :where(main,.ar-header,.ar-footer) :where(button){
  font:inherit; color:inherit; background:none; border:0; border-radius:0;
  text-transform:none; letter-spacing:normal;
}
:root .ar-header{z-index:100;}

body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- ambiance ---------- */
:root .ar-lamp{position:fixed; left:0; top:0; width:820px; height:820px; margin:-410px 0 0 -410px;
  pointer-events:none; z-index:0; opacity:0; transition:opacity .4s ease; will-change:transform;
  -webkit-mask-image:radial-gradient(circle closest-side,#000 0%,rgba(0,0,0,.5) 42%,transparent 72%);
          mask-image:radial-gradient(circle closest-side,#000 0%,rgba(0,0,0,.5) 42%,transparent 72%);}
:root .ar-lamp.is-on{opacity:1;}
:root .ar-lamp__mesh{position:absolute; left:0; top:0; width:100vw; height:100vh; will-change:transform;
  background-image:
    linear-gradient(90deg,  var(--ar-grid-lit) 0 var(--ar-grid-line), transparent var(--ar-grid-line)),
    linear-gradient(180deg, var(--ar-grid-lit) 0 var(--ar-grid-line), transparent var(--ar-grid-line));
  background-size:var(--ar-grid-cell) var(--ar-grid-cell); background-repeat:repeat;}
:root .ar-glow{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  opacity:0; transition:opacity .45s ease;}
:root .ar-glow.is-on{opacity:1;}
:root .ar-glow span{position:absolute; left:0; top:0; display:block; border-radius:50%; will-change:transform;}
:root .ar-glow__teal{width:50vw; height:50vw; margin:-25vw 0 0 -25vw;
  background:radial-gradient(circle,rgba(53,196,157,.20) 0%,rgba(53,196,157,.08) 38%,rgba(1,23,23,0) 68%);}
:root .ar-glow__pink{width:38vw; height:38vw; margin:-19vw 0 0 -19vw;
  background:radial-gradient(circle,rgba(240,71,155,.18) 0%,rgba(240,71,155,.07) 38%,rgba(1,23,23,0) 68%);}

/* ---------- nappes de profondeur ---------- */
:root .ar-tone{position:relative;}
:root .ar-tone > *{position:relative; z-index:1;}
:root .ar-tone::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;}
:root .ar-tone--deep::before{background:linear-gradient(180deg,
  rgba(0,8,8,0) 0%, rgba(0,8,8,.07) 13%, rgba(0,8,8,.18) 30%, rgba(0,8,8,.26) 50%,
  rgba(0,8,8,.18) 70%, rgba(0,8,8,.07) 87%, rgba(0,8,8,0) 100%);}
:root .ar-tone--deepest::before{background:linear-gradient(180deg,
  rgba(0,8,8,0) 0%, rgba(0,8,8,.10) 12%, rgba(0,8,8,.26) 30%, rgba(0,8,8,.38) 50%,
  rgba(0,8,8,.26) 70%, rgba(0,8,8,.10) 88%, rgba(0,8,8,0) 100%);}
:root .ar-tone--lift::before{background:radial-gradient(130% 78% at 50% 50%,
  rgba(53,196,157,.055) 0%, rgba(53,196,157,.022) 45%, transparent 74%);}

/* ---------- layout ---------- */
:root .ar-section{padding-block:88px;}
:root .ar-section--tight{padding-block:60px;}
:root .ar-container{max-width:var(--ar-content); margin-inline:auto; padding-inline:var(--ar-gutter);}
/* Les titres respirent : sur grand écran ils montent nettement plus haut, et
   leur largeur de ligne suit au lieu de les casser en petites colonnes. */
:root .ar-title{margin:0; font-size:var(--ar-fs-h2); line-height:1.11;
  max-width:36ch; text-wrap:balance;
  text-transform:uppercase; letter-spacing:-.015em;}
:root .ar-lead{margin:18px 0 0; font-size:var(--ar-fs-text); line-height:1.66;
  color:var(--ar-muted); max-width:68ch; text-wrap:pretty;}
:root .ar-accent{color:var(--ar-pink);} :root .ar-accent-teal{color:var(--ar-teal);}
:root .ar-centered{text-align:center;}
:root .ar-centered .ar-title,:root .ar-centered .ar-lead{margin-inline:auto;}
:root .ar-section--space{padding-top:120px;}

/* ---------- boutons ---------- */
/* Une seule hauteur de bouton sur toute la page, celle de l'en-tête. Un bouton
   qui change de gabarit d'une section à l'autre donne l'impression que la page
   a été assemblée par plusieurs mains. */
:root .ar-btn{display:inline-flex; align-items:center; gap:11px; padding:9px 24px;
  border:1px solid transparent; border-radius:999px; text-decoration:none;
  font:700 14.5px/1 var(--ar-font-title); white-space:nowrap; cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background .25s ease, border-color .25s ease, color .25s ease;}
:root .ar-btn--arrow{padding-right:9px;}
:root .ar-btn--arrow::after{content:"→"; flex:none; display:grid; place-items:center;
  width:28px; height:28px; border-radius:50%; font-size:15px; transition:transform .28s var(--ar-ease);}
:root .ar-btn:hover{transform:translateY(-2px);} :root .ar-btn--arrow:hover::after{transform:translateX(4px);}
:root .ar-btn--pink{background:var(--ar-pink); border-color:var(--ar-pink); color:#fff;}
:root .ar-btn--pink.ar-btn--arrow::after{background:var(--ar-pink-deep); color:#FFE3F0;}
:root .ar-btn--teal{background:var(--ar-teal); border-color:var(--ar-teal); color:#01201C;}
:root .ar-btn--teal.ar-btn--arrow::after{background:var(--ar-teal-deep); color:#CFF3E7;}
/* Puce d'invitation à descendre. Ce n'est pas un appel à l'action : il n'y a
   rien à convertir ici, juste à signaler qu'il se passe des choses plus bas. */
:root .ar-nudge{display:grid; place-items:center; width:54px; height:54px; margin-inline:auto;
  color:var(--ar-teal); text-decoration:none;}
:root .ar-nudge__ring{display:grid; place-items:center; width:46px; height:46px;
  border:1px solid rgba(53,196,157,.4); border-radius:50%;
  transition:border-color .3s ease, background .3s ease, transform .3s ease;
  animation:ar-nudge 2.6s ease-in-out infinite;}
:root .ar-nudge:hover .ar-nudge__ring{border-color:var(--ar-teal);
  background:rgba(53,196,157,.1); transform:scale(1.06); animation-play-state:paused;}
@keyframes ar-nudge{
  0%,100%{ transform:translateY(0); }
  45%{ transform:translateY(7px); }
  70%{ transform:translateY(0); }
}

/* ---------- en-tête ---------- */
:root .ar-header{position:sticky; top:0;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  width:calc(100% - 40px); max-width:1220px; margin:14px auto; padding:8px 6px;
  background:transparent; border:1px solid transparent; border-radius:16px;
  transition:background .3s ease, box-shadow .3s ease, padding .3s ease, border-color .3s ease;}
:root .ar-header.is-stuck{background:#021A19; border-color:rgba(53,196,157,.2);
  box-shadow:0 10px 34px rgba(0,0,0,.5); padding:8px 20px;}
/* Le logo est posé en fond plutôt qu'en balise image : le chemin est alors
   relatif à cette feuille, donc au thème, et reste valide quel que soit le
   domaine. C'est ce qui permet à l'en-tête d'être une partie de modèle
   modifiable, sans une ligne de PHP. */
:root .ar-logo{display:block; width:168px; height:34px; margin:0;
  background:url("assets/medias/logo-ar-marketing.svg") left center / contain no-repeat;}
:root .ar-logo span{position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;}
:root .ar-nav{display:flex; align-items:center; gap:26px; font-size:16.5px; font-weight:700;}
:root .ar-nav a:not(.ar-btn){position:relative; padding:5px 0; color:var(--ar-ink);
  text-decoration:none; transition:color .25s ease;}
:root .ar-nav a:not(.ar-btn)::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--ar-teal); transform:scaleX(0); transform-origin:left; transition:transform .28s ease;}
:root .ar-nav a:not(.ar-btn):hover{color:var(--ar-teal);}
:root .ar-nav a:not(.ar-btn):hover::after{transform:scaleX(1);}
:root .ar-burger{display:none; width:44px; height:44px; padding:0; cursor:pointer;
  background:var(--ar-surface-1); border:1px solid var(--ar-border-strong); border-radius:50%;
  color:var(--ar-ink); place-items:center;}
:root .ar-burger span{display:block; width:17px; height:1.6px; background:currentColor; border-radius:2px;
  transition:transform .3s var(--ar-ease), opacity .2s ease;}
:root .ar-burger span + span{margin-top:4.5px;}
/* calée sur la position qu'occupait le hamburger, au pixel près */
:root .ar-navclose{display:none; position:absolute; top:20px; right:24px;
  width:44px; height:44px; padding:0; place-items:center;
  color:var(--ar-ink); background:rgba(255,255,255,.05);
  border:1px solid var(--ar-border); border-radius:50%; cursor:pointer;
  transition:color .25s ease, border-color .25s ease, background .25s ease;}
:root .ar-navclose:hover{color:var(--ar-teal); border-color:var(--ar-teal);
  background:rgba(53,196,157,.1);}
/* menu ouvert : le bouton hamburger s'efface. La fermeture passe par la croix
   du panneau, sinon les deux se superposent et l'une dépasse de l'autre. */
:root .ar-burger.is-open{opacity:0; pointer-events:none;}
@media(max-width:880px){
  :root .ar-burger{display:grid; position:relative; z-index:100;}
  :root .ar-navclose{display:grid;}
  :root .ar-nav{position:fixed; inset:0; z-index:99; flex-direction:column; justify-content:center;
    gap:26px; background:#021A19; font-size:22px;
    opacity:0; visibility:hidden; transform:translateY(-12px);
    transition:opacity .3s ease, transform .35s var(--ar-ease), visibility .3s;}
  :root .ar-nav.is-open{opacity:1; visibility:visible; transform:none;}
  :root .ar-nav a:not(.ar-btn)::after{display:none;}
  :root .ar-logo{width:188px; height:38px;}
}

/* ---------- hero ---------- */
:root .ar-hero{position:relative; min-height:calc(100vh - var(--ar-head));
  display:grid; align-content:center; justify-items:center; text-align:center;
  padding-inline:var(--ar-gutter);}
:root .ar-hero > *{position:relative; z-index:3; width:100%; max-width:var(--ar-content);
  margin-inline:auto; opacity:var(--ar-hero-opacity,1);
  transform:translateY(var(--ar-hero-shift,0px));}
/* Arrivée du hero. Trois précautions pour que ce soit fluide et pas haché :
   une courbe douce sans à-coup de fin, la couche préparée avant le départ avec
   un petit retard au démarrage le temps que les polices soient
   posées, sinon le remplacement de la police de secours se voit en plein vol.
   On anime translate et non transform, déjà occupée par l'effacement au
   défilement, et le remplissage backwards ne s'applique que pendant le délai :
   une fois jouée, l'animation rend la main aux valeurs pilotées par le scroll. */
/* Le titre, l'accroche et les boutons ne partent PAS d'une opacité nulle.
   Chrome écarte du calcul du Largest Contentful Paint tout élément dessiné à
   opacité zéro. Comme le titre du hero est le plus grand élément du premier
   écran et qu'il était masqué le temps de son apparition, Lighthouse ne
   trouvait aucun candidat sur mobile et rendait « Erreur » au lieu d'une
   mesure : la note de performance s'effondrait alors que la page était
   rapide. Sur ordinateur, sans bridage du processeur, l'apparition se
   terminait dans la fenêtre d'analyse, d'où les 100 %.

   Un départ à 40 % garde l'apparition à l'œil et rend l'élément éligible dès
   la première image dessinée. */
@keyframes ar-hero-in{
  from{opacity:.4; translate:0 10px;}
  to  {opacity:1; translate:0 0;}
}
:root .ar-hero__title,:root .ar-hero__lead,:root .ar-hero__actions{
  animation:ar-hero-in 1.1s cubic-bezier(.33,1,.68,1) backwards;}
:root .ar-hero__title{animation-delay:.15s;}
:root .ar-hero__lead{animation-delay:.3s;}
:root .ar-hero__actions{animation-delay:.45s;}

:root .ar-hero__title{margin:0 auto 24px; max-width:23ch; font-size:var(--ar-fs-h1);
  line-height:1.04; letter-spacing:-.02em; text-transform:uppercase; text-wrap:balance;}
/* L'accroche prend la largeur du titre plutôt qu'une mesure de lecture à elle.
   Sa largeur est donc exprimée dans l'unité du titre. Le facteur vient des
   chasses réelles de la fonte : le titre du hero est plafonné à 23 caractères,
   et le zéro du Berlin Sans Demi mesure 0,63 cadratin, soit 14,5 fois sa taille
   au maximum. Les deux blocs grandissent et rapetissent ensemble. */
:root .ar-hero__lead{margin:0 auto 36px; width:100%;
  max-width:min(100%, calc(var(--ar-fs-h1) * 14));
  font-size:var(--ar-fs-text);
  line-height:1.55; color:var(--ar-text);}
:root .ar-hero__actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
:root .ar-lit-teal{color:var(--ar-teal);} :root .ar-lit-pink{color:var(--ar-pink);}
:root .ar-is-lit .ar-lit-teal,:root .ar-is-lit .ar-lit-pink{color:transparent;
  -webkit-background-clip:text; background-clip:text; background-repeat:no-repeat;
  transition:color .5s ease;}
/* une fois le mot survolé, sa couleur reste pleine : la lampe l'a révélé,
   il n'a plus besoin d'elle */
:root .ar-is-lit .ar-lit-teal.is-revealed{color:var(--ar-teal);}
:root .ar-is-lit .ar-lit-pink.is-revealed{color:var(--ar-pink);}
:root .ar-is-lit .ar-lit-teal{background-image:radial-gradient(circle 260px at var(--ar-lit-x,-999px) var(--ar-lit-y,-999px),
  var(--ar-teal) 0%,var(--ar-teal) 30%,var(--ar-ink) 74%);}
:root .ar-is-lit .ar-lit-pink{background-image:radial-gradient(circle 260px at var(--ar-lit-x,-999px) var(--ar-lit-y,-999px),
  var(--ar-pink) 0%,var(--ar-pink) 30%,var(--ar-ink) 74%);}

:root .ar-hero__deco{position:absolute; inset:0; z-index:2; max-width:none; margin:0;
  pointer-events:none; overflow:hidden;}
:root .ar-hero__blueprint{position:absolute; inset:0; width:100%; height:100%;}
:root .ar-bp-line{stroke:rgba(53,196,157,.28); stroke-width:1; fill:none;}
:root .ar-bp-soft{stroke:rgba(234,245,241,.09); stroke-width:1; fill:none;}
:root .ar-bp-fill{fill:rgba(53,196,157,.055);} :root .ar-bp-fill--pink{fill:rgba(240,71,155,.05);}
:root .ar-bp-mark{stroke:rgba(53,196,157,.55); stroke-width:1.4; fill:none;}
:root .ar-bp-dash{stroke:rgba(53,196,157,.20); stroke-width:1; stroke-dasharray:4 6; fill:none;}
:root .ar-bp-dot{fill:var(--ar-teal);}
:root .ar-bp-text{fill:var(--ar-soft); letter-spacing:.14em;
  font:400 9.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;}
:root .ar-bp-text--teal{fill:rgba(53,196,157,.72);}
:root .ar-bp-drift{animation:ar-bp-drift 16s ease-in-out infinite alternate;}
:root .ar-bp-drift--b{animation-duration:21s; animation-direction:alternate-reverse;}
@keyframes ar-bp-drift{from{transform:translate(0,0);} to{transform:translate(9px,-7px);}}
:root .ar-bp-sweep{stroke:rgba(53,196,157,.5); stroke-width:1.2; fill:none;
  stroke-dasharray:180; stroke-dashoffset:180; animation:ar-bp-sweep 6s var(--ar-ease) infinite;}
@keyframes ar-bp-sweep{0%{stroke-dashoffset:180;opacity:1;} 35%{stroke-dashoffset:0;}
  78%{stroke-dashoffset:0;opacity:1;} 100%{stroke-dashoffset:0;opacity:0;}}
/* Le décor entre après le texte. Deux animations cohabitent sur le même
   élément : le flottement, qui tourne en boucle sur la propriété translate, et
   l'arrivée, qui ne touche qu'à opacity et scale. Deux propriétés distinctes,
   donc aucune ne se marche dessus. L'opacité de fin passe par une variable
   pour retrouver exactement la valeur déclarée, sans ressaut. */
@keyframes ar-deco-in{
  from{opacity:0; scale:.94;}
  to  {opacity:var(--ar-thumb-op,1); scale:1;}
}
/* Le cadre est porté par le dessin lui-même, pas par la figure qui l'entoure.
   La raison est technique : une figure à la fois tournée, animée et rognée aux
   angles arrondis oblige le navigateur à dessiner son contenu dans une surface
   intermédiaire, qu'il fabrique à basse définition avant de la faire pivoter.
   C'est ce ré-échantillonnage qui rendait les captures molles. En laissant la
   figure sans rognage, le dessin est tracé directement à la définition de
   l'écran. */
:root .ar-thumb{position:absolute; margin:0; width:clamp(128px,12.5vw,186px);
  overflow:visible;
  opacity:var(--ar-thumb-op,1);
  animation-name:ar-thumb-float, ar-deco-in;
  animation-duration:15s, 1.1s;
  animation-timing-function:ease-in-out, cubic-bezier(.33,1,.68,1);
  animation-iteration-count:infinite, 1;
  animation-direction:alternate, normal;
  animation-fill-mode:none, backwards;}
:root .ar-thumb .ar-scene{width:100%; aspect-ratio:4/3; display:block;
  border:1px solid rgba(234,245,241,.14); border-radius:12px;
  background:var(--ar-surface-3); box-shadow:0 18px 50px rgba(0,0,0,.5);}
/* La teinte des vignettes est cuite dans les fichiers plutôt qu'appliquée en
   filtre CSS : un filtre force le navigateur à rastériser le dessin dans une
   couche à part, souvent en deçà de la densité de l'écran, et c'est ce qui
   rendait les captures molles. */
:root .ar-thumb--1{left:3.5%; top:21%; rotate:-4deg;
  animation-duration:13s,1.1s; animation-delay:0s,.78s;}
:root .ar-thumb--2{right:4.5%; top:16%; rotate:3.5deg;
  animation-duration:17s,1.1s; animation-delay:0s,.92s;
  animation-direction:alternate-reverse, normal;}
:root .ar-thumb--3{right:10.5%; bottom:11%; rotate:-2.5deg;
  animation-duration:15s,1.1s; animation-delay:0s,1.06s;}
@keyframes ar-thumb-float{from{translate:0 0;} to{translate:0 -18px;}}
:root .ar-picto{position:absolute; color:rgba(53,196,157,.40);
  animation-name:ar-picto-float, ar-deco-in;
  animation-duration:14s, 1.1s;
  animation-timing-function:ease-in-out, cubic-bezier(.33,1,.68,1);
  animation-iteration-count:infinite, 1;
  animation-direction:alternate, normal;
  animation-fill-mode:none, backwards;}
:root .ar-picto::after{content:""; position:absolute; inset:-14px; border-radius:50%;
  border:1px dashed rgba(53,196,157,.13);}
/* la taille des pictos vient du style et non de l'attribut : sans feuille de
   style ils mesurent zéro, et le mode lecture les ignore */
:root .ar-picto svg{width:44px; height:44px;}
:root .ar-picto--3 svg{width:42px; height:42px;}
:root .ar-picto--pink{color:rgba(240,71,155,.36);}
:root .ar-picto--1{left:6.5%; top:63%; animation-duration:12s,1.1s; animation-delay:0s,1.18s;}
:root .ar-picto--2{left:12%; top:8%; animation-duration:18s,1.1s; animation-delay:0s,1.28s;
  animation-direction:alternate-reverse, normal;}
:root .ar-picto--3{right:4%; top:52%; animation-duration:15s,1.1s; animation-delay:0s,1.38s;}
@keyframes ar-picto-float{from{transform:translate(0,0) rotate(-3deg);}
  to{transform:translate(11px,-15px) rotate(3deg);}}
/* Sous 1200 px il n'y a plus la place de faire flotter trois vignettes autour
   du texte : elles se rangent dans les angles, plus petites, et reculent
   derrière le contenu. Le hero reste habité au lieu de se vider. */
@media(max-width:1200px){
  :root .ar-thumb{width:clamp(104px,15vw,150px); z-index:1; --ar-thumb-op:.9;}
  :root .ar-thumb--1{left:-3%;  top:11%;    rotate:-5deg;}
  :root .ar-thumb--2{right:-3%; top:8%;     rotate:4deg;}
  :root .ar-thumb--3{right:6%;  bottom:12%; rotate:-3deg; left:auto;}
  :root .ar-picto--1{left:8%; top:70%;}
  :root .ar-picto--2{left:5%;  top:4%;}
  :root .ar-picto--3{right:7%; top:46%;}
}
@media(max-width:880px){
  :root .ar-thumb{width:clamp(92px,26vw,132px); --ar-thumb-op:.82;}
  :root .ar-thumb--1{left:-8%;  top:9%;}
  :root .ar-thumb--2{right:-8%; top:7%;}
  :root .ar-thumb--3{left:auto; right:5%; bottom:8%; rotate:2deg;}
  :root .ar-picto svg{width:34px; height:34px;}
  :root .ar-picto--1{left:4%; top:74%;}
  :root .ar-picto--2{left:3%; top:3%;}
  :root .ar-picto--3{right:4%; top:52%;}
}
@media(max-width:520px){
  :root .ar-thumb--3{display:none;}
  :root .ar-picto--3{display:none;}
}
@media(max-width:880px){:root .ar-hero__blueprint{opacity:.55;}}

/* ---------- logos clients ---------- */
:root .ar-marquee{overflow:hidden; padding:24px 0;
  border-block:1px solid var(--ar-border); background:var(--ar-surface-3);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);}
:root .ar-marquee__track{display:flex; align-items:center; gap:56px; width:max-content;
  animation:ar-slide 64s linear infinite;}
:root .ar-marquee:hover .ar-marquee__track{animation-play-state:paused;}
/* Chaque logo est livré dans un gabarit identique, l'encre recentrée et mise à
   l'échelle sur sa surface plutôt que sur son cadre : ils reposent donc tous
   sur le même axe, quelle que soit leur forme d'origine. */
:root .ar-marquee__item{flex:none; display:flex; align-items:center; justify-content:center;}
:root .ar-marquee__item img{width:200px; height:auto;
  filter:brightness(0) invert(1); opacity:.46; transition:opacity .3s ease;}
:root .ar-marquee__item img:hover{opacity:1;}
@keyframes ar-slide{to{transform:translateX(-50%);}}

/* L'origine des projets, annoncée avant les logos. Mieux vaut l'assumer soi-même
   que de laisser le visiteur la découvrir : c'est ce qui rend les logos
   crédibles plutôt que suspects. */
:root .ar-trust{margin:0 auto 26px; padding-inline:var(--ar-gutter);
  text-align:center; font-size:var(--ar-fs-text); line-height:1.6;
  color:var(--ar-soft);}


/* ---------- onglets ---------- */
:root .ar-tabs{display:block; margin-top:var(--ar-espace-titre);}
:root .ar-tablist{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
:root .ar-tab{position:relative; overflow:hidden; padding:22px; text-align:left;
  border:1px solid var(--ar-border); border-radius:18px; background:var(--ar-surface-3);
  font-family:inherit; cursor:pointer;
  transition:background .25s ease, border-color .25s ease, transform .25s ease;}
:root .ar-tab::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--ar-pink); transform:scaleY(0); transform-origin:top; transition:transform .28s ease;}
:root .ar-tab:hover::before,:root .ar-tab.is-active::before{transform:scaleY(1);}
:root .ar-tab:hover{background:var(--ar-surface-1); border-color:var(--ar-border-strong); transform:translateY(-3px);}
:root .ar-tab.is-active{background:var(--ar-surface-2); border-color:var(--ar-border-active); transform:translateY(-4px);}
:root .ar-tab__badge{display:inline-grid; place-items:center; width:34px; height:34px; margin-bottom:12px;
  border-radius:50%; background:#0B3A34; color:var(--ar-soft); font-size:15px; font-weight:700;
  transition:background .25s ease, color .25s ease;}
:root .ar-tab.is-active .ar-tab__badge{background:var(--ar-pink); color:#fff;}
/* le libellé d'un onglet est une commande, pas un titre de contenu : il n'est
   plus balisé en h3, sinon il ouvrait un niveau de plus que le panneau qu'il
   commande. Il garde la taille des titres de carte. */
:root .ar-tab__title{display:block; margin:0 0 6px; color:var(--ar-ink);
  font-family:var(--ar-font-title); font-size:var(--ar-fs-label); line-height:1.25;}
:root .ar-tab__text{margin:0; font-size:var(--ar-fs-text); line-height:1.52; color:var(--ar-muted);}
/* Sans script, les trois panneaux s'affichent à la suite : le visiteur lit
   tout, le robot indexe tout. Avec script, ils redeviennent des onglets. */
:root .ar-panel{display:grid; grid-template-columns:1.05fr .95fr; gap:38px; align-items:center;
  margin-top:16px; padding:34px;
  border:1px solid var(--ar-border); border-radius:22px; background:var(--ar-surface-1);}
:root .ar-panel{display:none;}
:root .ar-panel.is-active{display:grid; animation:ar-fadeup .45s ease;}
@keyframes ar-fadeup{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;}}
:root .ar-panel__title{margin:12px 0 18px; font-size:var(--ar-fs-h3); line-height:1.18;}
:root .ar-panel ul{margin:0 0 22px; padding:0; list-style:none; columns:2; column-gap:26px;}
:root .ar-panel li{position:relative; padding:7px 0 7px 20px; font-size:var(--ar-fs-text);
  color:var(--ar-text); break-inside:avoid;}
:root .ar-panel li::before{content:""; position:absolute; left:0; top:14px; width:7px; height:7px;
  border-radius:50%; background:var(--ar-pink);}
/* L'enjeu : plus de label ni de fond rose. Un filet vert, un fond sobre et un
   texte plus clair suffisent à le détacher de la liste qui le précède. */
:root .ar-callout{margin:0; padding:18px 20px;
  border-left:3px solid var(--ar-teal); border-radius:0 12px 12px 0;
  background:var(--ar-surface-3);
  font-size:var(--ar-fs-text); line-height:1.62; color:var(--ar-ink);}
:root .ar-panel__media{border-radius:16px; overflow:hidden; border:1px solid var(--ar-border);
  aspect-ratio:4/3; background:var(--ar-surface-3);}
:root .ar-panel__media img,
:root .ar-panel__media video{width:100%; height:100%; object-fit:cover; filter:saturate(.9);
  display:block;}
:root .ar-panel__media .ar-scene{width:100%; height:100%; display:block;}

/* =============================================================================
   SCÈNES ILLUSTRÉES
   Des dessins vectoriels animés plutôt que des captures de projets : rien qui
   appartienne à un client, net à toutes les tailles, quelques kilo-octets.
   Tout est construit sur les mêmes primitives (s-*), donc une scène de plus
   ne coûte que sa composition.
   ============================================================================= */
:root .ar-scene{color:var(--ar-teal);}
:root .ar-scene .s-card{fill:var(--ar-surface-1); stroke:rgba(53,196,157,.26); stroke-width:1.4;}
:root .ar-scene .s-card--deep{fill:var(--ar-surface-3);}
:root .ar-scene .s-card--lift{fill:var(--ar-surface-2);}
/* plaque sans filet : le cadre est porté par le .ar-mod posé par-dessus */
:root .ar-scene .s-plate{fill:var(--ar-surface-1); stroke:none;}
:root .ar-scene .s-plate--deep{fill:var(--ar-surface-3); stroke:none;}
:root .ar-scene .s-bar{fill:rgba(159,182,175,.34);}
:root .ar-scene .s-bar--strong{fill:rgba(242,250,247,.66);}
:root .ar-scene .s-fill{fill:rgba(53,196,157,.16);}
:root .ar-scene .s-fill--pink{fill:rgba(240,71,155,.18);}
:root .ar-scene .s-teal{fill:var(--ar-teal);}
:root .ar-scene .s-pink{fill:var(--ar-pink);}
:root .ar-scene .s-stroke{fill:none; stroke:var(--ar-teal); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;}
:root .ar-scene .s-stroke--pink{stroke:var(--ar-pink);}
:root .ar-scene .s-stroke--soft{stroke:rgba(159,182,175,.4);}
:root .ar-scene .s-dash{fill:none; stroke:rgba(53,196,157,.4); stroke-width:1.4;
  stroke-dasharray:5 7; stroke-linecap:round;}

/* flottement : chaque objet respire à son rythme */
:root .ar-scene .s-float{animation:ar-s-float 7s ease-in-out infinite alternate;}
/* on anime la propriété translate, pas transform : les groupes portent déjà un
   transform de placement qu'il ne faut pas écraser. */
@keyframes ar-s-float{from{translate:0 0;} to{translate:0 -9px;}}


/* ---------------------------------------------------------------------------
   Scène mixte : un calque dessiné en dessous, de vrais visuels posés dessus.
   Les cadres sont placés en pourcentage sur la même grille que le viewBox
   (x% = x/800), donc dessin et médias restent alignés à toutes les tailles.
   --------------------------------------------------------------------------- */
:root .ar-stage{position:relative; width:100%; height:100%;}
:root .ar-stage__layer{position:absolute; inset:0; width:100%; height:100%;}

/* Un emplacement : le dessin est peint dans le SVG, le cadre et le visuel
   réel sont posés exactement par-dessus. Fond transparent, donc quand le
   visuel s'efface c'est le dessin qui réapparaît, sans trou. */
:root .ar-mod{position:absolute; margin:0; left:var(--x); top:var(--y);
  width:var(--w); height:var(--h); border-radius:9px; overflow:hidden;
  border:1px solid var(--ar-border-strong); background:transparent;
  animation:ar-s-float var(--dur,9s) ease-in-out infinite alternate;}
:root .ar-mod--flat{border:0; border-radius:0 0 9px 9px; animation:none;}
/* page droite d'un magazine ouvert : pas de cadre flottant, une page */
:root .ar-mod--page{border-radius:0 3px 3px 0; border-color:rgba(255,255,255,.16);}
:root .ar-mod img,:root .ar-mod video{width:100%; height:100%; object-fit:cover; display:block;}

/* Les visuels réels passent chacun leur tour, jamais deux en même temps :
   même horloge --T, un décalage --d différent par emplacement. */
:root .ar-real{position:absolute; inset:0; opacity:0;
  animation:ar-real var(--T,15s) ease-in-out infinite;
  animation-delay:var(--d,0s);}
@keyframes ar-real{
  0%{opacity:0;} 2%,16%{opacity:1;} 19%,100%{opacity:0;}
}
/* Sur la scène acquisition il y a plus de leviers : les passages sont plus
   longs et se chevauchent, pour que deux visuels éloignés puissent vivre
   ensemble sans que ça tourne comme une horloge. */
:root .ar-real--multi{animation-name:ar-real2;}
:root .ar-real--multi.ar-real--scroll{animation-name:ar-real2, ar-realscroll;}
@keyframes ar-real2{
  0%{opacity:0;} 3%,24%{opacity:1;} 28%,100%{opacity:0;}
}
/* une capture longue : elle défile pendant qu'elle est à l'écran */
:root .ar-real--scroll{height:auto; bottom:auto;
  animation:ar-real var(--T,15s) ease-in-out infinite,
            ar-realscroll var(--T,15s) linear infinite;
  animation-delay:var(--d,0s), var(--d,0s);}
:root .ar-real--scroll img{height:auto;}
@keyframes ar-realscroll{
  from{transform:translateY(0);} to{transform:translateY(var(--scroll,0));}
}
/* tracé qui se dessine */
:root .ar-scene .s-draw{stroke-dasharray:var(--len,260); stroke-dashoffset:var(--len,260);
  animation:ar-s-draw 7s ease-in-out infinite;}
@keyframes ar-s-draw{
  0%,6%{stroke-dashoffset:var(--len,260);}
  40%,88%{stroke-dashoffset:0;}
  100%{stroke-dashoffset:var(--len,260);}
}
/* barre qui monte */
:root .ar-scene .s-grow{transform-box:fill-box; transform-origin:50% 100%;
  animation:ar-s-grow 7s ease-in-out infinite;}
@keyframes ar-s-grow{
  0%,8%{transform:scaleY(.06);} 45%,88%{transform:scaleY(1);} 100%{transform:scaleY(.06);}
}
/* pulsation douce d'un accent */
:root .ar-scene .s-pulse{transform-box:fill-box; transform-origin:center;
  animation:ar-s-pulse 3.4s ease-in-out infinite;}
@keyframes ar-s-pulse{0%,100%{opacity:.35; transform:scale(.92);}
  50%{opacity:1; transform:scale(1.06);}}
/* onde qui part d'un module */
:root .ar-scene .s-wave{transform-box:fill-box; transform-origin:center;
  animation:ar-s-wave 3.2s ease-out infinite;}
@keyframes ar-s-wave{0%{opacity:.5; transform:scale(.4);}
  100%{opacity:0; transform:scale(1.9);}}
/* point qui circule le long d'un lien */
:root .ar-scene .s-travel{offset-rotate:0deg; animation:ar-s-travel 3.6s linear infinite;}
@keyframes ar-s-travel{from{offset-distance:0%;} to{offset-distance:100%;}}
/* le trait pointillé qui défile */
:root .ar-scene .s-flow{animation:ar-s-flow 1.6s linear infinite;}
@keyframes ar-s-flow{to{stroke-dashoffset:-24;}}
/* curseur qui vient cliquer */
:root .ar-scene .s-click{animation:ar-s-click 5s ease-in-out infinite;}
@keyframes ar-s-click{
  0%,12%{transform:translate(26px,22px); opacity:0;}
  24%,44%{transform:translate(0,0); opacity:1;}
  50%{transform:translate(0,3px); opacity:1;}
  62%,100%{transform:translate(0,0); opacity:0;}
}
@media(max-width:880px){
  :root .ar-tabs{display:flex; flex-direction:column; gap:0;}
  :root .ar-tablist{display:contents;}
  :root .ar-tab{margin-top:12px; padding-right:54px; border-radius:14px; transform:none;}
  :root .ar-tab:hover{transform:none;}
  :root .ar-tab.is-active{transform:none; border-radius:14px 14px 0 0; border-bottom-color:transparent;}
  :root .ar-tab::after{content:""; position:absolute; right:22px; top:28px; width:10px; height:10px;
    border-right:2px solid var(--ar-teal); border-bottom:2px solid var(--ar-teal);
    transform:rotate(45deg); transition:transform .3s ease;}
  :root .ar-tab.is-active::after{top:31px; transform:rotate(-135deg);}
  :root .ar-panel{margin-top:0; padding:26px 22px; border-top:0; border-radius:0 0 14px 14px;}
  :root .ar-panel{grid-template-columns:1fr; gap:24px;}
  :root .ar-panel ul{columns:1;}
  :root .ar-panel__media{order:-1;}
}

/* =============================================================================
   TRAVAILLER ENSEMBLE
   Quatre colonnes, mais décalées en quinconce : une sur deux descend d'un
   cran. Même pastille numérotée que les onglets, pour que la numérotation
   veuille dire la même chose partout sur la page. Accent alterné vert/rose,
   coin franc qui change de place, arrivée une par une.
   ============================================================================= */
:root .ar-waycards{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:var(--ar-espace-bloc);
  align-items:start;}
:root .ar-waycard{
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  padding:30px 26px 32px;
  border:1px solid var(--ar-border); background:var(--ar-surface-1);
  box-shadow:0 24px 52px -32px rgba(0,0,0,.9);
  --accent:var(--ar-teal); --accent-soft:rgba(53,196,157,.14);
  transition:opacity .6s ease, transform .8s var(--ar-ease),
             border-color .35s ease, background .35s ease, box-shadow .35s ease;
}
/* l'apparition au défilement n'existe que si le script tourne */
:root .ar-waycard{opacity:0; transform:translateY(34px);}
:root .ar-waycard.is-visible{opacity:1; transform:translateY(0);}
:root .ar-waycard:nth-child(2n){--accent:var(--ar-pink-text); --accent-soft:rgba(240,71,155,.14);}
/* quinconce : une carte sur deux descend */
:root .ar-waycard:nth-child(2n){margin-top:38px;}
/* le coin franc se déplace d'une carte à l'autre */
:root .ar-waycard:nth-child(1){border-radius:22px 22px 22px 4px;}
:root .ar-waycard:nth-child(2){border-radius:22px 22px 4px 22px;}
:root .ar-waycard:nth-child(3){border-radius:4px 22px 22px 22px;}
:root .ar-waycard:nth-child(4){border-radius:22px 4px 22px 22px;}
/* filet d'accent sur le bord haut */
:root .ar-waycard::after{content:""; position:absolute; left:24px; right:24px; top:-1px; height:2px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  transform:scaleX(0); transition:transform .8s var(--ar-ease) .25s;}
:root .ar-waycard.is-visible::after{transform:scaleX(1);}
:root .ar-waycard::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  transition:opacity .35s ease;
  background:radial-gradient(280px circle at var(--ar-card-x,50%) var(--ar-card-y,50%),
    var(--accent-soft), transparent 62%);}
:root .ar-waycard:hover{background:var(--ar-surface-2); border-color:var(--accent);
  transform:translateY(-7px); box-shadow:0 32px 62px -30px rgba(0,0,0,1);}
:root .ar-waycard:hover::before{opacity:1;}

/* même pastille que dans les onglets : la numérotation dit la même chose
   partout sur la page */
:root .ar-waycard__num{display:inline-grid; place-items:center; width:34px; height:34px;
  margin-bottom:18px; border-radius:50%;
  background:var(--accent); color:#01201C; font-size:15px; font-weight:700;
  transition:transform .35s var(--ar-ease);}
:root .ar-waycard:nth-child(2n) .ar-waycard__num{color:#fff;}
:root .ar-waycard:hover .ar-waycard__num{transform:scale(1.08);}
:root .ar-waycard__title{margin:0 0 14px; font-size:var(--ar-fs-h3); line-height:1.3;}
/* la situation du lecteur d'abord, ce que je fais ensuite : un filet sépare
   les deux, sans avoir besoin de les étiqueter */
:root .ar-waycard__situation{margin:0 0 16px; padding-bottom:16px;
  border-bottom:1px solid var(--ar-border);
  font-size:var(--ar-fs-text); line-height:1.6; color:var(--ar-text);}
:root .ar-waycard__text{margin:0; font-size:var(--ar-fs-text); line-height:1.66;
  color:var(--ar-muted);}
:root .ar-waycard__text strong{color:var(--accent); font-weight:700;}
@media(max-width:1080px){
  :root .ar-waycards{grid-template-columns:repeat(2,1fr);}
  :root .ar-waycard:nth-child(2n){margin-top:0;}
  :root .ar-waycard:nth-child(n+3){margin-top:0;}
}
@media(max-width:620px){
  :root .ar-waycards{grid-template-columns:1fr;}
  :root .ar-waycard:nth-child(n){margin-top:0; border-radius:20px;}
}

/* ---------- citation ---------- */
:root .ar-quote{position:relative;}
:root .ar-quote__stage{position:sticky; top:0; min-height:100vh;
  display:grid; place-content:center; padding-inline:var(--ar-gutter);}
:root .ar-quote__text{margin:0; text-align:center;
  font-family:var(--ar-font-quote); font-weight:400;
  font-size:clamp(2.3rem,6.6vw,5.6rem); line-height:1.08; letter-spacing:-.02em;
  color:var(--ar-ink); text-wrap:balance;}
:root .ar-quote__text em{font-style:italic; color:var(--ar-teal);}
:root .ar-word{opacity:var(--ar-lit,.12); transition:opacity .16s linear;}
:root .ar-quote:not(.is-ready) .ar-word{opacity:1;}

/* =============================================================================
   LES QUATRE ARGUMENTS
   Quatre cartes posées en quinconce, reliées par un trait qui se dessine au
   défilement, comme un crayon qui passe de l'une à l'autre. Chaque carte
   s'allume quand le trait l'atteint. L'accent alterne entre le vert et le
   rose : c'est le seul endroit de la page où les deux couleurs se répondent,
   et c'est ce qui signale que le passage compte.
   Le tracé est calculé en JS d'après la position réelle des cartes.
   ============================================================================= */
:root .ar-args{ position:relative; margin-top:var(--ar-espace-titre); display:flex; flex-direction:column; gap:58px; }

:root .ar-args__thread{ position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:0; overflow:visible; }
:root .ar-args__thread path{ fill:none; stroke-width:2; stroke-linecap:round; }

:root .ar-arg{
  position:relative; z-index:1;
  width:min(660px,64%);
  padding:36px 38px 38px;
  border:1px solid var(--ar-border);
  background:var(--ar-surface-1);
  box-shadow:0 28px 60px -34px rgba(0,0,0,.95);
  transition:opacity .65s ease, transform .9s var(--ar-ease),
             border-color .4s ease, background .4s ease, box-shadow .4s ease;
}
:root .ar-arg{opacity:0; transform:translateY(40px) translateX(var(--from,0)) rotate(0deg);}
:root .ar-arg.is-visible{ opacity:1; transform:translateY(0) translateX(0) rotate(var(--tilt,0deg)); }

/* forme : un coin franc, les trois autres arrondis. Le coin franc change de
   place d'une carte à l'autre, ce qui casse la régularité sans désordre. */
:root .ar-arg:nth-of-type(1){ align-self:flex-start; margin-left:1%;  --tilt:-1.1deg; --from:-34px;
  border-radius:26px 26px 26px 4px; }
:root .ar-arg:nth-of-type(2){ align-self:flex-end;   margin-right:3%; --tilt:1.2deg;  --from:34px;
  border-radius:26px 26px 4px 26px; }
:root .ar-arg:nth-of-type(3){ align-self:flex-start; margin-left:9%;  --tilt:-.8deg;  --from:-34px;
  border-radius:4px 26px 26px 26px; }
:root .ar-arg:nth-of-type(4){ align-self:flex-end;   margin-right:1%; --tilt:1.4deg;  --from:34px;
  border-radius:26px 4px 26px 26px; }

/* accent : vert, rose, vert, rose */
:root .ar-arg{ --accent:var(--ar-teal); --accent-soft:rgba(53,196,157,.14); }
:root .ar-arg:nth-of-type(2n){ --accent:var(--ar-pink-text); --accent-soft:rgba(240,71,155,.14); }

/* le point d'ancrage du trait, sur le bord de la carte */
:root .ar-arg::before{
  content:""; position:absolute; top:-7px; width:14px; height:14px; border-radius:50%;
  background:var(--ar-bg); border:2px solid var(--accent);
  transform:scale(0); transition:transform .5s var(--ar-ease) .2s;
}
:root .ar-arg:nth-of-type(odd)::before{ left:38px; }
:root .ar-arg:nth-of-type(even)::before{ right:38px; }
:root .ar-arg.is-visible::before{ transform:scale(1); }

/* filet d'accent le long du bord supérieur */
:root .ar-arg::after{
  content:""; position:absolute; left:26px; right:26px; top:-1px; height:2px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  transform:scaleX(0); transition:transform .8s var(--ar-ease) .3s;
}
:root .ar-arg.is-visible::after{ transform:scaleX(1); }

:root .ar-arg:hover{
  transform:translateY(-7px) rotate(0deg);
  background:var(--ar-surface-2);
  border-color:var(--accent);
  box-shadow:0 36px 70px -32px rgba(0,0,0,1), 0 0 0 1px var(--accent-soft);
  z-index:3;
}

:root .ar-arg__title{
  margin:0 0 16px;
  font-size:var(--ar-fs-h3); line-height:1.14;
  /* pas de text-wrap:balance ici : il répartit les lignes à sa façon et impose
     des coupures qu'on ne peut plus corriger depuis l'éditeur. Le titre coupe
     là où il coupe, et un retour à la ligne posé à la main est respecté. */
  letter-spacing:-.015em; color:var(--ar-ink);
}
:root .ar-arg__text{ margin:0; font-size:var(--ar-fs-text); line-height:1.7;
  color:var(--ar-muted); }
:root .ar-arg__text strong{ color:var(--accent); font-weight:700; }

/* --- habillage : un schéma par argument, posé dans le vide en face de sa
   carte. Filaire, discret, et qui dit quelque chose du propos : une balance
   pour l'objectivité, un cercle de métiers pour le 360, un réseau pour les
   partenaires, une courbe mesurée pour la méthode. --- */
:root .ar-argdeco{
  position:absolute; z-index:0; pointer-events:none;
  width:clamp(78px,8.4vw,118px); color:rgba(53,196,157,.34);
  animation:ar-deco-drift 17s ease-in-out infinite alternate;
}
:root .ar-argdeco svg{ width:100%; height:auto; display:block; }
:root .ar-argdeco--pink{ color:rgba(240,71,155,.30); }
:root .ar-argdeco:nth-of-type(odd){ right:5%; }
:root .ar-argdeco:nth-of-type(even){ left:5%; }
:root .ar-argdeco--1{ animation-duration:17s; }
:root .ar-argdeco--2{ animation-duration:21s; animation-direction:alternate-reverse; }
:root .ar-argdeco--3{ animation-duration:15s; }
:root .ar-argdeco--4{ animation-duration:19s; animation-direction:alternate-reverse; }
@keyframes ar-deco-drift{
  from{ transform:translate(0,0) rotate(-2deg); }
  to{ transform:translate(10px,-16px) rotate(2deg); }
}

:root .ar-deco-line{ fill:none; stroke:currentColor; stroke-width:1.2;
  stroke-linecap:round; stroke-linejoin:round; }
:root .ar-deco-line--soft{ stroke:rgba(234,245,241,.13); }
:root .ar-deco-dash{ fill:none; stroke:currentColor; stroke-width:1;
  stroke-dasharray:3 5; opacity:.6; }
:root .ar-deco-dot{ fill:currentColor; }

:root .ar-deco-sway{ transform-origin:50% 24%; animation:ar-deco-sway 5.5s ease-in-out infinite; }
@keyframes ar-deco-sway{ 0%,100%{ transform:rotate(-6deg); } 50%{ transform:rotate(6deg); } }
:root .ar-deco-spin{ transform-origin:center; animation:ar-deco-spin 26s linear infinite; }
@keyframes ar-deco-spin{ to{ transform:rotate(360deg); } }
:root .ar-deco-pulse{ animation:ar-deco-pulse 3.2s ease-in-out infinite; }
:root .ar-deco-pulse--b{ animation-delay:.7s; } :root .ar-deco-pulse--c{ animation-delay:1.4s; }
@keyframes ar-deco-pulse{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }
:root .ar-deco-trace{ stroke-dasharray:150; stroke-dashoffset:150;
  animation:ar-deco-trace 5s var(--ar-ease) infinite; }
@keyframes ar-deco-trace{
  0%{ stroke-dashoffset:150; opacity:1; } 45%{ stroke-dashoffset:0; }
  80%{ stroke-dashoffset:0; opacity:1; } 100%{ stroke-dashoffset:0; opacity:0; }
}

/* repères de trame, en rappel du hero. Deux, pas plus. */
:root .ar-argmark{ position:absolute; z-index:0; pointer-events:none;
  color:rgba(53,196,157,.4); }
/* dimensions portées par le style, pas par l'attribut */
:root .ar-argmark--1 svg{ width:20px; height:20px; }
:root .ar-argmark--2 svg{ width:46px; height:46px; }
:root .ar-argmark--1{ left:3%;  top:16%; }
:root .ar-argmark--2{ right:4%; top:64%; }

@media(max-width:1100px){ :root .ar-argdeco, :root .ar-argmark{ display:none; } }

@media(max-width:880px){
  :root .ar-args{ gap:26px; }
  :root .ar-args__thread{ display:none; }
  :root .ar-arg:nth-of-type(n){
    width:100%; align-self:stretch; margin:0; --tilt:0deg; --from:0;
    border-radius:20px; padding:26px 22px 28px;
  }
  :root .ar-arg::before{ display:none; }
  /* Sous cette largeur, le module d'apparition ne tourne plus : les cartes
     doivent donc être visibles d'emblée, sans attendre une classe qui ne
     viendra pas. */
  :root .ar-arg{ opacity:1; transform:none; }
}

/* ---------- à propos ---------- */
/* Les deux colonnes se centrent l'une sur l'autre : le portrait est plus court
   que le texte, il se cale donc sur son milieu et non sur son haut. Le collage
   au défilement n'a plus lieu d'être, il déséquilibrerait ce centrage. */
:root .ar-about{display:grid; grid-template-columns:.82fr 1.18fr; gap:56px; align-items:center;
  margin-top:var(--ar-espace-bloc);}
:root .ar-about__aside{position:static;}
:root .ar-portrait{position:relative; border:1px solid var(--ar-border); border-radius:24px;
  overflow:hidden; background:var(--ar-surface-3); aspect-ratio:4/5;}
/* Le portrait est une vraie image WordPress : tu la remplaces depuis la
   médiathèque, avec son texte alternatif. Le cadre, lui, reste porté par le
   conteneur, sinon on perdrait l'arrondi et le dégradé au remplacement. */
:root .ar-portrait__img,:root .ar-portrait .wp-block-image{margin:0; height:100%;}
:root .ar-portrait img{width:100%; height:100%; object-fit:cover; object-position:center 22%;
  filter:saturate(.92);}
:root .ar-portrait::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(1,23,23,0) 52%,rgba(1,23,23,.86) 100%);}
:root .ar-portrait__sign{position:absolute; left:22px; right:22px; bottom:20px; z-index:2;}
:root .ar-portrait__sign b{display:block; font-size:19px; color:var(--ar-ink);}
:root .ar-portrait__sign span{font-size:12.5px; color:var(--ar-teal); letter-spacing:.04em;}
/* Le titre vit maintenant dans la colonne de droite : il lui faut la même
   respiration qu'une accroche sous un titre de section, ailleurs sur le site. */
:root .ar-about__body > .ar-title{margin-bottom:18px;}
:root .ar-about__body p{margin:0 0 18px; font-size:var(--ar-fs-text); line-height:1.72; color:var(--ar-muted);}
:root .ar-about__body p strong{color:var(--ar-teal); font-weight:700;}
:root .ar-path{position:relative; margin-top:36px; padding-left:34px;}
:root .ar-path::before{content:""; position:absolute; left:7px; top:6px; bottom:6px; width:1px;
  background:linear-gradient(180deg, rgba(53,196,157,.45), rgba(53,196,157,.08));}
:root .ar-step{position:relative; padding-bottom:30px;}
:root .ar-step:last-child{padding-bottom:0;}
:root .ar-step::before{content:""; position:absolute; left:-34px; top:6px; width:15px; height:15px;
  border-radius:50%; background:var(--ar-bg); border:1px solid rgba(53,196,157,.45);
  transition:background .4s ease, border-color .4s ease, box-shadow .4s ease;}
:root .ar-step.is-reached::before{background:var(--ar-teal); border-color:var(--ar-teal);
  box-shadow:0 0 0 5px rgba(53,196,157,.14);}
:root .ar-step__title{margin:0 0 8px; font-size:var(--ar-fs-h3); line-height:1.3;}
:root .ar-step__text{margin:0; font-size:var(--ar-fs-text); line-height:1.66; color:var(--ar-muted);}
/* version resserrée : le parcours rassure en trois repères, il ne raconte pas
   une vie. Une ligne par étape suffit. */
:root .ar-path--compact{margin-top:30px;}
:root .ar-path--compact .ar-step{padding-bottom:20px;}
:root .ar-path--compact .ar-step__title{margin:0 0 4px; font-size:18.5px;}
:root .ar-path--compact .ar-step__text{font-size:var(--ar-fs-text); line-height:1.55;}
:root .ar-path--compact .ar-step::before{top:3px; width:13px; height:13px;}
@media(max-width:940px){
  :root .ar-about{grid-template-columns:1fr; gap:32px;}
  :root .ar-about__aside{position:static;}
  :root .ar-portrait{aspect-ratio:3/2;}
}

/* ---------- avis ----------
   Deux avis aujourd'hui, davantage demain : le rail défile horizontalement et
   la navigation ne s'affiche que s'il y a vraiment quelque chose à faire
   défiler. Rien à changer dans le CSS quand un avis s'ajoute. */
/* Les deux colonnes font la même hauteur : le rail et l'invitation sont alignés
   en haut comme en bas, quel que soit le nombre d'avis. */
:root .ar-reviews{display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:18px;
  margin-top:var(--ar-espace-titre); align-items:stretch;}
:root .ar-slider{position:relative; min-width:0; display:flex; flex-direction:column;}
:root .ar-slider__track{flex:1; display:flex; align-items:stretch; gap:18px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:2px 2px 6px;
  scrollbar-width:none;}
:root .ar-slider__track::-webkit-scrollbar{display:none;}
:root .ar-slider__nav{display:none; gap:8px; justify-content:flex-end; margin-top:14px;}
:root .ar-slider.is-scrollable .ar-slider__nav{display:flex;}
:root .ar-slider__btn{display:grid; place-items:center; width:40px; height:40px; padding:0;
  color:var(--ar-ink); background:var(--ar-surface-1); border:1px solid var(--ar-border);
  border-radius:50%; cursor:pointer;
  transition:color .25s ease, border-color .25s ease, background .25s ease, opacity .25s ease;}
:root .ar-slider__btn:hover:not(:disabled){color:var(--ar-teal); border-color:var(--ar-teal);
  background:var(--ar-surface-2);}
:root .ar-slider__btn:disabled{opacity:.34; cursor:default;}
:root .ar-review{position:relative; flex:0 0 calc(50% - 9px); scroll-snap-align:start;
  display:flex; flex-direction:column; padding:34px 32px 28px; overflow:hidden;
  border:1px solid var(--ar-border); border-radius:var(--ar-radius);
  background:linear-gradient(180deg, rgba(53,196,157,.05), transparent 46%),
             var(--ar-surface-1);
  transition:border-color .35s ease, transform .35s ease, background .35s ease;}
/* le guillemet en filigrane : c'est lui qui signale une parole rapportée
   avant même qu'on ait lu la première ligne */
:root .ar-review::before{content:"”"; position:absolute; top:-30px; right:16px;
  font-family:var(--ar-font-quote); font-size:170px; line-height:1;
  color:rgba(53,196,157,.12); pointer-events:none;}
/* un trait vert en haut de carte : l'œil sait tout de suite où commence
   la parole du client */
:root .ar-review::after{content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, var(--ar-teal), rgba(53,196,157,0) 72%);}
:root .ar-review:hover{background:var(--ar-surface-2); border-color:var(--ar-border-active);
  transform:translateY(-3px);}
:root .ar-review__stars{display:flex; gap:4px; margin-bottom:20px; color:var(--ar-teal);}
:root .ar-review__text{position:relative; margin:0 0 26px;
  font-size:var(--ar-fs-text); line-height:1.7; color:var(--ar-ink);}
/* Pas de photo, donc pas de pastille vide : un filet, le nom, l'entreprise et
   la provenance de l'avis suffisent à situer qui parle. */
:root .ar-review__who{margin-top:auto; padding-top:18px; border-top:1px solid var(--ar-border);}
:root .ar-review__who b{display:block; font-size:17.5px; color:var(--ar-ink); letter-spacing:-.01em;}
:root .ar-review__who span{display:block; margin-top:4px; font-size:12.5px; color:var(--ar-soft);}
:root .ar-review__who em{font-style:normal; color:var(--ar-teal);}
:root .ar-askreview{display:flex; flex-direction:column; justify-content:center; height:100%;
  padding:32px;
  border:1px dashed rgba(53,196,157,.4); border-radius:var(--ar-radius);
  background:linear-gradient(180deg, rgba(53,196,157,.06), transparent 70%), var(--ar-surface-3);}
:root .ar-askreview__title{margin:0 0 12px; font-size:var(--ar-fs-h3); line-height:1.3;}
:root .ar-askreview__text{margin:0 0 24px; font-size:var(--ar-fs-text); line-height:1.62; color:var(--ar-muted);}
:root .ar-askreview .ar-btn{align-self:flex-start;}
@media(max-width:1080px){
  :root .ar-reviews{grid-template-columns:1fr;}
}
@media(max-width:700px){ :root .ar-review{flex:0 0 100%;} }

/* =============================================================================
   PIED DE PAGE
   Le monogramme occupe toute la hauteur à gauche, le contenu vient à côté.
   Plus de colonnes de navigation : l'essentiel, c'est le contact.
   ============================================================================= */
:root .ar-footer{position:relative; margin-top:40px;
  border-top:1px solid var(--ar-border); background:var(--ar-surface-3);}
:root .ar-footer__cta{padding:54px var(--ar-gutter) 46px; text-align:center;
  border-bottom:1px solid var(--ar-border);
  background:
    radial-gradient(70% 130% at 22% 0%, rgba(53,196,157,.09), transparent 62%),
    radial-gradient(60% 120% at 82% 100%, rgba(240,71,155,.08), transparent 62%);}
/* Le titre et son accroche partagent la même largeur, exprimée dans l'unité
   du titre comme ailleurs sur le site : les deux blocs grandissent ensemble et
   restent alignés quelle que soit la largeur de l'écran. */
:root .ar-footer__cta h2{margin:0 auto 14px; max-width:26ch;
  font-size:clamp(1.7rem,3.2vw,2.5rem); line-height:1.14; text-wrap:balance;}
:root .ar-footer__cta p{margin:0 auto 24px; width:100%;
  max-width:min(100%, calc(clamp(1.7rem,3.2vw,2.5rem) * 15));
  color:var(--ar-muted); font-size:var(--ar-fs-text); line-height:1.6;}

:root .ar-footer__main{max-width:var(--ar-content); margin-inline:auto;
  padding:36px var(--ar-gutter) 30px;
  display:grid; grid-template-columns:auto 1fr; gap:40px; align-items:center;}

/* la signature reste une signature : elle ne doit pas peser plus que le contenu */
:root .ar-footer__mark{display:flex; align-items:center;}
:root .ar-footer__mark svg{width:156px; height:auto; display:block;}
:root .ar-mark__letter{fill:var(--ar-teal);}
:root .ar-mark__dot{fill:var(--ar-pink);}

:root .ar-footer__body{display:grid; grid-template-columns:1.25fr 1fr; gap:36px; align-content:center;}
:root .ar-footer__body p{margin:0; font-size:var(--ar-fs-text); line-height:1.7; color:var(--ar-muted); max-width:38ch;}
/* même spécificité que .ar-footer__body p, et déclarée après : plus besoin
   de forcer quoi que ce soit */
:root .ar-footer__body p.ar-footer__baseline{margin:0 0 12px;
  font-size:clamp(.95rem,1.25vw,1.12rem); line-height:1.26; letter-spacing:-.01em;
  text-transform:uppercase; color:var(--ar-ink); max-width:none;}
:root .ar-footer__baseline em{font-style:normal; color:var(--ar-pink);}
:root .ar-footer h3{margin:0 0 12px; font-size:12px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ar-soft);}
:root .ar-footer ul{margin:0; padding:0; list-style:none;}
:root .ar-footer li + li{margin-top:9px;}
:root .ar-footer__contact a{display:inline-flex; align-items:center; gap:9px;
  color:var(--ar-muted); text-decoration:none; font-size:16.5px; transition:color .25s ease;}
:root .ar-footer__contact a:hover{color:var(--ar-teal);}
:root .ar-footer__contact svg{flex:none; color:var(--ar-teal);}

:root .ar-footer__legal{max-width:var(--ar-content); margin-inline:auto;
  padding:16px var(--ar-gutter) 26px; border-top:1px solid var(--ar-border);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
  font-size:12.5px; color:var(--ar-soft);}
:root .ar-footer__legal nav{display:flex; gap:22px; flex-wrap:wrap;}
:root .ar-footer__legal a,:root .ar-footer__legal button{color:var(--ar-soft); text-decoration:none;
  font:inherit; font-size:12.5px; padding:0; border:0; background:none; cursor:pointer;
  transition:color .25s ease;}
:root .ar-footer__legal a:hover,:root .ar-footer__legal button:hover{color:var(--ar-teal);}
/* Le lien de gestion des cookies n'a de sens que si le bandeau existe, donc
   seulement quand un identifiant de mesure est renseigné. Le script le révèle
   quand il trouve le bandeau dans la page. */
/* Le lien de gestion des cookies n'apparaît que s'il y a quelque chose à
   gérer, c'est-à-dire dès qu'un identifiant de mesure est renseigné dans
   functions.php. Un lien qui n'ouvre rien ne vaut pas mieux qu'une absence. */
:root :where(.ar-footer__legal,.ar-legal) [data-ar-cookies="rouvrir"]{display:none;}
:root .ar-has-consent :where(.ar-footer__legal,.ar-legal) [data-ar-cookies="rouvrir"]{display:inline;}

@media(max-width:940px){
  :root .ar-footer__main{grid-template-columns:1fr; gap:34px;}
  :root .ar-footer__mark{justify-content:flex-start;}
  :root .ar-footer__mark svg{width:124px;}
  :root .ar-footer__body{grid-template-columns:1fr; gap:30px;}
}

/* =============================================================================
   PETITS ÉCRANS
   Trois corrections de fond, puis les respirations.

   1. Les hauteurs en vh. Sur mobile, 100vh compte la barre d'adresse du
      navigateur même quand elle est repliée : le hero dépassait d'une centaine
      de pixels et laissait un vide au scroll. svh mesure la hauteur réellement
      visible.
   2. Le fond quadrillé en attachment fixed. Sur iOS il est recalculé à chaque
      frame et se décale du reste : on le remet en défilement normal dès qu'il
      n'y a pas de souris.
   3. La maille du quadrillage, calculée en centième de largeur, devenait un
      grillage illisible sous 700 px.
   ============================================================================= */
@supports (height:100svh){
  :root .ar-hero{min-height:calc(100svh - var(--ar-head));}
}
@media(hover:none){
  body{background-attachment:scroll;}
}
/* filet de sécurité : rien ne déborde latéralement, et clip préserve
   le position:sticky, contrairement à overflow hidden */
body{overflow-x:clip;}

@media(max-width:880px){
  :root{ --ar-grid-cell:calc(100vw / 11); }
  :root .ar-section{padding-block:40px;}
  :root .ar-section--tight{padding-block:28px;}
  :root .ar-section--space{padding-top:40px;}
  :root .ar-hero__title{margin-bottom:16px;}
  :root .ar-hero__lead{margin-bottom:24px;}
  :root .ar-tabs{margin-top:22px;}
  :root .ar-waycards{margin-top:22px; gap:14px;}
  :root .ar-args{margin-top:24px; gap:18px;}
  :root .ar-about{margin-top:22px;}
  :root .ar-reviews{margin-top:20px;}
  :root .ar-footer{margin-top:18px;}
  :root .ar-footer__cta{padding:38px var(--ar-gutter) 32px;}
  :root .ar-footer__main{padding:28px var(--ar-gutter) 24px; gap:26px;}
  :root .ar-footer__legal{padding:14px var(--ar-gutter) 22px;}
  :root .ar-quote__stage{min-height:70vh;}
  :root .ar-lead{margin-top:12px;}
  :root .ar-slider__nav{margin-top:10px;}
  :root .ar-about{gap:24px;}
  :root .ar-about__body p{margin-bottom:14px;}
  :root .ar-path{margin-top:26px;}
  :root .ar-step{padding-bottom:22px;}
  :root .ar-marquee{padding:18px 0;}
  :root .ar-marquee__track{gap:38px;}
  :root .ar-marquee__item img{width:152px;}
  :root .ar-trust{margin-bottom:18px;}
}
@supports (height:100svh){
  @media(max-width:880px){ :root .ar-quote__stage{min-height:70svh;} }
}

@media(max-width:620px){
  :root{ --ar-gutter:20px; --ar-grid-cell:calc(100vw / 8);
    --ar-fs-h3:clamp(1.1rem,4.2vw,1.35rem);
    --ar-fs-label:clamp(1rem,3.8vw,1.14rem); }
  :root .ar-hero__title{font-size:clamp(1.9rem,8.4vw,2.6rem);}
  :root .ar-hero__lead{font-size:var(--ar-fs-text);}
  :root .ar-quote__text{font-size:clamp(1.6rem,8.2vw,2.4rem);}
  :root .ar-title{font-size:clamp(1.5rem,6.4vw,2rem);}
  :root .ar-section{padding-block:32px;}
  :root .ar-section--tight{padding-block:22px;}
  :root .ar-section--space{padding-top:32px;}
  :root .ar-panel{padding:20px 16px;}
  :root .ar-review{padding:26px 22px 22px;}
  :root .ar-askreview{padding:24px 20px;}
  :root .ar-waycard,:root .ar-arg{padding:22px 18px;}
  :root .ar-footer__cta{padding:30px var(--ar-gutter) 26px;}
  :root .ar-footer__main{padding:24px var(--ar-gutter) 20px;}
  :root .ar-review__text{font-size:var(--ar-fs-text);}
  :root .ar-review::before{font-size:110px; top:-18px;}
  /* la bannière verticale ne fait plus que vingt pixels de large à cette
     taille : elle ne dit plus rien, on la sort de la scène */
  :root .ar-mod--thin,:root .s-thin{display:none;}
}
@supports (height:100svh){
  @media(max-width:620px){ :root .ar-quote__stage{min-height:64svh;} }
}

:root .ar-title,:root .ar-hero__title,:root .ar-quote__text,:root .ar-step__title,:root .ar-arg__title{overflow-wrap:break-word;}

/* =============================================================================
   MODALE DE CONTACT
   Une balise dialog native plutôt qu'un div : le navigateur fournit le piège à
   focus, la fermeture par Échap et le voile, sans une ligne de script. On ne
   garde en JavaScript que l'ouverture.
   ============================================================================= */
:root .ar-modal{width:min(580px,92vw); max-width:none; max-height:92vh; padding:0; border:0;
  background:transparent; color:var(--ar-text); overflow:visible;}
:root .ar-modal::backdrop{background:rgba(1,10,10,.74); backdrop-filter:blur(7px);}
:root .ar-modal[open]{animation:ar-modal-in .34s cubic-bezier(.33,1,.68,1);}
:root .ar-modal[open]::backdrop{animation:ar-veil-in .34s ease;}
@keyframes ar-modal-in{
  from{opacity:0; transform:translateY(16px) scale(.985);}
  to{opacity:1; transform:none;}
}
@keyframes ar-veil-in{from{opacity:0;} to{opacity:1;}}

:root .ar-modal__panel{position:relative; max-height:92vh; overflow:hidden auto;
  padding:40px 38px 34px; scrollbar-width:thin;
  scrollbar-color:var(--ar-border-strong) transparent;
  border:1px solid var(--ar-border-strong); border-radius:24px;
  background:linear-gradient(180deg, rgba(53,196,157,.07), transparent 34%),
             var(--ar-surface-1);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);}
:root .ar-modal__panel::before{content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, var(--ar-teal), var(--ar-pink) 62%, transparent);}
:root .ar-modal__close{position:absolute; top:18px; right:18px;
  display:grid; place-items:center; width:38px; height:38px; padding:0;
  color:var(--ar-soft); background:var(--ar-surface-3);
  border:1px solid var(--ar-border); border-radius:50%; cursor:pointer;
  transition:color .25s ease, border-color .25s ease, transform .25s ease;}
:root .ar-modal__close:hover{color:var(--ar-ink); border-color:var(--ar-border-strong);
  transform:rotate(90deg);}
:root .ar-modal__title{margin:0 0 26px; font-size:var(--ar-fs-h3); line-height:1.2;}

/* ---------- les champs ----------
   Un seul jeu de règles pour input, textarea et select : le formulaire reste
   cohérent même si on lui ajoute un champ plus tard. */
:root .ar-form{display:grid; gap:16px;}
:root .ar-form__row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
:root .ar-field{display:block;}
:root .ar-field__label{display:block; margin-bottom:7px;
  font-family:var(--ar-font-title); font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ar-soft);}
/* Quatre champs sur six sont obligatoires : on signale les deux autres plutôt
   que d'étoiler les quatre premiers. */
:root .ar-field__label em{font-style:normal; font-weight:400; font-size:10.5px;
  letter-spacing:.04em; text-transform:none; opacity:.72;}
:root .ar-field input,
:root .ar-field select,
:root .ar-field textarea{
  width:100%; padding:12px 15px;
  font:400 15px/1.5 var(--ar-font); letter-spacing:.006em; color:var(--ar-ink);
  background-color:var(--ar-surface-3);
  border:1px solid var(--ar-border); border-radius:11px;
  transition:border-color .25s ease, background-color .25s ease, box-shadow .25s ease;}
:root .ar-field textarea{min-height:108px; resize:vertical;}
:root .ar-field select{appearance:none; cursor:pointer; color-scheme:dark; padding-right:42px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ar-teal) 50%),
                   linear-gradient(135deg,var(--ar-teal) 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px, calc(100% - 13px) 21px;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;}
/* Le panneau déroulant d'un select est dessiné par le système, pas par la
   page : on ne peut pas le styler librement. color-scheme le bascule en sombre
   et la couleur des options accorde le reste. */
:root .ar-field select option{background:var(--ar-surface-2); color:var(--ar-ink);}
:root .ar-field select option:checked{background:var(--ar-teal); color:#01201C;}
:root .ar-field input::placeholder,
:root .ar-field textarea::placeholder{color:var(--ar-soft); opacity:.75;}
:root .ar-field input:hover,
:root .ar-field select:hover,
:root .ar-field textarea:hover{border-color:var(--ar-border-strong);}
:root .ar-field input:focus,
:root .ar-field select:focus,
:root .ar-field textarea:focus{outline:none; background-color:var(--ar-surface-2);
  border-color:var(--ar-teal); box-shadow:0 0 0 3px rgba(53,196,157,.16);}
:root .ar-form__send{margin-top:2px;}

/* Le champ leurre de l'anti-spam. Sorti de l'écran plutôt que masqué : un
   display:none est repéré par les robots un peu sérieux, un décalage hors
   cadre ne l'est pas. Invisible à l'œil, ignoré au clavier et par les lecteurs
   d'écran, mais bien présent dans le code. */
:root .ar-hp{position:absolute; left:-9999px; top:auto; width:1px; height:1px;
  overflow:hidden;}

/* L'information sur l'usage des données. Pas de case à cocher : pour un
   formulaire de contact, ce qui autorise le traitement c'est la demande
   elle-même. Le règlement impose d'informer, pas de faire cocher. */
:root .ar-form__legal{margin:18px 0 0; font-size:11px; line-height:1.55;
  color:var(--ar-soft);}
/* le lien reprend la taille et la graisse de la phrase qui l'entoure : sans
   ça, il hérite de ce que WordPress applique aux liens et ressort plus gros */
:root .ar-form__legal a{font-size:inherit; font-weight:inherit; line-height:inherit;
  color:var(--ar-teal); text-decoration:underline; text-underline-offset:3px;}

/* ---------- habillage du plugin de formulaire ----------
   Deux niveaux. Le premier habille n'importe quel formulaire du plugin, même
   celui livré par défaut, sans la moindre classe : c'est le filet de sécurité.
   Le second, plus bas, traite ce que le plugin ajoute autour des champs. */
:root .wpcf7 p{margin:0 0 16px;}
:root .wpcf7 label{display:block;
  font-family:var(--ar-font-title); font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ar-soft);}
:root .wpcf7 input[type="text"],
:root .wpcf7 input[type="email"],
:root .wpcf7 input[type="tel"],
:root .wpcf7 input[type="url"],
:root .wpcf7 input[type="number"],
:root .wpcf7 input[type="date"],
:root .wpcf7 select,
:root .wpcf7 textarea{
  width:100%; margin-top:7px; padding:12px 15px;
  font:400 15px/1.5 var(--ar-font); letter-spacing:.006em; color:var(--ar-ink);
  background-color:var(--ar-surface-3);
  border:1px solid var(--ar-border); border-radius:11px;
  transition:border-color .25s ease, background-color .25s ease, box-shadow .25s ease;}
:root .wpcf7 textarea{min-height:108px; resize:vertical;}
/* même chevron que sur un champ balisé : la flèche native disparaît avec
   appearance:none, c'est donc à nous de la dessiner */
:root .wpcf7 select{appearance:none; cursor:pointer; color-scheme:dark;
  padding-right:42px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ar-teal) 50%),
                   linear-gradient(135deg,var(--ar-teal) 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px, calc(100% - 13px) 21px;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;}
:root .wpcf7 select option{background:var(--ar-surface-2); color:var(--ar-ink);}
:root .wpcf7 input:focus,
:root .wpcf7 select:focus,
:root .wpcf7 textarea:focus{outline:none; background-color:var(--ar-surface-2);
  border-color:var(--ar-teal); box-shadow:0 0 0 3px rgba(53,196,157,.16);}
/* le bouton d'envoi, même quand il n'a reçu aucune classe */
:root .wpcf7 input[type="submit"]{
  display:inline-flex; align-items:center; padding:9px 24px;
  font:700 14.5px/1 var(--ar-font-title);
  color:#01201C; background:var(--ar-teal);
  border:1px solid var(--ar-teal); border-radius:999px; cursor:pointer;
  transition:transform .2s ease, background .25s ease;}
:root .wpcf7 input[type="submit"]:hover{transform:translateY(-2px);
  background:var(--ar-teal-deep); color:#CFF3E7;}
/* dans la modale, un champ dépourvu de mise en forme garde quand même l'air
   du reste : la marge du paragraphe suffit à tenir la colonne */
:root .ar-modal .wpcf7 p:last-of-type{margin-bottom:0;}

/* Le plugin enveloppe chaque champ dans un span. Tant qu'il reste en ligne,
   un champ en largeur:100% se mesure sur lui-même et retombe à sa taille par
   défaut. On le passe en bloc, et sans dépendre de la structure exacte du
   plugin, qui change d'une version à l'autre. */
:root .wpcf7-form-control-wrap{display:block; width:100%;}
:root .wpcf7 input,:root .wpcf7 select,:root .wpcf7 textarea{max-width:100%;}
:root .wpcf7 .wpcf7-not-valid-tip{display:block; margin-top:6px;
  font-size:12px; color:var(--ar-pink);}
:root .wpcf7 .wpcf7-not-valid{border-color:var(--ar-pink);}
:root .wpcf7 form .wpcf7-response-output{margin:20px 0 0; padding:13px 16px;
  border:1px solid var(--ar-border-strong); border-radius:11px;
  background:var(--ar-surface-3); font-size:14.5px; line-height:1.55;
  color:var(--ar-text);}
:root .wpcf7 form.sent .wpcf7-response-output{border-color:var(--ar-teal);
  background:rgba(53,196,157,.08); color:var(--ar-ink);}
:root .wpcf7 form.invalid .wpcf7-response-output,
:root .wpcf7 form.failed .wpcf7-response-output{border-color:var(--ar-pink);
  background:rgba(240,71,155,.08);}
:root .wpcf7-spinner{margin:0 0 0 12px;}

@media(max-width:620px){
  :root .ar-modal__panel{padding:32px 22px 26px; border-radius:20px;}
  :root .ar-form__row{grid-template-columns:1fr;}
  :root .ar-form,:root .ar-form__row{gap:14px;}
}

/* =============================================================================
   FOCUS
   Le contour que le navigateur dessine après un clic n'appartient à aucune
   charte et se voyait sur l'onglet actif. On le retire au clic et on le
   remplace par un anneau à nos couleurs, réservé à la navigation au clavier :
   la souris n'affiche rien, le clavier reste parfaitement guidé.
   ============================================================================= */
:root .ar-btn:focus,:root .ar-tab:focus,:root .ar-burger:focus,:root .ar-navclose:focus,
:root .ar-slider__btn:focus,:root .ar-nudge:focus,:root .ar-nav a:focus,:root .ar-modal__close:focus,
:root .ar-footer a:focus,:root .ar-marquee__item img:focus{outline:none;}

:root .ar-btn:focus-visible,:root .ar-tab:focus-visible,:root .ar-burger:focus-visible,
:root .ar-navclose:focus-visible,:root .ar-slider__btn:focus-visible,:root .ar-nudge:focus-visible,
:root .ar-nav a:focus-visible,:root .ar-footer a:focus-visible,:root .ar-modal__close:focus-visible{
  outline:2px solid var(--ar-teal); outline-offset:3px; border-radius:6px;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  :root .ar-bp-drift,:root .ar-bp-sweep,:root .ar-thumb,:root .ar-picto,:root .ar-marquee__track{animation:none;}
  :root .ar-thumb,:root .ar-picto{opacity:var(--ar-thumb-op,1); scale:1;}
  /* seul !important du fichier : le script pose l'opacité en style inline,
     rien d'autre ne peut la reprendre */
  :root .ar-word{opacity:1 !important;}
  :root .ar-arg{opacity:1; transform:none;}
  :root .ar-about__aside{position:static;}
  /* les scènes restent lisibles, simplement figées sur leur état final */
  :root .ar-scene .s-float,:root .ar-scene .s-draw,:root .ar-scene .s-grow,
  :root .ar-scene .s-pulse,:root .ar-scene .s-wave,:root .ar-scene .s-travel,:root .ar-scene .s-flow,
  :root .ar-scene .s-click{animation:none;}
  :root .ar-scene .s-draw{stroke-dashoffset:0;}
  :root .ar-scene .s-grow{transform:none;}
  :root .ar-scene .s-wave,:root .ar-scene .s-travel{display:none;}
  :root .ar-scene .s-click{opacity:1; transform:none;}
  :root .ar-hero__title,:root .ar-hero__lead,:root .ar-hero__actions{animation:none;}
  /* les emplacements gardent leur dessin, sans relais de visuels */
  :root .ar-mod{animation:none;}
  :root .ar-real{animation:none; opacity:0;}
  :root .ar-real:first-of-type{opacity:1;}
}
/* ---------- bandeau de consentement ---------- */
/* Il ne s'affiche que si un identifiant de mesure est renseigné dans
   functions.php. Tant que le site ne charge rien de Google, il n'y a rien à
   faire consentir et le bandeau n'existe pas. */
:root .ar-cookies{position:fixed; z-index:120; left:50%; translate:-50% 0; bottom:18px;
  width:min(720px, calc(100vw - 32px)); display:none;}
:root .ar-cookies.is-open{display:block; animation:ar-cookies-in .4s cubic-bezier(.33,1,.68,1);}
@keyframes ar-cookies-in{from{opacity:0; translate:-50% 14px;} to{opacity:1; translate:-50% 0;}}
:root .ar-cookies__panel{position:relative;
  /* le panneau ne dépasse jamais de l'écran, même détail ouvert sur une
     fenêtre basse : au-delà, il défile */
  overflow:hidden auto;
  max-height:calc(100vh - 36px); max-height:calc(100svh - 36px);
  scrollbar-width:thin; scrollbar-color:var(--ar-border-strong) transparent;
  padding:26px 28px 22px;
  border:1px solid var(--ar-border-strong); border-radius:22px;
  background:linear-gradient(180deg, rgba(53,196,157,.07), transparent 36%),
             var(--ar-surface-1);
  box-shadow:0 34px 80px -28px rgba(0,0,0,.92);}
:root .ar-cookies__panel::before{content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, var(--ar-teal), var(--ar-pink) 62%, transparent);}
:root .ar-cookies__title{margin:0 0 10px; font-family:var(--ar-font-title);
  font-size:var(--ar-fs-label); line-height:1.25; color:var(--ar-ink);}
:root .ar-cookies__text{margin:0 0 20px; font-size:var(--ar-fs-text); line-height:1.62; color:var(--ar-muted);}
/* Trois boutons de même taille, et rien d'autre. Refuser doit être aussi
   facile qu'accepter : un refus enterré sous un lien discret invalide le
   consentement recueilli. */
:root .ar-cookies__actions{display:flex; gap:10px; flex-wrap:wrap;}
:root .ar-cookies__actions .ar-btn{flex:1 1 150px; justify-content:center; padding:11px 18px;}
:root .ar-btn--neutre{background:var(--ar-surface-2); border-color:var(--ar-surface-2);
  color:var(--ar-ink);}
:root .ar-btn--neutre:hover{background:var(--ar-surface-3); border-color:var(--ar-border-strong);}
:root .ar-cookies__actions .ar-btn--ghost{background:transparent;
  border-color:var(--ar-border-strong); color:var(--ar-ink);}
:root .ar-cookies__actions .ar-btn--ghost:hover{border-color:var(--ar-teal); color:var(--ar-teal);}
:root .ar-cookies__link{margin:16px 0 0; font-size:14px;}
:root .ar-cookies__link a{color:var(--ar-soft); font-size:inherit; font-weight:inherit;
  text-decoration:underline; text-underline-offset:3px; transition:color .25s ease;}
:root .ar-cookies__link a:hover{color:var(--ar-teal);}

:root .ar-cookies__detail{display:none; margin:22px 0 20px; padding-top:20px;
  border-top:1px solid var(--ar-border);}
:root .ar-cookies.is-detailed .ar-cookies__detail{display:block;}
:root .ar-choice{display:flex; gap:16px; align-items:flex-start; padding:14px 0;}
:root .ar-choice + .ar-choice{border-top:1px solid var(--ar-border);}
:root .ar-choice__body{flex:1 1 auto;}
:root .ar-choice__name{display:block; margin-bottom:4px; font-family:var(--ar-font-title);
  font-size:16.5px; color:var(--ar-ink);}
:root .ar-choice__desc{margin:0; font-size:var(--ar-fs-text); line-height:1.55; color:var(--ar-muted);}
:root .ar-choice__switch{flex:none; position:relative; width:46px; height:26px; margin-top:2px;}
:root .ar-choice__switch input{position:absolute; inset:0; width:100%; height:100%; margin:0;
  opacity:0; cursor:pointer;}
:root .ar-choice__track{position:absolute; inset:0; border-radius:999px; pointer-events:none;
  background:var(--ar-surface-3); border:1px solid var(--ar-border-strong);
  transition:background .25s ease, border-color .25s ease;}
:root .ar-choice__track::after{content:""; position:absolute; top:3px; left:3px;
  width:18px; height:18px; border-radius:50%; background:var(--ar-soft);
  transition:translate .25s var(--ar-ease), background .25s ease;}
:root .ar-choice__switch input:checked + .ar-choice__track{background:var(--ar-teal-deep);
  border-color:var(--ar-teal);}
:root .ar-choice__switch input:checked + .ar-choice__track::after{translate:20px 0;
  background:var(--ar-teal);}
:root .ar-choice__switch input:focus-visible + .ar-choice__track{outline:2px solid var(--ar-teal);
  outline-offset:3px;}

@media(max-width:620px){
  :root .ar-cookies{bottom:10px; width:calc(100vw - 20px);
    max-height:calc(100vh - 20px); max-height:calc(100svh - 20px);}
  /* le panneau ne doit jamais dépasser de l'écran : au-delà, il défile */
  :root .ar-cookies__panel{padding:20px 18px 16px; overflow:hidden auto;
    max-height:calc(100vh - 20px); max-height:calc(100svh - 20px);
    scrollbar-width:thin; scrollbar-color:var(--ar-border-strong) transparent;}
  :root .ar-cookies__actions{flex-direction:column;}
  /* En colonne, flex-basis s'applique à la hauteur : les 150 px prévus pour la
     largeur devenaient 150 px de haut, d'où des boutons démesurés. */
  :root .ar-cookies__actions .ar-btn{flex:0 0 auto; width:100%;}
  :root .ar-cookies__title{margin-bottom:8px;}
  :root .ar-cookies__text{margin-bottom:16px;}
  :root .ar-cookies__detail{margin:16px 0 16px; padding-top:16px;}
  :root .ar-choice{padding:11px 0; gap:12px;}
  :root .ar-cookies__link{margin-top:12px;}
}
@media(prefers-reduced-motion:reduce){
  :root .ar-cookies.is-open{animation:none;}
}

/* =============================================================================
   INTÉGRATION WORDPRESS
   Le thème parent enveloppe le contenu dans des conteneurs qui limitent la
   largeur et ajoutent des marges. Nos sections gèrent elles-mêmes leur largeur
   via .ar-container : on neutralise les siens.
   ============================================================================= */
:root .wp-site-blocks{padding:0; margin:0;}
:root .wp-site-blocks > *{margin-block:0;}
/* WordPress enveloppe chaque partie de modèle : display:contents efface ce
   conteneur du calcul de mise en page, l'en-tête reste donc collant. */
:root .wp-block-template-part{display:contents;}
:root main > .wp-block-group{max-width:none;}
:root .wp-block-group.ar-section,
:root .wp-block-group.ar-section--tight,
:root .wp-block-group.ar-hero,
:root .wp-block-group.ar-quote{width:auto;}
/* l'éditeur : mêmes largeurs qu'en façade, pour rédiger dans le vrai rendu */
:root .editor-styles-wrapper .ar-section,
:root .editor-styles-wrapper .ar-hero{max-width:none;}