/* ==========================================================================
   Page d'accueil — mise en page dédiée
   Chargée uniquement sur cette page (voir inc/home_page.php).
   CSS simple et non SCSS : la chaîne de build webpack du thème n'est pas
   disponible sur ce serveur. Tous les sélecteurs sont préfixés par #home-page
   afin de passer devant les règles génériques de dist/main.css.
   Mêmes repères visuels que assets/css/about-page.css : l'accueil, « Qui
   sommes-nous », « Nous contacter » et les pages de services appartiennent à
   la même famille.
   ========================================================================== */

#home-page {
    --hp-ink: #22282e;
    --hp-muted: #55616e;
    --hp-light: #ECF2F8;
    --hp-line: #d7e3ef;
    --hp-radius: 18px;
    /* Mêmes valeurs que .grid-container : les sections s'alignent sur le bloc CTA. */
    --hp-width: 65rem;
    --hp-gutter: 0.9375rem;
    --hp-shadow: 0 20px 45px -28px rgba(0, 63, 125, .55);
    --hp-shadow-lift: 0 28px 55px -30px rgba(0, 63, 125, .7);

    display: block;
    color: var(--hp-ink);
    overflow-x: clip;
}

#home-page img {
    max-width: 100%;
}

#home-page .home-container {
    max-width: var(--hp-width);
    margin: 0 auto;
    padding: 0 var(--hp-gutter);
}

/* ------------------------------------------------------------------ Boutons */

#home-page .home-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .95rem 1.7rem;
    border-radius: 999px;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}

#home-page .home-button-solid {
    background: var(--hp-accent);
    color: #fff;
    box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .55);
}

#home-page .home-button-solid:hover,
#home-page .home-button-solid:focus-visible {
    background: var(--hp-accent-deep);
    color: #fff;
}

/* Second bouton du hero : le libellé reste dans l'encre du texte, c'est le
   contour qui porte la couleur de marque. Le bleu d'accent en texte sur blanc
   ne serait pas assez lisible. */
#home-page .home-button-outline {
    background: #fff;
    color: var(--hp-ink);
    border: 1px solid var(--hp-accent);
}

#home-page .home-button-outline:hover,
#home-page .home-button-outline:focus-visible {
    background: var(--hp-light);
    color: var(--hp-ink);
}

#home-page .home-button:hover,
#home-page .home-button:focus-visible {
    transform: translateY(-2px);
}

/* ------------------------------------------------- Titres de section */

/* Même axe pour toute la page : le bord gauche du conteneur, celui du titre
   du hero et celui des cartes. Le trait d'accent reprend celui des autres
   pages du site. */
#home-page .home-title {
    position: relative;
    margin: 0 0 1.1rem;
    padding-bottom: .85rem;
    font-size: clamp(1.6rem, 2.7vw, 2.3rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.015em;
    color: var(--hp-ink);
}

#home-page .home-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 72px;
    height: 4px;
    border-radius: 2px;
    background: var(--hp-accent);
}

#home-page .home-section-head {
    margin-bottom: 2.5rem;
}

/* --------------------------------------------------------------- Prose */

#home-page .home-text {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--hp-muted);
}

#home-page .home-text p {
    margin: 0 0 1em;
}

#home-page .home-text > *:last-child {
    margin-bottom: 0;
}

#home-page .home-text strong {
    font-weight: 600;
    color: var(--hp-ink);
}

#home-page .home-text a {
    color: var(--hp-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

#home-page .home-text ul {
    margin: 0 0 1em;
    padding: 0;
    list-style: none;
}

#home-page .home-text ul li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: .5rem;
}

#home-page .home-text ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .65em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--hp-accent);
}

/* ------------------------------------------------ Ouverture de la page */

/* Comme « Qui sommes-nous » et « Nous contacter », la page s'ouvre sur fond
   blanc, sans bandeau ni vague : le titre et la présentation portent l'entrée. */
#home-page .home-hero {
    position: relative;
    isolation: isolate;
    padding: 3.5rem 0 4.5rem;
    overflow: hidden;
    background: #fff;
}

