/* ===========================================================================
   handy_mobile.css
   ---------------------------------------------------------------------------
   Adaptation mobile des pages de calcul (handy.php / core_handy.php).

   /!\ L'EN-TETE N'EST PLUS ICI. Il a ete extrait dans header_mobile.css
       pour etre partage avec les pages tutorial, guide, glossaire, etc.
       Les deux fichiers doivent etre inclus ensemble sur ces pages.

   PORTEE : hors les deux premieres regles (qui masquent sur desktop des
            elements n'existant qu'en mobile), tout est dans
            @media (max-width: 1100px), plus un palier intermediaire
            1101-1449px en fin de fichier.
            Au-dessus de 1449px, AUCUNE regle ne s'applique : la mise en
            page PC est strictement inchangee.

   REORGANISATION
   js/libClavis/handy_mobile.js deplace deux blocs sous 1101px :
     - le schema sort de la colonne laterale et remonte sous le fil
       d'Ariane, avant les boutons beiges ;
     - le bouton "Calculations list" et la liste descendent apres les
       boutons de calcul, avant l'encart mobile.
   Ordre obtenu : fil d'Ariane, schema, boutons beiges, tableaux, boutons
   bleus, liste des calculs, encart.

   PROBLEMES TRAITES ET MESURES A 375px
   1. col-3 / col-4 / col-6 / col-8 / col-9 / col-12 n'ont pas de point de
      rupture : ils s'appliquent aussi sur mobile.
      col-3 = 94px, col-9 = 281px, tableau INPUT = 188px, col-4 = 125px.
   2. Le HTML porte des styles inline prevus pour le desktop :
      style="margin-left:16%" sur .col-8, style="padding-right:4%" sur
      .tableHandy, font-size sur les <h5> du fil d'Ariane. Un style inline
      bat toute regle externe : !important est necessaire pour les
      neutraliser sans modifier handy.php.
   3. Le tableau INPUT demande 541px de contenu pour 375px d'ecran : il
      defile horizontalement dans son propre bloc, PREMIERE COLONNE FIGEE,
      sans elargir la page.
   4. Le tableau OUTPUT est dans un col-12 sous col-4 : le .row
      intermediaire porte le margin:-15px de Bootstrap sans qu'aucune
      colonne ne le compense, et le tableau sortait de l'ecran.
      Voir section 1, bloc "TABLEAU OUTPUT".

   SEO : la liste des calculs reste dans le DOM (max-height:0, pas
         display:none). Google la lit et suit les liens -- le maillage
         interne entre les 287 pages de calcul est preserve.

   Appele par css/cssHandyMobile.php
   =========================================================================== */


/* ---------------------------------------------------------------------------
   DESKTOP : ces deux elements n'existent qu'en mobile
   ---------------------------------------------------------------------------
   L'encart reste dans le HTML : Google le lit et suit le lien vers
   /features depuis les 287 pages de calcul.
   --------------------------------------------------------------------------- */

.oc-encart-mobile {
    display: none;
}

.oc-sidebar-toggle {
    display: none;
}

.oc-modale {
    display: none;
}


@media (max-width: 1100px) {

/* ===========================================================================
   0. LARGEUR DU DOCUMENT
   ---------------------------------------------------------------------------
   css/default.css applique min-width:1450px a #content des 992px. Tout en
   herite et deborde : mesures a 1000px d'ecran, scrollWidth 1459 et tableaux
   a 1438px, d'ou le schema hors cadre, les boutons beiges etires et les
   tableaux non centres.

   La mise en page mobile fait tenir le contenu dans l'ecran : ce minimum
   n'a plus lieu d'etre. La neutralisation ne porte que sur les pages de
   calcul, ce fichier n'etant charge que par handy.php et core_handy.php.
   =========================================================================== */

    #content {
        min-width: 0 !important;
        max-width: 100vw;
    }


