/* L'ACCUEIL (scripts/pages.mjs et scripts/accueil-sections.mjs), pensé d'abord pour le téléphone. Toutes les
   sections sont sur fond blanc, séparées par le petit gâteau (identite.css), sauf le bandeau noir de la maison. */
/* L'espace en haut et en bas de chaque section de l'accueil (resserré à la demande d'Hakim, 9 oct.). */
body[data-page=home] main{--section-space:24px}
/* LA SÉPARATION DES SECTIONS (demande d'Hakim, 10 oct.) : le petit gâteau entre deux filets, à la largeur du contenu
   (1100 px), avec le même espace partout (identite.css) : sous le héros, après le bandeau noir, autour de « Comment se
   passe une commande » et avant l'invitation finale. */
body[data-page=home] .separateur{display:block;height:30px;background:url(/assets/identite/gateau.svg) center/30px 30px no-repeat,linear-gradient(var(--line),var(--line)) left center/calc(50% - 34px) 1px no-repeat,linear-gradient(var(--line),var(--line)) right center/calc(50% - 34px) 1px no-repeat}
/* Tous les titres de section suivent l'échelle d'identite.css : aucun ne dépasse le h1 du héros. */
body[data-page=home] main h2{font-size:clamp(1.9rem,2.4vw + .9rem,3rem);line-height:1.12}
.home-section-heading{max-width:780px;margin:0 auto 28px;text-align:center}
.home-section-heading .eyebrow{margin-bottom:10px}
.home-section-heading>p:not(.eyebrow){max-width:640px;margin:14px auto 0;color:var(--doux);font-size:.9375rem;line-height:1.7;text-wrap:pretty}

/* LE HÉROS. Jusqu'à 1199 px : la photo d'Amal d'abord, entière, puis le titre, la devise, la phrase et les deux
   boutons (empilés au téléphone ; à la tablette, le titre à gauche et le reste à droite). À partir de 1200 px, la
   photo devient le bandeau et le texte se pose dans sa zone claire, à gauche, sur un voile blanc qui s'efface avant
   Amal. Le h1 reste plus grand que tous les h2 de la page. */
/* Le héros colle à l'en-tête (demande d'Hakim) : pas de filet sous le menu tant que l'en-tête n'est pas compact, et la
   photo commence juste sous le sceau. */