/* Halo d'accent derrière la vidéo : seule touche décorative de la page, du
   même esprit que le cercle du bloc de conclusion des pages de services. */
#home-page .home-hero::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -16rem;
    right: -12rem;
    width: 38rem;
    height: 38rem;
    border-radius: 50%;
    background: radial-gradient(circle, var(--hp-accent-soft), rgba(255, 255, 255, 0) 70%);
}

/* Le titre traverse les deux colonnes : dans une demi-largeur, il se
   découpait en cinq lignes de trois mots. En dessous, le texte et les boutons
   d'un côté, la vidéo de l'autre. */
#home-page .home-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    grid-template-areas:
        "title title"
        "body  media";
    column-gap: 3rem;
    row-gap: 2.2rem;
    align-items: center;
}

#home-page .home-hero-title {
    grid-area: title;
    margin: 0;
    text-wrap: balance;
    font-size: clamp(2.2rem, 4.6vw, 3.4rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.02em;
    color: var(--hp-ink);
}

#home-page .home-hero-body {
    grid-area: body;
}

#home-page .home-hero-text {
    max-width: 34rem;
    margin: 0;
    font-size: 1.05rem;
}

#home-page .home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-top: 2.2rem;
}

/* L'illustration est carrée, comme l'était la vidéo qu'elle remplace. Elle
   n'est pas posée dans une carte : elle contient déjà une fenêtre de
   navigateur, un cadre autour ferait un cadre dans un cadre. */
#home-page .home-hero-media {
    grid-area: media;
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 27rem;
    margin-left: auto;
}

#home-page .home-hero-media .hs {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* --------------------------------------------------------- Nos services */

/* Bande sur le fond clair de la page : les cartes blanches s'en détachent,
   comme les portraits des fondateurs sur « Qui sommes-nous ». */
#home-page .home-services {
    /* Trois mesures doivent s'accorder pour que la pastille chevauche le bord
       haut des cartes : sa taille, ce qui dépasse du cadre, et le retrait haut
       de la carte. Elles sont déclarées ici, et tout le reste en découle —
       la remontée de la pastille et l'écart entre les rangées. */
    --hp-icon: 3.9rem;
    --hp-icon-overlap: 1.35rem;
    --hp-card-top: 3.2rem;

    padding: 4rem 0 4.5rem;
}

#home-page .home-services-grid,
#home-page .home-news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

#home-page .home-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
    background: #fff;
    border-radius: var(--hp-radius);
    transition: transform .25s ease, box-shadow .25s ease;
}

#home-page .home-card:hover,
#home-page .home-card:focus-visible {
    transform: translateY(-4px);
}

/* Pastille d'appel en bas de carte : elle remplace le « + » d'origine et
   s'allume à la couleur d'accent au survol de la carte entière. */
#home-page .home-card-more {
    position: absolute;
    right: 1.35rem;
    bottom: 1.35rem;
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    font-size: .85rem;
    color: var(--hp-accent);
    background: var(--hp-light);
    transition: background-color .25s ease, color .25s ease;
}

#home-page .home-card:hover .home-card-more,
#home-page .home-card:focus-visible .home-card-more {
    color: #fff;
    background: var(--hp-accent);
}

/* Les pastilles remontent au-dessus des cartes : tous les écarts autour de la
   grille se mesurent donc depuis le haut de la pastille, pas depuis le bord de
   la carte. D'où ce qui dépasse, ajouté sous le titre de la section comme
   entre les rangées. */
#home-page .home-services .home-section-head {
    margin-bottom: calc(3rem + var(--hp-icon-overlap));
}

#home-page .home-services-grid {
    row-gap: calc(1.5rem + var(--hp-icon-overlap));
}

#home-page .home-service {
    display: flex;
}

#home-page .home-service .home-card {
    padding: var(--hp-card-top) 1.7rem 4.6rem;
    box-shadow: var(--hp-shadow);
}

