/* ==========================================================================
   IMPRIMERIE TRADITIONNELLE — Surcouche client (v1 modifié)
   Palette bleu foncé + gris · fond crème · typo Fraunces · filigrane machine
   ========================================================================== */

:root{
  --it-navy: #1B3A5B;        /* bleu foncé principal */
  --it-navy-2: #12283F;      /* bleu très foncé (fonds) */
  --it-navy-soft: #2E5277;   /* bleu moyen (hover/accents) */
  --it-grey: #5B6675;        /* gris texte secondaire */
  --it-grey-2: #8A93A0;      /* gris clair */
  --it-cream: #F4EFE6;       /* fond crème */
  --it-cream-2: #ECE5D7;     /* crème plus soutenu */
  --it-line: rgba(27,58,91,.14);

  /* Variables de surface pilotées par le thème (valeurs = mode clair) */
  --it-surface: #F4EFE6;     /* fond principal */
  --it-surface-2: #ECE5D7;   /* fond secondaire */
  --it-text: #12283F;        /* texte principal */
  --it-text-soft: #5B6675;   /* texte secondaire */
}

/* ---- MODE SOMBRE : bleu nuit cohérent (pas de crème) ---- */
[data-bs-theme=dark]{
  --it-surface: #0E1B2A;     /* bleu nuit */
  --it-surface-2: #142536;
  --it-text: #EAF0F6;        /* texte clair */
  --it-text-soft: #A9B6C5;
  --it-line: rgba(255,255,255,.12);
}

/* ---- Fond global (suit le thème) ---- */
body{
  background-color: var(--it-surface) !important;
}
/* le conteneur de défilement laisse voir le fond du body (et le filigrane fixe) */
#smooth-wrapper,
#smooth-content,
.smooth-content{
  background-color: transparent !important;
  position: relative;
}
#smooth-wrapper{ z-index: 1; }

/* IMPORTANT — pages internes : elles utilisent un footer « révélé » (.footer-fixed-bottom,
   position:fixed, z-index:1). Le contenu DOIT passer au-dessus de ce footer : le template
   pose .z-index-3 sur #smooth-content. On ne force donc PLUS z-index:1 ici (cela écrasait
   le z-index:3 et faisait transparaître le footer à travers le contenu). De même, on ne rend
   PLUS <main> transparent globalement : sur les pages internes, <main> (.bg-neutral-0) reste
   opaque et masque le footer fixe jusqu'à sa révélation en fin de page. */

/* Accueil uniquement (body.it-home, sans footer fixe) : contenu au-dessus du filigrane
   fixe (z-0) et <main> transparent pour révéler le logo « machine » au défilement. */
.it-home #smooth-content{ z-index: 1; }
.it-home #smooth-content > main{
  background-color: transparent !important;
}

/* ==========================================================================
   FILIGRANE FIXE — le logo « machine » reste centré pendant le défilement
   ========================================================================== */
.it-bg-watermark{
  position: fixed;
  inset: 0;
  z-index: 0;                 /* derrière le contenu (#smooth-content = z-index 1) */
  pointer-events: none;
  /* Le filigrane est une forme d'une seule couleur : on ne charge plus deux PNG
     de 1,1 Mo (navy + blanc) mais un seul masque alpha de 137 Ko, recolore ici.
     Rendu strictement identique, teinte pilotee par background-color. */
  background-color: var(--it-navy);
  -webkit-mask-image: url('../imgs/template/logo/machine-watermark-mask.webp');
          mask-image: url('../imgs/template/logo/machine-watermark-mask.webp');
  -webkit-mask-repeat: no-repeat;          mask-repeat: no-repeat;
  -webkit-mask-position: center center;    mask-position: center center;
  -webkit-mask-size: min(90%, 1100px);     mask-size: min(90%, 1100px);   /* filigrane agrandi (demande client) */
  opacity: .055;                       /* mais discret : texture de fond, pour ne plus
                                          paraître posé par erreur sur les photos */
}
[data-bs-theme=dark] .it-bg-watermark{
  background-color: #fff;
  opacity: .05;
}
@media (max-width: 768px){
  .it-bg-watermark{ -webkit-mask-size: min(94%, 560px); mask-size: min(94%, 560px); }
}

