/* ============================================================
   Paola Bolle — Coach TDAH — style-04-responsive.css  (DERNIER chargé)
   -----------------------------------------------------------------
   RÔLE (le dernier fichier de la cascade, donc « le dernier mot ») :
     1) DURCISSEMENT MOBILE : @media (petits écrans) qui corrigent
        l'affichage sur téléphone. Additif : hors @media, le rendu
        ordinateur n'est pas modifié.
     2) BLOCS ACCUEIL : slogan hero, bande « one-shot », grille
        « univers », cartes « packs ».
     3) FINITIONS : lisibilité du hero + pages légales.

   ORDRE DE CHARGEMENT : 01→02→03→04. Ne pas réordonner (cascade CSS).

   CHARTE PAOLA : crème/bleu/olive/ocre/rose/gris-bleu, coins arrondis,
   contours crayon, ombres douces, Poppins + Nunito.
   ============================================================ */

/* ============================================================
   1) DURCISSEMENT MOBILE — appliqué à tout le site (téléphone)
   ============================================================ */
@media(max-width:600px){
  /* On resserre les respirations verticales sur petit écran. */
  :root{--s1:clamp(46px,12vw,80px);--s2:clamp(30px,8vw,52px)}
  .container{padding:0 18px}

  /* Titres : taille adaptée + coupure des mots trop longs (jamais de débord). */
  h1{font-size:clamp(2rem,8.5vw,2.8rem);line-height:1.14;overflow-wrap:break-word}
  h2{font-size:clamp(1.45rem,6.5vw,2.1rem);overflow-wrap:break-word}
  .hero h1{max-width:none}

  /* Tableaux (tarifs, specs) : bloc défilant horizontalement sur mobile. */
  .tarifs-table,.specs-table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* Médias riches des projets (PDF, site en iframe) : hauteurs calées sur l'écran. */
  .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}
  .pf-links{flex-direction:column}
  .pf-links .btn{width:100%;text-align:center}

  /* En-tête : sur mobile, fond crème quasi-opaque + flou pour garder le
     burger lisible même au-dessus d'une zone chargée. */
  .site-header{background:rgba(247,242,234,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom-color:var(--ligne)}
}
/* Très petits écrans (≤ 380px) : on rétrécit encore le grand titre. */
@media(max-width:380px){
  h1{font-size:1.75rem}
  .header-inner{padding:0 14px}
}

/* ============================================================
   2) BLOCS ACCUEIL — (styles hors @media : toutes tailles d'écran)
   ============================================================ */
/* Slogan sous le grand titre du hero : petite ligne en majuscules olive. */
.hero-slogan{margin-top:14px;font-size:.84rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--olive)}

/* Bande « one-shot » : bandeau pleine largeur (gris-bleu doux, encadré de
   deux traits) affichant une accroche courte. */
.oneshot-band{border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);background:var(--bleu-clair);padding:clamp(22px,4vw,34px) 0}
.oneshot{margin:0;font-family:'Poppins','Nunito',sans-serif;font-size:clamp(1.1rem,2.6vw,1.7rem);font-weight:700;letter-spacing:0;text-transform:none;text-align:center;color:var(--bleu)}
.oneshot span{color:var(--ocre-fonce)}   /* portion mise en avant (ocre) */

/* Grille « univers » : les 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:2px solid var(--noir);border-radius:var(--radius-card);background:var(--blanc);box-shadow:var(--ombre);padding:clamp(20px,2.4vw,28px);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.univers-card:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(17,17,17,.10)}
.univers-card h3{font-size:1.15rem;font-weight:700;letter-spacing:0;text-transform:none;margin-bottom:8px;color:var(--bleu)}
.univers-card p{font-size:.96rem;color:var(--gris-clair);margin-bottom:12px}
.univers-card .u-svc{display:block;font-size:.78rem;font-weight:700;letter-spacing:.02em;text-transform:none;color:var(--ocre-fonce);line-height:1.8}
@media(max-width:700px){.univers-grid{grid-template-columns:1fr}}

/* Packs (page Services) : cartes d'offres, grille auto-adaptative. */
.packs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:28px}
.pack-card{border:2px solid var(--noir);border-radius:var(--radius-card);background:var(--blanc);box-shadow:var(--ombre);padding:24px 22px;display:flex;flex-direction:column;gap:10px}
.pack-card h3{font-size:1.1rem;font-weight:700;letter-spacing:0;text-transform:none;color:var(--bleu)}
.pack-card .pack-prix{font-size:.9rem;font-weight:700;letter-spacing:.02em;text-transform:none;color:var(--ocre-fonce)}
.pack-card p{font-size:.94rem;color:var(--gris-clair);margin:0}

/* ============================================================
   3) FINITIONS
   ============================================================ */
/* Hero pleine largeur sur ORDINATEUR (≥ 1001px). */
@media(min-width:1001px){
  .hero .hero-content{max-width:none}
  .hero h1{max-width:none}
  .hero-sub{max-width:52em}
}

/* Halo clair sous les petits textes du hero (surtitre, sous-titre, slogan) :
   texte foncé lisible par-dessus une photo variée avec un léger contour CRÈME. */
.hero-content .hero-eyebrow,
.hero-content .hero-sub,
.hero-content .hero-slogan{
  text-shadow:0 1px 3px rgba(247,242,234,.85);
}
/* Titre principal (H1) : OMBRE PORTÉE NOIRE 100% DURE (aucun flou, noir plein),
   décalée en diagonale (demande Yan). Effet graphique net, style « sticker ». */
.hero-content h1{
  text-shadow:3px 3px 0 rgba(0,0,0,1);
}

/* Pages de texte légales (mentions, confidentialité, CGV…) : colonne étroite. */
.legal{max-width:760px}
.legal h2{
  font-size:clamp(1.1rem,2vw,1.4rem);
  letter-spacing:0;
  margin:0 0 12px;
  padding-top:clamp(22px,3.5vw,34px);
  margin-top:clamp(22px,3.5vw,34px);
  border-top:1px solid var(--ligne);
}
.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}
.legal a{color:var(--bleu);border-bottom:2px solid var(--ocre)}
.legal a:hover{color:var(--bleu-fonce)}