/* ============================================================================
   Charte publique Syensqo — portage fidele de 2024/assets/css/styles.css.

   Le design est celui du site EN LIGNE, pas une relecture de la maquette : la
   feuille de 2024 est la seule source qui donne les valeurs exactes (retraits,
   rayons, points de rupture). Les mesures sont donc reprises telles quelles,
   et seuls les NOMS de classes changent, pour la convention `sy-` du socle.
   La correspondance est notee en tete de chaque section.

   Ossature d'une page :
     .sy-couv      la banniere (image de fond, logo, pastille de pays, accroche)
     .sy-ariane    le fil d'ariane, sur un voile de gris clair a 20 %
     .sy-corps     la ligne a trois colonnes : menu 260, corps 60 %, cote 260
     .sy-footer    le bandeau gris fonce

   Les blocs de contenu (bande grise, bloc texte + image, encart beige, ligne de
   document) vivent ici et non dans les feuilles de page : ils sont repris par
   plusieurs pages, exactement comme en 2024.
   ============================================================================ */

/* ----- Typographie de base (2024 : styles.css:105-148) --------------------- */

p, li, td, span, a, strong {
    font-size: 16px;
    line-height: 112.05%;
}

/* L'enveloppe du crayon d'edition (administrateur connecte seulement) est un
   <span> : la regle ci-dessus la ramenait a 16 px, et un titre de 32 px ou un
   libelle de 10 px changeaient de taille des qu'on se connectait. Elle doit
   rester transparente et heriter de son parent. */
.editable-wrap {
    font-size: inherit;
    line-height: inherit;
}

strong, b, strong span, strong b {
    font-weight: 700;
}

/* Les h1/h2 de 2024 : titre de page en gris fonce capitales, sous-titre en
   orange. Le reset de base.css les remet a 100 %/400, on les repose ici. */
.sy-titre {
    margin-bottom: 32px;
    color: var(--sy-gris-fonce);
    font-size: 32px;
    font-weight: 700;
    line-height: 113.183%;
    text-transform: uppercase;
}

.sy-soustitre {
    margin-bottom: 16px;
    color: var(--sy-orange);
    font-size: 32px;
    font-weight: 700;
    line-height: 113.183%;
}

/* Contenu editorial : les blocs TinyMCE portent leurs propres <ul>/<ol>, que le
   reset a prives de puces. 2024 les retablit globalement ; ici on se limite au
   contenu, pour ne pas rendre des puces au menu ni au fil d'ariane. */
.sy-texte ul,
.sy-contenu ul:not([class]) {
    list-style: disc;
}

.sy-texte ol,
.sy-contenu ol:not([class]) {
    list-style: decimal;
}

.sy-texte li,
.sy-contenu li:not([class]) {
    margin-inline-start: 20px;
    margin-bottom: 16px;
}

/* Les liens ecrits dans les blocs : 2024 laisse `color: unset`, donc la couleur
   du texte, mais sans soulignement le lien devient invisible. Le soulignement
   est le seul ajout de ce portage, et il est deliberé (RGAA 10.6). */
.sy-texte a {
    text-decoration: underline;
}

/* ----- Classes de couleur du contenu (2024 : styles.css:150-196) ----------- */

/* Les redacteurs les posent depuis TinyMCE, et la base en porte deja quarante-
   cinq : `<strong class="orange">` ouvre la plupart des blocs de texte. Sans
   ces regles la mise en avant disparait et le paragraphe passe en gris fonce
   comme le reste - c'est ce qui est arrive a « Dans le cadre du Plan, vous
   souscrirez des actions via le FCPE… ». La portee est limitee au contenu :
   ces noms sont trop generiques pour etre laches sur toute la page. */
.sy-texte .orange,
.sy-cartes__item .orange { color: var(--sy-orange); }

.sy-texte .beige,
.sy-cartes__item .beige { color: var(--sy-beige); }

