/* ------------------------------------------------------------------
   Lawdle — ajustements maison
   Chargé après le thème. Ne jamais modifier style.css : ce fichier
   permet de conserver les personnalisations lors d'une mise à jour
   du thème.
   ------------------------------------------------------------------ */

/* Teintes de la charte définies une seule fois, pour qu'un même rôle porte
   partout la même valeur. */
:root {
    /* Gris des développements explicatifs (accueil, Candidats, Employeurs). */
    --lw-explain: #64748c;
}

/* --- Lecture des articles ---------------------------------------- */

/* Longueur de ligne : ~68 caractères, dans la fourchette 65-80
   recommandée pour le confort de lecture sur desktop.
   L'unité "ch" suit automatiquement la taille de police. */
.blog.single .post-content {
    max-width: 68ch;
    margin-left: auto;
    margin-right: auto;
}

/* Pied d'article : nettement détaché du contenu, pour être perçu comme extérieur
   à l'article. L'alignement vertical des deux boutons est assuré par align-items-center,
   à condition qu'aucun des deux blocs ne porte de marge basse. */
.blog.single .post-footer {
    max-width: 68ch;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3.5rem;
}

.blog.single .post-footer > div {
    margin-bottom: 0;
}

/* Chapeau : perçu immédiatement comme l'introduction, sans encadré */
.article-standfirst {
    font-size: 1.15rem;
    line-height: 1.75;
    font-weight: 500;
    color: #4a5568;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(34, 74, 116, .12);
}

/* Intertitres : respiration nettement plus marquée au-dessus qu'en dessous,
   pour signaler le passage d'une partie à l'autre. */
.blog.single .post-content h2,
.blog.single .post-content h3,
.blog.single .post-content h4 {
    margin-top: 2rem;
    margin-bottom: .8rem;
}

/* Pas d'espace superflu si un intertitre ouvre l'article */
.blog.single .post-content > h2:first-child,
.blog.single .post-content > h3:first-child,
.blog.single .post-content > h4:first-child {
    margin-top: 0;
}

/* Un peu d'air entre les paragraphes d'un article long */
.blog.single .post-content p {
    margin-bottom: 1.35rem;
}

@media (max-width: 767px) {
    .article-standfirst {
        font-size: 1.05rem;
    }

    .blog.single .post-content h2,
    .blog.single .post-content h3,
    .blog.single .post-content h4 {
        margin-top: 1.5rem;
    }

    .blog.single .post-footer {
        margin-top: 2.5rem;
    }
}


/* --- Champ de dépôt de fichier ---------------------------------- */

/* Le contrôle natif affiche « Choisir un fichier / Aucun fichier choisi »
   dans la langue du navigateur, sans possibilité de le traduire. On le masque
   sans le retirer du flux d'accessibilité, et on habille un <label> à la place. */
.sw-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sw-file-label {
    cursor: pointer;
}

/* Le focus clavier doit rester visible sur le libellé */
.sw-file-input:focus + .sw-file-label,
.sw-file-input:focus-visible + .sw-file-label {
    outline: 2px solid #224A74;
    outline-offset: 2px;
}

/* Bouton et nom de fichier alignés, passage à la ligne propre sur petit écran */
.sw-file-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
}

