/* ===== secteur.css — le choix du domaine d'activité =====
 *
 * UN SEUL COMPOSANT, DEUX EMPLACEMENTS (21/08/2026) :
 *   · dans la tuile « Création de contenu » du hub, posé sur la vidéo ;
 *   · en haut de /entreprise, pour qui arrive de l'extérieur.
 * Le balisage est identique, seul le contexte change la couleur. C'est ce qui
 * garantit que les deux ne divergeront pas : il n'y a rien à tenir à jour deux
 * fois.
 *
 * ⚠️ Les lignes sont des <a href> et pas des boutons. Un moteur de recherche
 * n'ouvre pas de fenêtre : si le choix n'existait qu'en JavaScript, les pages
 * de secteur ne seraient trouvables nulle part. Le script ne fait qu'ouvrir.
 */

.sect .titre { margin: 0 0 .5rem; font-family: var(--brand); font-weight: 700;
  font-size: clamp(1rem, 2.2vw, 1.3rem); letter-spacing: -.015em; }
.sect .titre .sous { display: block; font-family: var(--sans); font-weight: 500;
  font-size: .8rem; opacity: .72; margin-top: .15rem; letter-spacing: 0; }

.sect-ligne { display: flex; align-items: center; justify-content: space-between;
  gap: 14px; width: 100%; padding: .62rem 2px;
  text-decoration: none; color: inherit;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  transition: padding-left .25s, opacity .25s; }
.sect-ligne:last-child { border-bottom: 0; }
.sect-ligne:hover, .sect-ligne:focus-visible { padding-left: 10px; outline: none; }
.sect-ligne:focus-visible { outline: 2px solid var(--brand-yellow); outline-offset: 2px; }
.sect-ligne .quoi { font-family: var(--brand); font-weight: 700; letter-spacing: -.015em;
  font-size: clamp(.98rem, 2.1vw, 1.24rem); }
.sect-ligne .fl { color: var(--brand-yellow); font-size: 1.1rem; transition: transform .25s; }
.sect-ligne:hover .fl { transform: translateX(5px); }
/* ⚠️ LA RÈGLE `.pas-pret` A ÉTÉ RETIRÉE le 21/08/2026 : plus aucun métier
   n'est grisé. Un secteur sans images mène à une page qui porte un formulaire,
   pas à une impasse : rien ne justifie de le montrer comme indisponible. */

/* ⚠️ LES 44 PX DE HAUTEUR MINIMALE NE VALENT QUE POUR LE DOIGT. Posés sur
   toutes les tailles, ils rallongeaient chaque ligne à la souris aussi : à cinq
   secteurs, la tuile passait de 270 à 364 px sur un écran de 1280, alors que
   tout l'intérêt de cette ouverture est que la mise en page ne bouge pas.
   Mesuré, pas supposé. */
@media (hover: none), (max-width: 700px) {
  .sect-ligne { min-height: 44px; }
}

/* --- posé sur une page claire (/entreprise) --- */
.sect-clair .sect-ligne { border-bottom-color: rgba(38, 57, 60, .14); padding: .8rem 2px; }

/* ===== l'ouverture dans la tuile ===== */
.tuile-choix { position: absolute; inset: 0; z-index: 3;
  padding: clamp(16px, 2.6vw, 26px);
  display: flex; flex-direction: column; justify-content: center; color: #fff;
  opacity: 0; pointer-events: none; transition: opacity .35s; }
.screen.ouverte .tuile-choix { opacity: 1; pointer-events: auto; }
/* ⚠️ « VOTRE DOMAINE » N'EST PAS JAUNE. Il l'a été quelques minutes le
   21/08/2026, Lino l'a fait retirer : le jaune de marque est déjà pris par le
   « Sanchez » du wordmark, par le mot qui défile dans la promesse et par les
   sept flèches de cette liste. Un quatrième emploi dans le même écran, et il
   ne désigne plus rien.
   ⚠️ La réserve à droite du titre dégage le bouton de fermeture. Sans elle, à
   375 px, la croix se pose sur la deuxième ligne du sous-titre. */
.tuile-choix .titre { padding-right: 42px; }

/* ⚠️ Le voile s'assombrit quand le choix s'affiche : le contraste d'un texte
   posé sur une vidéo qui change en permanence ne se règle pas sur une seule
   image du plan. */
.screen.ouverte .veil {
  background: linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.78) 60%, rgba(0,0,0,.62) 100%); }
.screen.ouverte .label { opacity: 0; pointer-events: none; }
.screen .label { transition: opacity .3s; }
.screen.ouverte { transform: none !important; }

.tuile-fermer { position: absolute; z-index: 4; top: 10px; right: 12px;
  width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .38); color: #fff; cursor: pointer;
  font-size: 1.4rem; line-height: 1; opacity: 0; pointer-events: none;
  transition: opacity .3s, background .2s; }
.screen.ouverte .tuile-fermer { opacity: 1; pointer-events: auto; }
.tuile-fermer:hover { background: rgba(0, 0, 0, .6); }

@media (prefers-reduced-motion: reduce) {
  .sect-ligne, .tuile-choix, .tuile-fermer, .screen .label, .sect-ligne .fl { transition: none; }
}

/* ⚠️ « e-commerce » NE SE COUPE PAS APRÈS SON TRAIT D'UNION. Un navigateur le
   fait volontiers, et il le faisait : « … commerce / e- » en bout de ligne,
   « commerce » à la suivante. Aucune propriété ne dit « ne coupe pas après ce
   trait-là », donc c'est le mot entier qu'on rend insécable.
   ⚠️ La classe est posée DANS la chaîne de `secteurs.js` : si un jour ces
   lignes repassent en texte simple, la balise s'affichera telle quelle. */
.sect .nb { white-space: nowrap; }