/* ============================================================
   POLICES - auto-hebergees, identiques sur TOUTES les pages.
   Avant, seule l'accueil declarait @font-face en local : les autres
   pages (registry, contact, notice, cgv, legal) chargeaient Inter depuis
   Google Fonts, ce qui provoquait le flash Arial -> Inter au chargement.
   ============================================================ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2?v=1') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2?v=1') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* Secours calque sur les metriques d'Inter : la bascule ne fait plus bouger
   la mise en page (meme hauteur de ligne, meme chasse). */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  ascent-override: 90%;
  descent-override: 22.43%;
  line-gap-override:0%;
  size-adjust: 107%;
}

/* ============================================================
   PureSpec - tokens.css
   Couche de normalisation chargée APRES shared.css et tailwind.css.
   Objectif : une seule échelle de rayons, une seule courbe d'animation,
   une seule famille de boutons. Purement additif : aucun HTML à toucher.
   ============================================================ */

:root {
  /* --- Rayons : 4 valeurs, plus 25 --- */
  --r-xs:   4px;   /* puces, tags, barres de progression */
  --r-sm:   8px;   /* champs de saisie, petits contrôles */
  --r-md:  12px;   /* boutons, cartes  <- valeur pivot du site */
  --r-lg:  18px;   /* panneaux, modales, blocs images */
  --r-xl:  24px;   /* grandes surfaces (hero, sections) */
  --r-full: 980px; /* pilules, badges, avatars */

  /* --- Motion : une courbe, trois durées --- */
  --ease-apple: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1); /* entrées / reveal */
  --t-fast: 0.2s;
  --t-std:  0.3s;
  --t-med:  0.45s;

  /* --- Boutons : gabarits constants --- */
  --btn-h:      56px;   /* hauteur primaire / secondaire */
  --btn-h-sm:   40px;   /* nav, actions inline */
  --btn-px:     24px;
  --btn-px-sm:  16px;
  /* 17 px, c'etait la taille qu'Apple reserve a son unique bouton d'achat
     de page produit - et encore, en graisse 400. Combinee a la graisse 500
     et repetee sur tous les boutons du site, elle alourdissait tout.
     Porsche tourne autour de 16 px, les boutons compacts d'Apple autour
     de 14. 15 px en graisse 500 tient les deux : lisible de loin sur un
     bouton de 56 px, sans effet touche geante. */
  --btn-fs:     15px;
  --btn-fs-sm:  13px;
  --btn-fw:     500;
  --btn-ls:     -0.01em;

  /* --- Couleurs : source unique. Avant, le site portait deux rouges
     de marque (#8B1C23 et #c8102e, ce dernier survivant en rgba(200,16,46)
     dans .btn-danger), plusieurs couleurs d'anneau de focus
     et plusieurs gris a 1 point d'ecart. --- */
  --c-ink:    #1d1d1f;   /* texte principal */
  --c-gray:   #6e6e73;   /* texte secondaire */
  --c-gray-2: #86868b;   /* texte tertiaire */
  --c-line:   #d2d2d7;   /* bordures */
  --c-bg:     #f5f5f7;   /* fond doux */
  --c-bg-2:   #fafafa;   /* fond tres doux */
  --c-hover:  #ececf0;   /* survol de champ */
  --c-blue:   #0066cc;   /* liens + anneau de focus, valeur unique */
  --c-green:  #34c759;   /* succes */
  --c-red:    #8B1C23;   /* rouge PureSpec, valeur unique */

  /* --- Empilement : une echelle nommee remplace les nombres magiques
     (2999 / 3000 / 3001 / 2500 / 10000) accumules au fil des correctifs. --- */
  --z-base:    0;
  --z-sticky:  10;
  --z-nav:     50;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
  --z-flow:    400;
  --z-skip:    500;

  /* --- Alias historiques -------------------------------------------------
     --ink, --gray, --line... etaient definis une seconde fois dans
     shared.css, avec leurs propres valeurs. Deux jeux de variables pour
     les memes couleurs, donc deux endroits ou se tromper. Ils ne sont
     plus que des renvois : une seule valeur fait foi, celle du dessus.
     Ils restent necessaires car des styles en ligne (compte, tableau de
     bord, back-office) et les dictionnaires i18n les utilisent encore. */
  --ink:   var(--c-ink);
  --gray:  var(--c-gray);
  --line:  var(--c-line);
  --bg:    var(--c-bg);
  --red:   var(--c-red);
  --green: var(--c-green);
  --blue:  var(--c-blue);
}

