/* ==========================================================================
   TPM — ajustements maison
   Chargé APRÈS la feuille de style d'origine : tout ce qu'on écrit ici gagne.
   L'application est minifiée, donc on ne la modifie pas — on corrige ici.
   Chaque bloc dit ce qu'il corrige et pourquoi.
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. Le logo
   --------------------------------------------------------------------------
   Le fichier d'origine avait 60% de marge vide autour du dessin : affiché sur
   40px de haut, le sigle réel n'en faisait que 17. Le fichier est maintenant
   détouré (`build-logo.mjs`), donc toute la hauteur donnée ici est du dessin.

   ATTENTION pour la suite : la feuille de styles d'origine est COMPILÉE. Elle
   ne contient que les classes Tailwind utilisées dans le code d'origine.
   Écrire `sm:h-11` dans l'application ne fait rien — cette classe n'existe
   nulle part. D'où ce bloc : le logo est dimensionné ici, en CSS réel.
   -------------------------------------------------------------------------- */
.tpm-logo {
  display: block;
  width: auto;
  max-width: none;
  flex-shrink: 0;
  height: 34px; /* mobile : contraint par la place restante à côté des boutons */
}

@media (min-width: 640px) {
  .tpm-logo {
    height: 44px;
  }
}

/* Variante pied de page : le logo est bleu marine, le pied de page aussi.
   On le pose donc sur une pastille blanche plutôt que de le rendre illisible. */
.tpm-logo.tpm-logo--clair {
  height: 38px;
  box-sizing: content-box;
  padding: 0.5rem 0.875rem;
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
}


/* --------------------------------------------------------------------------
   0 bis. Les trois chiffres clés (75 000 points / 10 mm / 10 ans)
   --------------------------------------------------------------------------
   Ce sont les arguments de vente les plus forts de la page : ils étaient en
   30px (36px sur desktop), noyés dans le texte autour. On les met en avant.

   Pourquoi ici et pas dans l'application : la classe d'origine
   (`text-3xl … sm:text-4xl`) est utilisée à 8 endroits différents du site.
   La changer là-bas aurait déplacé 7 autres blocs sans qu'on s'en aperçoive.
   -------------------------------------------------------------------------- */
.tpm-stat-v {
  font-size: 2.5rem; /* 40px */
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.tpm-stat-l {
  font-size: 0.8125rem; /* 13px, contre 12px avant */
}

@media (min-width: 640px) {
  .tpm-stat-v {
    font-size: 3.25rem; /* 52px */
  }
}

/* La garantie 10 ans : c'est l'argument qui rassure le plus une association
   qui engage un budget. On la sort du lot en or (la couleur d'accent du site)
   avec un filet vertical, plutôt qu'en la grossissant encore — les trois
   chiffres gardent ainsi le même rythme. */
.tpm-stat--fort {
  position: relative;
  padding-left: 0.9rem;
}

.tpm-stat--fort::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2rem;
  bottom: 0.2rem;
  width: 3px;
  border-radius: 2px;
  background: hsl(var(--gold));
}

.tpm-stat--fort .tpm-stat-v {
  color: hsl(var(--gold));
}

.tpm-stat--fort .tpm-stat-l {
  color: hsl(var(--gold));
  font-weight: 600;
}


/* --------------------------------------------------------------------------
   0 ter. Les réalisations en page d'accueil
   --------------------------------------------------------------------------
   Il y avait 6 vignettes génériques, il y en a 3 réelles. Laissées en
   défilement horizontal, 3 vignettes de 224px laisseraient un grand vide à
   droite sur desktop. On passe donc en grille 3 colonnes à partir de 640px,
   et on garde le défilement au doigt sur mobile.
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .tpm-realisations {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    overflow: visible;
  }

  .tpm-realisations > figure {
    width: auto;
  }
}

/* Léger zoom au survol. Le cadre rogne l'image pendant qu'elle grandit,
   sinon elle déborderait sur ses voisines. */
.tpm-real-cadre {
  overflow: hidden;
  border-radius: 0.75rem;
}

