/* ============================================================
   INVprod — style-04-responsive.css
   -----------------------------------------------------------------
   RÔLE DE CE FICHIER (le DERNIER chargé, donc « le dernier mot »)
   Trois choses :
     1) DURCISSEMENT MOBILE : des blocs @media (petits écrans) qui
        corrigent l'affichage sur téléphone. C'est un ADDITIF : hors des
        @media, le rendu ordinateur n'est PAS modifié.
     2) REPOSITIONNEMENT ACCUEIL : styles des nouveaux blocs de la page
        d'accueil (slogan hero, bande « one-shot », grille « univers »,
        cartes « packs »).
     3) DIVERS FINITIONS : ombre de texte du hero (lisibilité) et pages
        légales (mentions, confidentialité…).

   POURQUOI CE FICHIER EN DERNIER ? Comme il est chargé après 01→02→03,
   ses règles l'emportent en cas d'égalité de spécificité (cascade CSS).
   C'est ce qui permet aux @media mobile d'« écraser » proprement les
   réglages desktop des fichiers précédents.

   RAPPEL CHARTE v9 : noir/blanc/gris uniquement (aucun accent coloré),
   Montserrat, coins droits, cadres = fins traits blancs, PAS d'ombre ni
   de dégradé — SEULE entorse tolérée ici : le text-shadow du hero, qui
   sert uniquement à garder le texte lisible par-dessus l'image de fond.

   ORDRE DE CHARGEMENT IMPORTANT : 01→02→03→04. Ces 4 fichiers sont des
   TRANCHES de style.css (découpé le 2026-07-08 pour la maintenance),
   chargées dans cet ordre par inc/site-header.php et mon-espace/inc/top.php.
   NE PAS RÉORDONNER les fichiers ni les règles.
   ============================================================ */
/* ============================================================
   1) DURCISSEMENT MOBILE — appliqué à tout le site (téléphone)
   Additif : n'affecte pas le rendu desktop (tout est dans des @media).
   ============================================================ */
/* Cible : écrans de 600px de large ou moins (≈ téléphones en portrait). */
@media(max-width:600px){
  /* On réduit les variables d'espacement vertical (--s1, --s2 définies en
     01-base) pour resserrer les sections sur petit écran. Comme ces variables
     sont redéfinies ici sur :root, tout le site en profite en version mobile. */
  :root{--s1:clamp(46px,12vw,80px);--s2:clamp(30px,8vw,52px)}
  .container{padding:0 18px}   /* marges latérales plus fines sur téléphone */

  /* Titres : taille adaptée au pouce et surtout overflow-wrap:break-word qui
     autorise la coupure d'un mot trop long pour ne JAMAIS déborder de l'écran. */
  h1{font-size:clamp(2rem,8.5vw,2.8rem);line-height:1.12;overflow-wrap:break-word}
  h2{font-size:clamp(1.45rem,6.5vw,2.1rem);overflow-wrap:break-word}
  .hero h1{max-width:none}     /* le titre du hero peut occuper toute la largeur */

  /* Tableaux (tarifs, specs) : passés en bloc défilant horizontalement
     (overflow-x:auto) plutôt que de forcer l'écran à s'élargir. Le doigt fait
     défiler le tableau (-webkit-overflow-scrolling:touch = défilement fluide iOS). */
  .tarifs-table,.specs-table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* Médias riches des projets partagés (PDF, site intégré en iframe) :
     hauteurs calées sur la hauteur de l'écran (vh) pour un bon rendu mobile.
     var(--h,650px) = utilise la variable --h si définie, sinon 650px de repli. */
  .pf-pdf iframe{height:58vh;min-height:300px}
  .pf-website iframe{height:min(var(--h,650px),68vh)}
  .projet-section .portfolio-grid{grid-template-columns:1fr}  /* galerie en 1 colonne */
  .pf-links{flex-direction:column}                             /* boutons empilés… */
  .pf-links .btn{width:100%;text-align:center}                 /* …et pleine largeur */

  /* En-tête : sur mobile le menu est réduit à un burger ; on force un fond
     noir semi-opaque + flou (backdrop-filter) pour que le burger reste lisible
     même au-dessus d'une zone claire, au lieu de « flotter sur le vide ». */
  .site-header{background:rgba(0,0,0,.85);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom-color:var(--ligne)}
}
/* Très petits écrans (≤ 380px, vieux/petits téléphones) : on rétrécit encore
   le grand titre et on resserre les marges de l'en-tête. */
