/* =============================================================================
   Charlotte Bard — elle-d-abord.css (« Elle d'abord », 16/10/2026 ; téléphone tenu droit seulement)
   Chargé juste après styles.css. Va avec js/elle-d-abord.js (defer) et le balisage de
   _chantier/integration-effets/extraits/elle.html.
   - Cadre or du portrait en SVG d'un seul trait (.elle-cadre), à la place de .hero-photo::after ;
     cadre, cœur et filets du logotype du héros dorés en dégradé (tous les modes).
   - Téléphone tenu droit seulement (700 px de large au plus, plus de 500 px de haut, depuis le 16/10/2026) :
     le portrait passe avant le logotype ; sous 560 px, l'arche tient dans le premier écran (375 × 660,
     navigateur d'Instagram). Tablettes, téléphones à l'horizontale et ordinateurs : ordre d'origine (texte,
     puis photo) et mise en page de styles.css.
   - Mode animé : la photo se pose, le cadre se trace, un reflet passe sur le cadre, le filet et le cœur.
   Contrat : tout état de départ est sous .anim ET prefers-reduced-motion: no-preference. Sans JS, en
   mouvement réduit ou après le chien de garde : cadre entier, statique. Espace de noms : elle-*.
   ============================================================================= */


/* 1. Cadre or en SVG : même place que l'ancienne bordure (inset 16px -16px -16px 16px, 1,5 px). La boîte
   est rentrée de 0,75 px : le milieu du trait tombe sur le milieu de l'ancienne bordure. */