/* ------------------------------------------------------------
   1. RAYONS - on ramène les 25 valeurs trouvées sur l'échelle
   ------------------------------------------------------------ */
.btn-primary, .btn-primary-apple, .btn-hero-primary, .btn-secondary,
.btn-ghost, .btn-danger, .btn-next, .btn-back, .btn-sm, .btn-block,
.nav-cta, .nav-mobile-cta, .success-cta, .social-btn, .social-btn-apple,
.social-btn-google, .pending-btn, .pending-btn-pay, .pending-btn-del,
.btn-retry-verify {
  border-radius:var(--r-md);
}

input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
select, textarea {
  border-radius:var(--r-sm);
}

/* ------------------------------------------------------------
   2. BOUTONS - gabarit commun
   Hauteur, typo, alignement et transition identiques partout.
   Les couleurs restent définies par les règles existantes.
   ------------------------------------------------------------ */
.btn-primary, .btn-primary-apple, .btn-hero-primary, .btn-secondary,
.btn-ghost, .btn-danger, .btn-next, .btn-back, .btn-block,
.success-cta, .social-btn, .btn-retry-verify {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap:8px;
  min-height: var(--btn-h);
  padding:0 var(--btn-px);
  font-family: inherit;
  font-size: var(--btn-fs);
  font-weight: var(--btn-fw);
  letter-spacing: var(--btn-ls);
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--t-fast) var(--ease-apple),
    border-color     var(--t-fast) var(--ease-apple),
    color            var(--t-fast) var(--ease-apple),
    transform        var(--t-fast) var(--ease-apple),
    box-shadow       var(--t-fast) var(--ease-apple),
    opacity          var(--t-fast) var(--ease-apple);
}

/* Petits boutons : nav, actions secondaires inline */
.nav-cta, .btn-sm,
.pending-btn, .pending-btn-pay, .pending-btn-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap:8px;
  min-height: var(--btn-h-sm);
  padding:0 var(--btn-px-sm);
  font-family: inherit;
  font-size: var(--btn-fs-sm);
  font-weight: var(--btn-fw);
  letter-spacing: var(--btn-ls);
  line-height: 1;
  cursor: pointer;
  transition:
    background-color var(--t-fast) var(--ease-apple),
    border-color     var(--t-fast) var(--ease-apple),
    color            var(--t-fast) var(--ease-apple),
    transform        var(--t-fast) var(--ease-apple),
    opacity          var(--t-fast) var(--ease-apple);
}

/* Les utilitaires Tailwind py-4 / py-5 posés en plus des classes .btn-*
   dédoublaient la hauteur : min-height + padding vertical nul reprend la main. */
.btn-primary-apple.py-4, .btn-primary-apple.py-5,
.btn-hero-primary.py-4, .btn-hero-primary.py-5 {
  padding-top:0;
  padding-bottom:0;
}

/* ------------------------------------------------------------
   3. INTERACTIONS - une seule grammaire de feedback
   Apple : pas de "bounce", un enfoncement court et net.
   ------------------------------------------------------------ */
.btn-primary:hover, .btn-primary-apple:hover, .btn-hero-primary:hover,
.btn-secondary:hover, .btn-next:hover, .btn-back:hover,
.success-cta:hover, .social-btn:hover, .nav-cta:hover {
  transform: translateY(-1px);
}

.btn-primary:active, .btn-primary-apple:active, .btn-hero-primary:active,
.btn-secondary:active, .btn-next:active, .btn-back:active,
.success-cta:active, .social-btn:active, .nav-cta:active,
.pending-btn:active, .btn-sm:active {
  transform: scale(0.975);
  transition-duration: 0.08s;
}

/* Focus visible homogène (accessibilité + cohérence visuelle) */
.btn-primary:focus-visible, .btn-primary-apple:focus-visible,
.btn-hero-primary:focus-visible, .btn-secondary:focus-visible,
.btn-ghost:focus-visible, .btn-next:focus-visible, .btn-back:focus-visible,
.nav-cta:focus-visible, .success-cta:focus-visible, .social-btn:focus-visible,
a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--c-blue, #0066cc);
  outline-offset: 2px;
}

