@import url('../fonts/fonts.css');

/* ============================================================================
   FBA PREP SERVICE — feuille de style
   ----------------------------------------------------------------------------
   Direction : le monde du prep center, c'est l'étiquette d'expédition et le
   code-barres. C'est le geste central du métier — apposer la bonne étiquette —
   et c'est ce qui sert ici d'élément signature (.etiquette) et de séparateur
   (.code-barres). Oswald en capitales espacées évoque le marquage au pochoir
   sur les caisses ; tout le reste reste sobre pour lui laisser la place.

   Identité conservée du site d'origine : bleu #19588A, orange #F57A12,
   Oswald + Open Sans.
   ========================================================================== */

:root {
  /* --- Couleurs --- */
  --bleu:        #19588a;   /* bleu de marque (logo) */
  --bleu-nuit:   #0e2c45;   /* fonds sombres, pied de page */
  --bleu-clair:  #eaf1f7;   /* aplats froids légers */
  --orange:      #f57a12;   /* couleur de marque — aplats uniquement */
  --orange-vif:  #ff8f2f;   /* survol des boutons (plus clair = plus lisible) */
  --orange-trait:#d3620a;   /* traits, coches, liserés — 3,8:1 sur blanc */
  --orange-texte:#b45206;   /* orange EN TEXTE sur fond clair — 5,1:1 */
  --orange-clair:#ffc48a;   /* orange en texte sur bleu ou nuit — 4,8:1 */
  --orange-sombre: #c95f06;
  --kraft:       #e7dcc8;   /* le carton d'expédition — utilisé avec parcimonie */
  --encre:       #14191d;   /* texte principal */
  --ardoise:     #5b6570;   /* texte secondaire */
  --papier:      #ffffff;
  --papier-casse:#f6f7f9;
  --trait:       #dde3e9;   /* filets décoratifs (cartes, séparateurs) */
  --trait-champ: #7d858d;   /* bordure des champs de saisie — 3,4:1 sur blanc */

  /* --- Typographie --- */
  --titre: 'Oswald', 'Arial Narrow', sans-serif;
  --texte: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  /* --- Mesures --- */
  --largeur: 1200px;
  --gouttiere: 24px;
  --entete-h: 76px;

  /* --- Rythme vertical : une seule échelle, pas de valeurs au hasard --- */
  --pas-1: 8px;
  --pas-2: 16px;
  --pas-3: 24px;
  --pas-4: 40px;
  --pas-5: 64px;
  --pas-6: 96px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--texte);
  font-size: 17px;
  line-height: 1.68;
  color: var(--encre);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video, svg { max-width: 100%; display: block; }
img, video { height: auto; }
a { color: var(--bleu); text-underline-offset: 3px; }

/* ---------------------------------------------------------------- Typographie */

h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 500;
  line-height: 1.1;
  margin: 0 0 var(--pas-2);
  letter-spacing: -0.005em;
}
h1 { font-size: clamp(2.4rem, 5.4vw, 3.9rem); font-weight: 700; }
h2 { font-size: clamp(1.85rem, 3.5vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 1.9vw, 1.35rem); letter-spacing: 0; }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; }

/* Surtitre : petite étiquette de section, en marquage de caisse */
.surtitre {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--titre); font-weight: 500;
  font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--orange-texte);
  margin: 0 0 var(--pas-2);
}
.surtitre::before {
  content: ''; width: 28px; height: 2px; background: var(--orange-trait); flex: 0 0 auto;
}
.section-sombre .surtitre,
.section-bleue .surtitre,
.cta .surtitre,
.hero .surtitre { color: var(--orange-clair); }
.section-sombre .surtitre::before,
.section-bleue .surtitre::before,
.cta .surtitre::before,
.hero .surtitre::before { background: var(--orange-clair); }

.conteneur { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--gouttiere); }
.mesure { max-width: 62ch; }