/* ===========================================================================
   1. GRILLE : toutes les colonnes en pleine largeur
   =========================================================================== */

    /* col-4 contient le tableau OUTPUT sur les pages a deux tableaux :
       sans cette regle il reste a 33% (125px). */
    #content .col-3.margin-bottom-20,
    #content .col-4,
    #content .col-6,
    #content .col-9 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Plusieurs .col-8 dans la page, a des profondeurs differentes
       (l'un sous .row, l'autre sous un FORM). Selecteur volontairement
       large, confine au mobile. */
    #content .col-8 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Le .row de Bootstrap porte margin-left:-15px pour compenser le
       padding de ses colonnes. Le bouton de la liste et le tableau ne
       sont pas dans une colonne : rien ne compense, ils debordaient de
       15px a gauche.
       Retrait ramene de 15 a 6px : 18px de largeur recuperes pour les
       tableaux. */
    #content .row.margin-0.margin-top-20 {
        margin-left: 0;
        margin-right: 0;
        padding-left: 6px;
        padding-right: 6px;
    }

    /* Le tableau INPUT heritait du padding du col-12 EN PLUS de celui du
       .row ci-dessus : 30px au lieu de 15. */
    #content .col-9 .col-12 {
        padding-left: 0;
        padding-right: 0;
    }

    /* -----------------------------------------------------------------
       TABLEAU OUTPUT : alignement sur l'INPUT
       -----------------------------------------------------------------
       Chemin : .col-4 > .row > .col-12 > .tableHandy > table
       Le .row intermediaire porte le margin:-15px de Bootstrap, mais
       aucune colonne ne le compense a ce niveau : le tableau depassait
       de 15px de chaque cote et sortait de l'ecran.
       On neutralise la marge negative, le padding du col-12 et le
       padding-right:4% inline du .tableHandy.
       ----------------------------------------------------------------- */
    #content .col-4 > .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100%;
        max-width: 100%;
    }

    #content .col-4 > .row > .col-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* .tableHandy porte style="padding-right:4%" en dur. */
    #content .col-4 .tableHandy,
    #content .tableHandy {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100%;
        max-width: 100%;
    }

    /* La colonne laterale, une fois deplacee par le JS, n'est plus une
       colonne de la grille : elle ne doit plus en porter les marges. */
    #content .oc-sidebar {
        margin-bottom: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }


/* ===========================================================================
   2. FIL D'ARIANE
   ---------------------------------------------------------------------------
   113px de haut pour une information de contexte : trop encombrant.
   Les <h5> et leurs <span> portent des font-size en dur (16 a 19px),
   d'ou les !important.
   =========================================================================== */

    #content .alert.title_backGrBlue {
        padding: 6px 10px;
        margin-bottom: 10px;
    }

    #content .titleCalcul h5,
    #content .titleCalcul h5 span,
    #content .alert.title_backGrBlue span {
        font-size: 12px !important;
        line-height: 1.3 !important;
    }


/* ===========================================================================
   3. SCHEMA DU CALCUL
   ---------------------------------------------------------------------------
   Extrait de la colonne laterale par le JS et place sous le fil d'Ariane.
   Il disposait de 94px dans le col-3 d'origine : il a maintenant toute la
   largeur.
   =========================================================================== */

    /* width:fit-content et non 100% : le cadre epouse la taille du schema
       au lieu de s'etirer sur toute la page, et margin:auto le centre.
       max-width le borne a la largeur disponible. */
    #content .oc-schema-mobile {
        display: block;
        width: -moz-fit-content;
        width: fit-content;
        max-width: 100%;
        margin: 0 auto 12px auto;
        padding: 8px;
        text-align: center;
        background: #fff;
        border: 1px solid #e3e6ea;
        border-radius: 6px;
    }

    #content .oc-schema-mobile img,
    #content .oc-schema-mobile svg {
        max-width: 100%;
        height: auto;
        margin: 0 auto;
    }