.tpm-real-img {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.tpm-real-cadre:hover .tpm-real-img {
  transform: scale(1.06);
}

/* Le nom de la mosquée sous la photo : sans lui, le carrousel n'est qu'une
   suite de photos anonymes. C'est le nom qui fait la référence. */
.tpm-real-nom {
  margin-top: 0.625rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: hsl(var(--primary));
}

.tpm-real-ville {
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: hsl(var(--muted-foreground));
}


/* --------------------------------------------------------------------------
   0 quater. Bande "Certifications et garanties"
   --------------------------------------------------------------------------
   Placée juste après "Ce n'est pas de la moquette tuftée" : l'argument
   technique appelle sa preuve. Fond bleu marine pour couper la page blanche
   et reprendre l'identité du catalogue.
   -------------------------------------------------------------------------- */
.tpm-certifs {
  background: #fff;
  border-top: 1px solid hsl(var(--border));
  border-bottom: 1px solid hsl(var(--border));
  padding: 2rem 0;
}

/* Pleine largeur : la bande traverse l'écran d'un bord à l'autre. */
.tpm-certifs__inner {
  width: 100%;
}

/* Bleu marine, comme les autres titres de section du site. */
.tpm-certifs__titre {
  text-align: center;
  font-size: 1.5rem;
  line-height: 1.2;
  color: hsl(var(--primary));
  margin-bottom: 1.25rem;
}

@media (min-width: 640px) {
  .tpm-certifs__titre {
    font-size: 1.875rem;
  }
}

/* Fenêtre pleine largeur : la bande va d'un bord à l'autre de l'écran.
   Le dégradé aux extrémités fait apparaître et disparaître les mentions
   en douceur, au lieu de les couper net. */
.tpm-certifs__fenetre {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5rem, #000 calc(100% - 5rem), transparent);
  mask-image: linear-gradient(to right, transparent, #000 5rem, #000 calc(100% - 5rem), transparent);
}

/* La piste contient la liste DEUX FOIS. Un déplacement de -50% vers 0
   fait donc défiler vers la droite, en rebouclant sans saut visible :
   au moment où l'animation repart, la seconde copie est exactement à la
   place qu'occupait la première. */
.tpm-certifs__piste {
  display: flex;
  align-items: center;
  width: max-content;
  animation: tpm-defile 38s linear infinite;
  animation-play-state: paused;
}

/* Au survol uniquement, comme demandé : immobile le reste du temps. */
.tpm-certifs:hover .tpm-certifs__piste {
  animation-play-state: running;
}

@keyframes tpm-defile {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

.tpm-certifs__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1.75rem;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--primary));
}

.tpm-certifs__icone {
  width: 1.0625rem;
  height: 1.0625rem;
  flex-shrink: 0;
  color: hsl(var(--gold));
}

/* Emplacement prêt pour les vrais logos : remplacer l'icône par
   <img class="tpm-certifs__logo">. */
.tpm-certifs__logo {
  height: 1.75rem;
  width: auto;
  flex-shrink: 0;
}


/* --------------------------------------------------------------------------
   0 quinquies. Le comparatif tissé / tufté (accueil)
   --------------------------------------------------------------------------
   Contrairement aux photos du site, c'est un visuel avec du texte et des
   bords nets : le rognage automatique (`object-cover`) couperait le bord
   des deux cartes. On passe en `contain` pour que rien ne soit coupé.
   Le fond blanc rejoint celui du visuel, la jonction est invisible.
   -------------------------------------------------------------------------- */
.tpm-comparatif {
  /* Le cadre du site est en 4/3, le visuel en 1,405 : sans cette ligne il
     restait 11 px de blanc en haut et en bas. On aligne le cadre sur le
     rapport exact du fichier — le visuel remplit alors la boîte arrondie
     entièrement, sans bande blanche et sans rien couper. */
  aspect-ratio: 1122 / 1122;
  object-fit: contain;
  background: #fff;
}


/* --------------------------------------------------------------------------
   0 sexies. Les cartes de modèles (page Nos tapis)
   --------------------------------------------------------------------------
   Les photos produit sont des bandes très allongées (rapport 0,32). Dans le
   cadre 3/4 d'origine on n'en voyait qu'un tiers. On allonge donc le cadre,
   et on cadre par le HAUT : c'est là que se trouve le décor — médaillon ou
   bordure d'entrelacs — qui distingue un modèle d'un autre.
   -------------------------------------------------------------------------- */
