/* ------------------------------------------------------------------
   DA.Design — correctifs de conformité avec la maquette Figma
   Référence : fichier DA-DESIGN, nœud 1635:1583 (barre de navigation)

   POURQUOI DU CSS ET PAS DU HTML
   Le site est un export Next.js : React réécrit les attributs class à
   l'hydratation, donc toute modification faite directement dans le HTML
   est annulée au chargement. Les sélecteurs ci-dessous s'appuient sur la
   structure (balises, href) et non sur les classes utilitaires, ce qui
   les rend insensibles à ce comportement.
   ------------------------------------------------------------------ */

/* --- Boutons de la barre de navigation ---------------------------- */
/* Figma : padding 16px 25px, rayon 10px, Inter Semi Bold 14px.
   Le site rendait 36-40px de haut, rayon 6px, et le « Contact » en
   aplat orange au lieu de la variante contour. */

header a[href="/contact/"] > button,
header a[href="/prendre-rendez-vous/"] > button {
  height: auto;
  padding: 16px 25px;
  border-radius: 10px;
  border: 1px solid var(--cta-orange);
  font-size: 14px;
  line-height: normal;
  box-shadow: none;
}

/* « Prendre rendez-vous » — aplat orange */
header a[href="/prendre-rendez-vous/"] > button {
  background-color: var(--cta-orange);
  color: #fff;
}

header a[href="/prendre-rendez-vous/"] > button:hover {
  background-color: #f07d1a;
  border-color: #f07d1a;
}

/* « Contact » — orange à 12 %, bordure et texte orange */
header a[href="/contact/"] > button {
  background-color: rgb(255 137 34 / 0.12);
  color: var(--cta-orange);
}

header a[href="/contact/"] > button:hover {
  background-color: rgb(255 137 34 / 0.2);
}

/* --- Footer (toutes les pages) ------------------------------------ */
/* Figma 1629:1859 : les quatre titres de colonne sont en Inter Semi Bold
   24px blanc, les liens en Inter Regular 16px blanc plein, et la mention
   de bas de page en Inter Bold 13px.
   Le site sortait « Menu » en 20px alors que les trois autres colonnes
   étaient en 24px, les liens à 90 % d'opacité et la mention en Regular
   à 80 %. */

footer h3[class] {
  font-size: 24px;
}

footer a[class] {
  color: #fff;
}

footer p[class] {
  font-weight: 700;
  color: #fff;
}

/* --- Texte courant ------------------------------------------------- */
/* La classe body-md vaut 600 : juste pour les titres de carte de
   l'accueil, trop lourd pour un paragraphe, que Figma veut en Regular. */

p.body-md {
  font-weight: 400;
}

/* --- Bouton « Prenons rendez-vous » (À propos) --------------------- */
/* Référence Figma : nœud 1515:3028 — pill blanc, texte noir, pastille
   bleue de 35px à gauche contenant une flèche blanche.
   Sur le site le composant sort la flèche du disque : elle se retrouve
   posée sur le fond blanc du bouton, donc invisible (stroke #fff), et
   le disque reste vide. On la repositionne dans le disque et on remet
   le texte en noir. */

button.text-contact-blue {
  position: relative;
  color: #000;
}

button.text-contact-blue > div.bg-contact-blue + img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 73px; /* centré sur la pastille de 40px */
}

/* Variante mobile : le composant la sort en px-14 (56px) avec le
   contenu centré, si bien que la pastille flotte au milieu du bouton.
   La maquette la veut calée à gauche, comme sur desktop. */

@media (max-width: 1023px) {
  button.text-contact-blue {
    justify-content: flex-start;
    padding-left: 10px;
    padding-right: 24px;
    gap: 12px;
  }

  button.text-contact-blue > div.bg-contact-blue + img {
    left: 20px; /* centré sur la pastille de 40px après 10px de retrait */
  }
}

@media (min-width: 1024px) {
  button.text-contact-blue {
    height: 50px;
    padding-left: 10px;
    padding-right: 20px;
    gap: 12px;
  }

  button.text-contact-blue > div.bg-contact-blue {
    width: 35px;
    height: 35px;
  }

  button.text-contact-blue > div.bg-contact-blue + img {
    width: 19px;
    height: 19px;
    left: 18px; /* centré sur la pastille de 35px après 10px de retrait */
  }
}