/* ===========================================================================
   4. BOUTONS BEIGES (about / caution / parameters / glossary / tutorial)
   ---------------------------------------------------------------------------
   5 <li> en display:inline dans un <ul> sans classe, ancre sur
   #menuCalculHandy. Passage en flex pour maitriser le retour a la ligne
   et l'espacement : 3 sur la premiere ligne, 2 sur la seconde.
   =========================================================================== */

    #menuCalculHandy > ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px 8px;            /* 10px entre les lignes, 8px entre boutons */
        list-style: none;
        margin: 0;
        padding: 0;
    }

    /* min-width:0 est indispensable : sans lui un element flex ne descend
       jamais sous la largeur de son contenu, quelle que soit la
       flex-basis. "parameters" faisait alors 127px au lieu de 99 et le
       wrap donnait 2+2+1 au lieu de 3+2. */
    /* flex:0 1 auto : chaque bouton prend la largeur de son libelle au lieu
       d'un tiers impose, et le flex-wrap + justify-content:center du <ul>
       repartit et centre les lignes. min-width:0 autorise la compression
       si un libelle est trop long pour la ligne. */
    #menuCalculHandy > ul > li {
        display: block;
        margin: 0;
        flex: 0 1 auto;
        min-width: 0;
    }

    /* La classe margin-left-10 des boutons fausse l'espacement gere par
       gap : on la neutralise. */
    #menuCalculHandy > ul > li > .btn {
        margin-left: 0 !important;
        display: block;
        width: auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 5px 12px;
        font-size: 11.5px;
    }


/* ===========================================================================
   5. TABLEAUX INPUT ET OUTPUT
   ---------------------------------------------------------------------------
   Contenu reel de l'INPUT : 541px pour un ecran de 375. Le tableau defile
   horizontalement DANS son bloc, sans elargir la page, et sa premiere
   colonne reste figee.
   Ces regles s'appliquent aux DEUX tableaux, INPUT et OUTPUT.
   =========================================================================== */

    /* fit-content et non 100% : un bloc en width:100% s'etire sur tout son
       parent, ce qui etirait l'INPUT et empechait l'OUTPUT -- plus court --
       de se centrer. fit-content rend a chacun sa largeur de contenu ;
       max-width:100% borne l'INPUT, dont les 541px de contenu declenchent
       alors le defilement horizontal dans son propre bloc. */
    .table-stripedBlue {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: -moz-fit-content;
        width: fit-content;
        max-width: 100%;
        margin: 0 auto 20px auto;
    }

    /* Cellules resserrees : Bootstrap applique 0.75rem de padding, soit
       24px perdus par colonne. */
    .table-stripedBlue th,
    .table-stripedBlue td {
        padding: 5px 5px;
        white-space: nowrap;
        font-size: 12px;
    }

    /* En-tetes sur deux lignes si besoin : "PARAMETER" ou "VARIABLE"
       n'imposent plus leur largeur a toute la colonne. */
    .table-stripedBlue th {
        font-size: 11px;
        line-height: 1.2;
        letter-spacing: 0;
        white-space: normal;
        padding: 4px 3px;
    }

    /* ATTENTION : sous 16px, iOS zoome automatiquement au clic dans un
       champ et desaligne la page. 13px est un choix assume pour gagner
       de la largeur ; a remonter a 16px si le zoom pose probleme sur
       iPhone. Android n'est pas concerne. */
    .table-stripedBlue input {
        font-size: 13px;
        padding: 3px 4px;
        width: 4rem;
        max-width: 4rem;
    }

    .table-stripedBlue select {
        font-size: 11.5px;
        padding: 3px 2px;
        max-width: 4rem;
    }

    /* Cellules de resultat ("to be calculated") du tableau OUTPUT. */
    #content .col-4 .table-stripedBlue td {
        font-size: 11.5px;
        white-space: normal;
    }

    /* -----------------------------------------------------------------
       PREMIERE COLONNE FIGEE
       -----------------------------------------------------------------
       Le nom du parametre reste visible pendant que valeurs, unites et
       bornes defilent. Sans cela, un tableau scrolle affiche
       "VALUE | UNIT | MIN" sans indiquer a quelle ligne cela correspond.

       Le fond opaque est indispensable : sans lui, les cellules qui
       defilent transparaitraient derriere la colonne figee.
       ----------------------------------------------------------------- */
    .table-stripedBlue th:first-child,
    .table-stripedBlue td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background: #fff;
        box-shadow: 2px 0 3px -1px rgba(0, 0, 0, .12);
    }

    /* L'en-tete de la premiere colonne est au croisement des deux zones
       figees : il doit passer au-dessus. */
    .table-stripedBlue thead th:first-child {
        z-index: 3;
        background: #cfe2f3;
    }

    /* Les lignes alternees de Bootstrap laisseraient transparaitre les
       cellules qui defilent derriere la colonne figee. */
    .table-stripedBlue tbody tr:nth-of-type(odd) td:first-child {
        background: #f2f6fa;
    }