#home-page .home-service .home-card:hover,
#home-page .home-service .home-card:focus-visible {
    box-shadow: var(--hp-shadow-lift);
}

/* Pastille d'icône : un carré arrondi bleu plein, centré et posé à cheval sur
   le bord haut de la carte, dont il dépasse d'un tiers environ. La remontée
   vaut le retrait haut de la carte plus ce qui doit dépasser du cadre.
   Les SVG de la médiathèque n'ont pas de couleur propre : ils prennent le
   blanc déclaré ici. */
#home-page .home-service-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: var(--hp-icon);
    height: var(--hp-icon);
    margin: calc(-1 * (var(--hp-card-top) + var(--hp-icon-overlap))) auto 1.15rem;
    border-radius: 16px;
    background: var(--hp-accent);
    box-shadow: 0 14px 26px -14px rgba(0, 164, 246, .9);
    transition: transform .3s ease, box-shadow .3s ease;
}

#home-page .home-service-icon svg {
    display: block;
    width: 2.05rem;
    height: 2.05rem;
    fill: #fff;
}

/* Au survol, la carte se soulève de 4 px et la pastille de 3 de plus : elle se
   décolle légèrement du cadre qu'elle chevauche. */
#home-page .home-card:hover .home-service-icon,
#home-page .home-card:focus-visible .home-service-icon {
    transform: translateY(-3px);
    box-shadow: 0 18px 30px -14px rgba(0, 164, 246, .95);
}

/* Pas de trait d'accent sous ce titre : la pastille bleue, juste au-dessus,
   tient déjà ce rôle. Deux marques bleues empilées faisaient une de trop. */
#home-page .home-service-name {
    margin: 0 0 .75rem;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--hp-ink);
}

#home-page .home-service-text {
    margin: 0;
    font-size: .95rem;
    line-height: 1.7;
    color: var(--hp-muted);
}

/* ------------------------------------------------------ News & projets */

/* Bande blanche : la section se détache du fond clair de la page, comme les
   « étapes » des pages de services. Les cartes y gagnent un filet, une ombre
   seule ne les séparerait pas assez du fond. */
#home-page .home-news {
    padding: 4rem 0 4.5rem;
    background: #fff;
}

#home-page .home-news-item {
    display: flex;
}

#home-page .home-news-item .home-card {
    overflow: hidden;
    border: 1px solid var(--hp-line);
    box-shadow: 0 14px 30px -26px rgba(0, 63, 125, .8);
}

#home-page .home-news-item .home-card:hover,
#home-page .home-news-item .home-card:focus-visible {
    box-shadow: var(--hp-shadow);
}

/* Les visuels sont des maquettes posées sur fond blanc, aux formats variés :
   affichées en entier (« contain ») elles gardent leurs proportions, là où un
   cadrage plein couperait les appareils. */
#home-page .home-news-media {
    position: relative;
    display: block;
    flex: 0 0 auto;
    /* 4/3 : un compromis entre les visuels 16/9 et les visuels carrés, que la
       médiathèque mélange. Plus large, les carrés flottaient au milieu de
       deux bandes blanches ; plus carré, les 16/9 se perdaient dans la hauteur. */
    aspect-ratio: 4 / 3;
    background: #fff;
    border-bottom: 1px solid var(--hp-line);
}

/* Visuel détaché du flux : sinon un visuel carré, haut de sa largeur entière,
   étirerait le cadre et les titres ne s'aligneraient plus d'une carte à l'autre. */
#home-page .home-news-media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: 50% 50%;
}

#home-page .home-news-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 1.5rem 1.5rem 4.4rem;
}

#home-page .home-news-title {
    margin: 0 0 .75rem;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--hp-ink);
}

#home-page .home-news-excerpt {
    margin: 0;
    font-size: .93rem;
    line-height: 1.7;
    color: var(--hp-muted);
}

#home-page .home-news-actions {
    display: flex;
    justify-content: center;
    margin-top: 2.6rem;
}

/* ------------------------------------------------- Illustration animée */

