/* =============================================================================
   BarroTech — adaptation mobile
   L'export Claude Design ne contient aucune regle responsive : la mise en page
   est concue pour les artboards desktop. Ce fichier n'ajoute que des regles
   sous 1024px. Au-dessus, le rendu du design reste strictement inchange.
   Les !important sont necessaires : le design utilise des styles inline.
   ============================================================================= */

/* --- Garde-fou : aucun debordement horizontal --- */
@media (max-width: 1024px) {
  html, body { overflow-x: hidden; }
}

/* --- Header : liberer la hauteur et laisser le contenu respirer --- */
@media (max-width: 1024px) {
  header > div {
    height: auto !important;
    flex-wrap: wrap !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    row-gap: 12px !important;
  }

  /* La navigation passe sur sa propre ligne, sous le logo et les boutons */
  header nav {
    order: 3;
    width: 100%;
    row-gap: 10px !important;
  }

  header > div > div:last-child {
    margin-left: auto !important;
  }
}

/* --- Menu mobile.
       Le markup (bouton [data-nav-toggle] + nav [data-nav]) active la fonction
       initMobileNav() deja presente dans js/site.js, qui bascule l'attribut
       data-nav-open. Avec 7 entrees, empiler tous les liens en permanence
       occupait une part excessive de l'ecran. --- */
@media (max-width: 1024px) {
  header [data-nav-toggle] {
    display: inline-flex !important;
    order: 2;
  }

  /* Les CTA restent a gauche du bouton, la nav bascule sous la barre */
  header > div > div:last-child { order: 1; }

  header nav[data-nav] {
    display: none !important;
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: stretch !important;
    gap: 0 !important;
    row-gap: 0 !important;
    padding-top: 4px;
    border-top: 1px solid rgba(255,255,255,0.1);
  }

  header nav[data-nav][data-nav-open="true"] {
    display: flex !important;
  }

  /* Cibles de tap confortables une fois le menu ouvert */
  header nav[data-nav] a {
    padding: 13px 2px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }

  header nav[data-nav] a:last-child { border-bottom: 0; }
}

/* --- Tres petits ecrans : ne garder que le bouton principal --- */
@media (max-width: 620px) {
  header > div > div:last-child > a:not(:last-child) {
    display: none !important;
  }

  header nav {
    font-size: 13px !important;
    column-gap: 14px !important;
  }
}

/* --- Entre 1024 et 1200px, 7 entrees de menu et 2 boutons cohabitent mal.
       On resserre les gouttieres plutot que de laisser la nav passer a la ligne. --- */
@media (min-width: 1025px) and (max-width: 1200px) {
  header > div { gap: 20px !important; }
  header nav[data-nav] { column-gap: 14px !important; }
}

/* =============================================================================
   ACCUEIL SOMBRE — hero pleine hauteur et enumerations
   ============================================================================= */

/* Le hero plein ecran est spectaculaire en grand, oppressant sur telephone :
   on le laisse se dimensionner sur son contenu. */
@media (max-width: 900px) {
  #accueil[data-hero] {
    min-height: 0 !important;
    padding-top: 8px;
  }
  /* La parallaxe est coupee sous 900px par motion.js : l'image reprend
     une hauteur normale, sans le debord de 112% prevu pour le mouvement. */
  #accueil[data-hero] > img {
    height: 100% !important;
  }
}

/* Frise de la methode : le trace horizontal n'a de sens que si les cinq
   etapes tiennent sur une ligne. Des qu'elles s'empilent, il est masque. */
@media (max-width: 900px) {
  [data-frise-grid] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 36px 24px !important; }
  [data-frise] > svg { display: none; }
}
@media (max-width: 460px) {
  [data-frise-grid] { grid-template-columns: 1fr !important; }
}