/* ------------------------------------------------------------- Accessibilité */

.evitement {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--bleu); color: #fff; padding: 12px 20px;
  font-family: var(--titre); border-radius: 0 0 4px 0;
}
.evitement:focus { left: 0; }

:where(a, button, input, select, textarea, summary, details):focus-visible {
  outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 2px;
}

.visuellement-cache {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ================================================================== SIGNATURE

   .code-barres — bande de traits verticaux irréguliers. Sert de séparateur et
   de texture. Dessinée en dégradés répétés : aucune image, aucun surcoût.
   ========================================================================== */

.code-barres {
  height: 26px;
  background-image: repeating-linear-gradient(
    90deg,
    currentColor 0 2px, transparent 2px 5px,
    currentColor 5px 6px, transparent 6px 11px,
    currentColor 11px 14px, transparent 14px 16px,
    currentColor 16px 17px, transparent 17px 23px
  );
  opacity: .16;
  color: var(--bleu-nuit);
}
.section-sombre .code-barres { color: #fff; opacity: .22; }

/* .etiquette — l'étiquette FNSKU apposée sur un carton : fond blanc, filet
   noir, code-barres en pied. C'est le composant que la page doit laisser en
   mémoire ; il n'est utilisé qu'aux endroits qui comptent. */
.etiquette {
  background: #fff;
  border: 1px solid var(--encre);
  box-shadow: 3px 3px 0 var(--encre);
  padding: var(--pas-3) var(--pas-3) var(--pas-2);
  position: relative;
}
.etiquette-pied {
  margin-top: var(--pas-3);
  padding-top: var(--pas-2);
  border-top: 1px dashed var(--trait);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
}
.etiquette-pied .code-barres { flex: 1; height: 30px; opacity: .8; color: var(--encre); }
.etiquette-ref {
  font-family: var(--titre); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ardoise); white-space: nowrap;
}

/* ==================================================================== EN-TÊTE */

.entete {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--trait);
  height: var(--entete-h);
  display: flex; align-items: center;
}
.entete .conteneur { display: flex; align-items: center; justify-content: space-between; gap: var(--pas-3); }
.logo img { height: 48px; width: auto; }

.nav-liste { list-style: none; display: flex; align-items: center; gap: var(--pas-3); margin: 0; padding: 0; }
.nav-liste a {
  font-family: var(--titre); font-weight: 500; font-size: .95rem;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--encre); text-decoration: none;
  padding: 8px 2px; position: relative; white-space: nowrap;
  transition: color .18s;
}
.nav-liste a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
  background: var(--orange); transform: scaleX(0); transform-origin: left;
  transition: transform .22s ease;
}
.nav-liste a:hover { color: var(--orange-texte); }
.nav-liste a:hover::after,
.nav-liste a[aria-current="page"]::after { transform: scaleX(1); }
.nav-liste a[aria-current="page"] { color: var(--orange-texte); }

/* Le dernier lien du menu est l'action : traité comme un bouton */
.nav-liste .nav-action a {
  background: var(--orange); color: var(--encre); padding: 10px 18px; border-radius: 2px;
}
.nav-liste .nav-action a:hover { background: var(--orange-vif); color: var(--encre); }
.nav-liste .nav-action a::after { display: none; }

.burger { display: none; background: none; border: 0; cursor: pointer; width: 46px; height: 46px; padding: 11px; }
.burger span { display: block; height: 2px; background: var(--encre); margin: 5px 0; transition: transform .25s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 960px) {
  .burger { display: block; }
  .nav {
    position: fixed; inset: var(--entete-h) 0 auto 0;
    background: #fff; border-bottom: 1px solid var(--trait);
    max-height: 0; overflow: hidden; transition: max-height .3s ease;
    box-shadow: 0 18px 40px rgba(14, 44, 69, .14);
  }
  .nav[data-ouvert="true"] { max-height: 80vh; overflow-y: auto; }
  .nav-liste { flex-direction: column; align-items: stretch; gap: 0; padding: var(--pas-1) var(--gouttiere) var(--pas-3); }
  .nav-liste a { display: block; padding: 15px 0; border-bottom: 1px solid var(--trait); }
  .nav-liste a::after { display: none; }
  .nav-liste .nav-action { margin-top: var(--pas-2); }
  .nav-liste .nav-action a { text-align: center; border-bottom: 0; }
}