/* Le plan d'un site qui se dessine, se colore, puis s'adapte à la largeur de
   l'écran. Le balisage est dans parts/home_app_sketch.php.

   Elle se joue une seule fois, au chargement, et s'arrête sur la version
   ordinateur : pas de boucle, donc pas d'agitation permanente dans le hero.
   Une seule ligne de temps de 12 s, partagée par tous les éléments (les
   pourcentages ci-dessous sont donc communs à toutes les images-clés) :

     0 – 30 %   le trait bleu se trace, par vagues : fenêtre, en-tête, accroche,
                cartes, pied de page ; la grille et les cotes accompagnent
     33 – 42 %  mise en couleur : les fonds apparaissent, le trait se réduit à
                un filet, la cote de hauteur s'efface — la grille, elle, reste
     42 – 52 %  pause sur la version ordinateur
     52 – 67 %  passage en tablette, puis pause (trois colonnes → deux)
     67 – 86 %  passage en téléphone, puis pause (une colonne, menu burger)
     86 – 100 % retour en ordinateur, et l'image s'arrête là

   Deux principes pour que ça reste maintenable :
   — les états tablette et téléphone sont des `transform` depuis les
     coordonnées d'origine du SVG, donc déplacer un bloc dans le balisage
     demande de reprendre ses images-clés ici ;
   — seules `transform` et les opacités sont animées (jamais la géométrie SVG),
     ce qui reste fluide et fonctionne sur tous les navigateurs.

   L'état écrit hors animation est la version finale, ordinateur et en couleur :
   c'est à la fois l'image sur laquelle l'animation se fige (`forwards`) et
   celle que voient d'emblée les visiteurs qui ont demandé à leur système de
   réduire les animations (voir la fin du fichier). */

#home-page .hs {
    --hs-cycle: 12s;
    /* Jouée une fois, puis figée sur sa dernière image. */
    --hs-once: 1 forwards;
    --hs-ease: cubic-bezier(.65, 0, .35, 1);
    --hs-ink: #C7D5E3;
    --hs-ink-soft: #DCE6EF;
}

#home-page .hs * {
    /* Repère des transformations : les coordonnées du viewBox, pour que les
       `transform-origin` ci-dessous s'écrivent dans les mêmes valeurs que le
       balisage. C'est la valeur par défaut, on la fixe pour ne pas en dépendre. */
    transform-box: view-box;
    /* Le trait garde son épaisseur même quand son élément est comprimé
       horizontalement : sans cela, les bords verticaux de la fenêtre
       maigrissent en passant en téléphone. */
    vector-effect: non-scaling-stroke;
}

/* ---- Trait, fonds, grille ---- */

#home-page .hs-paint {
    fill-opacity: 1;
    stroke: var(--hp-accent);
    stroke-opacity: .18;
    stroke-width: 1.6;
    stroke-linejoin: round;
}

#home-page .hs-paint rect,
#home-page .hs-paint line,
#home-page .hs-paint circle {
    /* Longueur du tracé, propre à chaque forme (attribut `style` du balisage) :
       c'est elle qui rend le dessin progressif. */
    stroke-dasharray: var(--len);
    stroke-dashoffset: 0;
}

#home-page .hs-frame {
    fill: #fff;
}

#home-page .hs-hero,
#home-page .hs-addr,
#home-page .hs-footer {
    fill: var(--hp-light);
}

#home-page .hs-card {
    fill: #F7FAFD;
}

#home-page .hs-logo,
#home-page .hs-hbtn,
#home-page .hs-icon {
    fill: var(--hp-accent);
}

#home-page .hs-hb1,
#home-page .hs-bar,
#home-page .hs-menu rect,
#home-page .hs-burger rect {
    fill: var(--hs-ink);
}

#home-page .hs-hb2 {
    fill: var(--hs-ink-soft);
}

#home-page .hs-dots circle {
    fill: var(--hp-line);
}

#home-page .hs-barline {
    fill: none;
    stroke-linecap: round;
}