/* --- Position de la navigation ------------------------------------ */
/* Figma groupe le logo et les liens à gauche (gap 23px, items espacés
   de 15px avec 10px de padding, soit 35px de texte à texte). Le site
   répartissait les trois blocs, ce qui centrait les liens.
   Le sélecteur d'attribut porte la spécificité au-dessus de `gap-10`
   sans dépendre d'un nom de classe utilitaire. */
header nav[class] {
  margin-left: 33px;
  margin-right: auto;
  gap: 35px;
}

/* --- Largeur de contenu -------------------------------------------- */
/* Figma cadre les sections et le footer à px-[130px] sur 1440, soit
   1180px de contenu ; le site utilisait max-w-7xl (1280px), d'où des
   cartes plus larges et des colonnes de footer plus écartées partout.
   La barre de navigation fait exception : elle est à px-[70px] dans la
   maquette, soit 1300px. */

html .max-w-7xl {
  max-width: 1180px;
}

header .max-w-7xl {
  max-width: 1300px;
}


/* --- Titre du bloc « Contactez-nous » ------------------------------ */
/* Mesuré face à /contact/ : la section partagée sort son titre en Inter
   centré et son chapeau en graisse 400 sans famille déclarée (donc en
   Arial de repli), là où /contact/ les aligne à gauche en Poppins, le
   chapeau en 500. D'où l'impression de gris et de décalage.
   On ne vise que les pages portant le bloc injecté. */

section:has([data-da-contact-block]) > div > div:first-child {
  text-align: left;
}

section:has([data-da-contact-block]) h2.heading-md,
section:has([data-da-contact-block]) h2.heading-md + p {
  font-family: var(--font-poppins), Poppins, sans-serif;
}

section:has([data-da-contact-block]) h2.heading-md + p {
  font-weight: 500;
}

/* ==================================================================
   MOBILE — panneau de menu
   ------------------------------------------------------------------
   Le tiroir qui s'ouvre au clic sur le burger présentait trois défauts
   d'affichage. Ils ne dépendent pas d'un point de rupture : le panneau
   n'existe que sous `lg`, les règles peuvent donc rester globales.
   ================================================================== */

/* --- Croix de fermeture en double ---------------------------------- */
/* Le composant SheetContent pose déjà sa propre croix en absolu
   (top-4 right-4, icône Lucide), et le header du site en ajoute une
   seconde dans sa barre jaune. Les deux se superposaient.
   On masque la générique. Elle se distingue de l'autre par l'absence
   de data-slot : le header passe par le wrapper qui pose l'attribut,
   le composant appelle la primitive Radix directement. */

[data-slot="sheet-content"] > button:not([data-slot]) {
  display: none;
}

/* La croix restante est une image (close-x.svg) au tracé sombre : la
   classe text-white posée sur son bouton ne la colore pas. */

[data-slot="sheet-content"] .bg-hero-yellow img[src*="close-x"] {
  filter: brightness(0) invert(1);
}

/* --- Rythme vertical des entrées ------------------------------------ */
/* La maquette espace les lignes de 68px d'axe en axe ; les 18px de
   padding du composant n'en donnaient que 59. */

[data-slot="sheet-content"] .py-\[18px\] {
  padding-top: 23px;
  padding-bottom: 23px;
}

/* --- Lisibilité du logo sur le jaune -------------------------------- */
/* logo-icon.png est sombre : posé sur l'aplat jaune à côté d'un nom en
   blanc, il passait pour une erreur d'affichage. On le passe en blanc,
   comme le texte qu'il accompagne. */

[data-slot="sheet-content"] .bg-hero-yellow img[src*="logo-icon"] {
  filter: brightness(0) invert(1);
}

/* ==================================================================
   MOBILE — suppression des débordements horizontaux
   ------------------------------------------------------------------
   Mesures faites dans un viewport de 390px : 18 des 19 pages sortaient
   du cadre, de 63px (accueil, FAQ, mentions…) à 314px (site-sur-mesure).
   Le visiteur devait faire défiler la page latéralement pour lire.

   Les causes sont toutes du même ordre : des largeurs écrites en pixels
   sans variante mobile. On les neutralise ici plutôt que dans le HTML,
   pour la raison expliquée en tête de fichier — React réécrit les
   attributs class à l'hydratation.

   Le point de rupture 1023px correspond au préfixe `lg:` de Tailwind :
   au-delà, rien n'est modifié, le rendu desktop est intact.
   ================================================================== */

