/* [12/10 04h4x, coordinatrice] sélecteurs préfixés par « html » : la feuille est liée après pages-outils.css (là où la production a le même contexte : le bloc SEO de la production précède </head> et faisait échouer la publication) ; le préfixe garde la priorité sur les <style> de la page.
   hero-droite.css — l'image à droite du titre, sur ordinateur, dans le haut de sept pages outils (agent R, 12/10/2026).
   Ismael, 03/10 16h47 : « il faut une image a droite » (le texte à gauche, l'image à droite du titre, sur ordinateur).
   Gabarit copié de la Photo Produit (outil-photo-produit.html, .pp-hero : deux colonnes, colonne image minmax(0,560px),
   gap 48px). Deux écarts, demandés par la coordinatrice : le haut de l'image s'aligne sur le haut du titre (align-items:start
   + décalage de la pastille), et chaque image garde son rapport d'origine (MOTION.md § 3 : aucune hauteur fixe ni rognage).
   Structure posée par outils/hero_image_droite.py : .hd-hero > .hd-txt (pastille, titre, textes, boutons) + .hd-img.
   Sous 1081 px, les trois <div> n'existent pas pour la mise en page (display:contents) : téléphone et tablette inchangés.
   Feuille propre à ce chantier : pages-outils.css et systeme.css sont tenues par un autre agent (B1, version téléphone). */

html .hd-hero,html .hd-txt,html .hd-img{display:contents}

@media (min-width:1081px){
  /* colonne image : --hd-col à 1280 px et au-delà, proportionnelle à l'écran en dessous (--hd-vw = --hd-col / 12,8) */
  html .hd-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,min(var(--hd-col,560px),var(--hd-vw,43.75vw)));gap:48px;align-items:start;
    --hd-dec:59px} /* --hd-dec : hauteur de la pastille (.tag, 39 px) + son écart au titre (20 px), mesurés le 12/10 sur les 9 pages */
  html .hd-txt{display:block;min-width:0;text-align:left}
  html .hd-img{display:block;min-width:0;margin-top:var(--hd-dec)}
  html .hd-txt h1,html .hd-txt .sub{margin-left:0;margin-right:0}
  html .hd-txt .row{justify-content:flex-start}

  /* Constructeur de Carrousel : l'exemple animé (« Bientôt dans le Studio · exemple ») passe à droite, en entier */
  html .hd-constructeur{--hd-col:500px;--hd-vw:41vw}
  html .hd-constructeur .anim-outil{margin-top:0;aspect-ratio:1/1} /* carré : les trois slides au centre, le champ de la phrase au-dessus ; en 4:5 la pastille « Bientôt » flottait sur 200 px de vide */

  /* Retouche : l'avant/après à glisser et sa légende */
  html .hd-retouche{--hd-col:420px;--hd-vw:32.81vw}
  html .hd-retouche .po-ba-hero{max-width:none;margin-top:0}
  html .hd-retouche .op-ba-lg{text-align:left}

  /* Cloneur de Miniature : l'originale, la flèche, la refaite, l'une sous l'autre */
  html .hd-miniature{--hd-col:440px;--hd-vw:34.38vw}
  html .hd-miniature .po-hero-ba{grid-template-columns:1fr;gap:6px;margin-top:0}
  html .hd-miniature .po-hero-ba figure:first-child{width:86%;justify-self:start}
  html .hd-miniature .po-hero-ba figure:last-child{width:92%;justify-self:end}
  html .hd-miniature .po-hero-ba .po-fleche{justify-self:center;transform:rotate(90deg)!important} /* apple-outils.css pose transform:none!important sur .po-fleche */

  /* Mode Libre : l'animation de la phrase tapée puis de l'image rendue */
  html .hd-libre{--hd-col:360px;--hd-vw:28.12vw}
  html .hd-libre .ml-hero{max-width:none;margin:0;text-align:left}
  html .hd-libre .ml-hero .row{justify-content:flex-start;margin-left:0;margin-right:0}
  html .hd-libre .anim-outil{margin-top:0;aspect-ratio:9/16}

  /* Explorateur : les cinq idées de photos, en deux rangées (3 puis 2), chaque photo entière */
  html .hd-explorer{--hd-col:540px;--hd-vw:42.19vw}
  html .hd-explorer .op-cartes{flex-wrap:wrap;justify-content:center;gap:14px 12px;margin-top:0}
  html .hd-explorer .hd-img{container-type:inline-size}
  html .hd-explorer .op-cartes figure{margin-top:0}
  html .hd-explorer .op-cartes figure:nth-child(n+5){display:block} /* pages-outils.css en masque une sous 1180 px (ancienne bande) : ici 3 + 2 */
  /* hauteur : 250 px, ou moins quand trois photos (largeurs 0,667 × hauteur + bord de 2,5 px de chaque côté, deux écarts de 12 px)
     ne tiennent plus sur la rangée : 3 × (0,667 h + 5) + 24 ≤ largeur de la colonne */
  html .hd-explorer .op-cartes img,html .hd-explorer .op-cartes figure:nth-child(3) img{height:min(250px,calc((100cqi - 44px) / 2.01))!important;width:auto!important}

  /* Analyseur : la démonstration (le lien copié, l'analyse lancée) et sa légende */
  html .hd-analyseur{--hd-col:580px;--hd-vw:48vw}
  html .hd-analyseur .ana-clip{margin:0;max-width:none}
  /* son titre suit 4,4vw (outil-analyseur.html) : plafonné à 9,3 % de sa colonne (56 px à 1280 px, comme avant), sinon il passe
     à 5 lignes vers 1680 px et laisse un blanc sous la vidéo */
  html .hd-analyseur .hd-txt{container-type:inline-size}
  html .hd-analyseur .hd-txt h1{font-size:min(4.4vw,9.3cqi)}

  /* Ta Garde Robe : la pièce en photo, puis la même pièce portée */
  html .hd-garde-robe{--hd-col:420px;--hd-vw:32.81vw}
  html .hd-garde-robe .tmg-hero-gr{max-width:none;margin:0;text-align:left}
  html .hd-garde-robe .tmg-hero-gr .row{justify-content:flex-start}
  html .hd-garde-robe .tmg-duo-gr{grid-template-columns:minmax(0,1fr);max-width:none;margin:0;gap:10px}
  html .hd-garde-robe .vd-rond{justify-self:center;transform:rotate(90deg)}
}

/* De 1081 à 1279 px, la colonne du texte rétrécit : le titre suit la largeur de sa colonne (11,2 % de celle-ci, jamais plus que
   les 6vw de systeme.css), pour garder le même nombre de lignes qu'à 1280 px et la hauteur du texte face à l'image. */
@media (min-width:1081px) and (max-width:1279.98px){
  html .hd-txt{container-type:inline-size}
  html .hd-hero:not(.hd-analyseur) .hd-txt h1{font-size:min(6vw,11.2cqi)} /* l'Analyseur garde son titre à 4,4vw (outil-analyseur.html) */
}