#home-page .hs-grid,
#home-page .hs-plan {
    fill: none;
    stroke: var(--hp-accent);
    stroke-width: 1;
}

/* La grille reste en fond une fois le dessin terminé : le papier millimétré
   sur lequel la maquette est posée. Elle est donc visible à l'arrêt, et c'est
   l'animation qui la fait seulement apparaître au départ. */
#home-page .hs-grid {
    stroke-opacity: .16;
}

/* La cote de hauteur, elle, n'appartient qu'à la phase « plan ». */
#home-page .hs-plan {
    opacity: 0;
}

#home-page .hs-plan {
    stroke-opacity: .45;
    stroke-linecap: round;
}

/* La cote de largeur, elle, reste : c'est la mesure qui se resserre. */
#home-page .hs-cote {
    fill: none;
    stroke: var(--hp-accent);
    stroke-opacity: .5;
    stroke-width: 1.2;
    stroke-linecap: round;
}

#home-page .hs-cote-line {
    stroke-dasharray: 5 4;
}

/* ---- Animations : un même cycle pour tout le monde ---- */

#home-page .hs-scene {
    animation: hs-scene var(--hs-cycle) linear var(--hs-once);
}

#home-page .hs-grid {
    animation: hs-grid var(--hs-cycle) ease var(--hs-once);
}

#home-page .hs-plan {
    animation: hs-plan var(--hs-cycle) ease var(--hs-once);
}

#home-page .hs-paint {
    animation: hs-paint var(--hs-cycle) ease var(--hs-once);
}

#home-page .hs-frame,
#home-page .hs-barline {
    animation: hs-draw-1 var(--hs-cycle) linear var(--hs-once),
               hs-w-frame var(--hs-cycle) var(--hs-ease) var(--hs-once);
    transform-origin: 240px 240px;
}

#home-page .hs-dots {
    animation: hs-draw-1 var(--hs-cycle) linear var(--hs-once),
               hs-x-left var(--hs-cycle) var(--hs-ease) var(--hs-once);
}

#home-page .hs-addr {
    animation: hs-draw-1 var(--hs-cycle) linear var(--hs-once),
               hs-t-addr var(--hs-cycle) var(--hs-ease) var(--hs-once);
    transform-origin: 84px 65px;
}

#home-page .hs-logo {
    animation: hs-draw-2 var(--hs-cycle) linear var(--hs-once),
               hs-x-left var(--hs-cycle) var(--hs-ease) var(--hs-once);
}

#home-page .hs-menu {
    animation: hs-draw-2 var(--hs-cycle) linear var(--hs-once),
               hs-x-right var(--hs-cycle) var(--hs-ease) var(--hs-once),
               hs-menu var(--hs-cycle) ease var(--hs-once);
}

/* Le burger ne se dessine pas : il prend la relève du menu en fondu, au moment
   où la fenêtre atteint la largeur d'un téléphone. */
#home-page .hs-burger {
    opacity: 0;
    animation: hs-x-right var(--hs-cycle) var(--hs-ease) var(--hs-once),
               hs-burger var(--hs-cycle) ease var(--hs-once);
}

#home-page .hs-hero {
    animation: hs-draw-3 var(--hs-cycle) linear var(--hs-once),
               hs-t-hero var(--hs-cycle) var(--hs-ease) var(--hs-once);
    transform-origin: 240px 126px;
}

#home-page .hs-hb1 {
    animation: hs-draw-3 var(--hs-cycle) linear var(--hs-once),
               hs-t-hb1 var(--hs-cycle) var(--hs-ease) var(--hs-once);
    transform-origin: 67px 152px;
}

#home-page .hs-hb2 {
    animation: hs-draw-3 var(--hs-cycle) linear var(--hs-once),
               hs-t-hb2 var(--hs-cycle) var(--hs-ease) var(--hs-once);
    transform-origin: 67px 170px;
}

#home-page .hs-hbtn {
    animation: hs-draw-3 var(--hs-cycle) linear var(--hs-once),
               hs-t-hbtn var(--hs-cycle) var(--hs-ease) var(--hs-once);
    transform-origin: 67px 196px;
}

