/*
 * Corrections des défauts d'origine (registre : docs/defauts-origine-corriges.md).
 * Chargé en dernier dans <head> (après tailwind.css).
 *
 * D2 — De 1024 à 1279 px, l'en-tête bureau du site d'origine ne tenait pas dans
 * son conteneur : le bouton « Contactez-nous » débordait du conteneur
 * (1024–1264 px) et était coupé par le bord de la fenêtre (1024–1152 px), collé
 * à l'élément de menu « EN ». Le contenu minimal de l'en-tête (~1248 px) ne tient
 * qu'à partir de 1280 px. Correction la plus petite à rendu intact hors plage :
 * prolonger le menu hamburger (déjà présent dans le design) jusqu'à 1279 px.
 * Aucun changement en dessous de 1024 px ni à partir de 1280 px.
 */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  header div.lg\:hidden {
    display: block !important;
  }
  header ul.lg\:flex {
    display: none !important;
  }
  header a.lg\:block {
    display: none !important;
  }
  /* L'en-tête bureau d'origine mesurait 144 px (bouton py-4 de 80 px de haut) ;
     le contenu hamburger (logo 64 px) donnerait 128 px et décalerait toute la
     page de 16 px. On conserve la hauteur d'origine. */
  header > .container {
    min-height: 5rem;
  }
}

/*
 * D3 — Sous 448 px, la rangée des 4 compteurs du héros mobile (libellés text-lg,
 * chiffres text-4xl) ne tient pas : elle élargissait le document à 446 px
 * (défilement horizontal ; le panneau du menu mobile, en position fixe, s'en
 * trouvait décalé et son bouton de fermeture sortait de l'écran). Tailles
 * réduites uniquement sous 448 px ; aucune autre largeur touchée.
 */
@media (max-width: 447.98px) {
  section div.flex.flex-row.justify-between.md\:hidden > .flex-1 > .text-lg {
    font-size: 0.75rem;
    line-height: 1.25rem;
  }
  section div.flex.flex-row.justify-between.md\:hidden > .flex-1 > .text-4xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }
  section div.flex.flex-row.justify-between.md\:hidden > .flex-1 > .text-4xl sup {
    font-size: 0.75rem;
  }
  /* La rangée d'origine mesurait 204 px de haut en FR et 176 px en EN
     (libellés plus courts) : on conserve la hauteur d'origine de chaque langue
     pour que tout le bas de page reste exactement aux mêmes positions. */
  html[lang="fr"] section div.flex.flex-row.justify-between.md\:hidden {
    min-height: 204px;
  }
  html[lang="en"] section div.flex.flex-row.justify-between.md\:hidden {
    min-height: 176px;
  }
}
/* Sous ~354 px, resserrer encore d'un cran (sinon la rangée atteint 325 px). */
@media (max-width: 353.98px) {
  section div.flex.flex-row.justify-between.md\:hidden > .flex-1 > .text-lg {
    font-size: 0.625rem;
    line-height: 1rem;
  }
  section div.flex.flex-row.justify-between.md\:hidden > .flex-1 > .text-4xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
  section div.flex.flex-row.justify-between.md\:hidden > .flex-1 > .text-4xl sup {
    font-size: 0.625rem;
  }
}

/*
 * D4 — Les images décoratives des bandeaux sombres (max-w-none, 400 à 650 px,
 * marges négatives) débordaient du document : +16 px de 768 à ~896 px et +6 px
 * vers 1280 px (défilement horizontal). On rogne uniquement l'axe horizontal au
 * niveau de la section ; le débordement VERTICAL voulu (image qui dépasse vers
 * le haut) reste intact (overflow-y: visible est préservé avec `clip`).
 * Les pixels rognés étaient déjà invisibles (au-delà du bord de la fenêtre).
 */
section.bg-dark-grey.text-white.relative {
  overflow-x: clip;
}

/*
 * D5 — Sous ~354 px, le logo d'en-tête (SVG à hauteur fixe h-16, soit 314 px de
 * large) plus le bouton hamburger ne tiennent pas dans la fenêtre : le document
 * s'élargissait à 354 px (défilement horizontal sur très petits écrans).
 * Le SVG est plafonné en largeur uniquement sous 354 px (ratio préservé par
 * preserveAspectRatio ; aucune autre largeur touchée).
 */