.tpm-modele-visuel {
  aspect-ratio: 1 / 2;
}

.tpm-modele-visuel img {
  object-position: center top;
}

/* Mention de conformité sous chaque modèle. En or et en majuscules :
   c'est souvent la première question d'un bureau de contrôle. */
.tpm-modele-erp {
  margin-top: 0.625rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: hsl(var(--gold));
}

/* Échantillon de sous-couche : c'est une forme découpée sur fond blanc, pas
   une photo de scène. Le rognage automatique lui couperait le pouce, donc on
   affiche l'image entière sur fond blanc — la jonction ne se voit pas. */
/* Échantillon de sous-couche : le fichier a un fond transparent, donc plus
   de pastille blanche ni d'ombre — la forme se détache seule sur le fond
   crème de la section. Centré au-dessus des trois chiffres. */
.tpm-sc-echantillon {
  height: 8rem;
  width: auto;
  object-fit: contain;
}

@media (min-width: 640px) {
  .tpm-sc-echantillon {
    height: 9.5rem;
  }
}


/* Titre "Livraison et installation possibles en 96h".
   `clamp` fait varier la taille en continu avec la largeur de l'écran : 26px
   sur un petit téléphone, jusqu'à 48px sur grand écran, sans palier brutal.
   `text-wrap: balance` répartit les mots sur les lignes au lieu de laisser
   un mot seul en bas — c'est ce qui change tout sur mobile, où la phrase
   passe forcément sur plusieurs lignes. */
.tpm-96h-titre {
  margin-top: 0.5rem;
  font-size: clamp(1.625rem, 4.5vw, 3rem);
  line-height: 1.15;
  color: hsl(var(--primary));
  text-wrap: balance;
}


/* Conditions du sur-mesure. Placées AVANT le bouton : une association doit
   connaître le minimum de commande et le délai avant de cliquer, pas après. */
.tpm-sur-commande-note {
  margin-top: 1.25rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: hsl(var(--muted-foreground));
}


/* Mention "livraison + installation sous 96h" : c'est l'argument qui
   déclenche l'appel quand une mosquée est pressée. Repris du catalogue —
   plus grand, en gras et en majuscules. */
.tpm-livraison-96h {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: hsl(var(--primary));
}

@media (min-width: 640px) {
  .tpm-livraison-96h {
    font-size: 1.125rem;
  }
}

/* Garantie : même gabarit que la mention ERP, mais en bleu marine — les
   deux lignes se lisent comme une paire sans se disputer l'attention. */
.tpm-modele-garantie {
  margin-top: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: hsl(var(--primary));
}


/* --------------------------------------------------------------------------
   1. Zoom automatique de Safari iOS sur les formulaires
   --------------------------------------------------------------------------
   Sous 16px de police, iOS zoome la page dès qu'on touche un champ — et ne
   dézoome jamais. Le formulaire se retrouve à moitié hors écran.
   16px est le seuil exact : on ne descend pas en dessous sur mobile.
   (On ne met surtout PAS maximum-scale=1 dans le viewport : ça réglerait le
   symptôme en interdisant le zoom aux malvoyants.)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  input:not([type="radio"]):not([type="checkbox"]),
  textarea[class],
  select[class] {
    font-size: 16px;
  }

  /* Le `[class]` ci-dessus n'est pas décoratif : il monte la spécificité juste
     assez pour battre la classe `text-sm` de la feuille d'origine. Écrits nus,
     `textarea` et `select` (spécificité 0,0,1) perdent contre `.text-sm`
     (0,1,0) et restent à 14px — les `input`, eux, passaient déjà grâce au
     poids de leurs `:not()`. */
}


