/* ===== Base ===== */
    * { box-sizing: border-box; }

    body{
      margin: 0;
      min-height: 100vh;
      color: #555;
      font-family: Georgia, "Times New Roman", Times, serif;

      /* Background "border.jpg" pleine largeur + répétition verticale */
      background-image: url("border.jpg");
      background-repeat: repeat-y;
      background-position: top center;
      background-size: 100% auto;
      background-color: #ffffff; /* fallback */
    }

    /* Page en colonne -> footer ne chevauche jamais */
    #page{
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    main{
      flex: 1;
      padding: 24px 18px 40px;
    }

    .content-wrap{
      max-width: 980px;
      margin: 0 auto;
    }

    /* ===== Titres ===== */
    h1{
      margin: 0 0 28px 0;
      padding-top: 10px;
      font-size: 50px;
      line-height: 1.05;
      letter-spacing: -2px;
      font-weight: bold;
      color: #444;
      text-align: center;
    }

    p{
      margin: 0 0 16px 0;
      font-size: 22px;
      padding: 0;
      border: 0;
    }

    /* ===== Liens ===== */
    a{
      color: maroon;
      text-decoration: none;
      font-family: Georgia, "Times New Roman", Times, serif;
    }
    a:hover{
      color: red;
      text-decoration: none;
    }

    /* ===== Liste des liens (style "cartes") ===== */
    .link-list{
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .link-list li{
      margin: 0 0 10px 0;
    }

    .link-list a{
      display: block;
      width: 100%;
      background-color: #ECEAE0;
      border-left: 5px solid #221E1D;
      border-right: 5px solid #221E1D;
      padding: 14px 12px;
      color: #9A774D;
      font-size: 25px;
      line-height: 1.2;
      transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
    }

    .link-list a:hover{
      transform: rotate(-2deg);
      box-shadow: 10px 10px 20px #000000;
    }

    img{ max-width: 95%; height: auto; }
    video{ max-width: 100%; height: auto; }

    /* ===== Footer ===== */
    footer{
      padding: 22px 18px;
      /* surtout PAS position:absolute */
    }

    .footer-inner{
      max-width: 980px;
      margin: 0 auto;
      text-align: center;
    }

    .footer-inner a{
      color: #815031;
      font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
      font-size: 30px;
      text-decoration: none;
    }

    /* Mobile */
    @media (max-width: 520px){
      h1{ font-size: 38px; letter-spacing: -1px; }
      .link-list a{ font-size: 20px; padding: 12px 10px; }
      .footer-inner a{ font-size: 22px; }
      main{ padding: 18px 14px 28px; }
    }

    /* Bloc citation de verset (1 Pierre et King James / David Martin, etc.) */
    .verse-box {
      position: relative;
      margin: 1.5rem auto;
      padding: 1.4rem 1.6rem 1.2rem;
      background: #f7f7f9;
      border-radius: 6px;
      border: 1px solid #d4d7dd;
      border-left: 4px solid #4b5a73;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
      color: #444;
      font-size: 22px;
      font-family: "Georgia", serif;
    }

    .verse-box p {
      margin: 0.4em 0;
    }

    /* Référence du verset en bas à droite */
    .verse-ref {
      margin-top: 0.8em;
      font-size: 0.95em;
      text-align: right;
      font-style: italic;
      font-weight: bold;
    }

    /* Petite icône Bible dans le coin haut-gauche */
    .verse-icon {
      position: absolute;
      top: -16px;
      left: 18px;
      padding: 3px 6px;
      background: rgba(247, 247, 249, 0.9);
      border-radius: 999px;
    }

    .verse-icon-svg {
      width: 28px;
      height: 18px;
      fill: none;
      stroke: #4b5a73;
      stroke-width: 1.2;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0.7;
    }

    .note-box {
      position: relative;
      max-width: 95%;
      margin: 1.4rem auto 1.8rem;
      padding: 1rem 1.2rem 1.1rem;
      background: #f8f4e9;
      border-radius: 6px;
      border: 1px solid #e3d8c3;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
      font-size: 1.25em;
      color: #5a4a32;
    }

    /* Cartouche "Note" */
    .note-box::before {
      content: "Note";
      position: absolute;
      top: -0.7rem;
      left: 1.2rem;
      padding: 0.12rem 0.7rem;
      background: #f8f4e9;
      border-radius: 999px;
      border: 1px solid #e3d8c3;
      font-size: 0.8em;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #7b6740;
    }

    /* Texte interne des notes */
    .note-box p {
      margin: 0.35rem 0;
      font-size: 1em;
    }

    /* Alignements utilitaires */
    .text-center {
      text-align: center;
    }

    /* empêche le footer de chevaucher + gère la hauteur */
    #page{
      min-height:100vh;
      display:flex;
      flex-direction:column;
    }

    main{
      flex:1;
      /* marge/padding pour éviter le motif de fond */
      padding: 24px 18px 40px;
    }

    /* Bloc de lecture centré + confortable */
    .content-wrap{
      max-width: 980px;
      margin: 0 auto;
      background: transparent;
      padding: 18px 18px 24px; /* tu gardes l’air */
      border-radius: 0;
    }

    /* Footer (si ton FM.css ne le gère pas bien) */
    footer{
      padding: 18px;
    }
    .footer-inner{
      max-width: 980px;
      margin: 0 auto;
      text-align:center;
    }

    /* --- Tes titres --- */
    .title{
      font-family: "AR JULIAN", Georgia, "Times New Roman", serif;
      color:#E23620;
      font-size:75px;
      line-height:70px;
      letter-spacing:2px;
      display:inline-block;
    }
    .title2{
      font-family: Arial, sans-serif;
      color:#444;
      font-size:45px;
      line-height:40px;
      letter-spacing:1px;
      display:inline-block;
    }

    /* Centre tes titres de section si tu veux */
    h1, h2{
      text-align:center;
      margin-top: 24px;
      margin-bottom: 14px;
    }

    /* Images */
    .size{ max-width:100%; height:auto; }
    .size-shadow{ max-width:100%; height:auto; box-shadow:2px 2px 10px gray; }

    @media (max-width: 520px){
      .title{ font-size: 48px; line-height: 1.05; }
      .title2{ font-size: 28px; line-height: 1.1; }
      main{ padding: 18px 12px 28px; }
      .content-wrap{ padding: 14px; }
    }

    ol li{font-size:22px; margin-bottom:10px;}
    ul li{font-size:22px;}

    .ombre{ text-shadow: 1px 1px 1px #000; color:#000; }
    .ombreRed{ text-shadow: 1px 1px 1px #000; color:red; }
    .ombreBlue{ text-shadow: 1px 1px 1px #000; color:#005580; }
    .ombreBrown{ text-shadow: 1px 1px 1px #000; color:#802A00; }
    .ombreGreen{ text-shadow: 1px 1px 1px #000; color:green; }
    .ombreMaroon{ text-shadow: 1px 1px 1px #000; color:purple; }

    .underline {border-bottom: 2px solid red;}

    /* Soulignement ondulé rouge (TMN) */
    .vagues {
      text-decoration-line: underline;
      text-decoration-color: red;
      text-decoration-style: wavy;
      /* + visibilité */
      text-decoration-thickness: 2px;   /* plus épais */
      text-underline-offset: 3px;         /* légèrement décollé du texte */
    }

    .embed{
      max-width: 960px;
      margin: 0 auto;
      aspect-ratio: 16 / 9;
      box-shadow: 2px 2px 10px rgba(0,0,0,.35);
      border-radius: 12px;        /* optionnel */
      overflow: hidden;           /* utile avec border-radius */
    }

    .embed iframe{
      width: 100%;
      height: 100%;
      border: 0;
      display: block;
    }

    fieldset{font-size:21px;}
    legend{font-size:21px;}