/* Enumerations : une colonne sur telephone, sinon les filets se croisent */
@media (max-width: 620px) {
  [data-enum] {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
}

/* =============================================================================
   PAGE BARRO AI — mise en page premium
   Le header y est clair, ce qui impose des variantes de couleur sur le menu
   mobile : les bordures blanches translucides du header sombre y seraient
   invisibles.
   ============================================================================= */

/* --- Menu mobile, variante header clair --- */
@media (max-width: 1024px) {
  header[data-header-light] nav[data-nav] {
    border-top: 1px solid #ECEFF4;
  }
  header[data-header-light] nav[data-nav] a {
    border-bottom: 1px solid #F1F4F8;
  }
  header[data-header-light] nav[data-nav] a:last-child { border-bottom: 0; }
}

/* --- Grilles a 4 colonnes : 4 -> 2 -> 1 --- */
@media (max-width: 1024px) {
  [data-cards-4] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
  [data-cards-4] { grid-template-columns: 1fr !important; }
}

/* --- Blocs en deux colonnes : empilement --- */
@media (max-width: 900px) {
  [data-split] {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  [data-why] { grid-template-columns: 1fr !important; }
}

/* --- Hero : le visuel quitte le fond absolu et revient dans le flux --- */
@media (max-width: 900px) {
  [data-hero-media] {
    position: relative !important;
    width: 100% !important;
    height: clamp(240px, 52vw, 340px) !important;
    order: -1;
  }
  [data-hero-media] > div { display: none !important; }
  [data-hero] [data-hero-grid] > div:last-child { min-height: 0 !important; }
  [data-hero-note] {
    position: static !important;
    text-align: left !important;
    margin-top: 26px !important;
  }
  [data-hero-note] span { margin-left: 0 !important; }
}

/* --- Footer premium : 5 colonnes -> 2 -> 1 --- */
@media (max-width: 1024px) {
  [data-footer] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-footer-note] {
    grid-column: 1 / -1;
    text-align: left !important;
  }
  [data-footer-note] span { margin-left: 0 !important; }
}
@media (max-width: 560px) {
  [data-footer] { grid-template-columns: 1fr !important; }
}

/* --- Hero de la page Barro AI : deux colonnes, puis pile verticale.
       Cible un attribut dedie plutot qu'un selecteur [style*="..."], pour ne pas
       casser silencieusement si le style inline est retouche. --- */
@media (max-width: 900px) {
  [data-hero-grid] {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  /* Les cartes flottantes reviennent dans le flux, sous le visuel */
  [data-hero-cards] {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    margin-top: 14px;
  }
}

/* --- Cartes metiers de Barro AI : 2 colonnes des que la grille auto-fit
       deviendrait illisible, puis 1 seule sur les plus petits ecrans. --- */
@media (max-width: 620px) {
  [data-metiers] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

@media (max-width: 400px) {
  [data-metiers] {
    grid-template-columns: 1fr !important;
  }
}

/* --- Hero de l'accueil : passer les 2 colonnes en pile verticale --- */
@media (max-width: 900px) {
  [style*="grid-template-columns: minmax(0, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

/* --- Titre du hero : la coupure forcee en deux lignes ne vaut qu'en large.
       Sous 700px, on laisse le texte se replier naturellement. --- */
@media (max-width: 700px) {
  #hero-break { display: none; }
}

/* --- Titres : eviter les debordements sur les mots longs --- */
@media (max-width: 620px) {
  h1 {
    font-size: clamp(28px, 8.4vw, 40px) !important;
    letter-spacing: -0.02em !important;
  }
  h2 {
    font-size: clamp(23px, 6.2vw, 32px) !important;
  }
}

/* --- Confort de lecture et de tap --- */
/* La regle "main a[border-radius: 12px][padding: 16px]" qui se trouvait ici a
   ete SUPPRIMEE le 28 septembre 2026. Elle etait morte depuis l'origine, aucune
   page ne portant de balise <main>, et son remplacement vit au paragraphe 3 en
   bas de ce fichier. Quand <main> a ete ajoute pour l'accessibilite, elle s'est
   reveillee et a elargi des boutons qui ne devaient pas l'etre : 0.4 de CLS. */
@media (max-width: 620px) {
  /* Tableaux et blocs larges : defilement interne plutot que debordement */
  table, pre {
    display: block;
    overflow-x: auto;
    max-width: 100%;
  }
}

/* --- Formulaires sur fond sombre --- */
/* Les champs heritent d'un fond translucide : le texte saisi, l'invite et la
   liste deroulante native doivent suivre, sinon le navigateur retombe sur ses
   couleurs claires par defaut. */
input, select, textarea {
  font-family: inherit;
  font-size: 15px;
  color: #F2F5FA;
  color-scheme: dark;
}

input::placeholder,
textarea::placeholder {
  color: rgba(242, 245, 250, 0.50);
}

select option {
  background: #0B1424;
  color: #F2F5FA;
}

/* --- Accordeon natif de la page FAQ --- */
/* <details> plutot qu'un accordeon JavaScript : sans script, les reponses
   restent accessibles au lieu de disparaitre avec un display:none inline. */
details[data-faq] > summary {
  list-style: none;
}

details[data-faq] > summary::-webkit-details-marker {
  display: none;
}

details[data-faq] > summary [data-faq-plus] {
  transition: transform 200ms ease, border-color 200ms ease, background 200ms ease;
}

details[data-faq] > summary:hover [data-faq-plus] {
  border-color: #C89B72;
  background: rgba(200, 155, 114, 0.12);
}

details[data-faq][open] > summary [data-faq-plus] {
  transform: rotate(45deg);
  border-color: #C89B72;
}

@media (prefers-reduced-motion: reduce) {
  details[data-faq] > summary [data-faq-plus] {
    transition: none;
  }
}

/* --- Visuels qui respirent au survol --- */
/* Le zoom porte sur l'image, pas sur la carte : le cadre reste net et
   c'est le motif qui avance. Uniquement au survol, donc sans JavaScript. */
[data-zoom] img {
  transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

[data-zoom]:hover img {
  transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  [data-zoom] img,
  [data-zoom]:hover img {
    transition: none;
    transform: none;
  }
}

/* --- Titre BarroAI : la coupure forcee disparait sur petit ecran --- */
/* En dessous de 720px, la premiere ligne ne tient plus : mieux vaut
   laisser le navigateur couper ou il peut. */
@media (max-width: 720px) {
  #titre-break { display: none; }
}

/* --- Note manuscrite du hero BarroAI --- */
/* Ancree au tiers de la hauteur du visuel, elle passe au-dessus de
   l'epaule du sujet quelle que soit la hauteur du hero. */
@media (max-width: 1200px) and (min-width: 901px) {
  [data-hero-note] {
    top: 28% !important;
    font-size: clamp(16px, 1.6vw, 21px) !important;
  }
}

/* --- Gages du hero BarroAI --- */
/* Une seule ligne tant que la colonne est assez large ; en dessous, le
   retour a la ligne reprend ses droits plutot que de deborder. */
@media (max-width: 1160px) {
  [data-gages] {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 12px 22px !important;
  }
}

/* =============================================================================
   COMPATIBILITE TELEPHONE, TABLETTE, ORDINATEUR
   Passe de consolidation. Les regles au-dessus ont ete ajoutees au fil des
   sections ; celles-ci comblent ce qui manquait et corrigent ce qui ne
   s'appliquait pas.
   ============================================================================= */

/* --- 1. Garde-fous valables a toutes les largeurs ---------------------- */
html {
  -webkit-text-size-adjust: 100%;   /* iOS grossit le texte en paysage sans ca */
  text-size-adjust: 100%;
}

img, svg, canvas, video, iframe {
  max-width: 100%;
}

/* Un email ou une URL longue ne doit jamais elargir la page */
p, li, span, td, dd, summary {
  overflow-wrap: break-word;
}

/* Retour tactile discret plutot que le rectangle bleu par defaut */
a, button, summary, [role="button"] {
  -webkit-tap-highlight-color: rgba(200, 155, 114, 0.18);
}

/* --- 2. Ancres : la barre collante ne doit pas masquer le titre vise ---
   Le header mesure 74px en grand ecran, moins une fois replie. */
@media (max-width: 1024px) {
  html { scroll-padding-top: 76px; }
}
@media (max-width: 620px) {
  html { scroll-padding-top: 68px; }
}

/* --- 3. Boutons pleine largeur sur telephone --------------------------
   Remplace une regle qui ciblait "main a[...]" et ne s'appliquait a rien,
   aucune page ne portant alors de balise <main>. Cette regle morte a depuis
   ete supprimee. On vise ici les boutons ambres, reconnaissables a leur
   degrade, hors header et pied de page. */
@media (max-width: 620px) {
  section a[style*="linear-gradient(122deg"],
  section button[style*="linear-gradient(122deg"] {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* Leur conteneur cesse d'etaler deux boutons sur une ligne */
  section div[style*="display: flex"][style*="gap: 12px"],
  section div[style*="display: flex"][style*="gap: 14px"] {
    flex-direction: column;
    align-items: stretch !important;
  }
}

/* --- 4. Champs de saisie : eviter le zoom automatique d'iOS -----------
   Safari agrandit la page des qu'un champ passe sous 16px. */
input, select, textarea {
  font-size: 16px;
}

@media (min-width: 1025px) {
  input, select, textarea { font-size: 15px; }
}

/* --- 5. Cibles tactiles ------------------------------------------------
   Au doigt, 37px est trop petit. La zone cliquable s'agrandit sans que le
   dessin ne bouge, grace au pseudo-element. */
@media (pointer: coarse) {
  footer a[aria-label],
  header [data-nav-toggle] {
    position: relative;
  }

  footer a[aria-label]::after,
  header [data-nav-toggle]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }

  /* Les liens de navigation et de pied de page gagnent en hauteur de frappe */
  footer nav a,
  footer div[style*="display: grid"] > a {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  /* La question entiere reste la cible, pas seulement le signe plus */
  details[data-faq] > summary {
    min-height: 52px;
  }
}

/* --- 6. Tablette en mode portrait -------------------------------------
   Entre 620 et 900px, les grilles a quatre colonnes deviennent illisibles
   avant meme d'atteindre le palier telephone. */
@media (max-width: 900px) and (min-width: 621px) {
  [data-metiers],
  [data-cards-4] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* --- 7. Telephone en paysage ------------------------------------------
   Un hero calibre en hauteur d'ecran devient une bande illisible quand
   l'ecran ne fait que 380px de haut. */
@media (max-height: 500px) and (orientation: landscape) {
  #accueil[data-hero] {
    min-height: 0 !important;
  }

  #accueil[data-hero] > div[style*="z-index: 10"] {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  header > div {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}

/* --- 8. Tres petits ecrans, sous 380px --------------------------------- */
@media (max-width: 380px) {
  /* Les pastilles de la FAQ et les etiquettes cessent de deborder */
  [data-faq] > summary {
    gap: 12px !important;
  }

  /* Le logo garde sa lisibilite sans ecraser le bouton du menu */
  header img[src*="wordmark"] {
    height: 16px !important;
  }
}

/* =============================================================================
   CORRECTIONS RELEVEES AU TEST SUR VIEWPORT REEL
   Rendus verifies a 390, 768 et 1024 px dans une iframe, seule methode qui
   evalue vraiment les media queries a la largeur voulue.
   ============================================================================= */

/* --- Justification : elle ne tient pas sur une colonne etroite ---------
   Sous 620px, une ligne justifiee de 30 caracteres s'ouvre en trous blancs.
   Le texte revient centre, comme le titre qu'il accompagne. */
@media (max-width: 620px) {
  p[style*="text-align: justify"] {
    text-align: center !important;
  }
}

/* --- Note manuscrite du hero BarroAI ----------------------------------
   Remise dans le flux, elle se retrouvait seule au-dessus du visuel, dans
   une bande vide collee au header. Elle revient sur l'image, en bas a
   gauche, la ou le sujet ne gene pas. */
@media (max-width: 900px) {
  [data-hero-media] { position: relative !important; }

  [data-hero-note] {
    position: absolute !important;
    z-index: 3;
    top: auto !important;
    bottom: 16px;
    left: 18px;
    right: auto !important;
    max-width: 62% !important;
    text-align: left !important;
    font-size: clamp(15px, 4.2vw, 19px) !important;
  }

  [data-hero-note] span {
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}

/* Sur telephone la note tombe sur la partie claire de la photo :
   une ombre plus dense suffit a la detacher sans ajouter de cartouche. */
@media (max-width: 900px) {
  [data-hero-note] {
    text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 2px 22px rgba(0,0,0,0.85) !important;
  }
}

/* =============================================================================
   PAGE INSTALLATION STARLINK (installation-starlink.html)
   Le formulaire en etapes a besoin d'etats (:checked, :focus, invalide) que
   les attributs style= ne savent pas exprimer. Tout est cible par attribut
   data-, rien ne touche les autres pages.
   ============================================================================= */

/* L'attribut hidden doit l'emporter sur les display: flex/grid inline. */
#formulaire [hidden] {
  display: none !important;
}

/* Envoi sans JavaScript : Netlify renvoie sur #demande-envoyee. */
#demande-envoyee:target {
  display: block !important;
}

/* --- Champs de saisie --- */
[data-champ] {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

textarea[data-champ] {
  padding: 12px 14px;
  line-height: 1.6;
  resize: vertical;
}

[data-champ]:focus {
  border-color: #C89B72;
  box-shadow: 0 0 0 3px rgba(200,155,114,0.22);
}

#formulaire [aria-invalid="true"] {
  border-color: #D14343 !important;
}

/* --- Choix en tuiles : toute la tuile est la cible au doigt --- */
[data-choix] {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(242,245,250,0.86);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}

[data-choix] input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #C89B72;
}

[data-choix]:hover {
  border-color: rgba(200,155,114,0.5);
}

[data-choix]:has(input:checked) {
  border-color: #C89B72;
  background: rgba(200,155,114,0.14);
  color: #F2F5FA;
}

[data-choix]:has(input:focus-visible) {
  outline: 2px solid #DCB28A;
  outline-offset: 2px;
}

[data-choix-groupe][aria-invalid="true"] [data-choix] {
  border-color: rgba(209,67,67,0.7);
}

/* --- Message d'erreur d'une etape --- */
[data-etape-erreur] {
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(224,108,102,0.4);
  border-radius: 10px;
  background: rgba(224,108,102,0.12);
  font-size: 14px;
  line-height: 1.55;
  color: #F2A5A0;
}

/* --- Sans JavaScript, les etapes s'empilent : on les espace --- */
[data-etape] + [data-etape] {
  margin-top: 40px !important;
  padding-top: 32px !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}

[data-etapes-actives] [data-etape] + [data-etape] {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

[data-etape-titre]:focus {
  outline: none;
}

/* --- Les cinq volets de l'etude : une ligne en grand ecran --- */
@media (max-width: 1100px) {
  [data-cards-5] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 760px) {
  [data-cards-5] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 480px) {
  [data-cards-5] { grid-template-columns: 1fr !important; }
}

/* --- Integration reseau : 3 + 3 en grand ecran --- */
@media (max-width: 900px) {
  [data-cards-3] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 520px) {
  [data-cards-3] { grid-template-columns: 1fr !important; }
}

/* --- Listes a puce ambre --- */
[data-liste] li {
  position: relative;
  padding-left: 18px;
}

[data-liste] li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #C89B72;
}

/* --- Libelle du bandeau : degrade anime ambre / bleu ---
   Le texte prend la couleur d'un degrade qui defile. Sans support de
   background-clip: text, la couleur ambre inline reste affichee. Avec
   « reduire les animations », la regle globale fige le degrade. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  [data-degrade] {
    background: linear-gradient(90deg, #C89B72, #F2D5B4, #7FC7FF, #5C9BFF, #F2D5B4, #C89B72);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    animation: bt-degrade 6s linear infinite;
  }
}

@keyframes bt-degrade {
  from { background-position: 0% 50%; }
  to { background-position: 300% 50%; }
}

/* --- Bandeau replie : « Voir plus » et icone qui pulse --- */
details[data-transparence-plus] > summary {
  list-style: none;
}

details[data-transparence-plus] > summary::-webkit-details-marker {
  display: none;
}

[data-libelle-moins],
details[data-transparence-plus][open] [data-libelle-plus] {
  display: none;
}

details[data-transparence-plus][open] [data-libelle-moins] {
  display: inline;
}

[data-chevron] {
  transition: transform 200ms ease;
}

details[data-transparence-plus][open] [data-chevron] {
  transform: rotate(180deg);
}

details[data-transparence-plus] > summary:hover [data-voir-plus] {
  border-color: #DCB28A;
  background: rgba(200,155,114,0.12);
}

/* L'icone pulse : un halo ambre qui s'etend et s'efface, et le point
   d'information qui clignote doucement. */
[data-transparence-icone]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(220,178,138,0.55);
  animation: bt-halo 1.8s ease-out infinite;
}

[data-transparence-icone] svg {
  animation: bt-clignote 1.8s ease-in-out infinite;
}

@keyframes bt-halo {
  0% { box-shadow: 0 0 0 0 rgba(220,178,138,0.55); }
  70% { box-shadow: 0 0 0 12px rgba(220,178,138,0); }
  100% { box-shadow: 0 0 0 0 rgba(220,178,138,0); }
}

@keyframes bt-clignote {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@media (max-width: 760px) {
  [data-transparence] [data-roles] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* --- Bandeau de transparence sur telephone ---
   Il doit rester lisible sans occuper tout le premier ecran : on retire
   l'icone et on resserre les quatre roles, le texte reste entier. */
@media (max-width: 620px) {
  [data-transparence] [data-roles] {
    gap: 6px !important;
  }

  [data-transparence] [data-roles] > div {
    padding: 7px 10px !important;
  }

  [data-transparence] [data-roles] dt {
    font-size: 11.5px !important;
  }

  [data-transparence] [data-roles] dd {
    font-size: 13px !important;
  }

  [data-transparence-detail] {
    font-size: 14px !important;
  }

  /* La regle 3 empile deja les boutons ; « Continuer » passe au-dessus,
     sous le pouce, et « Précédent » en dessous. */
  [data-etape-nav] {
    flex-direction: column-reverse !important;
  }

  [data-etape-nav] button {
    margin-left: 0 !important;
  }
}