/* Accueil, version du 8 octobre 2026, d'après la maquette docs/maquettes/accueil-v2-2026-10-08.html : elle fait foi
   pour les tailles et les espaces. Cette feuille se charge après toutes les autres : elle règle la page actuelle, même
   G animé, mêmes téléphones, sans rien redessiner. Couleurs et polices : jetons de tokens.css, rien d'autre. */

/* Premier écran. À 100 % de zoom on ne voit que lui : le bloc suivant commence sous le pli. La maquette portait en
   haut un bandeau de 38 px (75 px au téléphone) que le site n'a pas : la hauteur en tient compte, pour que le bas du
   premier écran tombe au même endroit que sur la maquette. */
.home .home-stage{min-height:calc(100vh - 182px);min-height:calc(100svh - 182px);display:flex!important;flex-direction:column;justify-content:flex-start;padding-top:104px!important;padding-bottom:40px!important;box-sizing:border-box}
.home .home-stage .stage-copy{width:100%;margin-bottom:0!important}
.home .stage-copy h1{font-size:clamp(40px,4.4vw,64px);line-height:var(--gigets-leading-title);letter-spacing:-.03em;max-width:12.5em}
.home .stage-description{font-family:var(--gigets-font-display);font-size:clamp(24px,2.2vw,32px);line-height:1.2;color:var(--gigets-body);margin:26px 0 0;max-width:none!important}
.home .stage-description .site-u{color:var(--gigets-ink)}
.home .stage-description .site-b{font-weight:600;color:var(--gigets-ink)}
.home .stage-details.stage-motto{font-family:var(--gigets-font-display);font-size:clamp(20px,1.8vw,26px);line-height:1.2;color:var(--gigets-body);max-width:none;margin:26px 0 34px}
/* Les deux actions côte à côte sur une ligne. Elles ne passent à la ligne que si elles ne tiennent pas dans la largeur
   (libellés français au téléphone) : rien n'est jamais coupé. */
.home .hero-actions{display:flex;flex-wrap:wrap;align-items:baseline;gap:18px 44px}
.home .hero-actions .action{white-space:nowrap}
.home .hero-actions .action-primary{padding:15px 30px!important;font-size:17px!important;font-weight:700!important;letter-spacing:.01em;line-height:1!important}
.home .hero-actions .action-primary::after,.home .hero-actions .action-primary::before{content:none!important}
.home .hero-actions .how-jump{font-size:17px!important;font-weight:600!important}

/* Bloc centré, juste avant les téléphones. */
.home-imagine{max-width:1280px;margin:40px auto 0;padding:120px 40px;text-align:center}
/* Les trois lignes de « awesome friend » : centrées sur le même axe, la grande phrase en lignes équilibrées sans couper
   les mots en couleur, puis les deux phrases courtes à la même taille, détachées de la grande. */
.home-imagine .home-imagine-big{font-family:var(--gigets-font-display);font-size:clamp(36px,5vw,72px);line-height:var(--gigets-leading-title);letter-spacing:-.03em;margin:0 auto;max-width:1050px;text-wrap:balance;color:var(--gigets-ink)}
.home-imagine-big .site-g{white-space:nowrap}
.home-imagine .home-imagine-sub{font-family:var(--gigets-font-display);font-size:clamp(22px,2.4vw,32px);line-height:1.35;color:var(--gigets-body);margin:44px auto 0;max-width:30em;text-wrap:balance}
.home-imagine .home-imagine-logic{font-family:var(--gigets-font-display);font-size:clamp(22px,2.4vw,32px);line-height:1.35;color:var(--gigets-body);margin:12px auto 0;max-width:30em;text-wrap:balance}

/* Quatre cartes, sur une ligne. */
.home-giving{display:block!important;text-align:center;margin-top:24px}
.home-giving>h2{max-width:none!important;margin:0 auto 48px!important;font-size:clamp(36px,4.4vw,64px)!important;line-height:var(--gigets-leading-title)}
.home-giving-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;text-align:left}

/* Bloc centré, sans fond. */
.home-flow{max-width:980px;margin:120px auto 0;padding:0 40px;text-align:center}
.home .home-flow-lead{font-size:18px;line-height:1.65;color:var(--gigets-body);max-width:640px;margin:0 auto 28px}
.home .home-flow-big{font-family:var(--gigets-font-display);font-size:clamp(30px,3.6vw,50px);line-height:1.15;letter-spacing:-.025em;color:var(--gigets-ink);margin:0 auto;max-width:900px}