/* État désactivé unique */
.btn-primary[disabled], .btn-primary-apple[disabled], .btn-hero-primary[disabled],
.btn-secondary[disabled], .btn-next[disabled], .btn-back[disabled],
.success-cta[disabled], .social-btn[disabled], button[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* ------------------------------------------------------------
   4. TYPOGRAPHIE - une seule pile de polices
   Le site déclarait 7 variantes de la pile Inter : rendu de secours
   différent d'une page à l'autre pendant le chargement de la woff2.
   ------------------------------------------------------------ */
:root {
  --font-sans: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
}

html, body,
button, input, select, textarea, optgroup {
  font-family: var(--font-sans);
  /* PAS de -webkit-font-smoothing: antialiased.
     Sur macOS il bascule le rendu en niveaux de gris et amincit nettement le
     texte (c'est ce qui rendait la version ordinateur "sans graisse").
     Sur iOS le reglage est sans effet, d'ou l'ecart mobile / ordinateur.
     En "auto", macOS retrouve le lissage sous-pixel : meme graisse que sur mobile. */
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  font-synthesis: none;   /* jamais de faux gras : Inter couvre deja 100-900 */
}

/* ------------------------------------------------------------
   5. ACCESSIBILITÉ - respect de la préférence système
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ------------------------------------------------------------
   CTA du menu mobile : bouton pleine largeur, genereux en hauteur.
   (tokens.css le rangeait a tort parmi les petits boutons, ce qui
   l'aplatissait : il retrouve ici une vraie zone de tap.)
   ------------------------------------------------------------ */
.nav-mobile-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 58px;
  padding:16px 24px;
  font-family: inherit;
  font-size: 17px;
  font-weight: var(--btn-fw);
  letter-spacing: var(--btn-ls);
  line-height: 1.2;
  border-radius:var(--r-md);
  cursor: pointer;
  transition:
    background-color var(--t-fast) var(--ease-apple),
    transform        var(--t-fast) var(--ease-apple);
}
.nav-mobile-cta:active { transform: scale(0.98); transition-duration: 0.08s; }

@media (min-width: 900px) {
  .nav-mobile-cta { min-height: 46px; padding:12px 20px; font-size: 15px; }
}

/* ------------------------------------------------------------
   Tranche du sticker : la reference verticale doit etre centree
   sur la bande blanche, pas debordante a droite.
   Geometrie : .sticker = 123px, bordure 2px -> boite interieure 119px.
   .sticker-shadow = 107px, centre -> bande blanche de 6px de chaque cote.
   L'ancien reglage (right:-2px, width:8px) decalait le texte de 1px vers
   la droite et le faisait mordre sur la bordure noire.
   ------------------------------------------------------------ */
.sticker-ref-wrap,
.sticker.exporting .sticker-ref-wrap {
  right: 0;
  width: 6px;
  justify-content: center;
}
.sticker-ref,
.sticker.exporting .sticker-ref {
  transform: rotate(180deg);
  /* La boite de ligne d'un texte en writing-mode vertical a pour largeur son
     line-height. Sans valeur explicite, elle heritait de 1.5 (soit 7,5px) et
     debordait d'une bande blanche de 6px : le texte paraissait decale.
     line-height = largeur exacte de la bande -> centrage parfait sur l'axe X. */
  line-height: 6px;
}

/* ------------------------------------------------------------
   Selects : meme habillage que les champs texte du configurateur.
   Sans ca, le selecteur de plateforme afficherait le menu deroulant
   brut du systeme, en rupture avec le reste du formulaire.
   ------------------------------------------------------------ */
select.apple-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right:40px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%2386868b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}
select.apple-input::-ms-expand { display: none; }


/* ------------------------------------------------------------
   CTA principal du configurateur ("Finaliser la configuration").
   Il portait un py-5 Tailwind que tokens.css neutralisait : le bouton
   se retrouvait plus fin qu'avant. Il a maintenant sa propre hauteur.
   ------------------------------------------------------------ */
.btn-cta-xl {
  min-height: var(--btn-h);
  padding:0 32px;
  font-size: 17px;
  border-radius:var(--r-md);
}
@media (max-width: 899px) {
  .btn-cta-xl { min-height: var(--btn-h); }
  .step-nav .btn-next, .step-nav .btn-back { min-height: 56px; }
}

/* Les boutons du tunnel suivent l'echelle commune. */
.step-nav .btn-next, .step-nav .btn-back {
  min-height: var(--btn-h);
  border-radius:var(--r-md);
}

/* ------------------------------------------------------------
   Bande blanche du sticker : le picto et le texte doivent partager
   exactement le meme axe. line-height:1 + align-items:center suffit :
   pour des capitales Inter, le centre optique tombe alors sur le centre
   geometrique de la bande (verifie : 3,499px contre 3,5px sur 7px).
   Les anciens translateY(0.25px / 0.75px) poussaient le texte vers le bas.
   ------------------------------------------------------------ */