/* ==========================================================================
   PIED DE PAGE — pavé en bleu marine (charte) au lieu du noir (demande client)
   ========================================================================== */
.at-footer-area.bg-neutral-950,
footer .at-footer-area.bg-neutral-950{
  background-color: var(--it-navy) !important;
}

/* surfaces claires opaques PAR DÉFAUT (suivent le thème).
   IMPORTANT : les pages internes utilisent un footer « révélé » (.footer-fixed-bottom,
   position:fixed). Ces fonds opaques sont indispensables pour masquer ce footer fixe
   pendant le défilement — sans eux, le footer transparaît à travers le contenu. */
[data-bs-theme=light] .bg-neutral-0,
[data-bs-theme=light] .bg-white{
  background-color: var(--it-surface) !important;
}
[data-bs-theme=light] .bg-neutral-50{
  background-color: var(--it-surface-2) !important;
}
[data-bs-theme=dark] .bg-neutral-0{ background-color: var(--it-surface) !important; }
[data-bs-theme=dark] .bg-neutral-50{ background-color: var(--it-surface-2) !important; }

/* PAGE D'ACCUEIL UNIQUEMENT (body.it-home) : pas de footer fixe ici, donc on peut
   rendre les surfaces transparentes pour révéler le filigrane « machine » fixe et
   centré pendant tout le défilement (demande client). Les pages internes ne sont
   pas touchées et conservent leur footer révélé fonctionnel. */
[data-bs-theme=light] .it-home .bg-neutral-0,
[data-bs-theme=light] .it-home .bg-white,
[data-bs-theme=light] .it-home .bg-neutral-50,
[data-bs-theme=dark] .it-home .bg-neutral-0,
[data-bs-theme=dark] .it-home .bg-neutral-50{
  background-color: transparent !important;
}

/* ---- Typo : titres en Fraunces, corps en Inter Tight ---- */
h1,h2,h3,h4,h5,h6,
.section-title,
.display,
.at-hero-content h1,
.hero-display{
  font-family: 'Fraunces', serif !important;
  letter-spacing: -.01em;
}
body,p,li,a,span,input,textarea,button,select,.lede,.muted{
  font-family: 'Inter Tight', sans-serif;
}
.mono,[class*="mono"]{ font-family:'JetBrains Mono', monospace; }

/* ---- Couleurs de texte (suivent le thème) ---- */
[data-bs-theme=light] body{ color: var(--it-text); }
[data-bs-theme=light] p{ color: var(--it-text-soft); }
[data-bs-theme=light] h1,[data-bs-theme=light] h2,[data-bs-theme=light] h3,
[data-bs-theme=light] h4,[data-bs-theme=light] h5,[data-bs-theme=light] h6{ color: var(--it-text); }