/* Ce que nous ne construirons pas : trois carrés. Chacun est un bouton : au survol ou au focus, son dessin s'efface et
   sa phrase apparaît ; au toucher et au clavier, il s'ouvre et se referme. La teinte de chacun est un point du dégradé. */
.home-tiles{max-width:1280px;margin:120px auto 0;padding:0 40px;text-align:center}
.home-about .home-tiles .eyebrow{margin:0 0 28px}
.home-tile-row{display:grid;grid-template-columns:repeat(3,minmax(0,220px));justify-content:center;gap:20px;margin:0 0 32px}
.home-tile{position:relative;aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;margin:0;padding:22px;background:var(--gigets-card);border:0;border-top:6px solid transparent;border-radius:0;font:inherit;color:var(--gigets-ink);cursor:pointer;transition:border-color .25s,background .25s;overflow:hidden}
.home-tile:nth-child(1){--home-tint:var(--gigets-ember)}.home-tile:nth-child(2){--home-tint:var(--gigets-crimson)}.home-tile:nth-child(3){--home-tint:var(--gigets-magenta)}
/* Au repos, deux ressorts égaux tiennent le dessin et le titre au milieu du carré. Carré ouvert, le titre se place
   comme sur la maquette (son milieu à 77 px du haut) et la phrase se cale en bas. Si la phrase est longue, comme en
   français, le ressort du haut cède et le titre remonte d'autant : le titre et la phrase ne se chevauchent jamais. */