@media (max-width: 1023px) {

  /* --- 1. Adresses e-mail et longues chaînes ----------------------- */
  /* « contact.drandadesign@gmail.com » fait 242px à 16px et ne contient
     aucune espace : le navigateur ne peut pas la couper et elle sortait
     de 63px sur les 18 pages qui partagent le pied de page. */

  body {
    overflow-wrap: break-word;
  }

  a[href^="mailto:"] {
    overflow-wrap: anywhere;
  }

  /* Page Contact : l'adresse y est répétée dans un span à côté de son
     icône, sans lien mailto. Le conteneur est un flex dimensionné par
     son contenu, donc `break-word` ne suffit pas — il faut `anywhere`,
     qui agit aussi sur la largeur minimale calculée. */

  main div[class*="flex items-center"] > span[style*="poppins"] {
    overflow-wrap: anywhere;
    min-width: 0;
  }

  /* --- 2. Titres de héros ------------------------------------------ */
  /* heading-xl vaut 96px à toutes les tailles d'écran : aucune media
     query ne la reprend dans la feuille compilée. Deux mots suffisaient
     à dépasser l'écran. Au-dessus de 1023px, le clamp rend bien 96px. */

  html .heading-xl {
    font-size: clamp(40px, 11vw, 96px);
  }

  /* whitespace-nowrap interdit au titre de se couper quelle que soit la
     largeur disponible. Sur site-sur-mesure il annulait même une taille
     de police pourtant responsive. On ne le neutralise que dans les
     titres : ailleurs (boutons, menus) il est légitime. */

  h1 .whitespace-nowrap,
  h1.whitespace-nowrap,
  h2 .whitespace-nowrap,
  h2.whitespace-nowrap {
    white-space: normal;
  }

  /* --- 3. Maquettes des pages projets ------------------------------ */
  /* w-[572px] h-[473px] flex-shrink-0, sans variante mobile : c'est la
     cause unique du débordement de 198px des six pages projets. */

  html .w-\[572px\] {
    width: 100%;
  }

  html .h-\[473px\] {
    height: auto;
    aspect-ratio: 572 / 473;
  }

  /* Le même bug se répète pour la maquette du HERO en tête de chaque
     page projet, à une taille fixe différente par projet — 5 boîtes,
     chacune non couverte par la règle générique ci-dessus car les
     dimensions ne sont jamais reprises d'une page à l'autre :

       hôtel        646×765     salle de sport  757×542
       thérapie     721×713     123vision       681×783
       outdoor      716×477

     Chaque paire de classes n'existe qu'à cet unique endroit du site
     (vérifié), donc les cibler par leur valeur ne touche rien d'autre. */

  html .w-\[646px\], html .w-\[721px\], html .w-\[716px\],
  html .w-\[757px\], html .w-\[681px\] {
    width: 100%;
  }

  html .h-\[765px\] { height: auto; aspect-ratio: 646 / 765; }
  html .h-\[713px\] { height: auto; aspect-ratio: 721 / 713; }
  html .h-\[477px\] { height: auto; aspect-ratio: 716 / 477; }
  html .h-\[542px\] { height: auto; aspect-ratio: 757 / 542; }
  html .h-\[783px\] { height: auto; aspect-ratio: 681 / 783; }

  /* Le hero de /projets/reseau-social-rencontres/ est un cas à part :
     deux mockups de téléphone se chevauchent (302×585 et 310×671,
     le second décalé de -140px). Passer chacun à width:100% comme
     ci-dessus les ferait s'empiler à pleine largeur l'un sur l'autre.
     On les réduit plutôt en unités de viewport, ce qui les fait
     rétrécir ensemble et garde le chevauchement proportionnel à
     n'importe quelle largeur d'écran mobile. Base de calcul : leur
     largeur d'origine rapportée aux 1023px de ce point de rupture. */

  html .w-\[302px\] { width: 29.5vw; }
  html .h-\[585px\] { height: auto; aspect-ratio: 302 / 585; }
  html .w-\[310px\] { width: 30.3vw; }
  html .h-\[671px\] { height: auto; aspect-ratio: 310 / 671; }
  html .ml-\[-140px\] { margin-left: -13.7vw; }

  /* --- 4. Filets décoratifs sous les titres ------------------------ */
  /* Traits pleins de 672 et 472px placés sous les titres de section :
     le premier poussait site-sur-mesure à 704px de large. */

  html .w-\[672px\],
  html .w-\[472px\],
  .w-\[570px\] {
    max-width: 100%;
  }

  /* --- 5. Blocs de contenu à largeur fixe -------------------------- */

  html .max-w-lg,
  html .max-w-\[640px\],
  html .max-w-\[500px\] {
    max-width: 100%;
  }

  /* --- 6. Barres « largeur d'appareil » de /services/ -------------- */
  /* Référence : design-templates/« Mobile - Service.svg », export de la
     maquette Figma. Les trois traits y sont bien présents sur mobile :
     ils gardent leur longueur (593 / 690 / 777px, posée par
     page-services.css) et débordent volontairement par la GAUCHE, si
     bien que seule leur fin — le trait court puis l'icône d'appareil —
     entre dans l'écran, en escalier vers la droite.
     On décale donc le groupe pour aligner son bord droit sur celui du
     contenu ; le débordement gauche est absorbé par l'overflow-hidden
     de la section. */

  main > section[class]:first-of-type div:has(> div[style*="max-width"]) {
    width: 777px;
    max-width: none;
    margin-left: calc(100% - 777px);
  }

  /* --- 7. Hauteurs de héros figées --------------------------------- */
  /* Onze sections portent une hauteur en pixels (623, 720, 478…) avec
     overflow-hidden. Sur mobile le texte occupe plus de lignes que sur
     desktop : il dépassait cette hauteur et se faisait couper par le
     haut — sur site-vitrine, la première ligne du titre disparaissait
     purement et simplement. On rend la hauteur libre ; les paddings
     mobiles déjà présents dans les conteneurs internes (py-20, pt-12)
     assurent l'espacement. */

  section[class*="h-\[623px\]"],
  section[class*="h-\[720px\]"],
  section[class*="h-\[478px\]"] {
    height: auto;
    min-height: 340px;
  }

  /* Le conteneur interne demande h-full : sans hauteur de référence il
     s'effondrerait. Le retrait haut dégage le bouton « Retour », placé
     en absolu à top-6 : sans lui, le titre venait se poser dessus. */

  section[class*="h-\[623px\]"] > div.h-full {
    height: auto;
    padding-top: 88px;
    padding-bottom: 40px;
  }

  /* --- 10. Carte de contact ---------------------------------------- */
  /* La carte jaune de /contact/ sépare son titre de ses coordonnées par
     un gap-[120px] appliqué à toutes les tailles. Sur desktop la carte
     est haute et le `justify-between` absorbe l'écart ; sur mobile il
     restait 120px de jaune vide au milieu du bloc. */

  html .gap-\[120px\] {
    gap: 36px;
  }

  /* --- 11. Sélecteur d'offre des pages services -------------------- */
  /* px-12 (48px de chaque côté) sur des boutons placés côte à côte : sur
     un écran de 390px il ne restait presque plus de place pour le texte,
     et « Site Vitrine – clé en main » se découpait sur quatre lignes. */

  button[class*="px-12 py-4"],
  div[class*="px-12 py-4"] {
    padding-left: 14px;
    padding-right: 14px;
    font-size: 14px;
  }

  /* --- 12. Étiquettes de prix des options -------------------------- */
  /* L'étiquette est posée en absolu à cheval sur le haut de la carte
     (-translate-y-1/2). En colonne, ce décalage dessinait une marche
     disgracieuse au-dessus du bandeau. On la cale dans l'angle. */

  div[class*="absolute top-0 right-0 -translate-y-1/2"] {
    translate: none; /* Tailwind v4 décale via `translate`, pas `transform` */
    transform: none;
    padding: 8px 16px;
  }

  /* --- 12 bis. Coordonnées de la carte de contact ------------------ */
  /* L'adresse e-mail se coupait en plein milieu d'un mot faute de place.
     Un pas de police en moins et un écart icône/texte resserré la font
     tenir sur une ligne. */

  main div[class*="flex items-center gap-[25px]"] {
    gap: 14px;
  }

  main div[class*="flex items-center gap-[25px]"] > span {
    font-size: 14px;
  }

  /* La carte porte déjà p-[20px] et ses deux blocs internes ajoutent
     px-5 : 40px de retrait de chaque côté, alors qu'il n'en reste que
     310 pour le contenu. On supprime le doublon. */

  div[class*="bg-[#ffc422]"] > div,
  [data-da-contact-block] > div:first-child > div {
    padding-left: 0;
    padding-right: 0;
  }

  /* Le bloc injecté sur les autres pages a la même carte : ses
     coordonnées ont besoin du même traitement. */

  [data-da-contact-block] div[class*="flex items-center gap-[25px]"] {
    gap: 14px;
  }

  /* La section partagée est en px-8 (32px) alors que /contact/ est en
     px-6 : le bloc injecté s'y trouvait 8px plus à droite et 16px plus
     étroit. On aligne, ce qui redonne aussi la place nécessaire pour
     que l'adresse tienne à 14px comme sur /contact/. */

  section:has([data-da-contact-block]) {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* --- 12 ter. Sélecteur de pages (Conception UI/UX) --------------- */
  /* Sur desktop la ligne tient d'un bord à l'autre :
     [Conception UI/UX] ....... [−] [5 pages] [+] [1 220 €]
     Sur 390px les quatre éléments de droite réclament 458px (40 + 180 +
     40 + 150, gouttières comprises). Le `justify-between` renvoyait donc
     le prix seul à la ligne, collé à gauche, sous une rangée étirée d'un
     bord à l'autre.
     On empile proprement : intitulé, puis le compteur centré, puis le
     prix sur sa propre ligne. */

  /* Référence : capture de la frame mobile fournie par le client.
     La disposition n'est pas celle du desktop réarrangée : le compteur
     passe AU-DESSUS, dans une pilule blanche unique, et le libellé
     rejoint le prix dans une SEULE barre bleue en dessous.

     Les trois éléments — libellé, groupe compteur, prix — sont frères
     dans le DOM : une grille de deux rangées suffit à les replacer,
     sans sortir quoi que ce soit du flux. */

  div[class*="items-center justify-between"]:has(div[class*="min-w-[180px]"]) {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 0;
    row-gap: 16px;
    /* Mesuré : dans ce build, `space-y-10` pose la marge en bas de
       l'élément précédent, pas en haut du suivant. C'est donc ici
       qu'il faut la retirer pour coller la carte au bandeau. */
    margin-bottom: 0 !important;
  }

  /* Rangée 1 — la pilule blanche du compteur, centrée */

  div[class*="flex items-center gap-4"]:has(> div[class*="min-w-[180px]"]) {
    grid-row: 1;
    grid-column: 1 / -1;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    padding: 8px;
    gap: 0;
    justify-content: space-between;
    background: #fff;
    border-radius: 9999px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.10);
  }

  /* Le compteur perd son fond : c'est le groupe qui porte la pilule. */

  div[class*="min-w-[180px]"] {
    flex: 1;
    min-width: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  /* Le « + » est blanc et ombré dans la maquette, le « − » reste gris. */

  div[class*="flex items-center gap-4"]:has(> div[class*="min-w-[180px]"]) > button:last-of-type {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  }

  /* Rangée 2 — libellé et prix accolés en un seul bandeau bleu.
     Les angles intérieurs sont mis à plat pour que la jointure
     disparaisse. */

  div[class*="items-center justify-between"]:has(div[class*="min-w-[180px]"]) > div[class*="bg-contact-blue"]:first-child {
    grid-row: 2;
    grid-column: 1;
    height: 64px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-radius: 6px 0 0 6px;
  }

  div[class*="items-center justify-between"]:has(div[class*="min-w-[180px]"]) > div[class*="min-w-[150px]"] {
    grid-row: 2;
    grid-column: 2;
    height: 64px;
    min-width: 0;
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-radius: 0 6px 6px 0;
  }

  /* --- 12 ter bis. Carte collée au bandeau ------------------------ */
  /* Dans la maquette, la carte des onglets touche le bandeau bleu :
     « Présentation du service » vient directement sous « Conception
     UI/UX ». Le conteneur les séparait par un space-y-10, et la carte
     ajoutait 32px de padding au-dessus du premier onglet. */

  /* `space-y-10` du conteneur pose un margin-block-start dont le
     sélecteur est plus spécifique que le nôtre : d'où le !important,
     seul moyen de reprendre la main sans dupliquer leur sélecteur. */

  div[class*="grid-cols-[300px_1fr]"] {
    margin-block-start: 0 !important;
    margin-top: 0 !important;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
  }

  /* Le panneau de texte retrouve un retrait aligné sur les intitulés. */

  div[class*="grid-cols-[300px_1fr]"] > div:last-child {
    padding: 4px 24px 24px;
  }

  /* Le bandeau perd ses angles bas pour que la jointure disparaisse. */

  div[class*="items-center justify-between"]:has(div[class*="min-w-[180px]"]) > div[class*="bg-contact-blue"]:first-child {
    border-bottom-left-radius: 0;
  }

  div[class*="items-center justify-between"]:has(div[class*="min-w-[180px]"]) > div[class*="min-w-[150px]"] {
    border-bottom-right-radius: 0;
  }

  /* --- 12 quater. Onglets en accordéon sur mobile ------------------ */
  /* Sur desktop, la liste d'onglets et le texte forment deux colonnes.
     Empilées sur mobile, il fallait faire défiler sous les six intitulés
     pour lire la réponse, sans savoir à quel onglet elle appartenait.

     On aplatit la liste avec `display: contents` : ses boutons et ses
     filets deviennent frères du panneau de texte dans un même flex.
     Il ne reste qu'à ordonner — et à glisser le panneau juste après le
     bouton actif, que l'on repère à sa classe de fond. Aucun JS touché :
     l'onglet ouvert reste piloté par React comme sur desktop. */

  div[class*="grid-cols-[300px_1fr]"] {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  div[class*="grid-cols-[300px_1fr]"] > div:first-child,
  div[class*="grid-cols-[300px_1fr]"] > div:first-child > div {
    display: contents;
  }

  div[class*="grid-cols-[300px_1fr]"] > div:first-child > div:nth-child(1) > button { order: 20; }
  div[class*="grid-cols-[300px_1fr]"] > div:first-child > div:nth-child(1) > div { order: 30; }
  div[class*="grid-cols-[300px_1fr]"] > div:first-child > div:nth-child(2) > button { order: 40; }
  div[class*="grid-cols-[300px_1fr]"] > div:first-child > div:nth-child(2) > div { order: 50; }
  div[class*="grid-cols-[300px_1fr]"] > div:first-child > div:nth-child(3) > button { order: 60; }
  div[class*="grid-cols-[300px_1fr]"] > div:first-child > div:nth-child(3) > div { order: 70; }
  div[class*="grid-cols-[300px_1fr]"] > div:first-child > div:nth-child(4) > button { order: 80; }
  div[class*="grid-cols-[300px_1fr]"] > div:first-child > div:nth-child(4) > div { order: 90; }
  div[class*="grid-cols-[300px_1fr]"] > div:first-child > div:nth-child(5) > button { order: 100; }
  div[class*="grid-cols-[300px_1fr]"] > div:first-child > div:nth-child(5) > div { order: 110; }
  div[class*="grid-cols-[300px_1fr]"] > div:first-child > div:nth-child(6) > button { order: 120; }
  div[class*="grid-cols-[300px_1fr]"] > div:first-child > div:nth-child(6) > div { order: 130; }

  div[class*="grid-cols-[300px_1fr]"] > div:last-child { order: 130; }

  /* Le panneau se replace sous l'onglet ouvert. */
  div[class*="grid-cols-[300px_1fr]"]:has(> div:first-child > div:nth-child(1) > button[class*="bg-[#f5f5f5]"]) > div:last-child,
  div[class*="grid-cols-[300px_1fr]"]:has(> div:first-child > div:nth-child(1) > button[class*="bg-service-bg"]) > div:last-child {
    order: 25;
  }
  div[class*="grid-cols-[300px_1fr]"]:has(> div:first-child > div:nth-child(2) > button[class*="bg-[#f5f5f5]"]) > div:last-child,
  div[class*="grid-cols-[300px_1fr]"]:has(> div:first-child > div:nth-child(2) > button[class*="bg-service-bg"]) > div:last-child {
    order: 45;
  }
  div[class*="grid-cols-[300px_1fr]"]:has(> div:first-child > div:nth-child(3) > button[class*="bg-[#f5f5f5]"]) > div:last-child,
  div[class*="grid-cols-[300px_1fr]"]:has(> div:first-child > div:nth-child(3) > button[class*="bg-service-bg"]) > div:last-child {
    order: 65;
  }
  div[class*="grid-cols-[300px_1fr]"]:has(> div:first-child > div:nth-child(4) > button[class*="bg-[#f5f5f5]"]) > div:last-child,
  div[class*="grid-cols-[300px_1fr]"]:has(> div:first-child > div:nth-child(4) > button[class*="bg-service-bg"]) > div:last-child {
    order: 85;
  }
  div[class*="grid-cols-[300px_1fr]"]:has(> div:first-child > div:nth-child(5) > button[class*="bg-[#f5f5f5]"]) > div:last-child,
  div[class*="grid-cols-[300px_1fr]"]:has(> div:first-child > div:nth-child(5) > button[class*="bg-service-bg"]) > div:last-child {
    order: 105;
  }
  div[class*="grid-cols-[300px_1fr]"]:has(> div:first-child > div:nth-child(6) > button[class*="bg-[#f5f5f5]"]) > div:last-child,
  div[class*="grid-cols-[300px_1fr]"]:has(> div:first-child > div:nth-child(6) > button[class*="bg-service-bg"]) > div:last-child {
    order: 125;
  }

  /* --- 13. Titres des pages projets -------------------------------- */
  /* 96px et 64px en dur, sans palier mobile : le titre débordait de son
     héros, qui le coupait. */

  section[class*="h-\[623px\]"] h1[class*="text-\[96px\]"] {
    font-size: clamp(44px, 12vw, 96px);
  }

  section[class*="h-\[623px\]"] h1[class*="text-\[64px\]"] {
    font-size: clamp(38px, 10vw, 64px);
    max-width: 100%;
  }

  /* --- 8. Coupures de ligne forcées -------------------------------- */
  /* Le <br> qui équilibre le chapeau du héros en deux lignes sur
     desktop tombe au mauvais endroit sur mobile. */

  p.max-w-lg br {
    display: none;
  }

  /* --- 9. Visuels de héros des pages services ---------------------- */
  /* Ces deux conteneurs sont vides : la maquette qu'ils semblent porter
     est en réalité dessinée dans le SVG de fond du héros. Ils ne
     réservaient donc que du vide — 400 à 520px de couleur unie sous le
     texte une fois la hauteur libérée au point 7. */

  .justify-self-end.h-\[520px\],
  .justify-self-end.h-\[400px\] {
    display: none;
  }

  /* Le SVG de fond est en object-cover : dans un cadre étroit et haut il
     est zoomé au point d'amener la maquette juste derrière le texte, qui
     devient illisible. On recadre à gauche — la maquette sort du champ,
     le texte retrouve un aplat propre. */

  section[class*="h-\[720px\]"] > div.absolute.inset-0 img,
  section[class*="h-\[623px\]"] > div.absolute.inset-0 img {
    object-position: left center;
  }
}

/* ------------------------------------------------------------------
   Harmonisation des tailles de texte
   ------------------------------------------------------------------
   Le site melangeait l'echelle nommee de Tailwind (12/14/16/18/20/24…)
   avec des valeurs en pixels ecrites a la main. Deux d'entre elles
   tombaient entre deux crans : 13px (entre text-xs 12 et text-sm 14)
   et 15px (entre text-sm 14 et text-base 16). Un ecart d'un pixel ne
   se lit pas comme une hierarchie, seulement comme une imprecision.

   On les replie sur le cran voisin. Les classes restent ecrites
   text-[13px] et text-[15px] dans le HTML pre-genere, qu'on ne peut
   pas modifier ici : seule leur valeur change. Meme specificite que
   la regle compilee, mais cette feuille est chargee apres, donc elle
   l'emporte. Pour annuler : supprimer ce bloc.

   Les titres (32/40/56/64/80px) sont volontairement laisses tels quels.
   ------------------------------------------------------------------ */
html .text-\[13px\] { font-size: 12px; }
html .text-\[15px\] { font-size: 16px; }