#home-page .hs-c1 {
    animation: hs-draw-4 var(--hs-cycle) linear var(--hs-once),
               hs-t-c1 var(--hs-cycle) var(--hs-ease) var(--hs-once);
    transform-origin: 43px 264px;
}

#home-page .hs-c2 {
    animation: hs-draw-4 var(--hs-cycle) linear var(--hs-once),
               hs-t-c2 var(--hs-cycle) var(--hs-ease) var(--hs-once);
    transform-origin: 178px 264px;
}

#home-page .hs-c3 {
    animation: hs-draw-4 var(--hs-cycle) linear var(--hs-once),
               hs-t-c3 var(--hs-cycle) var(--hs-ease) var(--hs-once);
    transform-origin: 313px 264px;
}

#home-page .hs-i1 {
    animation: hs-draw-4 var(--hs-cycle) linear var(--hs-once),
               hs-t-i1 var(--hs-cycle) var(--hs-ease) var(--hs-once);
}

#home-page .hs-i2 {
    animation: hs-draw-4 var(--hs-cycle) linear var(--hs-once),
               hs-t-i2 var(--hs-cycle) var(--hs-ease) var(--hs-once);
}

#home-page .hs-i3 {
    animation: hs-draw-4 var(--hs-cycle) linear var(--hs-once),
               hs-t-i3 var(--hs-cycle) var(--hs-ease) var(--hs-once);
}

#home-page .hs-b1 {
    animation: hs-draw-4 var(--hs-cycle) linear var(--hs-once),
               hs-t-b1 var(--hs-cycle) var(--hs-ease) var(--hs-once);
    transform-origin: 57px 304px;
}

#home-page .hs-b2 {
    animation: hs-draw-4 var(--hs-cycle) linear var(--hs-once),
               hs-t-b2 var(--hs-cycle) var(--hs-ease) var(--hs-once);
    transform-origin: 192px 304px;
}

#home-page .hs-b3 {
    animation: hs-draw-4 var(--hs-cycle) linear var(--hs-once),
               hs-t-b3 var(--hs-cycle) var(--hs-ease) var(--hs-once);
    transform-origin: 327px 304px;
}

#home-page .hs-footer {
    animation: hs-draw-5 var(--hs-cycle) linear var(--hs-once),
               hs-t-footer var(--hs-cycle) var(--hs-ease) var(--hs-once);
    transform-origin: 240px 352px;
}

#home-page .hs-cote {
    animation: hs-cote var(--hs-cycle) ease var(--hs-once);
}

#home-page .hs-cote-line {
    animation: hs-w-frame var(--hs-cycle) var(--hs-ease) var(--hs-once);
    transform-origin: 240px 444px;
}

#home-page .hs-cote-t1 {
    animation: hs-x-left var(--hs-cycle) var(--hs-ease) var(--hs-once);
}

#home-page .hs-cote-t2 {
    animation: hs-x-right var(--hs-cycle) var(--hs-ease) var(--hs-once);
}

/* ---- Images-clés : phases ---- */

@keyframes hs-scene {
    0% { opacity: 0 }
    3%, 100% { opacity: 1 }
}

@keyframes hs-grid {
    0% { opacity: 0 }
    5%, 100% { opacity: 1 }
}

@keyframes hs-plan {
    0%, 7% { opacity: 0 }
    13%, 31% { opacity: 1 }
    40%, 100% { opacity: 0 }
}

@keyframes hs-cote {
    0%, 9% { opacity: 0 }
    15%, 100% { opacity: 1 }
}

/* Le passage du plan à la maquette finie : les fonds arrivent, le trait bleu
   se retire pour ne laisser qu'un filet. */
@keyframes hs-paint {
    0%, 33% { fill-opacity: 0; stroke-opacity: 1 }
    42%, 100% { fill-opacity: 1; stroke-opacity: .18 }
}