.home-tile::before,.home-tile::after{content:"";flex:1 1 0px;min-height:0;transition:flex-grow .25s,flex-basis .25s}
.home-tile-icon{flex:none;width:56px;height:56px;margin-bottom:16px;display:flex;align-items:center;justify-content:center;color:var(--home-tint);transition:opacity .25s,transform .25s,height .25s,margin .25s}
.home-tile-icon svg{flex:none;width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.home-tile-title{flex:none;font:500 18px/1.25 var(--gigets-font-ui);transition:transform .25s,margin .25s}
.home-tile-text{flex:none;align-self:stretch;margin:0 -2px;max-height:0;overflow:hidden;font:400 15px/1.45 var(--gigets-font-ui);color:var(--gigets-body);opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s}
.home-tiles .action{display:inline-flex}
@media(min-width:761px){
 .home-tile:focus-visible,.home-tile[aria-expanded="true"]{border-top-color:var(--home-tint)}
 .home-tile:focus-visible::before,.home-tile[aria-expanded="true"]::before{flex:0 1 77px}
 .home-tile:focus-visible::after,.home-tile[aria-expanded="true"]::after{flex:0 0 0px}
 .home-tile:focus-visible .home-tile-icon,.home-tile[aria-expanded="true"] .home-tile-icon{opacity:0;transform:translateY(-12px);height:0;margin-bottom:0}
 .home-tile:focus-visible .home-tile-title,.home-tile[aria-expanded="true"] .home-tile-title{transform:translateY(-50%);margin-bottom:5px}
 .home-tile:focus-visible .home-tile-text,.home-tile[aria-expanded="true"] .home-tile-text{max-height:none;margin-top:auto;opacity:1;transform:none}
}
@media(hover:hover) and (min-width:761px){
 .home-tile:hover{border-top-color:var(--home-tint)}
 .home-tile:hover::before{flex:0 1 77px}
 .home-tile:hover::after{flex:0 0 0px}
 .home-tile:hover .home-tile-icon{opacity:0;transform:translateY(-12px);height:0;margin-bottom:0}
 .home-tile:hover .home-tile-title{transform:translateY(-50%);margin-bottom:5px}
 .home-tile:hover .home-tile-text{max-height:none;margin-top:auto;opacity:1;transform:none}
}

/* Croyance, mission et vision : un filet fin au-dessus, la note en grand, puis mission et vision côte à côte. */
.home-belief{max-width:1280px;margin:120px auto 0;padding:72px 40px 8px;border-top:1px solid var(--gigets-rule)}
.home .home-belief-note{font-family:var(--gigets-font-display);font-size:clamp(30px,3.6vw,52px);line-height:1.2;letter-spacing:-.025em;color:var(--gigets-ink);margin:0 auto;max-width:980px;text-align:center}
.home-belief .site-u{background-size:100% .06em}
.home-belief .home-purpose{margin:72px 0 24px!important;padding:0!important}
/* La mission, phrase de fin de l’accueil : Fraunces, lignes équilibrées sur toute la colonne, un filet de 1 px en
   Crimson pour seul accent (aucun dégradé). */
.home-purpose h2{font-size:clamp(28px,2.6vw,38px)!important;letter-spacing:-.03em;max-width:none;text-wrap:balance}
.home-purpose>div:first-child{border-left:1px solid var(--gigets-crimson);padding-left:clamp(20px,2.2vw,32px)}

@media(max-width:760px){
 .home .home-stage{min-height:calc(100vh - 115px);min-height:calc(100svh - 115px);padding-top:56px!important;padding-bottom:24px!important}
 .home .hero-mark{min-height:96px!important}.home .hero-mark svg{width:72px!important;height:72px!important}
 .home .stage-copy h1{font-size:34px!important}
 .home .stage-description{font-size:21px!important;margin-top:16px!important}
 .home .stage-details.stage-motto{font-size:18px!important;margin:16px 0 22px!important}
 .home .hero-actions{gap:16px 24px}
 .home .hero-actions .action-primary{padding:13px 20px!important;font-size:16px!important}
 .home .hero-actions .how-jump{font-size:16px!important}
 .home-imagine{padding:72px 20px}
 .home-giving-grid{grid-template-columns:1fr!important}
 .home-flow,.home-tiles{margin-top:80px;padding:0 20px}
 /* Trois lignes qui s'ouvrent au toucher. Le dessin à gauche, le titre à côté, la phrase sous le titre : un titre
    trop long pour la ligne se replie dans sa colonne, il ne passe jamais sous le dessin. */
 .home-tile-row{grid-template-columns:1fr;gap:10px}
 .home-tile{aspect-ratio:auto;display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:4px 14px;text-align:left;padding:14px 16px;border-top:0;border-left:6px solid transparent}
 .home-tile::before,.home-tile::after{content:none}
 .home-tile[aria-expanded="true"]{border-left-color:var(--home-tint)}
 .home-tile-icon{width:40px;height:40px;margin-bottom:0}.home-tile-icon svg{width:30px;height:30px}
 .home-tile-title{font-size:16px}
 .home-tile-text{grid-column:2;display:none;margin:0;max-height:none;opacity:1;transform:none;font-size:14px}
 .home-tile[aria-expanded="true"] .home-tile-text{display:block}
 .home-belief{margin-top:80px;padding:48px 20px 0}
 .home-belief .home-purpose{margin-top:48px!important}
}
/* Tablette debout, de 761 à 900 px : la colonne du texte est étroite. L'écart entre les deux actions et les marges du
   bouton se resserrent pour qu'elles restent sur une ligne, en anglais comme en français (mesuré le 9 octobre 2026 :
   à 768 px elles passaient sur deux lignes). */
@media(min-width:761px) and (max-width:900px){
 .home .hero-actions{gap:18px 20px}
 .home .hero-actions .action-primary{padding:15px 22px!important}
 html[lang="fr"] .home .hero-actions .how-jump{gap:10px}
}
/* Téléphone étroit, sous 390 px : les deux actions tiennent encore sur une ligne, sans que la flèche soit coupée. Le
   seuil était à 380 px : de 381 à 383 px la ligne se cassait en anglais, et à 384 px il ne restait rien. */
@media(max-width:389px){
 .home .hero-actions{gap:14px 14px}
 .home .hero-actions .action-primary{padding:13px 16px!important;font-size:15px!important}
 .home .hero-actions .how-jump{font-size:15px!important;gap:10px}
 .home .hero-actions .how-jump::after{font-size:18px}
}
/* En français, « Comment ça marche » est plus long que « See how it works ». Au téléphone, l'écart entre les deux
   actions, celui de la flèche et les marges du bouton se resserrent pour que la ligne tienne à 390 puis à 360 px.
   L'anglais ne change pas : il suit la maquette. */
@media(max-width:760px){
 html[lang="fr"] .home .hero-actions{gap:16px 12px}
 html[lang="fr"] .home .hero-actions .action-primary{padding:13px 16px!important}
 html[lang="fr"] .home .hero-actions .how-jump{gap:10px}
}
@media(max-width:389px){
 html[lang="fr"] .home .hero-actions{gap:14px 10px}
 html[lang="fr"] .home .hero-actions .action-primary{padding:13px 13px!important}
 html[lang="fr"] .home .hero-actions .how-jump{gap:8px}
}
/* Sans JavaScript, un bouton ne s'ouvre pas : au téléphone, les trois phrases restent lisibles. */
@media(max-width:760px) and (scripting:none){.home-tile-text{display:block}}
@media(prefers-reduced-motion:reduce){.home-tile *,.home-tile::before,.home-tile::after{transition:none!important}}