/* ==================================================================== BOUTONS */

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--titre); font-weight: 500; font-size: 1rem;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 15px 30px; border: 2px solid transparent; border-radius: 2px;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: background .2s, color .2s, border-color .2s, transform .12s;
}
.bouton:active { transform: translateY(1px); }
.bouton svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* Texte encre et non blanc : blanc sur #f57a12 ne donne que 2,7:1, très en
   dessous du seuil. L'encre sur ce même orange donne 6,5:1, et la couleur de
   marque est conservée telle quelle. Le survol éclaircit — l'assombrir aurait
   fait retomber le contraste sous le seuil. */
.bouton-orange { background: var(--orange); color: var(--encre); }
.bouton-orange:hover { background: var(--orange-vif); color: var(--encre); }
.bouton-bleu { background: var(--bleu); color: #fff; }
.bouton-bleu:hover { background: var(--bleu-nuit); }
.bouton-contour { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.bouton-contour:hover { background: #fff; color: var(--bleu-nuit); border-color: #fff; }
.bouton-contour-sombre { background: transparent; color: var(--bleu); border-color: var(--bleu); }
.bouton-contour-sombre:hover { background: var(--bleu); color: #fff; }

/* ======================================================================= HÉRO */

.hero { position: relative; display: flex; align-items: center; overflow: hidden; min-height: min(86vh, 780px); }
.hero-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(96deg, rgba(9,26,41,.90) 0%, rgba(9,26,41,.72) 46%, rgba(9,26,41,.34) 100%),
    linear-gradient(0deg, rgba(9,26,41,.55) 0%, transparent 34%);
}
.hero .conteneur { position: relative; z-index: 2; color: #fff; padding-block: var(--pas-6) var(--pas-5); }
.hero h1 { color: #fff; max-width: 15ch; margin-bottom: var(--pas-3); }
.hero h1 .accent { color: var(--orange); }
.hero-accroche { font-size: clamp(1.02rem, 1.5vw, 1.16rem); max-width: 54ch; color: rgba(255,255,255,.92); margin-bottom: var(--pas-4); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--pas-2); }

/* Bande de preuves : les 3 arguments qui décident, sous le héro.
   Fond plein — la version translucide virait au gris terne, la bande étant
   posée sur la page et non sur la vidéo. */
.hero-preuves { background: var(--bleu-nuit); }
.hero-preuves .conteneur {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--pas-3) var(--pas-4); padding-block: var(--pas-3);
}
.preuve { display: flex; align-items: center; gap: 16px; color: #fff; }
.preuve + .preuve { padding-left: var(--pas-4); border-left: 1px solid rgba(255,255,255,.16); }
@media (max-width: 760px) { .preuve + .preuve { padding-left: 0; border-left: 0; } }
.preuve svg { width: 32px; height: 32px; color: var(--orange-clair); flex: 0 0 auto; }
.preuve-valeur { font-family: var(--titre); font-size: 1.3rem; line-height: 1.15; margin: 0; }
.preuve-libelle { font-size: .86rem; color: rgba(255,255,255,.72); line-height: 1.35; margin: 2px 0 0; }

/* Héro court des pages intérieures */
.hero-interne { background: var(--bleu-nuit); color: #fff; padding: var(--pas-6) 0 var(--pas-5); position: relative; overflow: hidden; }
.hero-interne::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 26px;
  background-image: repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 5px,#fff 5px 6px,transparent 6px 11px,#fff 11px 14px,transparent 14px 16px,#fff 16px 17px,transparent 17px 23px);
  opacity: .14;
}
.hero-interne h1 { color: #fff; max-width: 20ch; margin-bottom: var(--pas-3); }
.hero-interne p { max-width: 58ch; color: rgba(255,255,255,.86); font-size: 1.1rem; margin-bottom: 0; }
.hero-interne .surtitre { color: #ffb066; }
.hero-interne .surtitre::before { background: #ffb066; }

/* =================================================================== SECTIONS */

.section { padding-block: var(--pas-6); }
.section-serree { padding-block: var(--pas-5); }
.section-claire { background: var(--papier-casse); }
.section-sombre { background: var(--bleu-nuit); color: #fff; }
.section-sombre h2, .section-sombre h3 { color: #fff; }
.section-sombre p { color: rgba(255,255,255,.84); }
.section-bleue { background: var(--bleu); color: #fff; }
.section-bleue h2, .section-bleue h3 { color: #fff; }
.section-bleue p { color: rgba(255,255,255,.9); }

/* En-tête de section : ancré à gauche par défaut, comme sur le site d'origine */
.section-entete { margin-bottom: var(--pas-5); max-width: 62ch; }
.section-entete p { color: var(--ardoise); font-size: 1.06rem; margin-bottom: 0; }
.section-sombre .section-entete p, .section-bleue .section-entete p { color: rgba(255,255,255,.84); }
.section-entete-centre { margin-inline: auto; text-align: center; }
.section-entete-centre .surtitre { justify-content: center; }

/* ===================================================================== GRILLES */

.grille { display: grid; gap: var(--pas-3); }
.grille-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grille-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grille-4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Deux colonnes texte + visuel */
.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--pas-5); align-items: center; }
.duo-visuel { position: relative; }
.duo-visuel img { width: 100%; border: 1px solid var(--trait); }

/* ====================================================================== CARTES

   Pas d'ombre portée : un filet net et un liseré haut qui se colore au survol.
   Une carte doit ressembler à une fiche, pas à un bouton flottant.
   ========================================================================== */

.carte {
  background: #fff;
  border: 1px solid var(--trait);
  padding: var(--pas-3);
  position: relative;
  transition: border-color .2s, transform .18s;
}
.carte::before {
  content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px;
  background: var(--orange); transform: scaleX(0); transform-origin: left;
  transition: transform .26s ease;
}
.carte:hover { border-color: var(--bleu); transform: translateY(-3px); }
.carte:hover::before { transform: scaleX(1); }
.carte h3 { margin-bottom: var(--pas-1); }
.carte p { color: var(--ardoise); margin-bottom: 0; font-size: .97rem; }

.section-sombre .carte, .section-bleue .carte {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18);
}
.section-sombre .carte:hover, .section-bleue .carte:hover { border-color: var(--orange); }
.section-sombre .carte p, .section-bleue .carte p { color: rgba(255,255,255,.8); }

.carte-icone { color: var(--orange-trait); margin-bottom: var(--pas-2); }
.carte-icone svg { width: 38px; height: 38px; }
.section-sombre .carte-icone, .section-bleue .carte-icone { color: var(--orange-clair); }

/* Carte avec visuel */
.carte-visuel { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.carte-visuel img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.carte-visuel .carte-corps { padding: var(--pas-3); }

/* ======================================================== LISTES ET PICTOGRAMMES */

.coches { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.coches li { position: relative; padding-left: 34px; }
.coches li::before {
  content: ''; position: absolute; left: 0; top: .42em;
  width: 18px; height: 10px;
  border-left: 2.5px solid var(--orange-trait); border-bottom: 2.5px solid var(--orange-trait);
  transform: rotate(-45deg);
}
.section-sombre .coches li::before, .section-bleue .coches li::before,
.cta .coches li::before, .pied .coches li::before { border-color: var(--orange-clair); }

/* ====================================================================== ÉTAPES

   Numérotées : ici l'ordre porte une information réelle (on ne peut pas
   expédier avant d'avoir connecté sa boutique).
   ========================================================================== */

.etapes { counter-reset: etape; display: grid; gap: var(--pas-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.etape { position: relative; padding-top: var(--pas-4); border-top: 2px solid var(--trait); }
.etape::before {
  counter-increment: etape; content: counter(etape, decimal-leading-zero);
  position: absolute; top: calc(-1 * var(--pas-2)); left: 0;
  font-family: var(--titre); font-size: 2.4rem; font-weight: 700; line-height: 1;
  color: var(--orange-texte); background: inherit; padding-right: 12px;
}
.section-claire .etape::before { background: var(--papier-casse); }
.etape h3 { margin-top: var(--pas-2); }
.etape p { color: var(--ardoise); }

/* ====================================================================== TARIFS */

.tarifs { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: var(--pas-3); align-items: start; }
.tarif { background: #fff; border: 1px solid var(--trait); padding: var(--pas-4) var(--pas-3) var(--pas-3); position: relative; }
.tarif-phare { border: 2px solid var(--encre); box-shadow: 5px 5px 0 var(--orange); }
.tarif-etiquette {
  position: absolute; top: 0; left: 0; transform: translateY(-50%);
  margin-left: var(--pas-3);
  background: var(--orange); color: var(--encre);
  font-family: var(--titre); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 14px; white-space: nowrap;
}
.tarif h3 { margin-bottom: var(--pas-1); }
.tarif-prix { font-family: var(--titre); font-weight: 700; font-size: 2.15rem; color: var(--bleu); line-height: 1.1; margin: var(--pas-1) 0 4px; }
.tarif-prix .unite { font-family: var(--texte); font-size: .92rem; font-weight: 400; color: var(--ardoise); }
.tarif-detail { color: var(--ardoise); font-size: .93rem; margin-bottom: var(--pas-3); }
.tarif-inclus { font-family: var(--titre); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ardoise); margin-bottom: var(--pas-2); }

/* ===================================================================== CHIFFRES */

.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--pas-4); }
.chiffre { border-left: 3px solid var(--orange-trait); padding-left: var(--pas-3); }
.chiffre-valeur { font-family: var(--titre); font-weight: 700; font-size: clamp(2.3rem, 4.4vw, 3.1rem); line-height: 1; color: #fff; }
.chiffre-libelle { font-size: .95rem; color: rgba(255,255,255,.8); margin-top: 6px; }
.section-claire .chiffre-valeur { color: var(--bleu); }
.section-claire .chiffre-libelle { color: var(--ardoise); }

/* ========================================================================== FAQ */

.faq { display: grid; gap: 0; border-top: 1px solid var(--trait); max-width: 900px; }
.faq details { border-bottom: 1px solid var(--trait); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--pas-3) 48px var(--pas-3) 0;
  font-family: var(--titre); font-size: 1.18rem; position: relative;
  transition: color .18s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--orange-texte); }
.faq summary::after,
.faq summary::before {
  content: ''; position: absolute; right: 8px; top: 50%; background: var(--orange-trait);
  transition: transform .25s ease;
}
.faq summary::after  { width: 15px; height: 2px; transform: translateY(-50%); }
.faq summary::before { width: 2px; height: 15px; transform: translate(6.5px, -50%); }
.faq details[open] summary::before { transform: translate(6.5px, -50%) scaleY(0); }
.faq details[open] summary { color: var(--bleu); }
.faq-reponse { padding: 0 48px var(--pas-3) 0; color: var(--ardoise); }

/* ================================================================ APPEL À L'ACTION */

.cta { background: var(--bleu); color: #fff; padding-block: var(--pas-6); position: relative; overflow: hidden; }
.cta h2 { color: #fff; }
.cta p { color: rgba(255,255,255,.9); max-width: 56ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--pas-2); margin-top: var(--pas-4); }
.cta-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--pas-4); align-items: center; }

/* ================================================================== FORMULAIRE */

.form-mise-en-page { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--pas-5); align-items: start; }
@media (max-width: 900px) { .form-mise-en-page { grid-template-columns: 1fr; } }

.formulaire { display: grid; gap: var(--pas-3); }
.champ { display: grid; gap: 7px; }
.champ-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pas-3); }
@media (max-width: 580px) { .champ-duo { grid-template-columns: 1fr; } }

.champ label { font-family: var(--titre); font-size: .88rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ardoise); }
.champ .requis { color: var(--orange-texte); }
.champ input, .champ select, .champ textarea {
  font-family: inherit; font-size: 1rem; color: var(--encre);
  padding: 13px 15px; border: 1px solid var(--trait-champ); border-radius: 2px;
  background: #fff; width: 100%;
  transition: border-color .18s, box-shadow .18s;
}
.champ input:focus, .champ select:focus, .champ textarea:focus {
  border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(25,88,138,.15); outline: none;
}
.champ input[aria-invalid="true"], .champ select[aria-invalid="true"], .champ textarea[aria-invalid="true"] {
  border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192,57,43,.12);
}
.champ textarea { min-height: 130px; resize: vertical; }
.champ-erreur { color: #c0392b; font-size: .86rem; min-height: 1.15em; }

.champ-consentement { display: flex; gap: 12px; align-items: flex-start; font-family: var(--texte); font-size: .92rem; text-transform: none; letter-spacing: 0; color: var(--ardoise); }
.champ-consentement input { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 3px; accent-color: var(--orange); }

.pot-de-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-message { padding: 15px 18px; border-radius: 2px; font-weight: 600; display: none; margin: 0; }
.form-message[data-etat="ok"]     { display: block; background: #e8f6ee; color: #1c6b3e; border-left: 4px solid #1c6b3e; }
.form-message[data-etat="erreur"] { display: block; background: #fdeceb; color: #a3271b; border-left: 4px solid #a3271b; }

.encart-contact { background: var(--bleu-nuit); color: #fff; padding: var(--pas-4) var(--pas-3); }
.encart-contact h3 { color: #fff; }
.encart-contact address { font-style: normal; color: rgba(255,255,255,.88); }
.encart-contact dl { margin: var(--pas-3) 0 0; display: grid; gap: var(--pas-2); }
.encart-contact dt { font-family: var(--titre); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-clair); }
.encart-contact dd { margin: 3px 0 0; color: #fff; }
.encart-contact a { color: #fff; }
.encart-contact .note { margin-top: var(--pas-3); padding-top: var(--pas-3); border-top: 1px solid rgba(255,255,255,.2); font-size: .9rem; color: rgba(255,255,255,.74); }

/* ============================================================= PAGES LÉGALES */

.page-legale { padding-block: var(--pas-5) var(--pas-6); }
.page-legale .conteneur { max-width: 820px; }
.page-legale h2 { font-size: 1.45rem; margin-top: var(--pas-5); padding-top: var(--pas-3); border-top: 1px solid var(--trait); }
.page-legale h2:first-of-type { margin-top: var(--pas-3); }
.page-legale ul { padding-left: 20px; margin-bottom: 1.1em; }
.page-legale li { margin-bottom: 7px; }
.page-legale address { font-style: normal; padding-left: var(--pas-2); border-left: 3px solid var(--trait); }
.page-legale .source { font-size: .87rem; color: var(--ardoise); }
.fil-ariane { font-family: var(--titre); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ardoise); margin-bottom: var(--pas-4); }
.fil-ariane a { color: var(--ardoise); }

/* ================================================================ PIED DE PAGE */

.pied { background: var(--bleu-nuit); color: rgba(255,255,255,.8); padding-block: var(--pas-5) var(--pas-3); font-size: .96rem; }
.pied-accroche { font-family: var(--titre); font-size: clamp(1.2rem, 2.2vw, 1.6rem); color: #fff; max-width: 30ch; margin-bottom: var(--pas-5); line-height: 1.25; }
.pied h3 { color: #fff; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--pas-2); }
.pied a { color: rgba(255,255,255,.8); text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied-grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--pas-4); }
@media (max-width: 900px) { .pied-grille { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.pied address { font-style: normal; }
/* `width: auto` est indispensable : sans lui l'image garde la largeur de son
   attribut HTML (286 px) tout en subissant la hauteur imposée — le logo était
   étiré de 202 %. Même règle que dans l'en-tête. */
.pied-logo {
  background: #fff; padding: 12px 16px; border-radius: 2px;
  display: inline-block; margin-bottom: var(--pas-3);
}
.pied-logo img { height: 46px; width: auto; }
.pied-bas {
  margin-top: var(--pas-5); padding-top: var(--pas-3); border-top: 1px solid rgba(255,255,255,.16);
  display: flex; flex-wrap: wrap; gap: 12px var(--pas-3); justify-content: space-between;
  font-size: .87rem; color: rgba(255,255,255,.6);
}
.pied-bas p { margin: 0; }

/* ==================================================================== DIVERS */

.centre { text-align: center; }
.tableau-tarif { width: 100%; border-collapse: collapse; font-size: .96rem; }
.tableau-tarif td { padding: 11px 0; border-bottom: 1px solid var(--trait); }
.tableau-tarif td:last-child { text-align: right; white-space: nowrap; }
.tableau-tarif tr:last-child td { border-bottom: 0; padding-top: var(--pas-2); font-weight: 700; }
.tableau-tarif tr:last-child td:last-child { color: var(--bleu); font-family: var(--titre); font-size: 1.3rem; }


/* Bloc d'appui de l'appel à l'action : une information utile plutôt qu'un
   ornement — l'adresse où envoyer la marchandise. */
.cta-appui { border-left: 3px solid rgba(255,255,255,.35); padding-left: var(--pas-3); }
.cta-appui-titre { font-family: var(--titre); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-clair); margin-bottom: var(--pas-1); }
.cta-appui address { font-style: normal; color: #fff; font-size: 1.05rem; line-height: 1.6; }
.cta-appui-note { font-size: .88rem; color: rgba(255,255,255,.7); margin: var(--pas-2) 0 0; }

/* ============================================================ MOBILE (≤ 760px)

   Trois ajustements mesurés sur iPhone (375 px) :
   — les liens en liste du pied de page ne faisaient que 21 px de haut, très en
     dessous d'une cible tactile confortable ;
   — les surtitres (0,8rem) et les libellés de la bande de preuves (0,86rem)
     descendaient sous 14 px, seuil en dessous duquel la lecture fatigue.
   ========================================================================== */

@media (max-width: 760px) {
  /* Cibles tactiles : le lien occupe toute la largeur et gagne de la hauteur */
  .pied ul li { line-height: 1.4; }
  .pied ul a {
    display: block;
    padding-block: 10px;
    min-height: 42px;
  }
  .pied ul { gap: 0; }
  .pied ul.coches { gap: 12px; }          /* la liste d'engagements n'est pas cliquable */
  .pied ul.coches a { padding-block: 0; min-height: 0; }

  /* Le téléphone et l'email de l'encart sont des points de contact : ils
     méritent une cible confortable, contrairement aux liens de source cités
     en plein texte (exemptés — WCAG 2.5.8). */
  .encart-contact dd a { display: inline-block; padding-block: 9px; }

  .surtitre { font-size: .85rem; }
  .preuve-libelle { font-size: .9rem; }

  /* Les libellés en capitales restent plus petits que le corps de texte —
     c'est leur rôle — mais on les remonte au-dessus de 13 px. L'unique
     exception assumée est .etiquette-ref, mention de type numéro d'étiquette
     d'expédition, dont la petitesse fait partie du signe. */
  .pied h3,
  .tarif-inclus,
  .cta-appui-titre,
  .tarif-etiquette,
  .encart-contact dt { font-size: .83rem; }

  /* Phrases complètes : au seuil de confort de lecture */
  .page-legale .source,
  .pied-bas { font-size: .9rem; }

  /* Le pied respire un peu plus une fois les colonnes empilées */
  .pied-grille { gap: var(--pas-4); }
  .pied-bas { flex-direction: column; gap: var(--pas-1); }
}

/* ================================================ REMPLACEMENT DES STYLES EN LIGNE

   Les 65 attributs style="…" du site généré obligeaient la CSP à tolérer
   'unsafe-inline' sur les styles. Ils sont désormais portés par des classes,
   ce qui permet de resserrer la politique à `style-src 'self'`.

   Les classes sont nommées par leur RÔLE, pas par leur effet : `.note-maj`
   plutôt que `.mt-44-gris`. Une classe utilitaire anonyme ne survit pas à une
   refonte, une classe sémantique si.

   Les espacements se calent sur l'échelle --pas-* déjà en place. Trois valeurs
   isolées ont été normalisées au passage (26→24, 36→40, 44→40 px) : écarts de
   2 à 4 px, invisibles, qui alignent le rythme vertical du site.
   ========================================================================== */

/* --- Espacement avant un élément détaché (bouton, grille secondaire) --- */
.espace-avant-s  { margin-top: var(--pas-3); }   /* 24px */
.espace-avant-m  { margin-top: 32px; }
.espace-avant-l  { margin-top: var(--pas-4); }   /* 40px */
.espace-avant-xl { margin-top: 48px; }

/* --- Une carte entière devient cliquable (page 404) --- */
.carte-lien { text-decoration: none; color: inherit; }

/* --- Mention de dernière mise à jour, en fin de page légale --- */
.note-maj { margin-top: var(--pas-4); color: var(--ardoise); font-size: .92rem; }

/* --- Paragraphe d'introduction, sous un titre de section --- */
.intro-section { color: var(--ardoise); margin-bottom: 32px; }

/* --- Deux colonnes alignées en haut plutôt que centrées --- */
.duo-haut { align-items: start; }

/* --- Bloc étiquette : le prix domine, la mention l'accompagne --- */
.etiquette .surtitre  { margin-bottom: var(--pas-1); }
.etiquette .tarif-prix { font-size: 3rem; }
.etiquette-note { color: var(--ardoise); font-size: .95rem; }

/* --- Accroche commerciale sous le bloc tarif --- */
.accroche-prix {
  margin-top: var(--pas-3);
  font-family: var(--titre); font-size: 1.28rem;
  color: var(--orange-texte); line-height: 1.3;
}

/* --- Phrase de bascule entre deux sections (page Logiciel) --- */
.transition-etapes {
  margin-top: var(--pas-4);
  font-family: var(--titre); font-size: 1.3rem; color: var(--bleu);
}

/* --- Page Tarifs --- */
.libelle-inclus { font-weight: 600; margin-bottom: 6px; }
.note-tarif { color: var(--ardoise); font-size: .92rem; margin-top: var(--pas-3); }

/* --- Mentions sous un formulaire --- */
.form-mention { font-size: .88rem; color: var(--ardoise); margin: 0; }

/* --- Variantes de corps de texte --- */
.liste-large      { font-size: 1.06rem; }
.paragraphe-large { font-size: 1.12rem; }

/* --- Le sprite de pictogrammes est retiré du flux --- */
.sprite-icones { position: absolute; }

/* --- Pied de page --- */
.pied .coches { gap: 10px; }

/* --- Texte d'accompagnement, moins appuyé que le corps courant --- */
.texte-secondaire { color: var(--ardoise); }