/* accent -> bleu (clair) / bleu clair (sombre) */
.text-theme-primary,.theme-primary,
.at-hero-social a:hover,
.common-underline:hover{ color: var(--it-navy) !important; }
[data-bs-theme=dark] .text-theme-primary,
[data-bs-theme=dark] .theme-primary{ color: #6FA8D6 !important; }

/* boutons sombres -> bleu profond (mode clair uniquement, le dark gère seul) */
[data-bs-theme=light] .at-btn.common-black,
[data-bs-theme=light] .at-btn.bg-dark,
[data-bs-theme=light] .bg-dark{ background-color: var(--it-navy-2) !important; }
[data-bs-theme=light] .at-btn.common-black:hover{ background-color: var(--it-navy) !important; }

/* ---- Cartes / pavés de texte qui « ressortent » sur le crème ---- */
.it-textcard{
  background:var(--it-surface-2);
  border:1px solid var(--it-line);
  border-radius:18px;
  box-shadow:0 18px 50px rgba(27,58,91,.08);
}

/* ==========================================================================
   FILIGRANE — la machine du logo client en fond
   ========================================================================== */
.it-filigrane{ position:relative; }
.it-filigrane::before{
  content:"";
  position:absolute;
  inset:0;
  background-color:var(--it-navy);
  -webkit-mask-image:url('../imgs/template/logo/machine-watermark-mask.webp');
          mask-image:url('../imgs/template/logo/machine-watermark-mask.webp');
  -webkit-mask-repeat:no-repeat;                        mask-repeat:no-repeat;
  -webkit-mask-position:right -60px bottom -40px;       mask-position:right -60px bottom -40px;
  -webkit-mask-size:min(52%, 720px);                    mask-size:min(52%, 720px);
  opacity:.07;
  pointer-events:none;
  z-index:0;
}
.it-filigrane > *{ position:relative; z-index:1; }

/* filigrane clair pour sections sombres */
.section--ink .it-filigrane::before,
.bg-neutral-950 .it-filigrane::before,
.it-filigrane.on-dark::before{
  background-color:#fff;
  opacity:.06;
}

/* ==========================================================================
   HÉRO — image plus large qui occupe tout l'espace
   ========================================================================== */
.at-hero-bg,
.at-hero-bg .layer,
.at-hero-bg img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}
.at-hero-bg img{ min-width:100%; min-height:100%; }

/* ---- Logo header un peu plus présent ---- */
.at-header-logo img,
.header-logo img,
.at-footer-logo img{
  transform:scale(1.12);
  transform-origin:left center;
}
.at-header-logo p,
.at-header-logo h4{
  font-family:'Fraunces', serif !important;
  font-weight:600 !important;
}

/* ---- Bandeau « Lançons votre projet » : voile bleu pour lisibilité ---- */
.at-banner-thumb{ position:relative; }
.at-banner-thumb::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(18,40,63,.82) 0%, rgba(18,40,63,.55) 45%, rgba(18,40,63,.25) 100%);
  z-index:1; pointer-events:none;
}
.at-banner-thumb > .position-absolute{ z-index:2 !important; }

/* ==========================================================================
   FORMULAIRES (style site N°3, palette bleu/crème)
   ========================================================================== */