@media(max-width:380px){
  h1{font-size:1.75rem}
  .header-inner{padding:0 14px}
}

/* ============================================================
   2) REPOSITIONNEMENT ACCUEIL — nouveaux blocs de la page d'accueil
   (styles hors @media : s'appliquent à toutes les tailles d'écran)
   ============================================================ */
/* Slogan sous le grand titre du hero : petite ligne en majuscules grises. */
.hero-slogan{margin-top:14px;font-size:.8rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gris-moyen)}

/* Bande « one-shot » : bandeau pleine largeur (fond noir translucide,
   encadré de deux traits) affichant une accroche courte. */
.oneshot-band{border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);background:rgba(0,0,0,.5);padding:clamp(22px,4vw,34px) 0}
.oneshot{margin:0;font-size:clamp(1.05rem,2.6vw,1.7rem);font-weight:800;letter-spacing:.01em;text-transform:uppercase;text-align:center}
.oneshot span{color:var(--gris-moyen)}   /* portion de phrase mise en retrait (gris) */

/* Grille « univers » : les 4 univers de l'accueil, en 2 colonnes par défaut. */
.univers-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.univers-card{display:block;border:1px solid var(--ligne);padding:clamp(20px,2.4vw,28px);transition:border-color .25s var(--ease),background .25s var(--ease)}
/* Survol : bordure plus claire + fond blanc très léger (.03) — reste dans la
   charte (nuance de gris, pas une vraie couleur). */
.univers-card:hover{border-color:var(--ligne-forte);background:rgba(255,255,255,.03)}
.univers-card h3{font-size:1.05rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;margin-bottom:8px;color:var(--blanc)}
.univers-card p{font-size:.92rem;color:var(--gris-clair);margin-bottom:12px}
/* Liste des services de l'univers (petites majuscules grises). */
.univers-card .u-svc{display:block;font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gris-moyen);line-height:1.7}
@media(max-width:700px){.univers-grid{grid-template-columns:1fr}}  /* 1 univers par ligne sur mobile */

/* Packs (page Services) : cartes d'offres. Grille auto-adaptative — autant de
   colonnes que possible, chaque carte faisant au moins 230px de large. */
.packs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:28px}
.pack-card{border:1px solid var(--ligne);padding:24px 22px;display:flex;flex-direction:column;gap:10px}
.pack-card h3{font-size:1rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--blanc)}
.pack-card .pack-prix{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blanc)}
.pack-card p{font-size:.9rem;color:var(--gris-clair);margin:0}

/* ============================================================
   3) FINITIONS
   ============================================================ */
/* Hero en pleine largeur sur ORDINATEUR (≥ 1001px) : on lève le bridage de
   largeur du contenu hero (max-width) pour qu'il occupe tout l'espace. */
@media(min-width:1001px){
  .hero .hero-content{max-width:none}
  .hero h1{max-width:none}
  .hero-sub{max-width:52em}
}

/* Ombre portée sous les textes du hero. C'est l'UNIQUE text-shadow toléré par
   la charte : il ne sert pas de décor mais garantit la lisibilité du texte
   par-dessus l'image/vidéo de fond (au lieu d'un dégradé sombre). Décalage
   2px/3px, flou 3px, noir à 60%. */
.hero-content .hero-eyebrow,
.hero-content h1,
.hero-content .hero-sub,
.hero-content .hero-slogan{
  text-shadow:2px 3px 3px rgba(0,0,0,.6);
}

/* Pages de texte légales (mentions légales, confidentialité, CGV…) :
   colonne étroite (760px) pour une lecture confortable. */
.legal{max-width:760px}
/* Chaque sous-titre <h2> ouvre une nouvelle rubrique, séparée par un trait
   en haut + de l'espace (padding/margin). */
.legal h2{
  font-size:clamp(1.05rem,2vw,1.35rem);
  letter-spacing:.04em;
  margin:0 0 12px;
  padding-top:clamp(22px,3.5vw,34px);
  margin-top:clamp(22px,3.5vw,34px);
  border-top:1px solid var(--ligne);
}
/* Le tout premier <h2> n'a ni trait ni espace au-dessus (pas de séparateur
   inutile en haut de page). */
.legal h2:first-child{border-top:none;padding-top:0;margin-top:0}
.legal p{color:var(--gris-clair);line-height:1.8;margin-bottom:8px}  /* interligne aéré pour la lecture */
.legal a{border-bottom:1px solid var(--ligne-forte)}                  /* liens soulignés d'un trait fort */
.legal a:hover{color:var(--blanc)}