/* ===========================================================================
   6. BOUTONS BLEUS (table / tableV / curveV)
   =========================================================================== */

    #content .col-9 .row,
    #content .col-8 .row,
    #content .col-4 .row {
        justify-content: center;
    }

    /* Boutons de calcul : tailles prevues pour le desktop. */
    #content .col-9 .btn,
    #content .col-8 .btn {
        font-size: 13px;
        padding: 8px 16px;
    }

    /* Les deux tableaux et les boutons restent centres horizontalement,
       quelle que soit la largeur naturelle de chacun. */
    #content .tableHandy {
        display: flex;
        justify-content: center;
    }


/* ===========================================================================
   7. LISTE DES CALCULS : repliee derriere un bouton
   ---------------------------------------------------------------------------
   Le bouton et la liste sont deplaces par le JS APRES les boutons de
   calcul, avant l'encart mobile.
   =========================================================================== */

    .oc-sidebar-toggle {
        display: block;
        width: 100%;
        margin: 20px 0 12px 0;
        padding: 12px 16px;
        background: #002C64;
        color: #fff;
        border: none;
        border-radius: 6px;
        font-size: 16px;
        font-weight: bold;
        text-align: left;
        cursor: pointer;
    }

    .oc-sidebar-toggle .oc-burger {
        margin-right: 10px;
        font-size: 18px;
    }

    .oc-sidebar-toggle::after {
        content: "\25BC";
        float: right;
        font-size: 11px;
        line-height: 1.6;
        transition: transform 0.2s;
    }

    .oc-sidebar-toggle.oc-active {
        background: #004a99;
    }

    .oc-sidebar-toggle.oc-active::after {
        transform: rotate(180deg);
    }

    /* Repliee par defaut. max-height plutot que display:none pour que le
       contenu reste dans le flux du document (SEO). */
    #content .oc-sidebar {
        max-height: 0;
        overflow: hidden;
        padding-top: 0;
        padding-bottom: 0;
        transition: max-height 0.25s ease;
    }

    #content .oc-sidebar.oc-open {
        max-height: 70vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 16px !important;
        border: 1px solid #dee2e6;
        border-radius: 6px;
        padding: 10px !important;
    }

    /* Cibles tactiles suffisamment espacees : Google verifie ce point
       dans son rapport d'ergonomie mobile. */
    #content .oc-sidebar a {
        display: block;
        padding: 8px 4px;
        line-height: 1.4;
        font-size: 13px;
    }