.hero-photo::after { content: none; }
.elle-cadre {
  position: absolute;
  z-index: -1;
  top: 16.75px;
  left: 16.75px;
  width: calc(100% - 1.5px);
  height: calc(100% - 1.5px);
  overflow: visible;
  pointer-events: none;
}
.elle-cadre path { fill: none; stroke-linejoin: round; }
.elle-cadre-trait { stroke-width: 1.5px; }
.elle-cadre-reflet { stroke-width: 3px; stroke-linecap: round; }
/* Le jaune pâle du mur de la photo tant que l'image n'est pas arrivée */
.hero .arche { background: linear-gradient(#D5C39D, #C6B08B); }


/* 2. Filets dorés du logotype du héros. Dessous, l'or (300 % : la lumière est près du cœur) ; dessus, la
   bande du reflet (2,4 em), hors du filet au repos. Chaque trait mesure 2,4 em, celui de droite
   commence à 4 em (styles.css : 6,4 em, cœur 0,5 em, écarts 0,55 em). */
.logotype-heros .logotype-filet::before,
.logotype-heros .logotype-filet::after {
  background-color: transparent;
  background-image:
    linear-gradient(90deg, rgba(226, 183, 112, 0), rgba(226, 183, 112, .9) 38%, #F6E4BE 50%, rgba(226, 183, 112, .9) 62%, rgba(226, 183, 112, 0)),
    linear-gradient(90deg, #B8905F, #C9A27A 40%, #E6D0AE 50%, #C9A27A 60%, #A9875E);
  background-size: 2.4em 100%, 300% 100%;
  background-repeat: no-repeat;
}
.logotype-heros .logotype-filet::before { background-position: -2.4em 0, 0% 0; }
.logotype-heros .logotype-filet::after { background-position: -6.4em 0, 100% 0; }


/* 3. Téléphone tenu droit : le portrait d'abord (ordre visuel ; dans le document, le nom et le titre restent
   en tête). Écart : 16 px de décalage du cadre + 18 px d'air. Plus large (tablette) ou plus bas (téléphone à
   l'horizontale, 320 à 500 px de haut) : l'ordre d'origine ; l'arche n'y rétrécit plus et le badge Instagram ne
   couvre plus le visage. Navigateurs qui le savent (Chrome, Edge) : le clavier suit le même ordre que l'œil
   (badge Instagram, puis boutons), voir reading-flow. */
@media (max-width: 700px) and (min-height: 501px) {
  .hero-grille { gap: 34px; reading-flow: grid-order; }
  .hero-photo { order: -1; }
}
@media (min-width: 560.02px) and (max-width: 700px) and (min-height: 501px) {
  .hero-photo { width: min(340px, 74%, 35vh); }
  @supports (height: 1svh) { .hero-photo { width: min(340px, 74%, 35svh); } }
}


/* 4. Téléphone tenu droit : arche de hauteur min(75vw, 40svh, 312px) en 4:5, centrée ; sous le logotype :
   titre, boutons, puis chapo et atouts. --elle-arche-h est posée sur .hero : la grande tache s'en sert aussi. */
@media (max-width: 560px) and (min-height: 501px) {
  .hero { --elle-arche-h: min(75vw, 40vh, 312px); padding-top: calc(var(--nav-h) + 4px); }
  .hero-photo { width: calc(var(--elle-arche-h) * .8); justify-self: center; margin-right: 0; }
  /* La grande tache passe derrière le haut de l'arche. Elle suit l'arche : sa partie visible reste plus
     petite que le portrait, qui reste l'élément LCP (à 290 px fixes, à 320 × 568, elle le devenait vers 2 s). */
  .hero::before { top: -44px; width: min(290px, var(--elle-arche-h) * 1.05); }
  .hero-texte > .actions { order: 1; }
  .hero-texte > .chapo { order: 2; margin: 30px 0 0; }
  .hero-texte > .atouts { order: 3; margin-top: 24px; }
  /* Badge compact, sur la robe, jamais sur le visage ; le compte reste lu par les lecteurs d'écran */
  .hero-badge { right: -40px; bottom: 8px; gap: 8px; padding: 7px 13px; font-size: .78rem; }
  .hero-badge > svg { width: 16px; height: 16px; }
  .hero-badge .elle-compte {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
}
@supports (height: 1svh) {
  @media (max-width: 560px) and (min-height: 501px) { .hero { --elle-arche-h: min(75vw, 40svh, 312px); } }
}
@media (max-width: 360px) and (min-height: 501px) {
  .hero-badge { right: -46px; gap: 7px; padding: 6px 11px; font-size: .72rem; }
  .hero-badge > svg { width: 14px; height: 14px; }
}
/* Petits écrans (320 × 568) : visage, logotype et titre tiennent sans défiler */
@media (max-width: 560px) and (min-height: 501px) and (max-height: 620px) {
  .logotype-heros { --logo-taille: 3.6rem; }
  .hero { --elle-arche-h: min(75vw, 36vh, 312px); }
  @supports (height: 1svh) { .hero { --elle-arche-h: min(75vw, 36svh, 312px); } }
}


/* 5. Téléphone tenu droit : un seul « Demander une date » à la fois. Les boutons du héros passent sous la ligne
   de flottaison ; tant que le grand logotype est entier à l'écran (html.logo-heros-visible, js/animations.js),
   le petit bouton de la barre transparente est visible et la barre mobile reste rangée. Sans JS : inchangé.
   À l'horizontale, comme avant : la barre mobile seule. */
@media (max-width: 700px) and (min-height: 501px) {
  html.js .nav-heros .btn-petit { display: inline-flex; }
  html.js:not(.logo-heros-visible) .nav-heros .btn-petit { opacity: 0; visibility: hidden; }
  html.logo-heros-visible .barre-mobile { transform: translateY(140%); opacity: 0; visibility: hidden; }
}
/* Sous 340 px (320 × 568) : le bouton tient à côté du petit logo caché, même largeur dans tous les modes */
@media (max-width: 339.98px) and (min-height: 501px) {
  html.js .nav-heros .btn-petit { padding-inline: 13px; }
}


/* 6. Mouvement. 0 → 1,6 s : la photo se pose (opacité toujours 1 : LCP intact). Le reste est piloté par
   js/elle-d-abord.js : tracé 80 → 1 180 ms, reflet du cadre 1 200 → 2 000 ms, du filet 1 750 → 2 250 ms,
   du cœur 1 850 → 2 150 ms. Le trait reste caché jusqu'au tracé (.elle-trace, puis .elle-trace-faite) ;
   si le script ne vient pas, il réapparaît seul en fondu à 3 s. */
@media (prefers-reduced-motion: no-preference) {
  .anim .hero .arche img { animation: elle-pose 1.6s var(--courbe, cubic-bezier(.2, .7, .2, 1)) backwards; }
  .anim .hero:not(.elle-trace):not(.elle-trace-faite) .elle-cadre-trait {
    opacity: 0;
    animation: elle-secours .4s ease-out 3s forwards;
  }
  /* Bouton de la barre (partie 5) : en fondu, comme le petit logo */
  .anim .nav-heros .btn-petit {
    transition: background-color var(--duree-courte, 180ms), color var(--duree-courte, 180ms),
      transform var(--duree-courte, 180ms), opacity .25s ease-out, visibility 0s linear .25s;
  }
  .anim.logo-heros-visible .nav-heros .btn-petit {
    transition: background-color var(--duree-courte, 180ms), color var(--duree-courte, 180ms),
      transform var(--duree-courte, 180ms), opacity .35s ease-out, visibility 0s;
  }
}
@keyframes elle-pose { from { transform: scale(1.04); } }
@keyframes elle-secours { to { opacity: 1; } }

@media print {
  .anim .hero .arche img { animation: none !important; transform: none !important; }
  .anim .elle-cadre-trait { animation: none !important; opacity: 1 !important; stroke-dasharray: none !important; }
}