.sticker-stripe, .msk-stripe {
  align-items: center;
  justify-content: center;
}
.sticker-stripe svg, .msk-stripe svg {
  display: block;
  flex-shrink: 0;
}
.sticker-stripe-txt, .msk-stripe-txt {
  line-height: 1;
  height: auto;
  display: block;
  transform: none;
}

/* ------------------------------------------------------------
   Tranche : la reference verticale est centree sur la bande blanche.
   Geometrie commune au site, au compte client et aux planches admin :
   sticker 123x184, bordure 2px, contenu 107x168 centre
   -> bande blanche de 6px sur les quatre cotes.
   ------------------------------------------------------------ */
/* Tranche : la référence reste centrée sur la bande blanche de 6 mm des
   planches de production. (Dans l'atelier, elle est masquée : voir index.html.) */
.sticker-ref-wrap {
  right: 0;
  bottom: 6px;
  width: 6px;
  justify-content: center;
}
.sticker-ref {
  transform: rotate(180deg);
  /* La boite de ligne d'un texte en writing-mode vertical a pour largeur son
     line-height. Sans valeur explicite, elle heritait de 1.5 (soit 7,5px) et
     debordait d'une bande blanche de 6px : le texte paraissait decale.
     line-height = largeur exacte de la bande -> centrage parfait sur l'axe X. */
  line-height: 6px;
}


/* L'utilitaire Tailwind .antialiased reintroduit le lissage niveaux de gris.
   On le neutralise sur les elements de texte courants. */
body.antialiased, body.antialiased * {
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

/* ============================================================
   ACCESSIBILITE - lien d'evitement et contenu reserve aux
   lecteurs d'ecran. Ajoute le 2026-07-24 : la page n'avait ni
   moyen de sauter la navigation, ni region d'annonce.
   ============================================================ */
.ps-skip {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: var(--z-skip, 500);
  display: inline-block;
  padding:12px 20px;
  border-radius:var(--r-md);
  background: #1d1d1f;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: top var(--t-fast) var(--ease-apple);
}
.ps-skip:focus { top: 12px; outline: 2px solid #fff; outline-offset: 2px; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding:0; margin:-1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Aucun element interactif ne doit perdre son indicateur de focus. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex="0"]:focus-visible {
  outline: 2px solid var(--c-blue, #0066cc);
  outline-offset: 2px;
  border-radius:var(--r-xs);
}

/* Un conteneur qui recoit le focus par programme (ouverture d'une modale)
   ne doit rien afficher : l'utilisateur n'a rien demande, et un cadre bleu
   surgissant tout seul est exactement ce qu'on ne veut pas. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
  outline: none;
}

/* ------------------------------------------------------------
   BOUTONS DE L'ATELIER ET DU PARCOURS IA
   ------------------------------------------------------------
   Ces classes etaient restees hors du gabarit commun. Resultat :
   sur une meme page, les deux appels a l'action du hero de
   l'atelier faisaient 46 px de haut, les boutons du parcours IA
   54 px, ceux du reste du site 56 px et celui de finalisation
   62 px - avec trois grammaires de survol differentes
   (translateY, opacity, scale). C'etaient precisement les deux
   boutons que le visiteur voit en premier.

   On ne reprend pas white-space:nowrap ici : ces boutons sont
   pleine largeur et portent des libelles longs en allemand.
   ------------------------------------------------------------ */
.ps-cta-ai, .ps-cta-manual,
.ai-primary-btn, .ai-back-btn, .ai-back-inline, .ai-photo-btn,
.ai-analyze-full, .ai-main-validate, .ai-notforme-full, .ai-inline-btn,
.photo-pick-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--btn-h);
  padding: 0 var(--btn-px);
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: var(--btn-fs);
  font-weight: var(--btn-fw);
  letter-spacing: var(--btn-ls);
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-apple),
              border-color     var(--t-fast) var(--ease-apple),
              color            var(--t-fast) var(--ease-apple),
              transform        var(--t-fast) var(--ease-apple),
              opacity          var(--t-fast) var(--ease-apple);
}

/* Meme survol et meme appui que partout ailleurs. */
.ps-cta-ai:hover, .ps-cta-manual:hover,
.ai-primary-btn:hover, .ai-back-btn:hover, .ai-back-inline:hover,
.ai-photo-btn:hover, .ai-analyze-full:hover, .ai-main-validate:hover,
.ai-notforme-full:hover, .photo-pick-primary:hover {
  opacity: 1;
  transform: translateY(-1px);
}
.ps-cta-ai:active, .ps-cta-manual:active,
.ai-primary-btn:active, .ai-back-btn:active, .ai-back-inline:active,
.ai-photo-btn:active, .ai-analyze-full:active, .ai-main-validate:active,
.ai-notforme-full:active, .photo-pick-primary:active {
  transform: scale(0.975);
  transition-duration: 0.08s;
}