.sw-file-name {
    font-size: .9rem;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Pictogrammes ------------------------------------------------ */

/* Pictogrammes SVG livrés par Timothy (août 2026) : trait en currentColor,
   ils héritent donc de la couleur du composant qui les porte. Ni fond, ni
   cercle, ni effet — la taille seule est pilotée ici.
   24 px sur ordinateur, 22 px sur mobile, conformément à la demande. */
.lw-picto {
    width: 24px;
    height: 24px;
    display: block;
    flex: none;
    /* Bleu Lawdle par defaut, conformement a la demande. Le trait etant dessine
       en currentColor, une classe de couleur posee sur le SVG suffit a changer
       cette valeur ponctuellement, sans toucher aux fichiers. */
    color: #224A74;
}

/* Aligné à gauche au-dessus du titre de la carte */
.lw-picto-card {
    margin-bottom: 1rem;
}

@media (max-width: 767px) {
    .lw-picto {
        width: 22px;
        height: 22px;
    }
}


/* Cartes Candidats / Employeurs de l'accueil : pictogramme bleu Lawdle posé sur
   un cercle gris très clair, même taille et même traitement des deux côtés.
   Cette règle vient après la version réduite sur mobile ci-dessus : le
   pictogramme dans son cercle garde sa taille à toutes les largeurs. */
.lw-picto-round {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: #eef1f6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.lw-picto.lw-picto-lg {
    width: 32px;
    height: 32px;
}


/* --- Signature de section ---------------------------------------- */

/* Phrase-signature placée sous un titre de section : traitement affirmé, dans
   l'esprit de la signature principale, mais sensiblement plus petite que le H1
   pour que la hiérarchie reste lisible. */
.lw-signature {
    font-size: 1.5rem;
    line-height: 1.35;
    font-weight: 600;
}

@media (min-width: 768px) {
    .lw-signature {
        font-size: 1.75rem;
    }
}

/* Dans un bloc orange, la signature reste lisible sur le fond coloré */
.bg-primary .lw-signature {
    color: #fff;
}

/* Phrase-signature placée sous un titre de section orange (pages Employeurs et
   Candidats) : l'orange porte les titres, le bleu cette seconde voix. Elle doit
   donc rester nettement en dessous du titre — plus petite et plus légère —
   alors qu'elle lui prenait parfois la vedette (retour de Timothy, 07/09/2026). */
.lw-signature-sub {
    color: #224A74;
    font-size: 1.15rem;
    font-weight: 500;
}

@media (min-width: 768px) {
    .lw-signature-sub {
        font-size: 1.25rem;
    }
}


/* --- Boutons : couleurs, survol et focus -------------------------- */

/* Pied de page : le couple bleu Lawdle. `.btn-dark` porte déjà #224A74 dans
   le thème ; son pendant en contour suivait encore le gris du thème d'origine. */
.btn-outline-dark {
    color: #224A74;
    border-color: #224A74;
}

.btn-outline-dark:hover,
.btn-outline-dark:focus {
    color: #fff;
    background-color: #224A74;
    border-color: #224A74;
}

/* Focus clavier visible sur tous les boutons et liens de navigation, sans
   modifier l'apparence au clic à la souris. */
.btn:focus-visible,
.navbar-nav .nav-link:focus-visible,
.footer a:focus-visible,
footer a:focus-visible {
    outline: 2px solid #224A74;
    outline-offset: 2px;
    box-shadow: none;
}

/* Sur fond orange, le contour bleu ne ressortirait pas */
.bg-primary .btn:focus-visible {
    outline-color: #fff;
}

/* Les deux accès LinkedIn restent côte à côte tant que la colonne les
   contient, puis passent franchement à la ligne, alignés sur le premier.
   L'écart est porté par gap plutôt que par une marge sur le second bouton :
   cette marge subsistait après le passage à la ligne et décalait le bouton
   d'un cran vers la droite — c'est l'état intermédiaire que Timothy avait
   repéré aux largeurs moyennes (retour du 08/09/2026).
   justify-content reprend ici ce que text-center / text-md-start faisait
   avant, sans effet sur des éléments flex. */
.lw-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
}

@media (min-width: 768px) {
    .lw-actions {
        justify-content: flex-start;
    }
}

/* Sur mobile, deux boutons côte à côte débordaient : ils passent l'un sous
   l'autre et occupent toute la largeur, cible tactile confortable. */
@media (max-width: 575.98px) {
    .lw-actions {
        flex-direction: column;
    }

    .lw-actions .btn {
        width: 100%;
    }
}

/* --- Hiérarchie chromatique : bleu = structure, orange = message ---- */

/* Titre de positionnement : il dit ce qu'est Lawdle, donc bleu.
   Il se lit sur deux niveaux, chacun dans son propre conteneur (voir
   .lw-positioning-main et .lw-positioning-sub plus bas) : les classes display-*
   du thème imposent font-weight:700 à tout le titre, ce qui écrasait autrement
   la distinction entre la ligne forte et sa sous-ligne. */
.lw-positioning {
    color: #224A74;
    /* ITC Avant Garde Gothic Std n'est fournie qu'en Bold : aucune fonte ne
       correspond à font-weight:400, et le navigateur continue donc d'afficher
       la graisse forte. La seconde ligne passe sur la police de texte du site,
       disponible en 400/500/700 — c'est ce qui produit réellement le contraste
       demandé. La première ligne, entre <b>, conserve la police de titrage. */
    font-family: var(--bs-body-font-family);
    font-weight: 500;
    letter-spacing: -0.01em;
}