/* ---- Images-clés : le tracé, par vagues ---- */

@keyframes hs-draw-1 {
    0% { stroke-dashoffset: var(--len) }
    9%, 100% { stroke-dashoffset: 0 }
}

@keyframes hs-draw-2 {
    0%, 7% { stroke-dashoffset: var(--len) }
    15%, 100% { stroke-dashoffset: 0 }
}

@keyframes hs-draw-3 {
    0%, 12% { stroke-dashoffset: var(--len) }
    21%, 100% { stroke-dashoffset: 0 }
}

@keyframes hs-draw-4 {
    0%, 18% { stroke-dashoffset: var(--len) }
    27%, 100% { stroke-dashoffset: 0 }
}

@keyframes hs-draw-5 {
    0%, 23% { stroke-dashoffset: var(--len) }
    31%, 100% { stroke-dashoffset: 0 }
}

/* ---- Images-clés : les trois largeurs ---- */

/* La fenêtre : 430 unités sur ordinateur, 290 en tablette, 176 en téléphone. */
@keyframes hs-w-frame {
    0%, 52% { transform: scaleX(1) }
    58%, 67% { transform: scaleX(.6744) }
    73%, 86% { transform: scaleX(.4093) }
    92%, 100% { transform: scaleX(1) }
}

/* Ce qui est calé sur le bord gauche de la fenêtre. */
@keyframes hs-x-left {
    0%, 52% { transform: none }
    58%, 67% { transform: translateX(70px) }
    73%, 86% { transform: translateX(127px) }
    92%, 100% { transform: none }
}

/* Ce qui est calé sur le bord droit. */
@keyframes hs-x-right {
    0%, 52% { transform: none }
    58%, 67% { transform: translateX(-70px) }
    73%, 86% { transform: translateX(-127px) }
    92%, 100% { transform: none }
}

@keyframes hs-t-addr {
    0%, 52% { transform: none }
    58%, 67% { transform: translateX(71px) scaleX(.5937) }
    73%, 86% { transform: translateX(127px) scaleX(.268) }
    92%, 100% { transform: none }
}

@keyframes hs-menu {
    0%, 67% { opacity: 1 }
    71%, 86% { opacity: 0 }
    90%, 100% { opacity: 1 }
}

@keyframes hs-burger {
    0%, 69% { opacity: 0 }
    74%, 86% { opacity: 1 }
    89%, 100% { opacity: 0 }
}

/* Le bloc d'accroche : moins large et moins haut à mesure que l'écran se
   resserre, comme sur un vrai site. */
@keyframes hs-t-hero {
    0%, 52% { transform: none }
    58%, 67% { transform: scale(.6447, .8814) }
    73%, 86% { transform: scale(.3553, .7797) }
    92%, 100% { transform: none }
}

@keyframes hs-t-hb1 {
    0%, 52% { transform: none }
    58%, 67% { transform: translate(64px, -2px) scaleX(.85) }
    73%, 86% { transform: translate(115px, -6px) scaleX(.56) }
    92%, 100% { transform: none }
}

@keyframes hs-t-hb2 {
    0%, 52% { transform: none }
    58%, 67% { transform: translate(64px, -4px) scaleX(.853) }
    73%, 86% { transform: translate(115px, -8px) scaleX(.573) }
    92%, 100% { transform: none }
}

@keyframes hs-t-hbtn {
    0%, 52% { transform: none }
    58%, 67% { transform: translate(64px, -6px) }
    73%, 86% { transform: translate(115px, -16px) scaleX(.814) }
    92%, 100% { transform: none }
}

/* Les cartes : trois de front, puis deux et une qui passe à la ligne, puis
   empilées et étirées en pleine largeur. */
@keyframes hs-t-c1 {
    0%, 52% { transform: none }
    58%, 67% { transform: translate(70px, -18px) scale(1, .8667) }
    73%, 86% { transform: translate(127px, -32px) scale(1.129, .6333) }
    92%, 100% { transform: none }
}