/* ===========================================================================
   8. TOOLTIPS BOOTSTRAP
   ---------------------------------------------------------------------------
   Bootstrap injecte le tooltip dans le <body> en position:absolute, cale
   sur le bouton survole : un bouton place a gauche produit un tooltip
   tronque hors de l'ecran.

   On garde position:absolute -- passer en fixed enverrait le tooltip en
   haut de page, le top calcule par Bootstrap etant relatif au document.
   Seul l'horizontal est contraint.
   =========================================================================== */

    /* Pas de transform:none ici : Tether positionne le tooltip par transform,
       verticalement comme horizontalement. Le neutraliser renvoyait le
       tooltip en haut de page (top:0) alors que ses classes indiquaient
       bs-tether-target-attached-bottom, donc un placement sous le bouton.
       Seule la largeur est contrainte, pour eviter le debordement lateral. */
    /* Largeur reduite sur petit ecran : le tooltip reste sous le bouton,
       centre sur lui par Tether. Sans plafond, un texte d'aide long
       debordait lateralement de la page. */
    .tooltip {
        max-width: 300px !important;
    }

    .tooltip .tooltip-inner {
        width: 100%;
        text-align: left;
        font-size: 13px;
        line-height: 1.4;
        padding: 8px 12px;
    }

    /* La fleche pointerait a cote du bouton apres recadrage horizontal. */
    .tooltip .arrow,
    .tooltip .tooltip-arrow {
        display: none;
    }


/* ===========================================================================
   9. ENCART MOBILE
   ---------------------------------------------------------------------------
   Annonce les fonctionnalites masquees du menu sur petit ecran.
   HTML : includes/encartMobile.php
   =========================================================================== */

    .oc-encart-mobile {
        display: block;
        margin: 24px 0 16px 0;
        padding: 14px 12px;
        background: #f5f8fc;
        border: 1px solid #d6e2f0;
        border-left: 4px solid #002C64;
        border-radius: 6px;
    }

    /* Titres de section : nettement distingues des elements de liste
       par la casse, la couleur et un filet inferieur. */
    .oc-encart-mobile .oc-encart-titre {
        font-size: 13px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #002C64;
        margin: 0 0 10px 0;
        padding-bottom: 6px;
        border-bottom: 1px solid #d6e2f0;
        line-height: 1.35;
    }

    /* Un second titre eventuel a besoin d'air apres le bouton. */
    .oc-encart-mobile .oc-encart-titre-2 {
        margin-top: 22px;
    }

    .oc-encart-mobile .oc-encart-liste {
        list-style: none;
        margin: 0 0 12px 0;
        padding: 0;
    }

    .oc-encart-mobile .oc-encart-liste li {
        font-size: 13px;
        line-height: 1.45;
        margin-bottom: 8px;
        padding-left: 12px;
        position: relative;
        overflow-wrap: break-word;
    }

    .oc-encart-mobile .oc-encart-liste li::before {
        content: "\2022";
        position: absolute;
        left: 0;
        color: #002C64;
    }

    .oc-encart-mobile .oc-encart-liste b {
        color: #033e75;
    }

    .oc-encart-mobile .oc-encart-lien {
        margin: 0 0 25px 0;
        text-align: center;
    }

    /* Cible tactile confortable : Google verifie l'espacement des
       elements cliquables dans son rapport d'ergonomie mobile. */
    .oc-encart-mobile .oc-encart-lien a {
        display: inline-block;
        padding: 9px 18px;
        background: #002C64;
        color: #fff;
        font-size: 14px;
        font-weight: bold;
        text-decoration: none;
        border-radius: 6px;
    }

    .oc-encart-mobile .oc-encart-note {
        font-size: 12px;
        font-style: italic;
        color: #c0392b;
        text-align: center;
        margin: 0;
    }


/* ===========================================================================
   10. FILET DE SECURITE
   =========================================================================== */

    #content img,
    #content svg {
        max-width: 100%;
        height: auto;
    }