/*
 * D8 — De 1280 à ~1535 px, le contenu de l'en-tête (logo + menu + bouton)
 * remplit exactement le conteneur de 1280 px : l'élément de menu « EN » était
 * au contact du bouton « Contactez-nous » (écart 0 px, mesuré en ligne —
 * preuve : gap-menu-enligne-1280-1920.json). Demande client : donner à « EN »
 * le même espacement que celui qui sépare les éléments du menu (2,5 rem,
 * comme space-x-10). Le logo et le bouton sont figés (flex-shrink: 0) pour
 * que seule la liste du menu absorbe les 40 px (ses éléments se resserrent
 * légèrement, sans chevauchement — vérifié par balayage). À partir de
 * 1536 px (conteneur 2xl), l'espace naturel revient : aucun changement.
 */
/* D8 ne concerne QUE le français : le menu EN, plus court, laisse ~52 px
   d'espace libre de part et d'autre à 1280-1535 px (aucun défaut à corriger,
   et l'en-tête EN d'origine mesure 128 px, sans la 2e ligne vide du bouton). */
@media (min-width: 1280px) and (max-width: 1535.98px) {
  html[lang="fr"] header > .container > div:last-child {
    margin-left: 2.5rem;
    flex-shrink: 0;
  }
  html[lang="fr"] header > .container > a {
    flex-shrink: 0;
  }
  /* À l'origine (FR), dans cette plage, l'espace final du libellé
     « Contactez-nous » passait sur une 2e ligne vide (boîte comprimée au pixel
     près) : le bouton mesurait 80 px et imposait la hauteur d'en-tête de
     144 px. Une fois le bouton figé à sa largeur naturelle, l'espace tient sur
     la ligne : on conserve explicitement les 80 px pour un rendu inchangé. */
  html[lang="fr"] header a.lg\:block {
    min-height: 5rem;
  }
}

/*
 * D11 — Bloc « Article » (réplicateur des formulaires demande de taux /
 * cueillette, visible après « Charge partielle ») : 4 colonnes fixes (w-1/4)
 * sans comportement responsive sur le site d'origine -> sur mobile, menus
 * déroulants tronqués (39 px pour un texte de 82 px à 375 px) et dernier menu
 * débordant du cadre (+29 px). Preuves : fr-D11-{320,375,744}-*.png.
 * Correction UNIQUEMENT sous 768 px : 2 colonnes (Type+Quantité, Poids+LB/KG,
 * Longueur+Largeur, Hauteur+PIEDS/POUCES), menus pleine largeur de leur
 * colonne. Tablette/ordinateur inchangés.
 */
@media (max-width: 767.98px) {
  .replicator-set .field-row {
    flex-wrap: wrap;
  }
  .replicator-set .field-wrapper.w-1\/4 {
    width: calc(50% - 0.5rem);
  }
  .replicator-set .field-wrapper.w-1\/2,
  .replicator-set .field-wrapper.w-3\/4 {
    width: 100%;
  }
  .replicator-set select,
  .replicator-set input,
  .replicator-set textarea {
    min-width: 0;
    max-width: 100%;
  }
}
/* Sous 385 px, deux colonnes restent trop étroites pour « Sélectionnez... »
   (82 px de texte) : une colonne. */
@media (max-width: 384.98px) {
  .replicator-set .field-wrapper.w-1\/4 {
    width: 100%;
  }
}

/*
 * D6 — L'iframe Google Maps de la page Contactez-nous a une largeur HTML fixe
 * de 600 px : sous ~592 px, elle élargissait le document (défilement
 * horizontal ; panneau du menu mobile décalé). Plafonnée à la largeur de son
 * conteneur, UNIQUEMENT sous 600 px : au-delà, la largeur intrinsèque de
 * 600 px participe au calcul flex des colonnes (min-content) — la plafonner
 * partout déplaçait les colonnes de 8 px à ≥1024 px et changeait un retour
 * de ligne (vérifié au pixel).
 */
@media (max-width: 599.98px) {
  iframe[src*="google.com/maps"] {
    max-width: 100%;
  }
}

@media (max-width: 353.98px) {
  header a > div.h-16 > svg {
    max-width: calc(100vw - 88px);
  }
  /* Le mot « GÉNÉRATIONS » du H1 (text-5xl, ~300 px) déborde du conteneur
     (288 px à 320 px de large) : document élargi à 325 px. Léger cran de moins,
     uniquement sous 354 px (le leading-[1.14] est un multiplicateur, il suit). */
  section h1.font-sarabun.text-5xl {
    font-size: 2.5rem;
  }
}