@keyframes hs-t-c2 {
    0%, 52% { transform: none }
    58%, 67% { transform: translate(65px, -18px) scale(1, .8667) }
    73%, 86% { transform: translate(-8px, 14px) scale(1.129, .6333) }
    92%, 100% { transform: none }
}

@keyframes hs-t-c3 {
    0%, 52% { transform: none }
    58%, 67% { transform: translate(-200px, 42px) scale(1, .8667) }
    73%, 86% { transform: translate(-143px, 60px) scale(1.129, .6333) }
    92%, 100% { transform: none }
}

/* Dans la carte aussi la mise en page change : l'icône est au-dessus du texte
   en vignette, à sa gauche une fois la carte devenue une ligne de liste. */
@keyframes hs-t-i1 {
    0%, 52% { transform: none }
    58%, 67% { transform: translate(68px, -21px) }
    73%, 86% { transform: translate(125px, -35px) }
    92%, 100% { transform: none }
}

@keyframes hs-t-i2 {
    0%, 52% { transform: none }
    58%, 67% { transform: translate(63px, -21px) }
    73%, 86% { transform: translate(-10px, 11px) }
    92%, 100% { transform: none }
}

@keyframes hs-t-i3 {
    0%, 52% { transform: none }
    58%, 67% { transform: translate(-202px, 39px) }
    73%, 86% { transform: translate(-145px, 57px) }
    92%, 100% { transform: none }
}

@keyframes hs-t-b1 {
    0%, 52% { transform: none }
    58%, 67% { transform: translate(68px, -22px) }
    73%, 86% { transform: translate(151px, -57px) scaleX(1.154) }
    92%, 100% { transform: none }
}

@keyframes hs-t-b2 {
    0%, 52% { transform: none }
    58%, 67% { transform: translate(63px, -22px) }
    73%, 86% { transform: translate(16px, -11px) scaleX(1.154) }
    92%, 100% { transform: none }
}

@keyframes hs-t-b3 {
    0%, 52% { transform: none }
    58%, 67% { transform: translate(-202px, 38px) }
    73%, 86% { transform: translate(-119px, 35px) scaleX(1.154) }
    92%, 100% { transform: none }
}

/* Le pied de page descend à mesure que le contenu s'allonge. */
@keyframes hs-t-footer {
    0%, 52% { transform: none }
    58%, 67% { transform: translateY(18px) scale(.6447, .857) }
    73%, 86% { transform: translateY(20px) scale(.3553, .857) }
    92%, 100% { transform: none }
}

/* -------------------------------------------------------- Responsive */

@media screen and (max-width: 63.9375em) {
    #home-page .home-hero-inner {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "title"
            "body"
            "media";
        row-gap: 2rem;
    }

    #home-page .home-hero-media {
        max-width: 24rem;
        margin: 0 auto;
    }
}

@media screen and (max-width: 39.9375em) {
    #home-page {
        --hp-gutter: 0.625rem;
    }

    #home-page .home-hero {
        padding: 2.5rem 0 3rem;
    }

    #home-page .home-hero-text {
        font-size: 1rem;
    }

    #home-page .home-hero-actions .home-button {
        flex: 1 1 100%;
    }

    #home-page .home-hero-media {
        max-width: none;
    }

    #home-page .home-services,
    #home-page .home-news {
        padding: 3rem 0 3.5rem;
    }

    #home-page .home-section-head {
        margin-bottom: 2rem;
    }

    #home-page .home-services .home-section-head {
        margin-bottom: calc(2.4rem + var(--hp-icon-overlap));
    }

    #home-page .home-service .home-card {
        padding: var(--hp-card-top) 1.35rem 4.4rem;
    }

    #home-page .home-news-actions {
        margin-top: 2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    #home-page * {
        transition-duration: .001ms !important;
    }

    /* L'illustration se fige sur son état final — la maquette finie, en
       couleur, en version ordinateur. C'est l'état écrit hors animation, il n'y
       a donc rien à redéclarer ici. */
    #home-page .hs * {
        animation: none !important;
    }
}