.lw-positioning b,
.lw-positioning strong {
    font-family: "ITC Avant Garde Gothic Std", Arial, sans-serif;
    font-weight: 700;
    letter-spacing: -0.03em;
}

/* Signature : elle porte la promesse et reste le H1. Cette classe ne porte que
   la couleur, partagée par l'accueil et les H1 des pages Employeurs et
   Candidats ; l'échelle propre au haut de l'accueil est réglée séparément par
   .lw-hero-signature. */
.lw-headline {
    color: #FF3A00;
}

/* Sur-titre de section : bleu, pour rester du côté de la structure */
.lw-kicker {
    color: #224A74;
}

/* Titre ou signature de section mis en avant */
.lw-accent {
    color: #FF3A00;
}

/* Le paragraphe explicatif se redistribue selon la largeur disponible, à toutes
   les tailles d'écran : un retour à la ligne forcé, calibré sur une largeur
   donnée, produit des lignes orphelines partout ailleurs. Celui saisi dans
   l'administration est donc neutralisé plutôt que supprimé du contenu, pour ne
   pas toucher aux textes de référence (retour de Timothy, 07/09/2026). */
.lw-subtext br {
    display: none;
}

/* Ligne forte du titre de positionnement : la police de titrage de la marque. */
.lw-positioning-main {
    display: block;
    font-family: "ITC Avant Garde Gothic Std", Arial, sans-serif;
    font-weight: 700;
    letter-spacing: -0.03em;
}

/* Sous-ligne : même titre, mais traitée comme un second niveau — plus légère et
   légèrement plus petite. La taille est relative à celle de la ligne forte : la
   proportion tient donc à toutes les largeurs d'écran, sans second réglage. */
.lw-positioning-sub {
    display: block;
    font-size: 0.85em;
    font-weight: 400;
    letter-spacing: -0.01em;
}

/* Signature de l'accueil : elle garde l'orange et sa taille, mais perd en
   graisse — l'orange doit créer l'accent sans concurrencer le titre bleu
   (retour de Timothy, 07/09/2026).
   Comme pour la sous-ligne du titre de positionnement, l'allègement passe
   nécessairement par un changement de police : ITC Avant Garde n'existe ici
   qu'en Bold, donc demander une graisse plus légère sur elle reste sans effet.
   Manrope, disponible en 400/500/700, porte donc cette ligne en Medium — la
   voie que Timothy a lui-même retenue plutôt que l'achat d'une graisse.
   Réglage propre au haut de l'accueil : la classe .lw-headline, partagée avec
   les H1 des pages Employeurs et Candidats, ne porte que la couleur. */