/* ===========================================================================
   11. MODALE "CONNEXION REQUISE"
   ---------------------------------------------------------------------------
   Ouverte par js/libClavis/handy_mobile.js au clic sur un bouton de calcul
   quand #content porte data-oc-reserve="1".

   Sur mobile la connexion n'est pas accessible depuis le menu : soumettre
   le formulaire renverrait "Please log in" sans moyen d'y donner suite.
   =========================================================================== */

    .oc-modale {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10000;
        background: rgba(0, 0, 0, .55);
        padding: 20px 14px;
        overflow-y: auto;
    }

    .oc-modale.oc-modale-visible {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .oc-modale-boite {
        position: relative;
        width: 100%;
        max-width: 340px;
        background: #fff;
        border-radius: 8px;
        border-top: 4px solid #002C64;
        padding: 20px 16px 16px 16px;
        box-shadow: 0 6px 24px rgba(0, 0, 0, .3);
    }

    /* Cible tactile de 44px, seuil recommande pour un bouton de fermeture. */
    .oc-modale-fermer {
        position: absolute;
        top: 2px;
        right: 4px;
        width: 44px;
        height: 44px;
        background: none;
        border: none;
        font-size: 26px;
        line-height: 1;
        color: #6c757d;
        cursor: pointer;
    }

    .oc-modale-titre {
        font-size: 15px;
        font-weight: bold;
        color: #002C64;
        margin: 0 0 12px 0;
        padding-right: 30px;
        line-height: 1.3;
    }

    .oc-modale-texte {
        font-size: 13.5px;
        line-height: 1.5;
        color: #333;
        margin: 0 0 10px 0;
    }

    .oc-modale-lien {
        margin: 16px 0 0 0;
        text-align: center;
    }

    .oc-modale-lien a {
        display: inline-block;
        padding: 10px 20px;
        background: #002C64;
        color: #fff;
        font-size: 14px;
        font-weight: bold;
        text-decoration: none;
        border-radius: 6px;
    }

    /* Signale que le bouton n'aboutira pas au calcul, sans le desactiver :
       un input disabled ne declencherait aucun evenement de clic, donc
       aucune modale. */
    .oc-btn-reserve {
        opacity: 0.75;
    }

}


/* ===========================================================================
   PALIER INTERMEDIAIRE     1101 - 1449px
   ---------------------------------------------------------------------------
   La liste des calculs (col-3) reste affichee A GAUCHE, mais dans la colonne
   de droite le tableau OUTPUT passe SOUS le tableau INPUT au lieu de rester
   a cote : a cette largeur, les deux cote a cote debordent.

   css/default.css applique min-width:1450px a #content, ce qui fait defiler
   la page horizontalement. On le neutralise ICI : puisqu'on reorganise pour
   que tout tienne, le defilement n'a plus lieu d'etre -- et un centrage
   calcule sur 1450px alors que l'ecran en fait 1200 paraitrait decale.
   La regle ne porte que sur les pages de calcul, ce fichier n'etant charge
   que par handy.php et core_handy.php.
   =========================================================================== */

@media (min-width: 1101px) and (max-width: 1449px) {

    /* Tout tient dans l'ecran : plus de defilement horizontal. */
    #content {
        min-width: 0 !important;
    }

    /* INPUT (col-8) et OUTPUT (col-4) s'empilent dans la colonne de droite.
       .col-8 porte style="margin-left:16%" en dur : un style inline bat
       toute regle externe, d'ou le !important. */
    #content .col-9 .col-8,
    #content .col-9 .col-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Le .row intermediaire du chemin OUTPUT porte le margin:-15px de
       Bootstrap sans qu'aucune colonne ne le compense. */
    #content .col-9 .col-4 > .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* .tableHandy porte style="padding-right:4%" en dur, prevu pour la
       disposition en deux colonnes. */
    #content .tableHandy {
        padding-left: 0 !important;
        padding-right: 0 !important;
        display: flex;
        justify-content: center;
    }

    /* Les tableaux gardent leur largeur naturelle et se centrent.
       fit-content et non auto : le tableau est en display:block sur les
       largeurs inferieures, et un bloc en width:auto occupe tout son parent. */
    #content .table-stripedBlue {
        width: -moz-fit-content;
        width: fit-content;
        max-width: 100%;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 20px;
    }

    /* Boutons de calcul centres sous le tableau OUTPUT. */
    #content .col-9 .row,
    #content .col-8 .row {
        justify-content: center;
    }

}