body[data-page=home] .entete:not(.entete--compacte){border-bottom-color:transparent}
body[data-page=home] .hero{display:block;min-height:0;margin:0 auto;padding:0}
body[data-page=home] .hero-photo{position:relative;display:block;height:auto;margin:0;padding:0;background:none;perspective:none}
body[data-page=home] .hero-photo>img{display:block;width:100%;height:auto}
body[data-page=home] .hero-photo figcaption{margin-top:8px;font-size:.75rem;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:var(--doux)}
body[data-page=home] .hero-copy{padding:0}
body[data-page=home] .hero-copy h1{margin:18px 0 10px;font-size:clamp(2.6rem,3.4vw + 1rem,4.6rem);line-height:1.04}
body[data-page=home] .hero-copy>.hero-devise{max-width:none;margin:0 0 10px;font:500 1rem/1.5 var(--sans);letter-spacing:.02em;color:#111}
body[data-page=home] .hero-copy>p:not(.hero-devise){max-width:540px;margin:0;color:var(--doux);font-size:.9375rem;line-height:1.7}
body[data-page=home] .hero-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;max-width:540px;margin-top:22px}
body[data-page=home] .hero-actions .button{width:100%;min-width:0;min-height:52px;padding:13px 12px;font-size:.9375rem}
@media(min-width:600px){body[data-page=home] .hero-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* AU TÉLÉPHONE (choix d'Hakim, 10 oct.) : la photo d'Amal sur toute la largeur, plus haute et cadrée sur Amal et le
   gâteau, avec le titre écrit dessus en bas, en blanc sur un voile sombre ; la devise, le texte et les boutons
   suivent dessous. */
@media(max-width:759.98px){
 body[data-page=home] .hero{display:grid;grid-template-columns:minmax(0,1fr);width:100%;padding-bottom:0}
 body[data-page=home] .hero-photo{grid-area:1 / 1}
 body[data-page=home] .hero-photo>img{height:min(112vw,520px);object-fit:cover;object-position:70% 30%}
 body[data-page=home] .hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000 42%,#0000008c 72%,#000000c7 100%);pointer-events:none}
 body[data-page=home] .hero-photo figcaption{display:none}
 body[data-page=home] .hero-copy{display:contents}
 body[data-page=home] .hero-copy h1{position:relative;z-index:1;grid-area:1 / 1;align-self:end;margin:0;padding:0 6% 26px;color:#fff}
 body[data-page=home] .hero-copy>.hero-devise{margin:20px 6% 8px}
 body[data-page=home] .hero-copy>p:not(.hero-devise){margin-inline:6%}
 body[data-page=home] .hero-actions{margin:20px 6% 0}
}
@media(min-width:760px) and (max-width:1199.98px){
 body[data-page=home] .hero-copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:48px;align-items:start;margin-top:28px}
 body[data-page=home] .hero-copy>*{grid-column:2}
 body[data-page=home] .hero-copy h1{grid-column:1;grid-row:1 / span 3;margin:0}
 body[data-page=home] .hero-copy>.hero-devise{font-size:1.0625rem}
 body[data-page=home] .hero-actions{grid-template-columns:minmax(0,1fr)}
}
/* Entre 1000 et 1199 px, l'écran est souvent bas (1024 × 768, 1152 × 768) : la photo d'Amal, entière et centrée,
   ne prend que la moitié de sa hauteur (jamais rognée : elle rétrécit dans sa forme), et les deux boutons se rangent
   côte à côte, pour que le titre et « Demander une soumission » se voient dès l'arrivée. À partir de 1100 px,
   l'en-tête de l'ordinateur est plus haut : la photo prend la hauteur que lui laissent l'en-tête et le texte du
   héros (toute la largeur sur un écran haut). */
@media(min-width:1000px) and (max-width:1199.98px){
 body[data-page=home] .hero-photo>img{width:auto;max-height:50vh;height:auto;margin-inline:auto}
 body[data-page=home] .hero-photo figcaption{text-align:center}
 body[data-page=home] .hero-actions{grid-template-columns:auto auto;justify-content:start}
}
@media(min-width:1100px) and (max-width:1199.98px){
 body[data-page=home] .hero-photo>img{max-height:max(280px,calc(100vh - 420px))}
}
/* À partir de 1200 px, la photo d'Amal en bandeau sur toute la largeur (préférence d'Hakim), mais moins haute : sa
   hauteur est limitée (--hauteur-heros), le haut et le bas de la photo cèdent un peu de place (cadrage sur Amal et le
   gâteau), et l'on voit la section suivante dès l'arrivée. Le texte se pose à gauche, sur un voile blanc. */
@media(min-width:1200px){
 body[data-page=home] .hero{--hauteur-heros:clamp(480px,44vw,620px);display:grid;grid-template-columns:minmax(0,1fr);align-items:center;margin-top:0;padding:0}
 body[data-page=home] .hero-photo,body[data-page=home] .hero-copy{grid-area:1 / 1}
 body[data-page=home] .hero-photo>img{height:var(--hauteur-heros);object-fit:cover;object-position:60% 22%}
 body[data-page=home] .hero-photo::before{content:"";position:absolute;inset:0 0 auto;height:var(--hauteur-heros);background:linear-gradient(90deg,#fffffff2 0%,#ffffffe6 30%,#ffffff99 41%,#ffffff1a 51%,#fff0 57%);pointer-events:none}
 body[data-page=home] .hero-photo figcaption{text-align:right}
 body[data-page=home] .hero-copy{position:relative;z-index:1;align-self:start;width:min(44%,560px);padding:clamp(48px,6vw,96px) 0 0 clamp(40px,4vw,64px)}
 body[data-page=home] .hero-copy h1{margin-top:0}
 body[data-page=home] .hero-copy>.hero-devise{font-size:1.0625rem}
 body[data-page=home] .hero-copy>p:not(.hero-devise){color:#222;font-size:1rem}
}

/* UN GÂTEAU IMAGINÉ AVEC VOUS : le titre et ses trois paragraphes (mot pour mot), alignés à gauche ; à partir de
   900 px, le titre à gauche et les paragraphes à droite. Puis les six cartes : deux par rangée au téléphone, trois à
   partir de 900 px ; chaque photo garde sa forme ; la phrase de l'occasion paraît à partir de 600 px. */
.occasion-editorial{max-width:1100px;padding:var(--section-space) 0}
.occasion-intro{max-width:none;text-align:left}
.occasion-intro>p:not(.eyebrow){max-width:none;margin:12px 0 0}
/* Les trois paragraphes dans la même police que le reste du texte (demande d'Hakim). */
.occasion-intro>p:not(.eyebrow):first-of-type{margin-top:16px}
@media(min-width:900px){
 .occasion-intro{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:56px;align-items:start;margin-bottom:32px}
 .occasion-intro h2{grid-row:1 / span 3}
 .occasion-intro>p:not(.eyebrow){grid-column:2;font-size:1rem}
 .occasion-intro>p:not(.eyebrow):first-of-type{margin-top:0}
}
/* Les cartes d'occasion : le carrousel commun (carrousel.mjs, styles dans complements.css). */
.home-section-action{margin-top:28px;text-align:center}

/* LA MAISON ADÉLICE, en bandeau noir sur toute la largeur (choix d'Hakim) : le portrait d'Amal entier, puis ses mots
   en blanc ; à partir de 900 px, la photo à gauche et le texte à droite. Tout le bandeau est cliquable (le lien
   « Découvrir mon histoire » s'étend sur lui). */
.home-bandeau-maison{position:relative;background:#000;color:#fff}
body[data-page=home] .separateur{width:min(1100px,88%)}
.home-bandeau-dedans{display:grid;grid-template-columns:minmax(0,1fr);max-width:1100px;margin:0 auto}
.home-bandeau-photo{display:block;width:100%;height:auto}
.home-bandeau-texte{padding:28px 6% 32px}
.home-bandeau-maison .eyebrow{margin:0 0 8px;color:#c9c9c9}
.home-bandeau-maison h2{margin:0 0 16px;color:#fff}
.home-bandeau-maison p:not(.eyebrow){max-width:520px;margin:0;color:#e6e6e6;font-size:1rem;line-height:1.75}
/* « Découvrir mon histoire » : le bouton blanc du site sur le bandeau noir, qui reste cliquable en entier. */
.home-bandeau-maison .home-bandeau-lien{margin-top:22px;min-width:240px}
.home-bandeau-lien::after{content:"";position:absolute;inset:0}
.home-bandeau-maison:hover .home-bandeau-lien{background:var(--ivory)}
.home-bandeau-lien:focus-visible{outline:2px solid #fff;outline-offset:4px}
@media(min-width:900px){.home-bandeau-dedans{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}.home-bandeau-texte{padding:40px 56px}}

/* COMMENT SE PASSE UNE COMMANDE : les cinq temps, en frise à partir de 1000 px (complements.css), sans bouton
   dessous (demande d'Hakim, 10 oct.). */
.home-parcours{padding:var(--section-space) 0}
.home-parcours>.content-width{max-width:1100px}
@media(min-width:1000px){.home-parcours .parcours{margin-top:12px}}

/* LES QUESTIONS. */
body[data-page=home] .faq{display:block;max-width:1100px;padding:var(--section-space) 0;border-top:0}
/* Ni filet au-dessus de la première question ni sous la dernière (demande d'Hakim, 10 oct.) : les lignes du petit
   gâteau, juste au-dessus et juste au-dessous, suffisent. */
body[data-page=home] .faq-list{border-top:0}
body[data-page=home] .faq-list details:last-of-type{border-bottom:0}
body[data-page=home] .faq>div{max-width:820px;margin-inline:auto}
body[data-page=home] .faq>div:first-child{margin-bottom:24px;text-align:center}
body[data-page=home] .faq h2{margin:0}
body[data-page=home] .faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 0;font-size:.9375rem}
body[data-page=home] .faq summary span{flex:none}
body[data-page=home] .faq-list a{text-decoration:underline;text-underline-offset:.2em}
body[data-page=home] .faq-list a:hover,body[data-page=home] .faq-list a:focus-visible{text-decoration-thickness:2px}
@media(min-width:760px){body[data-page=home] .faq summary{padding:19px 0;font-size:1rem}}

/* L'INVITATION FINALE : « Demander une soumission », « Prendre rendez-vous », puis le téléphone. */
body[data-page=home] .closing{width:min(1100px,88%);margin-inline:auto;padding:0 0 var(--section-space);background:#fff;border-top:0;border-bottom:0}
/* Le petit gâteau de la fermeture est devenu celui du séparateur : il n'est pas répété. */
body[data-page=home] .closing-mark{display:none}
body[data-page=home] .closing h2{margin:0 0 14px}
body[data-page=home] .closing>p{max-width:570px;margin-inline:auto}
.closing-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:24px}
body[data-page=home] .closing-actions .button{min-width:240px;margin:0}
@media(max-width:599.98px){.closing-actions{flex-direction:column}body[data-page=home] .closing-actions .button{width:100%;min-width:0}}

@media(min-width:760px){body[data-page=home] main{--section-space:36px}}
@media(prefers-reduced-motion:reduce){}