.sy-texte .darksilver { color: var(--sy-gris-fonce); }
.sy-texte .lightsilver { color: var(--sy-gris-clair); }
.sy-texte .black { color: #000000; }
.sy-texte .white { color: var(--sy-blanc); }

.sy-texte .bg_orange { background-color: var(--sy-orange); }
.sy-texte .bg_beige { background-color: var(--sy-beige); }
.sy-texte .bg_darksilver { background-color: var(--sy-gris-fonce); }
.sy-texte .bg_lightsilver { background-color: var(--sy-gris-clair); }
.sy-texte .bg_black { background-color: #000000; }
.sy-texte .bg_white { background-color: var(--sy-blanc); }

/* ----- Banniere (2024 : styles.css:286-367, inc_menu.php) ------------------ */

/* 2024 pose l'image de fond en CSS, avec l'URL du S3 en dur. Le domaine du
   proxy etant une variable d'environnement, elle est ici une vraie balise
   posee derriere le contenu - d'ou le contexte d'empilement. */
.sy-couv {
    position: relative;
    width: 100%;
    padding: 16px 80px;
}

.sy-couv__fond {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sy-couv__haut,
.sy-couv__accroche {
    position: relative;
    z-index: 1;
}

/* Ligne haute : le bouton hamburger (masque au-dessus du point de rupture), le
   logo Syensqo, et la pastille du pays qui ramene au selecteur. */
.sy-couv__haut {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    justify-content: space-between;
}

.sy-couv__logo {
    display: block;
    margin-bottom: 10px;
}

.sy-couv__logo--reduit {
    display: none;
}

.sy-couv__pays {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
    background: var(--sy-beige);
    color: var(--sy-orange);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
}

.sy-couv__pays:hover,
.sy-couv__pays:focus-visible {
    background: var(--sy-gris-fonce);
    color: var(--sy-blanc);
}

/* Ligne d'accroche : le logotype de l'operation puis la phrase, composee dans
   le caractere de marque. */
.sy-couv__accroche {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
}

.sy-couv__marque {
    margin-inline-end: 32px;
}

.sy-couv__titre {
    color: var(--sy-orange);
    font-family: var(--font-family-marque);
    font-size: 38px;
    line-height: 112.05%;
    text-transform: uppercase;
}

/* La pastille blanche de la date, sous l'accroche. `display: block` + largeur
   ajustee : elle ne doit pas s'etirer sur toute la ligne. */
.sy-couv__date {
    display: block;
    width: fit-content;
    padding: 8px;
    border-radius: 8px;
    background: var(--sy-blanc);
    color: var(--sy-orange);
    font-size: 12px;
    font-weight: 300;
    line-height: 112.05%;
    text-align: center;
    text-transform: uppercase;
}

/* Les deux blocs sont du contenu editorial : TinyMCE les enveloppe dans un <p>,
   dont il faut neutraliser la taille et la couleur heritees de la regle
   generale des paragraphes. */
.sy-couv__titre p,
.sy-couv__date p {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* L'asterisque de renvoi : 2024 la pose avec `line-height: 0`, sans quoi
   l'exposant fait grandir la ligne de l'accroche. */
.sy-couv__titre sup {
    font-size: 0.6em;
    line-height: 0;
}

/* ----- Fil d'ariane (2024 : styles.css:369-401) ---------------------------- */

.sy-ariane {
    display: flex;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    padding: 2px 14px;
    background: var(--sy-gris-voile);
}

.sy-ariane__liste {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
}

.sy-ariane__item {
    margin-top: 2px;
    margin-inline-start: 16px;
    color: var(--sy-gris-clair);
    font-size: 10px;
    font-weight: 300;
    font-style: italic;
}

.sy-ariane__item a {
    color: var(--sy-gris-clair);
    text-decoration: none;
    font-size: 10px;
}

.sy-ariane__item a:hover,
.sy-ariane__item a:focus-visible {
    text-decoration: underline;
}

/* ----- Ossature a trois colonnes (2024 : styles.css:612-625) --------------- */

.sy-corps {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding-top: 14px;
    gap: 14px;
}

.sy-contenu {
    display: block;
    width: 60%;
    min-height: 462px;
    margin-top: 10px;
    text-align: start;
}

/* Le pied de chaque page : 32 px de blanc avant le pied de page (2024 `.end`). */
.sy-fin {
    display: block;
    height: 32px;
}

/* ----- Menu lateral (2024 : styles.css:441-537) ---------------------------- */

.sy-menu {
    width: 260px;
    padding-bottom: 20px;
}

.sy-menu__liste {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 260px;
}

/* LARGEUR FIXE, et non `max-width`. 2024 laisse chaque pastille se retracter
   sur son libelle : « Q&R » faisait 90 px quand « Que se passe-t-il apres la
   souscription ? » en faisait 244, et la colonne rendait un escalier. La
   maquette les aligne toutes sur le meme bord droit. */
.sy-menu__item {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    width: 244px;
    min-height: 60px;
    margin-top: 10px;
    /* Le retrait de gauche loge le pictogramme, pose en fond sur un carre de
       30 px place en absolu (cf. .sy-menu__picto). */
    padding: 10px 6px 10px 64px;
    border-top: 1px solid var(--sy-orange);
    border-inline-end: 1px solid var(--sy-orange);
    border-bottom: 1px solid var(--sy-orange);
    /* Arrondi du SEUL cote droit : la pastille sort du bord gauche de l'ecran. */
    border-radius: 0 8px 8px 0;
    background: var(--sy-beige);
    color: var(--sy-orange);
    font-size: 14px;
    text-decoration: none;
    transition: max-width 0.3s, width 0.3s, background-color 0.3s;
}

/* Le pictogramme : 2024 le pose en `background-image` avec l'URL du S3 ECRITE
   EN DUR dans la feuille. Ici le domaine du proxy est une variable
   d'environnement, donc inconnue de la CSS - et une `style=""` en ligne serait
   reecrite par l'extracteur CSP. On charge donc les DEUX fichiers en <img> et
   on bascule l'affichage : meme rendu, aucune URL en dur, aucun style en ligne. */
.sy-menu__picto {
    position: absolute;
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-inline-start: -45px;
}

.sy-menu__picto img {
    display: block;
    width: 30px;
    height: 30px;
}

.sy-menu__picto .sy-menu__picto--actif {
    display: none;
}

/* L'entree courante deborde de 16 px sur la droite : c'est elle qui sort de la
   colonne, comme dans la maquette. */
.sy-menu__item:hover,
.sy-menu__item.is-active {
    width: 260px;
    background: var(--sy-orange);
    color: var(--sy-blanc);
    font-weight: 700;
}

.sy-menu__item:hover .sy-menu__picto--repos,
.sy-menu__item.is-active .sy-menu__picto--repos {
    display: none;
}

.sy-menu__item:hover .sy-menu__picto--actif,
.sy-menu__item.is-active .sy-menu__picto--actif {
    display: block;
}

/* ----- Colonne de droite (2024 : styles.css:539-610) ----------------------- */

.sy-aside {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 260px;
    margin-top: 10px;
    padding: 0 16px;
}

/* Le cartouche beige : le libelle du prix puis la fenetre de souscription. */
.sy-aside__cartouche {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    align-self: stretch;
    height: auto;
    padding: 8px 16px;
    border-radius: 10px;
    background: var(--sy-beige);
    text-align: center;
}

.sy-aside__libelle {
    padding: 8px;
    color: var(--sy-orange);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}

.sy-aside__valeur {
    color: var(--sy-orange);
    font-size: 20px;
    font-weight: 700;
}

/* ROMAIN, comme la maquette : dans le cartouche du Figma seuls le libelle et le
   montant sont en gras, les lignes de dates sont en romain. 2024 les composait
   en Poppins light, plus maigre encore - c'est le seul ecart avec la prod ici,
   et il est demande. */
.sy-aside__date {
    color: var(--sy-orange);
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
}

.sy-aside__date p,
.sy-aside__libelle p {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* ----- Bouton de souscription (2024 : styles.css:584-610 `.subButton`) ----- */

.sy-btn--souscrire {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px auto 0;
    padding: 16px;
    border-radius: 50px;
    background: var(--sy-orange);
    color: var(--sy-blanc);
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s, padding 0.3s;
}

.sy-btn--souscrire:hover,
.sy-btn--souscrire:focus-visible {
    padding: 16px 26px;
    background: var(--sy-gris-fonce);
}

/* Dans le corps de page, le bouton est cale a gauche et de largeur fixe. */
.sy-contenu .sy-btn--souscrire {
    width: 180px;
    margin: 16px 0 0;
}

/* ----- Bande grise horizontale (2024 : styles.css:631-675) ----------------- */

.sy-bande {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    border-radius: 16px;
    background: var(--sy-gris-fonce);
}

.sy-bande__texte {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.sy-bande__texte img {
    margin-inline-end: 16px;
}

.sy-bande__texte span,
.sy-bande__texte p {
    color: var(--sy-blanc);
    font-size: 20px;
    font-weight: 700;
}

.sy-bande__texte span a {
    font-size: 20px;
    text-decoration: underline;
}

.sy-bande__btn {
    min-width: fit-content;
    padding: 16px;
    border-radius: 8px;
    background: var(--sy-blanc);
    color: var(--sy-noir);
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
}

.sy-bande__btn:hover,
.sy-bande__btn:focus-visible {
    background: var(--sy-orange);
    color: var(--sy-blanc);
}

/* Deux bandes qui se suivent (page « Souscrire ») : 2024 les separait par un
   couple de <br/> dans un <div> vide, ce qui n'est pas une mise en page. */
.sy-bande--espacee + .sy-bande--espacee {
    margin-top: 32px;
}

/* ----- Video et paragraphe isole (2024 : styles.css:627-629, 767-769) ------ */

/* Le rapport 924/503 est celui de la vignette livree, filet compris : il donne
   au cadre sa hauteur avant que l'image soit chargee, et evite que la page
   sursaute. */
.sy-video {
    margin-bottom: 32px;
    aspect-ratio: 924 / 503;
}

/* AUCUN FILET EN CSS. Celui de la maquette est deja dans la vignette livree
   (924 x 503 pour une image de 920 x 499) : en poser un ici le doublerait. Le
   jour ou une video est importee, elle reprend cette meme vignette en poster,
   donc le filet suit. */
.sy-video .videoPlayer {
    background: transparent;
}

.sy-bloc-p {
    margin-top: 32px;
}

/* ----- Bloc texte + image (2024 : styles.css:677-686, 771-773) ------------- */

.sy-txtimg {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    align-self: stretch;
    justify-content: center;
    gap: 32px;
    margin-top: 32px;
}

/* L'italique du contenu passe en orange : 2024 s'en sert pour les mises en
   avant a l'interieur de ces blocs. */
.sy-txtimg em {
    color: var(--sy-orange);
}

/* La photo ne se comprime pas : elle garde sa largeur naturelle et c'est le
   texte qui prend le reste. Sans cela, un texte long ecrase la photo. */
.sy-txtimg__image {
    flex: 0 0 auto;
    align-self: flex-start;
}

.sy-txtimg__corps {
    flex: 1 1 auto;
    min-width: 0;
}

/* ----- Repli du texte long (hors maquette) -------------------------------- */

/* REPLIE : la hauteur de coupe est posee par site.js, qui la calcule d'apres la
   hauteur rendue de la photo. Ici on ne fait que masquer le debordement et
   annoncer la transition. */
.sy-txtimg[data-repli] .sy-txtimg__texte {
    overflow: hidden;
    transition: max-height 0.3s ease;
}

/* La coupe tombe au milieu d'une ligne : un degrade sur les deux dernieres
   lignes dit que le texte continue, au lieu de laisser croire a un defaut
   d'affichage. `is-coupe` n'est posee par site.js que lorsque la coupe est
   effectivement en place. */
.sy-txtimg[data-repli].is-coupe .sy-txtimg__texte {
    position: relative;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 42px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 42px), transparent 100%);
}

/* DEPLIE : la photo passe en tete et le texte prend toute la largeur. La coupe
   est levee en JS (style en ligne) ; le `none` ici couvre le cas ou le script
   n'aurait pas eu le temps de la retirer. */
.sy-txtimg[data-repli].is-ouvert {
    flex-direction: column;
}

/* Deplie, la photo de colonne cede la place a la bannière, sur toute la
   largeur du bloc. C'est ce qui evite le decalage : une photo de 400 px posee
   en tete d'un bloc de 864 laisserait la moitie de la ligne vide. */
/* Les deux bannières sont livrees en 16/9 : a 864 px de large elles feraient
   486 px de haut, soit la moitie d'un ecran portable avant le premier mot. On
   les ROGNE a 280 px par `object-fit: cover`, sans les deformer.
   `object-position` decale le cadrage vers le haut : centre, la coupe passerait
   au niveau des visages. Horizontalement le cadrage reste centre - la largeur
   de l'image couvre exactement celle du bloc, il n'y a rien a rogner de ce
   cote.
   La hauteur fixe reserve aussi la place avant l'arrivee de l'image : comme
   elle n'est telechargee qu'au depliage, sans elle la bannière vaudrait zero
   pixel de haut puis pousserait tout le texte vers le bas d'un coup. */
.sy-txtimg__banniere {
    display: none;
    width: 100%;
    height: 280px;
    /* Le rayon de 16 px est celui de la charte : encart beige, bande grise et
       ligne de document le portent deja. */
    border-radius: 16px;
    object-fit: cover;
    object-position: center 40%;
}

/* LE POINT DE COUPE DEPEND DE LA PHOTO, il n'y a pas de valeur universelle :
     - `banner-commentcamarche` : sujets tres hauts, 25 % entame deja la
       chevelure de droite ;
     - `banner-group` : les deux casques sont hauts, 55 % couperait celui de
       gauche ;
     - `banner-offer` : les visages sont bas, 40 % couperait les mentons.
   Chaque page passe donc le sien (cf. partials/txt_image.php). Une bannière
   ajoutee sans regle ici retombe sur les 40 % ci-dessus - visible tout de
   suite, jamais casse.
   Horizontalement rien n'est rogne : la largeur de l'image couvre exactement
   celle du bloc. */
.sy-txtimg__banniere--cadrage-15 { object-position: center 15%; }
.sy-txtimg__banniere--cadrage-40 { object-position: center 40%; }
.sy-txtimg__banniere--cadrage-55 { object-position: center 55%; }

@media screen and (max-width: 900px) {
    /* Moins de hauteur d'ecran disponible : la bande se resserre encore. */
    .sy-txtimg__banniere {
        height: 180px;
    }
}

.sy-txtimg[data-repli].is-ouvert .sy-txtimg__banniere {
    display: block;
}

/* La photo de colonne ne disparait QUE s'il y a une bannière pour la remplacer.
   C'est le gabarit qui le dit, par une classe sur le bloc, et non `:has()` :
   la regle doit valoir partout, y compris la ou le selecteur n'existe pas,
   sans quoi les deux images s'empileraient. */
.sy-txtimg--banniere[data-repli].is-ouvert .sy-txtimg__image {
    display: none;
}

.sy-txtimg[data-repli].is-ouvert .sy-txtimg__texte {
    max-height: none;
}

.sy-txtimg[data-repli].is-ouvert .sy-txtimg__corps {
    width: 100%;
}

/* Le bouton reprend la forme du lien-bouton beige de la charte, en plus
   discret : il ouvre un contenu, il n'emmene pas ailleurs. */
.sy-repli {
    display: block;
    margin-top: 16px;
    padding: 8px 16px;
    border: 1px solid var(--sy-orange);
    border-radius: 8px;
    background: var(--sy-beige);
    color: var(--sy-orange);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.sy-repli:hover,
.sy-repli:focus-visible {
    background: var(--sy-orange);
    color: var(--sy-blanc);
}

/* ----- Encart beige a pictogramme (2024 : styles.css:688-711) -------------- */

.sy-info {
    display: block;
    align-self: stretch;
    margin-top: 32px;
    padding: 32px;
    border-radius: 16px;
    background: var(--sy-beige);
}

.sy-info li {
    margin-bottom: 0;
}

/* Le pictogramme « information » deborde en haut de l'encart, comme en 2024 -
   qui le posait en `::before` avec l'URL du S3 en dur. Le domaine etant ici
   une variable d'environnement, c'est une vraie balise, remontee de 43 px. */
.sy-info__picto {
    display: block;
    width: 24px;
    height: 24px;
    margin-top: -43px;
    margin-bottom: 19px;
}

/* ----- Lien-bouton interne (2024 : styles.css:719-740) --------------------- */

.sy-lien-interne {
    display: block;
    width: fit-content;
    margin-top: 16px;
    text-decoration: none;
}

/* Enfant DIRECT seulement : le libelle porte, pour l'administrateur, un second
   <span> (l'enveloppe du crayon d'edition), qui recevait sinon un deuxieme
   fond et un deuxieme padding de 16 px. */
.sy-lien-interne > span {
    display: block;
    padding: 16px;
    background: var(--sy-beige);
    color: var(--sy-orange);
    font-weight: 700;
    text-align: center;
    transition: background-color 0.3s, color 0.3s;
}

.sy-lien-interne:hover > span,
.sy-lien-interne:focus-visible > span {
    background: var(--sy-orange);
    color: var(--sy-blanc);
}

/* ----- Cartes de benefices (2024 : styles.css:747-765) --------------------- */

.sy-cartes {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 16px;
    margin-bottom: 32px;
}

.sy-cartes__item {
    width: 20%;
    min-height: 170px;
    height: auto;
    padding: 16px;
    border-radius: 8px;
    background: var(--sy-gris-fonce);
    color: var(--sy-blanc);
    /* Filet de securite : un mot plus long que la carte est coupe plutot que
       de deborder du fond gris. Avec les largeurs posees plus bas il ne se
       declenche jamais. */
    overflow-wrap: break-word;
}

.sy-cartes__item p,
.sy-cartes__item li,
.sy-cartes__item strong {
    color: var(--sy-blanc);
}

/* ----- Pied de page (2024 : styles.css:403-439, inc_footer.php) ------------ */

.sy-footer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    align-self: stretch;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 16px 50px;
    background: var(--sy-gris-fonce);
}

.sy-footer__logo,
.sy-footer__reseaux {
    width: 25%;
}

.sy-footer__lien a {
    color: var(--sy-blanc);
    font-size: 13px;
    text-decoration: underline;
}

.sy-footer__lien a:hover,
.sy-footer__lien a:focus-visible {
    color: var(--sy-orange);
}

.sy-footer__reseaux {
    text-align: center;
}

.sy-footer__reseaux a {
    text-decoration: none;
}

.sy-footer__reseaux img {
    width: 60px;
    padding: 0 16px;
    transition: padding 0.3s;
}

.sy-footer__reseaux img:hover {
    padding: 0 13px;
}

/* ----- Responsive (2024 : styles_responsive.css) -------------------------- */

/* Le bouton hamburger n'existe qu'en dessous de 980 px. */
.sy-couv__burger {
    display: none;
}

@media screen and (max-width: 1200px) {
    /* La colonne de droite disparait la premiere : elle ne porte qu'un rappel. */
    .sy-aside {
        display: none;
    }

    .sy-contenu {
        width: 78%;
        padding-inline-end: 2%;
    }
}

@media screen and (max-width: 980px) {
    .sy-contenu {
        width: 100%;
        padding: 0 2%;
    }

    .sy-couv {
        padding: 0;
    }

    /* La ligne haute passe sur fond blanc et porte le logo reduit. */
    .sy-couv__haut {
        padding: 16px;
        background-color: var(--sy-blanc);
    }

    .sy-couv__logo {
        display: none;
    }

    .sy-couv__logo--reduit {
        display: block;
    }

    .sy-couv__marque {
        display: none;
    }

    .sy-couv__titre {
        width: 100%;
        padding: 10px 64px;
    }

    /* Deux images dans le bouton, une par etat : le hamburger et sa croix.
       2024 echangeait l'URL du fond en CSS (.active_burger), ce qui suppose de
       connaitre le domaine du S3 dans la feuille. */
    .sy-couv__burger {
        display: block;
        width: 31px;
        height: 28px;
        padding: 0;
        cursor: pointer;
    }

    .sy-couv__burger img {
        display: block;
        width: 31px;
        height: 28px;
    }

    .sy-couv__burger .sy-couv__burger-fermer,
    .sy-couv__burger.is-open .sy-couv__burger-ouvrir {
        display: none;
    }

    .sy-couv__burger.is-open .sy-couv__burger-fermer {
        display: block;
    }

    /* Le menu se replie derriere le hamburger : masque par defaut, pose en
       surimpression quand le bouton l'ouvre. 2024 le laissait toujours dans le
       flux et comptait sur un `display` pilote en JS ; ici l'etat est porte par
       une classe, pour que le clavier suive (aria-expanded). */
    .sy-menu {
        position: absolute;
        z-index: 20;
        top: 50px;
        width: fit-content;
        padding: 16px;
        border-radius: 16px;
        background-color: var(--sy-blanc);
    }

    .sy-menu__liste {
        display: none;
    }

    .sy-menu__liste.is-open {
        display: flex;
    }

    /* Repliee, la pastille n'est plus collee au bord : elle retrouve ses quatre
       coins et son filet complet. */
    .sy-menu__item {
        border: 1px solid var(--sy-orange);
        border-radius: 8px;
    }
}

/* ----- Blocs « texte + image » sous 900 px : TOUT DEPLIE ------------------- */

/* PAS DE REPLI SUR PETIT ECRAN, a la demande du client : on ne propose pas de
   masquer le texte, il est entier d'entree. Le bouton disparait donc, et le
   bloc prend d'emblee la forme de l'etat deplie - la bannière en tete sur toute
   la largeur, le texte dessous.
   Le palier est a 900 px et non a 719 : c'est la que 2024 retirait deja la
   photo de colonne (`.content_blocTxtImg img { display: none }`). Descendre le
   changement a 719 aurait laissé une bande de 720 a 900 px sans aucune image,
   ni photo ni bannière.
   La bannière est alors chargee des l'affichage de la page, et non au clic :
   sans bouton, il n'y aurait plus rien pour declencher son telechargement
   (cf. initReplis dans site.js). */
@media screen and (max-width: 900px) {
    /* La photo de colonne ne sert plus : trop petite pour la pleine largeur,
       et la bannière la remplace. */
    .sy-txtimg__image {
        /* display: none; */
    }

    .sy-txtimg[data-repli] {
        flex-direction: column;
    }

    .sy-txtimg__banniere {
        display: block;
    }

    /* Le texte n'est jamais coupe : on neutralise la hauteur que site.js
       pourrait avoir posee avant un redimensionnement. */
    .sy-txtimg[data-repli] .sy-txtimg__texte {
        max-height: none;
        mask-image: none;
        -webkit-mask-image: none;
    }

    .sy-repli {
        display: none;
    }

    .sy-txtimg{
        flex-direction: column-reverse;
    }
}

/* ----- Les cartes de benefices sur petit ecran ---------------------------- */

/* 2024 passe de cinq cartes en ligne a trois par rangee a 650 px, et n'en fait
   rien de plus : sur un telephone de 390 px, une carte vaut alors 114 px et le
   texte se coupe EN PLEIN MOT (« Participe / z a partir », « abondem / ent »,
   « Dividend / es potentiel / s »). C'est illisible, et c'est la seule partie
   du portage ou l'on s'ecarte franchement du modele - un defaut n'est pas une
   intention de design.
   Trois paliers donc, calcules sur la gouttiere de 16 px pour que les rangees
   tombent juste : trois cartes, puis deux, puis une. `flex: 0 1` et non `1 1` :
   sur la derniere rangee incomplete, les cartes gardent la largeur des autres
   et se centrent, au lieu de s'etirer au double.

   LE PREMIER PALIER EST A 900 PX, et la valeur est mesuree, pas choisie : le
   mot le plus long du contenu (« abondement », 95 px en Poppins gras) tient
   dans une carte de 127 px de large - 95 plus les 32 px de remplissage. Cinq
   cartes de 127 px plus quatre gouttieres demandent 699 px de corps de page,
   soit 900 px de fenetre puisque le corps y vaut 78 %. En dessous, les mots se
   coupent ; au-dessus, ils tiennent. */
@media screen and (max-width: 900px) {
    .sy-cartes {
        flex-wrap: wrap;
    }

    .sy-cartes__item {
        flex: 0 1 calc((100% - 32px) / 3);
        width: auto;
    }
}

@media screen and (max-width: 620px) {
    .sy-cartes__item {
        flex: 0 1 calc((100% - 16px) / 2);
    }
}

/* PALIER TELEPHONE, d'apres la maquette « HOME PHONE » (2109:6881), mesuree sur
   un cadre de 428 px : les cinq cartes y sont EMPILEES sur toute la largeur,
   espacees de 8 px et non de 16, et elles epousent leur texte - pas de hauteur
   minimale de 170 px, une carte d'une ligne fait 45 px de haut. Le texte y est
   a 13 px, les titres a 20 px, et le corps garde 16 px de marge laterale.
   C'est cette maquette-la que je n'avais pas prise en compte. */
@media screen and (max-width: 719px) {
    .sy-contenu {
        padding: 0 16px;
    }

    .sy-cartes {
        gap: 8px;
        margin-bottom: 24px;
    }

    .sy-cartes__item {
        flex: 0 1 100%;
        min-height: 0;
    }

    .sy-titre {
        margin-bottom: 16px;
        font-size: 20px;
    }

    .sy-soustitre {
        font-size: 20px;
    }

    .sy-cartes__item p,
    .sy-cartes__item li,
    .sy-cartes__item strong {
        font-size: 13px;
    }
}

@media screen and (max-width: 650px) {
    .sy-bande {
        flex-direction: column;
    }

    .sy-bande__texte img {
        display: none;
    }
}

/* ----- Barre fixe de bas d'ecran, telephone ------------------------------- */

/* D'apres « Fixed_Banner_300-719 », partie FOOTER : deux rangees, 94 px en tout.
   LE PALIER EST A 1200 PX, et pas aux 719 du nom du composant : la colonne de
   droite disparait des 1200 px, et la barre doit prendre le relais exactement
   la. Entre 720 et 1200 - tablettes, fenetre reduite sur un portable - ni l'une
   ni l'autre ne s'affichait, donc ni prix ni bouton de souscription. La maquette
   ne dessine que deux cadres, bureau et telephone ; c'est le raccord entre les
   deux qu'on comble ici. */
.sy-barre {
    display: none;
}

@media screen and (max-width: 1200px) {
    .sy-barre {
        position: fixed;
        z-index: 30;
        inset-inline: 0;
        bottom: 0;
        display: block;
        /* Le contenu qui passe dessous ne doit pas se voir a travers. */
        box-shadow: 0 -2px 8px rgba(29, 29, 27, 0.15);
    }

    /* Rangee 1 : bande orange de 31 px, texte blanc centre. */
    .sy-barre__dates {
        padding: 10px 30px;
        background: var(--sy-orange);
        color: var(--sy-blanc);
        font-size: 11px;
        line-height: 1.1;
        text-align: center;
        text-transform: uppercase;
    }

    /* Rangee 2 : beige, le prix et le bouton centres comme un seul groupe -
       dans la maquette le groupe fait 213 px pour un cadre de 428, donc
       107,5 px de part et d'autre. */
    .sy-barre__actions {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
        padding: 8px 16px;
        background: var(--sy-beige);
    }

    .sy-barre__prix {
        text-align: center;
    }

    .sy-barre__libelle {
        color: var(--sy-orange);
        font-size: 10px;
        font-weight: 700;
        line-height: 1.1;
        text-transform: uppercase;
    }

    .sy-barre__valeur {
        color: var(--sy-orange);
        font-size: 18px;
        font-weight: 700;
        line-height: 1.2;
    }

    /* La pastille reprend celle de la colonne de droite, en plus compacte : la
       maquette lui donne 94 x 47 au lieu de 149 x 59. */
    .sy-barre .sy-btn--barre {
        margin: 0;
        padding: 12px 16px;
        font-size: 18px;
    }

    .sy-barre .sy-btn--barre:hover,
    .sy-barre .sy-btn--barre:focus-visible {
        padding: 12px 16px;
    }

    /* La page doit pouvoir defiler AU-DELA de la barre, sinon elle masque la fin
       du pied de page. 94 px de barre, plus une marge. */

    /* Le bouton de retour en haut se cale au-dessus de la barre plutot que
       dessous. */
    .scrollTop {
        bottom: 175px;
    }

    .sy-footer{
        flex-direction: column;
        gap: 0px;
    }

    .sy-footer__logo, .sy-footer__reseaux{
        width: 50%;
    }
}

/* ----- Banniere au format telephone -------------------------------------- */

/* D'apres la maquette « HOME PHONE » (2109:6881), cadre de 428 px : la
   couverture n'y fait que 91 PX DE HAUT, l'accroche est a 20 px et non a 38,
   et le retrait lateral tombe a 22 px. Sans ces valeurs la banniere occupait
   presque tout l'ecran d'un telephone et l'accroche y etait enorme - c'est ce
   qui etait signale.
   Le palier est a 980 px et non aux 719 du composant : c'est a 980 que la
   banniere passe DEJA en mode mobile plus haut dans cette feuille - barre
   blanche, logo reduit, logotype d'operation retire. Garder l'accroche a 38 px
   dans cette bande donnait une banniere mobile avec une typographie de bureau,
   ce qui est exactement ce qui etait signale comme « enorme ». Si un cadre
   tablette existe dans la maquette, c'est ici qu'il faudra l'intercaler. */
@media screen and (max-width: 980px) {
    .sy-couv__accroche {
        /* `min-height` et non `height` : une accroche de trois lignes dans une
           langue plus longue doit pouvoir pousser la bande, pas se faire
           couper. */
        min-height: 91px;
        align-items: flex-start;
        padding: 14px 22px;
    }

    .sy-couv__titre {
        width: auto;
        padding: 0;
        font-size: 20px;
        line-height: 22px;
    }

    .sy-couv__date {
        margin-top: 8px;
        padding: 5px 10px;
        font-size: 10px;
    }

    /* La barre blanche fait 52 px dans la maquette : 16 px de retrait, un logo
       de 20 px de haut, 16 px de retrait. Sans contrainte le fichier s'affiche
       a sa taille naturelle et la barre passait a 72 px. */
    .sy-couv__logo--reduit {
        height: 20px;
        width: auto;
    }

    .sy-couv__burger,
    .sy-couv__burger img {
        height: 20px;
        width: 26px;
    }

    /* La maquette ne met pas la pastille de pays dans la barre du telephone -
       mais c'est le SEUL chemin pour changer de pays, on ne peut pas la retirer.
       On la resserre pour qu'elle ne fasse pas grossir la barre a elle seule. */
    .sy-couv__pays {
        gap: 6px;
        padding: 5px 8px;
        font-size: 10px;
    }

    .sy-couv__pays img {
        width: 10px;
        height: 10px;
    }
}

@media screen and (max-width: 400px) {
    .sy-index__marque{
        width: calc(100% - 32px);
    } 
}