.it-form-section{ padding:90px 0; position:relative; }
.it-form-wrap{
  max-width:920px; margin:0 auto; padding:0 20px;
}
.it-form-card{
  background:var(--it-surface-2);
  border:1px solid var(--it-line);
  border-radius:22px;
  padding:clamp(26px,4vw,48px);
  box-shadow:0 24px 70px rgba(27,58,91,.10);
}
.it-form-eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--it-navy); margin-bottom:.7rem; display:block;
}
.it-form-card h2{
  font-family:'Fraunces',serif; color:var(--it-text);
  font-size:clamp(1.7rem,3vw,2.4rem); margin:0 0 .4rem; line-height:1.1;
}
.it-form-card .it-form-lead{ color:var(--it-text-soft); margin:0 0 1.8rem; }
.it-field{ margin-bottom:1.1rem; }
.it-field label{
  display:block; font-size:.82rem; font-weight:600; color:var(--it-text);
  margin-bottom:.4rem;
}
.it-field .req{ color:var(--it-navy); }
.it-input,.it-select,.it-textarea{
  width:100%; padding:.8rem 1rem;
  border:1px solid var(--it-line); border-radius:12px;
  background:var(--it-surface); color:var(--it-text);
  font-family:'Inter Tight',sans-serif; font-size:.95rem;
  transition:border-color .2s, box-shadow .2s;
}
.it-input:focus,.it-select:focus,.it-textarea:focus{
  outline:none; border-color:var(--it-navy);
  box-shadow:0 0 0 3px rgba(27,58,91,.12); background:var(--it-surface-2);
}
.it-textarea{ min-height:120px; resize:vertical; }
.it-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media(max-width:640px){ .it-field-row{ grid-template-columns:1fr; } }
.it-file{
  display:block; padding:1.1rem; border:1.5px dashed var(--it-navy);
  border-radius:12px; text-align:center; color:var(--it-grey);
  cursor:pointer; background:var(--it-surface); font-size:.9rem;
}
.it-submit{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--it-navy-2); color:#fff; border:none;
  padding:.95rem 1.8rem; border-radius:40px; cursor:pointer;
  font-family:'Inter Tight',sans-serif; font-weight:600; font-size:.98rem;
  transition:background .2s, transform .15s;
}
.it-submit:hover{ background:var(--it-navy); transform:translateY(-1px); }
.it-form-note{ font-size:.78rem; color:var(--it-grey-2); margin-top:1rem; }
.it-form-tabs{ display:flex; gap:.6rem; margin-bottom:1.6rem; flex-wrap:wrap; }
.it-tab{
  padding:.55rem 1.1rem; border-radius:30px; border:1px solid var(--it-line);
  background:var(--it-surface); color:var(--it-text); cursor:pointer;
  font-size:.86rem; font-weight:600; font-family:'Inter Tight',sans-serif;
}
.it-tab.active{ background:var(--it-navy-2); color:#fff; border-color:var(--it-navy-2); }
.it-formpanel[hidden]{ display:none; }

/* ---- Neutralise d'éventuelles images de template manquantes (anti-404) ---- */
.footer-10__bg-img,
.sec-5-home-9__bg-img,
.sec-8-home-11__bg-img{ background-image:none !important; }


/* ==========================================================================
   AJUSTEMENTS MODE SOMBRE
   ========================================================================== */
/* le fond crème du héros (bg-img.webp) n'a pas de sens en sombre : on le masque */
[data-bs-theme=dark] .at-hero-area[data-background]{
  background-image:none !important;
  background-color:var(--it-surface) !important;
}
/* filigrane : version claire en sombre */
[data-bs-theme=dark] .it-filigrane::before{
  background-color:#fff;
  opacity:.06;
}
/* cartes de texte / formulaires : bordure plus douce en sombre */
[data-bs-theme=dark] .it-form-card,
[data-bs-theme=dark] .it-textcard{
  box-shadow:0 24px 70px rgba(0,0,0,.35);
}
/* onglet actif lisible en sombre */
[data-bs-theme=dark] .it-tab.active{ background:#6FA8D6; color:#0E1B2A; border-color:#6FA8D6; }
[data-bs-theme=dark] .it-submit{ background:#6FA8D6; color:#0E1B2A; }
[data-bs-theme=dark] .it-submit:hover{ background:#8FBEE2; }
[data-bs-theme=dark] .it-form-eyebrow{ color:#6FA8D6; }

/* ==========================================================================
   BLOC LOGO — logo officiel mis en avant juste sous le bandeau d'accueil
   ========================================================================== */
.it-logo-band{
  position: relative;
  z-index: 1;
  text-align: center;
  padding: clamp(56px, 7vw, 110px) 20px clamp(28px, 4vw, 52px);
}
.it-logo-band .it-logo-lockup{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.it-logo-band img{
  width: clamp(240px, 34vw, 420px);
  height: auto;
}
/* logo officiel (large, illustration + texte) : un peu plus large */
.it-logo-band .it-logo-official{
  width: clamp(300px, 46vw, 600px);
}
[data-bs-theme=dark] .it-logo-band img{
  filter: invert(1) brightness(1.7);
}
.it-logo-band .it-logo-word{
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  letter-spacing: .01em;
  color: var(--it-text);
  line-height: 1.05;
  margin: 0;
}
.it-logo-band .it-logo-sub{
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .72rem;
  color: var(--it-text-soft);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}
.it-logo-band .it-logo-sub::before,
.it-logo-band .it-logo-sub::after{
  content: "";
  width: 34px;
  height: 1px;
  background: var(--it-line);
}

/* ==========================================================================
   ARGUMENTAIRE ÉDITORIAL (.it-args)
   Remplace la pile GSAP « pinée » de la page Sac publicitaire.
   Motif du bug corrigé : la section était figée en haut de fenêtre (ScrollTrigger
   pin) alors que chaque encart mesurait 1130–1250 px pour une fenêtre de ~950 px.
   Environ 290 px de texte étaient hors écran et inatteignables, et l'encart
   suivant remontait par-dessus. Ici chaque bloc défile normalement : la longueur
   du texte n'est plus plafonnée par la hauteur de la fenêtre.
   Pas de position:sticky : ScrollSmoother applique un transform sur
   #smooth-content, ce qui neutralise sticky. Le mouvement est confié à
   .scale-up-img / .scale-up, déjà utilisé et testé ailleurs dans le thème.
   ========================================================================== */

.it-args{
  /* le conteneur parent porte deja pt-120 : pas de padding haut ici */
  padding-block: 0 clamp(30px, 4vw, 70px);
}

.it-arg{
  display: grid;
  /* colonne de lecture bornee (confort de lecture) + visuel qui prend le reste :
     le bloc reste aligne sur la pleine largeur du filet de section au-dessus. */
  grid-template-columns: minmax(0, clamp(400px, 40%, 640px)) minmax(0, 1fr);
  gap: clamp(30px, 4.5vw, 88px);
  align-items: start;
  padding-block: clamp(46px, 5.5vw, 92px);
  border-top: 1px solid var(--it-line);
}
.it-arg:first-of-type{
  border-top: 0;
  padding-top: 0;
}

/* --- Intitulé de rang : capitales espacées + filet (registre éditorial) --- */
.it-arg__index{
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 clamp(16px, 1.8vw, 28px);
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--it-text-soft);
}
.it-arg__index::after{
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--it-line);
}

.it-arg__title{
  margin: 0 0 clamp(14px, 1.6vw, 24px);
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(1.9rem, 3.9vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--it-text);
}
.it-arg__title a{
  color: inherit;
  text-decoration: none;
}
.it-arg__title a:hover{
  text-decoration: underline;
  text-underline-offset: .12em;
}

.it-arg__lead{
  margin: 0 0 clamp(14px, 1.4vw, 22px);
  font-size: clamp(1.05rem, 1.3vw, 1.32rem);
  line-height: 1.5;
  color: var(--it-text);
}

.it-arg__text{
  font-size: 1rem;
  line-height: 1.72;
  color: var(--it-text-soft);
}
.it-arg__text p{ margin: 0 0 1em; }
.it-arg__text p:last-child{ margin-bottom: 0; }

/* --- Faits : filets horizontaux, aucune icône de statut --- */
.it-arg__facts{
  list-style: none;
  margin: clamp(24px, 2.8vw, 38px) 0 0;
  padding: 0;
}
.it-arg__facts li{
  padding: 12px 0;
  border-top: 1px solid var(--it-line);
  font-size: .94rem;
  line-height: 1.45;
  color: var(--it-text);
}
.it-arg__facts li:last-child{
  border-bottom: 1px solid var(--it-line);
}

/* --- Colonne visuelle --- */
.it-arg__media{
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
}
.it-arg__media img{
  display: block;
  width: 100%;
  /* les visuels produit sont livres avec de larges marges blanches : on recadre
     pour que le sac occupe le cadre et equilibre la hauteur de la colonne texte. */
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  object-position: center;
}
.it-arg__media a{ display: block; }

@media (max-width: 991.98px){
  .it-arg{
    grid-template-columns: 1fr;
    gap: 26px;
    padding-block: 44px;
  }
  .it-arg__media{ order: -1; }
  .it-arg__media img{ aspect-ratio: 3 / 2; }
}

/* ==========================================================================
   CORRECTIF — intitulés de section illisibles (constaté le 04/09/2026)
   Le thème réutilise le composant bouton (.at-btn.common-black) comme simple
   INTITULÉ de section, neutralisé par .bg-transparent. Or la règle
   « boutons sombres -> bleu profond » plus haut porte !important : elle
   repeignait ces intitulés en aplat bleu, avec la couleur de texte #1e1e1e
   imposée par .common-black. Résultat : un rectangle bleu plein, sans texte
   lisible, à chaque intitulé de section et sur chaque page.
   Ici on rend .bg-transparent effectif et on ramène la couleur du texte à
   celle du corps de page — dans les deux thèmes.
   ========================================================================== */
.at-btn.common-black.bg-transparent,
.at-btn.common-black.bg-transparent:hover{
  background-color: transparent !important;
  color: var(--it-text) !important;
}
.at-btn.common-black.bg-transparent .text-1,
.at-btn.common-black.bg-transparent .text-2{
  color: inherit !important;
}

/* ==========================================================================
   GARDE-FOU — piles de cartes trop hautes pour la fenêtre
   Posé par main.js (« 31 bis ») quand la carte la plus haute d'une pile
   dépasse la hauteur de la fenêtre. Dans ce cas la section n'est pas figée :
   les cartes reprennent leur place dans le flux, les unes sous les autres,
   et la fin de chaque texte redevient atteignable. L'empilement animé reste
   actif partout où il tient — y compris sur écran court et sur mobile, où
   c'est justement là que le texte débordait sans qu'on s'en aperçoive.
   ========================================================================== */
.scroll-section.it-unpinned .wrapper,
.scroll-section.it-unpinned .list{
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 56px);
  height: auto;
}
.scroll-section.it-unpinned .item,
.scroll-section.it-unpinned .item:first-child,
.scroll-section.it-unpinned .item:not(:first-child){
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  min-height: 0;
  height: auto;
  transform: none;
  opacity: 1;
  z-index: auto;
}

/* ==========================================================================
   ARGUMENTAIRE DE PROFIL (.it-args--profil)
   Variante sans visuel utilisée par les pages Solutions : l'intitulé et le
   titre tiennent la colonne de gauche, le texte occupe la droite. Même
   typographie et mêmes filets que l'argumentaire principal.
   ========================================================================== */
.it-args--profil{
  padding-block: clamp(40px, 5vw, 80px) clamp(30px, 4vw, 70px);
}
.it-arg--text{
  grid-template-columns: minmax(0, clamp(240px, 26%, 340px)) minmax(0, 1fr);
}
.it-arg--text .it-arg__head{
  position: relative;
}
.it-arg--text .it-arg__title{
  font-size: clamp(1.45rem, 2.1vw, 2.15rem);
  margin-bottom: 0;
}
.it-arg--text .it-arg__lead{
  max-width: 62ch;
}
.it-arg--text .it-arg__text,
.it-arg--text .it-arg__facts{
  max-width: 68ch;
}
@media (max-width: 991.98px){
  .it-arg--text{ grid-template-columns: 1fr; }
  .it-arg--text .it-arg__head{ order: 0; }
}

/* ==========================================================================
   FORMULAIRES — piège à robots et bandeau de résultat
   Le piège doit rester dans le DOM et hors de l'écran : un lecteur d'écran ne
   l'annonce pas (aria-hidden), le clavier ne l'atteint pas (tabindex="-1"),
   mais un robot qui remplit tout le remplira. On n'utilise pas display:none,
   que certains robots savent détecter.
   ========================================================================== */
.it-hp{
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.it-formnotice{
  margin: 0 0 18px;
  padding: 14px 18px;
  font-size: .96rem;
  line-height: 1.5;
  border-top: 1px solid var(--it-line);
  border-bottom: 1px solid var(--it-line);
  background: var(--it-surface-2);
  color: var(--it-text);
}
.it-formnotice--ko{
  color: var(--it-navy);
  font-weight: 600;
}

/* ==========================================================================
   RÉSULTATS DE RECHERCHE
   ========================================================================== */
.it-resultats{ list-style: none; margin: 0; padding: 0; }
.it-resultat{
  padding: clamp(20px, 2.4vw, 32px) 0;
  border-top: 1px solid var(--it-line);
}
.it-resultat:last-child{ border-bottom: 1px solid var(--it-line); }
.it-resultat__title{
  margin: 0 0 8px;
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(1.3rem, 2vw, 1.9rem);
  line-height: 1.15;
}
.it-resultat__title a{ color: var(--it-text); text-decoration: none; }
.it-resultat__title a:hover{ text-decoration: underline; text-underline-offset: .12em; }
.it-resultat__desc{
  margin: 0;
  max-width: 68ch;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--it-text-soft);
}
.it-file-erreur{
  margin: 10px 0 0;
  padding: 10px 14px;
  font-size: .9rem;
  line-height: 1.45;
  font-weight: 600;
  color: var(--it-navy);
  background: var(--it-surface-2);
  border-top: 1px solid var(--it-line);
  border-bottom: 1px solid var(--it-line);
}


/* Les filtres des pages Solutions sont desormais des <button> et non des liens
   morts : on reprend a l'identique le rendu des .at-btn en neutralisant les
   styles par defaut du navigateur (police systeme, bordure et fond gris). */
button.at-btn,
button.filter-btn {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	margin: 0;
	text-align: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* ==========================================================================
   ICÔNES — remplacement de Font Awesome
   --------------------------------------------------------------------------
   Le thème ne se servait que de cinq glyphes : la croix de fermeture de la
   recherche, le plus du menu mobile, le plus et le moins des accordéons FAQ,
   et les deux chevrons du curseur « ball ». Les charger coûtait 732 Ko de
   polices et 87 Ko de CSS. Ils sont désormais dessinés ici, sans requête.

   Chaque glyphe est un masque : la couleur vient de background-color:
   currentColor, donc les règles de couleur et de survol déjà écrites dans
   main.css continuent de s'appliquer, y compris en mode sombre. La taille
   suit font-size (1em), donc les règles de dimension existantes aussi.
   ========================================================================== */
.it-icon{
  display:inline-block;
  width:1em;
  height:1em;
  vertical-align:-.125em;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat;   mask-repeat:no-repeat;
  -webkit-mask-position:center;    mask-position:center;
  -webkit-mask-size:contain;       mask-size:contain;
}
.it-icon--xmark{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 3.6 12.4 12.4M12.4 3.6 3.6 12.4' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 3.6 12.4 12.4M12.4 3.6 3.6 12.4' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E");
}
.it-icon--plus-bold{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.4V13.6M2.4 8H13.6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.4V13.6M2.4 8H13.6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* --- accordéons FAQ : le moins (déplié) et le plus (replié) --------------- */
.at-faq-button::before,
.at-faq-button:after{
  content:"";
  font-family:inherit;                 /* on n'appelle plus la police d'icônes */
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat;       mask-repeat:no-repeat;
  -webkit-mask-position:center;        mask-position:center;
  -webkit-mask-size:16px 16px;         mask-size:16px 16px;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.4 8H13.6' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.4 8H13.6' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.at-faq-button.collapsed:after{
  content:"";
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.4V13.6M2.4 8H13.6' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.4V13.6M2.4 8H13.6' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* --- curseur « ball » : les deux chevrons -------------------------------- */
#ball .ball-drag::before,
#ball .ball-drag::after{
  font-family:inherit;
  width:10px;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat;   mask-repeat:no-repeat;
  -webkit-mask-position:center;    mask-position:center;
  -webkit-mask-size:contain;       mask-size:contain;
}
#ball .ball-drag::before{
  content:"";
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10.5 2.8 5.3 8l5.2 5.2' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10.5 2.8 5.3 8l5.2 5.2' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
#ball .ball-drag::after{
  content:"";
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 2.8 10.7 8l-5.2 5.2' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 2.8 10.7 8l-5.2 5.2' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}