/* Le bouton IA garde son degrade Gemini : c'est une identite voulue,
   pas une divergence. Seule sa geometrie est alignee. */
.ps-cta-ai:hover, .ai-gemini:hover { filter: brightness(1.06); }

/* Les surcharges de padding a specificite plus forte laissees dans
   home.css reprenaient la main sur le gabarit. On les neutralise ici
   plutot que d'aller les supprimer une par une dans les regles
   contextuelles, pour ne pas casser leurs autres declarations. */
.ai-step-actions .ps-cta-manual,
.ai-main-actions .ai-back-inline,
.ai-step2-actions .ai-back-inline,
.ai-photo-actions .ai-photo-btn {
  padding: 0 var(--btn-px);
  min-height: var(--btn-h);
}

/* Etat desactive commun. */
.ps-cta-ai[disabled], .ps-cta-manual[disabled],
.ai-primary-btn[disabled], .ai-analyze-full[disabled],
.ai-main-validate[disabled], .photo-pick-primary[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* ------------------------------------------------------------
   RETOURS UTILISATEUR : une seule palette
   ------------------------------------------------------------
   Le site portait quatre familles de messages sans lien entre
   elles : le toast, les bandeaux .alert-*, les etiquettes
   .badge-* et les textes du parcours IA. D'ou trois verts
   (#34c759, #166534, #1d8a4e), trois rouges (#8B1C23, #991b1b,
   rgb(200,16,46)) et deux ambres. Aucune ne consommait les
   jetons. Elles les consomment maintenant.
   ------------------------------------------------------------ */
:root {
  --c-amber:    #8a5a00;
  --c-red-bg:   #fdf3f4;
  --c-green-bg: #f1faf3;
  --c-amber-bg: #fdf8ed;
  --c-blue-bg:  #eff5fd;
}

.alert-error   { background: var(--c-red-bg);   color: var(--c-red); }
.alert-success { background: var(--c-green-bg); color: #1d7a44; }
.alert-info    { background: var(--c-blue-bg);  color: var(--c-blue); }

.badge-red    { background: var(--c-red-bg);   color: var(--c-red); }
.badge-green  { background: var(--c-green-bg); color: #1d7a44; }
.badge-amber  { background: var(--c-amber-bg); color: var(--c-amber); }
.badge-blue   { background: var(--c-blue-bg);  color: var(--c-blue); }

.ai-check-hint { color: var(--c-amber); }
.ai-cg-ok      { color: #1d7a44; }
.ai-verify-note {
  background: var(--c-amber-bg);
  border-color: rgba(138, 90, 0, 0.22);
  color: var(--c-amber);
}
.ai-verify-note strong { color: var(--c-amber); }


/* ------------------------------------------------------------
   PARCOURS IA SUR MOBILE : plus de debordement
   ------------------------------------------------------------
   Les rangees d'actions (« Retour » + « Ajouter une photo »)
   etaient en flex horizontal avec white-space:nowrap. Sur un
   telephone, le libelle plus la gouttiere du bouton depassaient
   la carte blanche. On les empile sous 640 px : plus aucune
   largeur ne peut deborder, et l'action principale reste en
   haut grace a column-reverse (l'ordre du DOM est inverse).
   ------------------------------------------------------------ */
.ps-cta-ai, .ps-cta-manual,
.ai-primary-btn, .ai-back-btn, .ai-back-inline, .ai-photo-btn,
.ai-analyze-full, .ai-main-validate, .ai-notforme-full, .ai-inline-btn,
.photo-pick-primary {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 640px) {
  .ai-photo-actions,
  .ai-main-actions,
  .ai-step2-actions,
  .ai-step-actions {
    flex-direction: column-reverse;
    gap: 10px;
  }
  .ai-photo-actions > *,
  .ai-main-actions > *,
  .ai-step2-actions > *,
  .ai-step-actions > * {
    flex: 0 0 auto;
    width: 100%;
    margin: 0;
  }
  .ai-photo-actions .ai-photo-btn,
  .ai-step2-actions > button,
  .ai-main-actions .ai-back-inline,
  .ai-step2-actions .ai-back-inline {
    white-space: normal;
    padding: 0 16px;
  }
}