.lw-hero-signature {
    font-family: var(--bs-body-font-family);
    font-size: calc(1rem + 0.4vw);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

@media (min-width: 1200px) {
    /* 1,3rem contre 2,2rem pour le titre bleu, soit un rapport d'environ trois
       cinquièmes : c'est celui du visuel de référence du 12/09/2026, où la
       signature se lit comme une promesse secondaire et non comme un second
       titre. L'interligne resserré la fait tenir sur moins de hauteur. */
    .lw-hero-signature {
        font-size: 1.3rem;
    }
}

/* Paragraphe explicatif : gris et léger, mais assez contrasté pour être lu
   confortablement — le #aab0bc de .text-muted, hérité du thème, était à la
   limite du lisible ; cette classe porte donc seule le gris du paragraphe.
   La largeur maximale évite les lignes trop longues sur grand écran sans
   figer la composition. */
.lw-subtext {
    color: var(--lw-explain);
    font-weight: 400;
    /* Interligne resserré en trois temps (07/09, 12/09 puis 13/09/2026) : le
       bloc gagne en compacité sans que les lignes se touchent. */
    line-height: 1.4;
}

@media (max-width: 767.98px) {
    .lw-subtext {
        line-height: 1.34;
    }
}

/* Gris explicatif commun aux trois développements de la charte — accueil sous
   la signature, « Confidentialité » côté Candidats, « Méthode et outils » côté
   Employeurs. Une seule teinte de référence pour que la hiérarchie titre orange
   / signature bleue / développement gris se lise pareil partout.
   Valeur relevée sur le visuel de référence du 12/09/2026 : plus soutenue que
   le #7d8798 précédent, donc plus lisible, tout en restant secondaire. */
.lw-explain {
    color: var(--lw-explain);
    /* Ces développements sont les plus longs du site : l'interligne de 1,65
       hérité de .lead les étirait sur beaucoup de hauteur. Resserré au même
       esprit que le paragraphe de l'accueil (retour de Timothy, 13/09/2026). */
    line-height: 1.45;
}

@media (min-width: 992px) {
    .lw-subtext {
        max-width: 60ch;
    }
}


/* --- Bulles décoratives ------------------------------------------------- */

/* Le visuel fourni par Timothy (13/09/2026) est utilisé tel quel, en image,
   plutôt que redessiné en CSS. Ses essais successifs de dégradé n'atteignaient
   pas le modelé qu'il cherchait ; il a donc produit le rendu lui-même et
   demandé qu'on ne le recrée pas. Ce fichier n'est donc pas à retoucher : seuls
   sa taille, sa position et son recadrage sont pilotés ici.

   Le PNG d'origine pesait 707 Ko. Converti en WebP à qualité 90 et débarrassé
   de sa marge transparente, il tombe à 64 Ko, sans différence visible — les
   dégradés très doux se compressent bien. Le site sert déjà du WebP par
   ailleurs.

   Le calque porte lui-même le rognage, et sa hauteur est calculée pour que le
   visuel n'atteigne jamais le bord bas : seul le bord latéral coupe, comme
   demandé, sans arête horizontale artificielle. Purement décoratif, hors de
   portée du pointeur comme des lecteurs d'écran. */
.lw-bubbles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* Hauteur calculée pour que le visuel se termine au-dessus du bord bas :
       le débord latéral est voulu, une coupe horizontale à travers une bulle
       ne l'est pas. C'est le bord du fichier qui ne doit jamais se voir, pas
       le fait de sortir du cadre (précision de Timothy, 13/09/2026). */
    height: 58rem;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    background-image: url("../img/bulles.webp");
    background-repeat: no-repeat;
    background-size: clamp(20rem, 40vw, 34rem) auto;
    /* Opacité posée sur le calque plutôt que sur le fichier : elle atténue le
       bleu et la densité du chevauchement sans toucher au dessin, et reste un
       réglage d'une valeur si Timothy veut l'ajuster (demande du 13/09/2026). */
    opacity: .52;
}

/* Accueil. Placement validé par Timothy, à ne plus modifier.
   Le décor n'existe plus qu'à droite : il a été retiré d'Opportunités et de
   Publications, où il alourdissait la composition (retour du 14/09/2026). La
   variante gauche est donc supprimée plutôt que laissée sans usage. */
.lw-bubbles-end { background-position: right -7rem top 4rem; }

/* Pages intérieures : le visuel y était nettement plus petit que sur
   l'accueil. Il passe à la même échelle et sort beaucoup plus latéralement du
   cadre. La position verticale, elle, ne bouge pas : c'était bien un
   agrandissement et un débord de côté qui étaient demandés, pas une descente
   (retour de Timothy, 13/09/2026). */
.lw-bubbles-sm {
    height: 40rem;
    background-size: clamp(20rem, 40vw, 34rem) auto;
}

/* Candidats et Employeurs : en regard des deux paragraphes, comme avant. */
.lw-bubbles-sm.lw-bubbles-end {
    background-position: right -12rem top 2rem;
}


/* Sous 768 px, le décor est retiré : à ces largeurs il occupait
   proportionnellement trop de place et le rendu est plus net sans lui
   (demande de Timothy, 14/09/2026).
   Le calque étant en positionnement absolu, il est hors du flux : le masquer
   ne laisse aucun vide et ne déplace rien. */
@media (max-width: 767.98px) {
    .lw-bubbles {
        display: none;
    }
}


/* --- Zone de conversion : bandeau orange et formulaire ------------- */

/* Le bandeau orange introduit le formulaire au lieu de renvoyer vers lui :
   les deux cartes sont donc soudées en un seul bloc continu, sans bouton
   intermédiaire qui ne faisait que descendre de quelques pixels. */
.lw-conversion-head {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
}

.lw-conversion-body {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Un titre long ne doit jamais déborder du bloc coloré, quelle que soit la
   largeur d'écran ni la langue — le néerlandais produit les mots les plus longs. */
.card.bg-primary .card-body {
    overflow-wrap: break-word;
    word-break: break-word;
}