/* --------------------------------------------------------------------------
   2. Zones tactiles — 44px minimum
   --------------------------------------------------------------------------
   Recommandation Apple (44pt) et Google (48dp). En dessous, on rate sa cible.
   On agrandit la zone SANS toucher à la taille visuelle : le texte et les
   icônes gardent exactement la même apparence.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

  /* Téléphone et e-mail : sur mobile, appeler est l'action la plus naturelle.
     C'était le lien le plus difficile à toucher du site (18px de haut). */
  footer a[href^="tel:"],
  footer a[href^="mailto:"],
  a[href^="tel:"],
  a[href^="mailto:"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Boutons ronds de l'en-tête (WhatsApp, ouverture du menu) : 40 → 44 */
  header a[aria-label="WhatsApp"],
  header button[aria-label] {
    height: 44px;
    width: 44px;
  }

  /* Choix « type de tapis » et case de consentement : le <label> enveloppe
     bien le bouton radio, mais il ne faisait que 20px de haut. */
  form label:has(input[type="radio"]),
  form label:has(input[type="checkbox"]) {
    min-height: 44px;
    align-items: center;
  }

  /* Liens de navigation dans le menu déroulant mobile */
  nav a,
  [role="dialog"] a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}


/* --------------------------------------------------------------------------
   3. Lisibilité des micro-libellés
   --------------------------------------------------------------------------
   Les libellés en 10px sous les grands chiffres (POINTS / M², D'ÉPAISSEUR…)
   et dans le bloc contact (TÉLÉPHONE, EMAIL…) sont en majuscules très
   espacées : c'est la combinaison la plus difficile à lire en petit.
   11px sur mobile uniquement — le rendu desktop est inchangé.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .text-\[10px\] {
    font-size: 11px;
  }
}


/* --------------------------------------------------------------------------
   4. Confort de défilement
   --------------------------------------------------------------------------
   Le carrousel des réalisations défile horizontalement au doigt : on ajoute
   l'inertie iOS et un arrêt net sur chaque vignette.
   -------------------------------------------------------------------------- */
.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.overflow-x-auto > * {
  scroll-snap-align: start;
}


/* --------------------------------------------------------------------------
   5. Respect des préférences système
   --------------------------------------------------------------------------
   Certaines personnes désactivent les animations (troubles vestibulaires,
   migraines). Le site en utilise beaucoup au défilement.
   -------------------------------------------------------------------------- */
@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;
  }
}

/* ==========================================================================
   BANDEAU D'ACCUEIL — ORDRE MOBILE
   Sur mobile, l'image doit apparaitre juste sous le titre "Le tapis cree
   pour durer.", avant le sous-titre, les boutons et les badges.

   Le probleme : dans le HTML, l'image est un bloc frere de TOUT le bloc de
   texte. On ne peut donc pas la glisser au milieu par un simple ordre.
   La solution : display:contents fait disparaitre les deux conteneurs du
   texte (sans toucher a leur contenu), si bien que le titre, le sous-titre,
   les boutons, les badges ET l'image deviennent freres. On peut alors les
   ranger librement avec « order ».

   Ne s'applique qu'au telephone (moins de 768px). La tablette et le bureau
   gardent leur mise en page d'origine.
   ========================================================================== */

@media (max-width: 767.98px) {
  .tpm-hero {
    display: flex;
    flex-direction: column;
    /* La grille porte « items-center ». En colonne, cela centre et retrecit
       chaque bloc a la largeur de son contenu — et le bloc image, dont
       l'image est en position absolue, se retrouve alors large de zero.
       On retablit donc l'etirement sur toute la largeur. */
    align-items: stretch;
    /* Les espacements viennent des marges deja presentes sur chaque bloc
       (mt-5, mt-8, mt-10). Un gap ici les doublerait. */
    gap: 0;
  }

  /* On efface les deux conteneurs pour liberer leur contenu. */
  .tpm-hero > div:first-child,
  .tpm-hero > div:first-child > div {
    display: contents;
  }

  .tpm-hero > div:first-child > div > *:nth-child(1) { order: 1; } /* surtitre */
  .tpm-hero > div:first-child > div > *:nth-child(2) { order: 2; } /* titre    */
  .tpm-hero > div:last-child                         { order: 3; } /* IMAGE    */
  .tpm-hero > div:first-child > div > *:nth-child(3) { order: 4; } /* sous-titre */
  .tpm-hero > div:first-child > div > *:nth-child(4) { order: 5; } /* boutons  */
  .tpm-hero > div:first-child > div > *:nth-child(5) { order: 6; } /* badges   */

  /* Le titre n'a pas de marge basse : on donne son air a l'image nous-memes. */
  .tpm-hero > div:last-child {
    margin-top: 1.75rem;
  }
}