/* ===========================================================================
   PALIER TABLETTE / PETIT PORTABLE     768 - 1100px
   ---------------------------------------------------------------------------
   Le bloc @media (max-width: 1100px) ci-dessus a ete regle pour 375px : les
   cadres y prennent 100% de la largeur et les 5 boutons beiges se repartissent
   3 + 2. Applique tel quel a 1000px, cela donne des cadres etires sur toute la
   page et des boutons demesures.

   Entre 768 et 1100px, la place ne manque pas : on rend leur largeur
   naturelle aux cadres, on les centre, et les 5 boutons tiennent sur une
   seule ligne.

   Ce bloc vient APRES le bloc mobile : a specificite egale, c'est lui qui
   l'emporte dans cette plage.
   =========================================================================== */

@media (min-width: 768px) and (max-width: 1100px) {

    /* --- Boutons beiges : une seule ligne, largeur naturelle ----------- */
    #menuCalculHandy > ul {
        gap: 8px 10px;
        flex-wrap: nowrap;
    }

    #menuCalculHandy > ul > li {
        flex: 0 1 auto;          /* plus de 33.333% impose */
    }

    #menuCalculHandy > ul > li > .btn {
        width: auto;
        padding: 6px 16px;
        font-size: 13px;
    }

    /* --- Schema : largeur naturelle, centre --------------------------- */
    #content .oc-schema-mobile {
        width: -moz-fit-content;
        width: fit-content;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    /* --- Tableaux : largeur naturelle, centres ------------------------ */
    /* width:auto ne suffit PAS : le tableau est en display:block (necessaire
       pour overflow-x:auto), et un bloc en width:auto occupe toute la largeur
       de son parent -- d'ou l'INPUT etire.
       fit-content lui rend sa largeur de contenu, bornee par max-width:100%
       au-dela de laquelle le defilement horizontal reprend la main. */
    #content .table-stripedBlue {
        width: -moz-fit-content;
        width: fit-content;
        max-width: 100%;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Le bloc mobile met white-space:normal sur les cellules de l'OUTPUT
       pour gagner de la place a 375px. Ici la place ne manque pas : on
       revient a nowrap, sinon les colonnes se compriment inutilement. */
    #content .col-4 .table-stripedBlue td,
    #content .col-4 .table-stripedBlue th {
        white-space: nowrap;
    }

    #content .table-stripedBlue th,
    #content .table-stripedBlue td {
        font-size: 13px;
        padding: 6px 10px;
    }

    #content .table-stripedBlue th {
        font-size: 12px;
        padding: 6px 8px;
    }

    #content .table-stripedBlue input {
        font-size: 14px;
        width: 5rem;
        max-width: 5rem;
    }

    #content .table-stripedBlue select {
        font-size: 13px;
        max-width: 6rem;
    }

    #content .col-4 .table-stripedBlue td {
        font-size: 13px;
    }

    /* --- Fil d'Ariane : la place ne manque pas ------------------------ */
    #content .titleCalcul h5,
    #content .titleCalcul h5 span,
    #content .alert.title_backGrBlue span {
        font-size: 14px !important;
    }

    /* --- Boutons de calcul ------------------------------------------- */
    #content .col-9 .btn,
    #content .col-8 .btn {
        font-size: 15px;
        padding: 10px 22px;
    }

}

/* ---------------------------------------------------------------------------
   Encart mobile : seuil propre a 767px
   ---------------------------------------------------------------------------
   L'encart est declare dans le bloc @media (max-width: 1100px), seuil relevé
   pour la reorganisation de la mise en page. Mais il annonce les entrees de
   menu masquees sous 767px seulement (voir header_mobile.css section 3) :
   au-dessus, ces entrees sont visibles et l'encart fait doublon.
   --------------------------------------------------------------------------- */

@media (min-width: 768px) {
    .oc-encart-mobile {
        display: none !important;
    }
}

/* La modale "Sign in required" et l'opacite reduite des boutons ne valent
   que sous 768px : au-dessus, l'utilisateur peut se connecter depuis le
   menu, donc le calcul ne doit pas etre bloque. */
@media (min-width: 768px) {
    .oc-modale {
        display: none !important;
    }
    .oc-btn-reserve {
        opacity: 1;
    }
}